product-ui

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.
description_zh	用于根据 PRD、产品目标、用户流程或现有应用上下文设计并实现产品 UI；适合"做这个功能的界面""实现一个前端页面""把 PRD 转成 UI""做一个像 Stripe/Linear/Vercel 的界面""优化布局、组件、响应式和 A11y"；触发词：产品UI、UI实现、前端界面、页面设计、组件设计、设计系统、品牌风格、响应式、A11y、视觉优化
description_en	Use to design and implement product UI from PRD, product goals, user flows, or existing app context.
category	rnd

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.