vikynofebriputra-creator 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
- Identify the product goal, user flow, target users, platform, and existing app framework.
- Inspect the current UI, design system, components, tokens, routes, and styling conventions.
- Choose a UI direction: existing product style first; external style reference only when requested or useful.
- Define the screen structure, states, interactions, responsive behavior, and accessibility requirements.
- Implement using the app's existing framework and component patterns.
- Verify rendered UI with screenshots or browser checks when a runnable app is available.
- Summarize what changed, what visual behavior was verified, and any remaining design questions.
UI Rules
- Prefer existing app components, tokens, icons, spacing, and interaction patterns.
- If using a brand-style reference, adapt the style; do not copy logos, trademarks, proprietary text, or protected assets.
- Do not invent existing design-system components. Mark missing components as proposed or implement local UI only where appropriate.
- Keep the UI usable, responsive, accessible, and aligned with the product task.
- Use familiar controls: icon buttons for tools, toggles for binary settings, sliders/inputs for numeric values, tabs for views, menus for option sets.
- Avoid decorative-only design that makes the workflow harder to scan or use.
- For production UI changes, verify that text fits, controls do not overlap, and major states are represented.
Output Standard
When finishing, state:
- UI direction or style reference used.
- Files or screens changed.
- Verification performed, especially browser/screenshot checks when available.
- Remaining design or product questions.