design-components

# design-components ## Language Rule Follow an explicit artifact or audience language when provided. Otherwise, write specifications, preview labels, and user-facing reports in the conversation language according to `<agent-home>/roles/response-policy.md`. Preserve code identifiers, native tool IDs, paths, component names, and design-token names. ## Resolve and Check State Find `design_state.yaml` under `<artifact-root>/designs/<name>/` or the app's `design/` directory. - Require `phases.tokens: done` unless scope is `icon` or `diagram`. - Require readable `01_refs/brief.md`. ## Procedure ### Step 1: Load Brief, Tokens, and Scaffold - Read `01_refs/brief.md` for intent and tone. - Read `02_tokens/tokens.md` as the token source of truth. - Reuse the closest scaffold from `<agent-home>/scaffolds/` and copy it into the design folder before customization: - slide → `deck_stage/deck_stage.html`; always base decks on `deck_stage` - variants → `tweaks_panel/` rather than duplicating files - mockups → `device_frames/` - option comparisons → `design_canvas/` - image placeholders → `image_slot/` ### Step 2: Build by Scope #### `scope=ui` Extract the required component list from the PRD or explicit request. Run the `design/maker` unit (this node's own unit) with this task: ```text Build UI components. Brief: 01_refs/brief.md Tokens: 02_tokens/tokens.css or the selected Tailwind config Required components: [TaskRow, TaskForm, EmptyState, ...] For each component: - ...