| name | frontend-design |
| description | Design and implement purpose-fit frontend UI with layout, typography, color, accessibility, image-generated mockups when useful, and browser verification. |
Frontend Design
Use this workflow for UI-heavy frontend changes where layout, visual hierarchy, usability, typography, spacing, color, or responsive behavior materially affects the result.
Workflow
- Define the product context before changing pixels.
- Identify the target user, primary job to be done, key workflow, required content, and success criteria.
- Note whether the UI should feel operational, editorial, playful, data-dense, commerce-focused, or another concrete product mode.
- Inspect the existing frontend.
- Follow current component, routing, state, styling, token, icon, and accessibility patterns.
- Reuse the local design system before inventing new primitives.
- Create a short design brief.
- State the information hierarchy, main actions, navigation model, empty/loading/error states, responsive breakpoints, and content density.
- Pick font scale, spacing, and color roles from the product purpose, not from visual novelty.
- Use image generation only when it improves design direction.
- Generate one to three UI mockups when the product purpose, composition, or visual tone is underspecified.
- Treat generated images as references for hierarchy, density, and mood, not as implementation specs.
- Do not rely on generated text, inaccessible contrast, decorative clutter, or impossible component states.
- Shape image-generation prompts as product briefs.
- Use case:
ui-mockup
- Include audience, task, screen type, primary workflow, layout density, navigation, typography tone, color constraints, platform, viewport, and accessibility constraints.
- Ask for realistic UI structure with readable spacing and no marketing-style hero layout unless the product actually needs one.
- Convert the chosen direction into code-native decisions.
- Define layout regions, component responsibilities, responsive behavior, focus order, semantic HTML, color tokens, type scale, and interaction states.
- Prefer real content and realistic data over placeholder filler.
- Implement in small, reviewable steps.
- Keep visual changes scoped to the requested surface.
- Avoid layout shifts, overlapping text, clipped controls, and viewport-specific breakage.
- Verify in a real browser.
- Check representative desktop and mobile viewports.
- Exercise hover, focus, keyboard, empty, loading, error, long-text, and dense-data states when relevant.
- Check text fit, contrast, target size, scroll behavior, and whether the primary workflow is obvious without explanatory page copy.
- Run project verification.
- Run lint, typecheck, tests, build, or the project-level verification script when available.
- Capture visual risks that still need human review.
Imagegen Prompt Template
Use this structure when mockup generation is useful:
Use case: ui-mockup
Asset type: frontend design reference, not production artwork
Product context: <what this app/page/tool is for>
Audience: <target user and their level of expertise>
Primary workflow: <the main thing the user must accomplish>
Screen: <dashboard, editor, settings page, checkout, onboarding, etc.>
Information hierarchy: <top priority content, secondary content, supporting controls>
Layout direction: <density, navigation model, panels, tables, forms, canvas, etc.>
Typography: <quiet utility, editorial, technical, playful, etc.>
Color: <brand constraints or desired color roles; avoid one-note palettes>
Responsive target: <desktop, mobile, or both>
Accessibility constraints: readable contrast, visible focus states, no overlapping text, usable controls
Avoid: decorative clutter, fake unreadable microtext, impossible widgets, stock landing-page composition
Final Report
Include:
- design goal and selected direction
- whether image generation was used and how it influenced the implementation
- changed files
- browser viewport coverage
- verification run
- remaining visual, accessibility, or content risks
