| name | product-ui |
| description | Use to design and implement product UI from PRD, product goals, user flows, or existing app context. Use when the user asks to build or improve a UI, frontend screen, landing page, dashboard, component set, design-system-based interface, Figma-style brief plus implementation, brand-inspired UI, responsive layout, accessibility pass, or visual polish. |
Product UI
Use this skill when UI design and UI implementation should happen together. It turns product context into usable frontend screens, components, layout decisions, design-system choices, accessibility rules, and visual polish.
This skill combines:
- Product design brief and handoff ideas: goal, audience, flows, component mapping, accessibility, JSON/Markdown summaries when helpful.
- UI style references: curated DESIGN.md files from known websites for color, typography, components, layout, and visual tone.
- Frontend implementation guidance: inspect existing patterns, implement in the app's framework, and verify the rendered UI.
Do not use this skill to write a PRD, create product test scenarios, split backend/infra work, write low-level engineering plans, or run broad engineering quality gates. Keep the center of gravity on UI.
Route The Work
| Situation | Read |
|---|
| Need to build or improve UI in an app | references/ui-implementation.md |
| User asks for a known brand/style, DESIGN.md, or "make it look like X" | references/design-style-index.md, then one matching file under references/design-styles/ |
| Need a design brief before coding, or the user asks for JSON/Markdown handoff | references/ui-brief-template.md |
Read only the relevant style reference. Do not load all design style files at once.
Default Workflow
