Generate interactive UI prototypes from PRD using frontend-design principles. Creates distinctive, production-grade HTML/CSS/JS prototypes with bold aesthetic choices.
$ARGUMENTS
You MUST consider the user input before proceeding (if not empty).
Generate interactive visual UI prototypes from a PRD using the frontend-design skill's principles. Extract context from the PRD, ask targeted questions about components and design preferences, then produce production-quality HTML prototypes with distinctive, context-specific aesthetics.
Design Methodology: This skill applies the exact design thinking and aesthetics guidelines from the frontend-design skill (claude-plugins-official/frontend-design) to create distinctive, production-grade interfaces that avoid generic AI aesthetics.
$ARGUMENTS is empty, abort with: "Please provide a path to a PRD file. Example: "/prd-ui-prototype prd/my-feature/prd.mdprd/user-auth/prd.md → user-auth)Read the PRD file using the Read tool and extract:
Create an internal summary of:
IMPORTANT: Before asking questions, first check for existing prototypes and read previous design choices (this is Step 3.5-3.7 in execution order, but conceptually happens before asking questions).
Use AskUserQuestion to gather UI-specific requirements.
Question 1: Component Scope
Question 1b: Select Specific Components (Conditional) Only asked if user selects "Let me select specific components" in Question 1.
If user selects "Custom component list" in Question 1, ask a follow-up text question for the component list.
Question 2: Fidelity Level
{PREVIOUS_CHOICE_SUFFIX}: If previous fidelity was detected from design-spec.md, append to question: "(Previous: {fidelity})"
Question 3: Aesthetic Direction (Primary Options)
{PREVIOUS_CHOICE_SUFFIX}: If previous aesthetic was detected from design-spec.md, append to question: "(Previous: {aesthetic})"
Question 3b: Extended Aesthetic Options (Conditional) Only asked if user selects "Show more aesthetic options..." in Question 3.
If user selects "Go back to main options", re-present Question 3.
Question 4: Interactivity
{PREVIOUS_CHOICE_SUFFIX}: If previous interactivity was detected from design-spec.md, append to question: "(Previous: {interactivity})"
Before creating new prototypes, check if prototypes already exist:
prd/<feature-name>/prototype-ui/Glob with pattern="*.html" path="prd/<feature-name>/prototype-ui/"
design-spec.md exists in the same directoryOverwrite Warning Question:
prd/<feature-name>/prototype-ui/"Only runs if user selected "Create timestamped backup" in Step 3.5
YYYYMMDD-HHMMSS (e.g., 20260213-143022)prd/<feature-name>/prototype-ui-backup-<timestamp>/mv "prd/<feature-name>/prototype-ui" "prd/<feature-name>/prototype-ui-backup-<timestamp>"
Attempt to preserve design choices from previous prototypes
Check for design-spec.md in either:
If design-spec.md found, read it and extract:
Parse the values:
Store parsed values to pre-fill the questions in Step 3 (Interactive Discovery)
Pre-fill logic for multi-question flow:
Important: If design-spec.md doesn't exist or is malformed, gracefully skip this step and proceed with fresh questions.
Note: This step conceptually happens before asking the user questions in Step 3, so the implementation should check for existing prototypes and read design choices before presenting the AskUserQuestion in Step 3. The step numbering reflects execution order.
prd/<feature-name>/prototype-ui/For each selected component:
Apply the frontend-design skill methodology:
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Apply these principles to create production-quality HTML/CSS/JS code:
prd/<feature-name>/prototype-ui/<component-name>.html (kebab-case)After each component, provide progress feedback: "✓ Generated prototype for <component-name>"
Create a markdown file documenting the design decisions:
Path: prd/<feature-name>/prototype-ui/design-spec.md
Content structure:
# Design Specification — <Feature Name>
**Generated:** <date>
**Source PRD:** `<path-to-prd>`
## Overview
<1-2 sentence summary of the prototype set>
## Components
### <Component 1 Name>
- **File:** `<component-1>.html`
- **Purpose:** <from PRD>
- **User Flow:** <from PRD>
- **Key Features:** <bullet list>
### <Component 2 Name>
...
## Design Direction
**Aesthetic:** <chosen aesthetic>
**Fidelity:** <chosen fidelity level>
**Interactivity:** <chosen interactivity level>
**Components:** <list of component names>
**IMPORTANT**: Store the actual aesthetic selected by the user, not meta-options:
- Valid aesthetic values: "let-designer-decide", "minimal-refined", "bold-maximalist", "professional-corporate", "retro-futuristic"
- Do NOT store: "show-more-aesthetic-options" or "go-back-to-main-options"
- Valid fidelity values: "low", "medium", "high"
- Valid interactivity values: "static", "basic-interactions", "full-interactivity"
- Components should be stored as a comma-separated list (e.g., "login-form, dashboard, user-profile")
## Rationale
<Brief explanation of why this aesthetic/fidelity combination was chosen based on PRD context>
## Technical Notes
<Any framework constraints, browser requirements, accessibility features>
## Next Steps
- Review prototypes in browser by opening `index.html`
- Gather stakeholder feedback
- Use as reference for implementation (see `tasks.md` if generated)
Create an HTML index for easy navigation:
Path: prd/<feature-name>/prototype-ui/index.html
Content structure (responsive, clean HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><Feature Name> - UI Prototypes</title>
<style>
/* Clean, minimal styling for the index */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
background: #f9fafb;
}
header {
margin-bottom: 3rem;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 1rem;
}
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.meta { color: #6b7280; font-size: 0.875rem; }
.components {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.component-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1.5rem;
transition: box-shadow 0.2s;
}
.component-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.component-card h2 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.component-card p {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.component-card a {
display: inline-block;
background: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-size: 0.875rem;
transition: background 0.2s;
}
.component-card a:hover {
background: #2563eb;
}
.footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e7eb;
color: #6b7280;
font-size: 0.875rem;
}
</style>
</head>
<body>
<header>
<h1><Feature Name> - UI Prototypes</h1>
<p class="meta">Generated from PRD • <Date> • <Component Count> components</p>
</header>
<main class="components">
<!-- For each component -->
<div class="component-card">
<h2><Component Name></h2>
<p><Component description from PRD></p>
<a href="<component-name>.html">View Prototype →</a>
</div>
</main>
<footer class="footer">
<p><strong>Design Specification:</strong> <a href="design-spec.md">design-spec.md</a></p>
<p><strong>Source PRD:</strong> <code><path-to-prd></code></p>
<p>Generated using Claude Code PRD Builder • <a href="https://claude.ai/code">claude.ai/code</a></p>
</footer>
</body>
</html>
Provide a comprehensive summary including backup information (if applicable):
✅ **Prototype generation complete**
{IF_BACKUP_CREATED}
📂 **Backup created:**
- Old prototypes saved to: `prd/<feature-name>/prototype-ui-backup-<timestamp>/`
📦 **Generated prototypes:**
- prd/<feature-name>/prototype-ui/<component-1>.html
- prd/<feature-name>/prototype-ui/<component-2>.html
- ... (list all components)
- prd/<feature-name>/prototype-ui/design-spec.md
- prd/<feature-name>/prototype-ui/index.html
{IF_DESIGN_CHOICES_PRESERVED}
🎨 **Design choices preserved:**
- Aesthetic: <aesthetic> (from previous prototype)
- Fidelity: <fidelity> (from previous prototype)
- Interactivity: <interactivity> (from previous prototype)
📖 **Next steps:**
1. Open `prd/<feature-name>/prototype-ui/index.html` in browser to review prototypes
{IF_BACKUP_CREATED}2. Compare with backup if needed: `prototype-ui-backup-<timestamp>/`
{ENDIF}
3. Run `/prd-export prd/<feature-name>/prd.md` to create stakeholder summary
4. Run `/prd-tasks prd/<feature-name>/prd.md` to generate implementation tasks
Template Variables:
{IF_BACKUP_CREATED}: Include this section only if a backup was created in Step 3.6{IF_DESIGN_CHOICES_PRESERVED}: Include this section only if previous choices were detected in Step 3.7<timestamp>, <aesthetic>, <fidelity>, <interactivity> with actual values