---
name: ipa-design
description: Generate production-ready HTML/CSS/JS prototypes from UI_SPEC.md. Use when you need visual mockups for all screens defined in the UI spec, want to validate UI before proceeding to detail design, or need HTML prototypes for design analysis. Trigger phrases: "generate prototypes", "create html mockups", "generate ui prototypes from spec".
---
Do NOT generate UI mockups until SRD.md exists in ./docs/. Run ipa-spec first.
## Overview
Generate production-ready HTML/CSS/JS prototypes from `docs/UI_SPEC.md`. This skill implements the spec exactly — no creative design decisions.
## When to Use
- UI_SPEC.md exists and is complete
- Visual prototypes are needed for user testing or development reference
- Completing Stage 2 (design) of the IPA pipeline
## Don't Use When
- UI_SPEC.md does not exist (run ipa-spec first)
- You want to make design decisions — this skill only implements what the spec defines
- Rapid text-only documentation is sufficient
## Mandatory Rules (NON-NEGOTIABLE)
1. Read `docs/UI_SPEC.md` COMPLETELY before generating any screen
2. Screen content MUST match UI_SPEC exactly — no improvisation
3. If spec says "API Keys" → output "API Keys", not "Integrations"
4. No creative additions beyond what spec defines
5. If spec is unclear → output placeholder with ``
## Workflow
```
1. Read docs/UI_SPEC.md completely
├── Count total screens
├── Note each screen's purpose
└── Extract Design System tokens
2. For EACH screen in UI_SPEC:
├── Read screen spec section
├── Generate HTML matching spec exactly
├── Apply CJX stage from spec
└── Use layout classes from references
3. Generate shared files:
├── styles.css (design tokens from UI_SPEC)
├── components.css
├── interactions.js (CJX animations)
└── README.md (FR mapping)
4. Validate:
├── Count screens matches UI_SPEC
├── Each screen content matches spec
└── All layout classes correct
```
## Output Structure
```
prototypes/
├── README.md # Index + FR mapping
├── styles.css # Design tokens from UI_SPEC
├── components.css # Reusable components
├── interactions.js # CJX animations
├── s01-{screen}.html
├── s02-{screen}.html
└── ...
```
## Screen File Template
```html
{Screen Name}
```
## Style Presets (Optional)
| Preset | Description |
|--------|-------------|
| `minimalist` | Clean, whitespace |
| `dashboard` | Data-dense |
| `dark` | Dark theme |
## Quality Gates
| Check | Requirement |
|-------|-------------|
| Spec Match | Every screen matches UI_SPEC |
| Layout | Uses `app-layout`, `main-content` |
| CJX | Body class + animations |
| Charts | Real SVG, no placeholders |
| Responsive | Mobile breakpoint works |
## GATE 3: Design Validation
Before proceeding to ipa-detail:
- [ ] User testing completed with 5+ users
- [ ] Critical issues addressed
- [ ] Design matches MVP scope
## Next Steps
After generation: run ipa-detail to generate API_SPEC and DB_DESIGN.