product-ui
Use to design and implement product UI from PRD, product goals, user flows, or existing app context.
What this skill does
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.
Files in this skill
- references/design-style-index.md
- references/design-styles/airbnb.md
- references/design-styles/airtable.md
- references/design-styles/apple.md
- references/design-styles/bmw.md
- references/design-styles/cal.md
- references/design-styles/claude.md
- references/design-styles/clay.md
- references/design-styles/clickhouse.md
- references/design-styles/cohere.md
- references/design-styles/coinbase.md
- references/design-styles/composio.md
- references/design-styles/cursor.md
- references/design-styles/elevenlabs.md
- references/design-styles/expo.md
- references/design-styles/figma.md
- references/design-styles/framer.md
- references/design-styles/hashicorp.md
- references/design-styles/ibm.md
- references/design-styles/intercom.md
- references/design-styles/kraken.md
- references/design-styles/linear.app.md
- references/design-styles/lovable.md
- references/design-styles/minimax.md
- references/design-styles/mintlify.md
- references/design-styles/miro.md
- references/design-styles/mistral.ai.md
- references/design-styles/mongodb.md
- references/design-styles/notion.md
- references/design-styles/nvidia.md
- references/design-styles/ollama.md
- references/design-styles/opencode.ai.md
- references/design-styles/pinterest.md
- references/design-styles/posthog.md
- references/design-styles/raycast.md
- references/design-styles/replicate.md
- references/design-styles/resend.md
- references/design-styles/revolut.md
- references/design-styles/runwayml.md
- references/design-styles/sanity.md
How to use in Orkas
Open the Orkas desktop app, go to the marketplace, and install this item with one click. Don't have Orkas yet? Download Orkas.
用于根据 PRD、产品目标、用户流程或现有应用上下文设计并实现产品 UI；适合"做这个功能的界面""实现一个前端页面""把 PRD 转成 UI""做一个像 Stripe/Linear/Vercel 的界面""优化布局、组件、响应式和 A11y"；触发词：产品UI、UI实现、前端界面、页面设计、组件设计、设计系统、品牌风格、响应式、A11y、视觉优化
该技能的功能
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.
技能包含的文件
- references/design-style-index.md
- references/design-styles/airbnb.md
- references/design-styles/airtable.md
- references/design-styles/apple.md
- references/design-styles/bmw.md
- references/design-styles/cal.md
- references/design-styles/claude.md
- references/design-styles/clay.md
- references/design-styles/clickhouse.md
- references/design-styles/cohere.md
- references/design-styles/coinbase.md
- references/design-styles/composio.md
- references/design-styles/cursor.md
- references/design-styles/elevenlabs.md
- references/design-styles/expo.md
- references/design-styles/figma.md
- references/design-styles/framer.md
- references/design-styles/hashicorp.md
- references/design-styles/ibm.md
- references/design-styles/intercom.md
- references/design-styles/kraken.md
- references/design-styles/linear.app.md
- references/design-styles/lovable.md
- references/design-styles/minimax.md
- references/design-styles/mintlify.md
- references/design-styles/miro.md
- references/design-styles/mistral.ai.md
- references/design-styles/mongodb.md
- references/design-styles/notion.md
- references/design-styles/nvidia.md
- references/design-styles/ollama.md
- references/design-styles/opencode.ai.md
- references/design-styles/pinterest.md
- references/design-styles/posthog.md
- references/design-styles/raycast.md
- references/design-styles/replicate.md
- references/design-styles/resend.md
- references/design-styles/revolut.md
- references/design-styles/runwayml.md
- references/design-styles/sanity.md
如何在 Orkas 中使用
打开 Orkas 桌面应用，进入市场，一键安装此项。还没有 Orkas？ 下载 Orkas.