UI Designer
Extract design systems from reference UI images and convert into implementation-ready prompts. Workflow: design system docs > PRD > implementation prompt > React components.
Workflow
Step 1: Gather Inputs
- Reference images: folder or individual screenshots
- Project idea file: product concept (or extract from conversation)
- Existing PRD (optional): skip Step 3 if provided
1 image: Extract tokens precisely, note inferred vs visible, ask 2-3 clarifying questions.
Multiple images: Cross-reference patterns, prioritize consistent values, flag inconsistencies.
Step 2: Extract Design System
Use Task tool with assets/design-system.md template. Attach reference images.
Extract exhaustively:
| Category |
What to extract |
| Colors |
Primary/secondary/accent, backgrounds (page/surface/elevated/overlay), text colors, borders, semantic (success/warning/error/info), dark mode |
| Typography |
Families (heading/body/mono), type scale (px/rem), weights, line heights, letter spacing, named styles h1-h6/body/caption/label |
| Spacing |
Base unit, full scale used, component padding, section margins |
| Borders & Shape |
Radius values (none/sm/md/lg/full + px), border width/style, shadow system (name + CSS), focus ring |
| Components |
Buttons (sizes/variants/states), cards, inputs, navigation, badges, icons (library/size) |
| Animation |
Default transition duration/easing, hover style |
Always use specific values (hex, px, rem) — never "blue" or "medium".
Save to: documents/designs/{image_dir_name}_design_system.md
Ver references/design-system-example.md para ejemplo de output bien documentado.
Step 3: Generate MVP PRD (if not provided)
Use Task tool with assets/app-overview-generator.md. Replace {项目背景} with project concept.
Interact with user to refine. Ask focused questions. Prioritize: core use case, primary action, must-have vs nice-to-have.
Save as variable for Step 4 (optionally to documents/prd/).
Step 4: Compose Final UI Implementation Prompt
Combine design system + PRD using assets/vibe-design-template.md:
{项目设计指南} > Design system from Step 2{项目MVP PRD} > PRD from Step 3
Include: exact hex values, Tailwind class equivalents, component states (default/hover/active/focus/disabled), specific patterns ("cards use shadow-sm with hover:shadow-md transition").
Save to: documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md
Step 5: Verify React Environment
Check for existing React project. If none:
npx create-react-app my-app && cd my-app
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
npm install lucide-react
Step 6: Implement UI
Use final prompt to create multiple variations (3 mobile, 2 web). Organize: [solution-name]/pages/[page-name].jsx. Aggregate in showcase page.
Template Assets
| Asset |
Purpose |
assets/design-system.md |
Template for extracting visual patterns (colors, typography, components, spacing, shadows, animations) |
assets/app-overview-generator.md |
Collaborative PRD generation (elevator pitch, problem, audience, features, UX) |
assets/vibe-design-template.md |
Final prompt combining design system + PRD for implementation |
Key Rules
- Read ALL images before starting analysis
- Look for repeated values (repetition = design system)
- Capture both explicit styles and implicit principles (density, hierarchy)
- Distinguish UI chrome from content areas
- Dark mode is first-class, not afterthought
- Document hover and focus states
- Single image: use best-practice defaults for missing values, mark
[inferred]
- Multiple images: primary screen = anchor, secondary = fill gaps
- Final prompt quality directly impacts implementation fidelity
Referencias
references/design-system-example.md — Example of well-documented design system output
1---2name: ui-designer3description: Extrae design systems de imágenes de referencia y genera prompts listos para implementar. Workflow: imagen → tokens de diseño → PRD → componentes React. Usar cuando: "diseño de UI", "design system", "design tokens", "mockup", "UI kit", "reproducir este diseño", "quiero algo parecido a X", "Figma", "wireframe", "palette de colores", "tipografía del sistema", "me gusta este diseño".4---56# UI Designer78Extract design systems from reference UI images and convert into implementation-ready prompts. Workflow: design system docs > PRD > implementation prompt > React components.910## Workflow1112### Step 1: Gather Inputs1314- **Reference images**: folder or individual screenshots15- **Project idea file**: product concept (or extract from conversation)16- **Existing PRD** (optional): skip Step 3 if provided1718**1 image:** Extract tokens precisely, note inferred vs visible, ask 2-3 clarifying questions.19**Multiple images:** Cross-reference patterns, prioritize consistent values, flag inconsistencies.2021### Step 2: Extract Design System2223Use Task tool with `assets/design-system.md` template. Attach reference images.2425**Extract exhaustively:**2627| Category | What to extract |28|----------|----------------|29| Colors | Primary/secondary/accent, backgrounds (page/surface/elevated/overlay), text colors, borders, semantic (success/warning/error/info), dark mode |30| Typography | Families (heading/body/mono), type scale (px/rem), weights, line heights, letter spacing, named styles h1-h6/body/caption/label |31| Spacing | Base unit, full scale used, component padding, section margins |32| Borders & Shape | Radius values (none/sm/md/lg/full + px), border width/style, shadow system (name + CSS), focus ring |33| Components | Buttons (sizes/variants/states), cards, inputs, navigation, badges, icons (library/size) |34| Animation | Default transition duration/easing, hover style |3536**Always use specific values** (hex, px, rem) — never "blue" or "medium".3738Save to: `documents/designs/{image_dir_name}_design_system.md`3940Ver `references/design-system-example.md` para ejemplo de output bien documentado.4142### Step 3: Generate MVP PRD (if not provided)4344Use Task tool with `assets/app-overview-generator.md`. Replace `{项目背景}` with project concept.4546Interact with user to refine. Ask focused questions. Prioritize: core use case, primary action, must-have vs nice-to-have.4748Save as variable for Step 4 (optionally to `documents/prd/`).4950### Step 4: Compose Final UI Implementation Prompt5152Combine design system + PRD using `assets/vibe-design-template.md`:53- `{项目设计指南}` > Design system from Step 254- `{项目MVP PRD}` > PRD from Step 35556Include: exact hex values, Tailwind class equivalents, component states (default/hover/active/focus/disabled), specific patterns ("cards use shadow-sm with hover:shadow-md transition").5758Save to: `documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md`5960### Step 5: Verify React Environment6162Check for existing React project. If none:63```bash64npx create-react-app my-app && cd my-app65npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p66npm install lucide-react67```6869### Step 6: Implement UI7071Use final prompt to create multiple variations (3 mobile, 2 web). Organize: `[solution-name]/pages/[page-name].jsx`. Aggregate in showcase page.7273## Template Assets7475| Asset | Purpose |76|-------|---------|77| `assets/design-system.md` | Template for extracting visual patterns (colors, typography, components, spacing, shadows, animations) |78| `assets/app-overview-generator.md` | Collaborative PRD generation (elevator pitch, problem, audience, features, UX) |79| `assets/vibe-design-template.md` | Final prompt combining design system + PRD for implementation |8081## Key Rules8283- Read ALL images before starting analysis84- Look for repeated values (repetition = design system)85- Capture both explicit styles and implicit principles (density, hierarchy)86- Distinguish UI chrome from content areas87- Dark mode is first-class, not afterthought88- Document hover and focus states89- Single image: use best-practice defaults for missing values, mark `[inferred]`90- Multiple images: primary screen = anchor, secondary = fill gaps91- Final prompt quality directly impacts implementation fidelity9293---9495## Referencias9697- `references/design-system-example.md` — Example of well-documented design system output
apolo-81