PRD to UI Prototype Design Expert Pack
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_cae83fba/design-ui-prototype-expert-pack.
About this skill
What It Solves
When product ideas, PRDs, or business requirements remain textual, teams often lack structured design outputs. Prototypes can miss empty states, error states, permission branches, and handoff fields, causing repeated reviews and inconsistent engineering assumptions.
How It Works
This skill routes design work through a stable sequence: from PRD to product structure, then wireframes, UI specs, a design system, a reviewable HTML/CSS/JS prototype, and a QA conclusion. It is useful for:
- Requirement breakdown: goals, non-goals, roles, main paths, edge cases, and permission flows
- Page inventory: modules, fields, states, and action priority
- UI specs: color, typography, spacing, component styling, and responsive rules
- Frontend handoff: component splits, state machines, API fields, tracking suggestions, and acceptance cases
Boundaries
It produces review-level prototypes and handoff materials, not production frontend engineering. It does not replace user research, usability testing, or brand VI design. If input is thin, confirm target users, platforms, and deliverable type first.
Use Cases
- A product manager converts a PRD into a page list, wireframes, and interaction notes before a design review.
- A UI designer turns existing wireframes into reviewable UI specs covering color, typography, spacing, states, and responsive rules.
- A frontend engineer prepares component splits, state machines, API fields, tracking notes, and acceptance cases before development.
- An engineering lead reviews an HTML/CSS/JS prototype for empty, error, and permission states, then outputs P0/P1/P2 risks.
Best For
- Product managers: turn PRDs, business goals, or product ideas into reviewable UI prototypes and page plans.
- UI designers: extract design tokens, component states, and reuse rules from wireframes or existing pages.
- Frontend engineers: obtain component splits, state machines, API fields, tracking suggestions, and acceptance cases.
- Engineering leads: review HTML prototypes for handoff readiness and catch missing empty, error, or permission states.
Related Skills
A ComfyUI image-generation skill that uses a five-step dialog to collect prompts, prefill templates, confirm parameters, submit API jobs, and return results.
A design-system guidance skill for Impeccable that produces token-based rules, component states, accessibility criteria, and QA checklists.
Director-level video lapian that diagnoses material precision, then produces frame evidence, director analysis, a style bible, and a showcase video.
Plan and brief Amazon MAIN, Listing, and A+ image sets from verified product facts, then return plan and image QA status.