| name | mockup-implement |
| description | Port a signed-off mockup (HTML picker winner, Figma, screenshot) into production with fidelity — no freestyle redesign. Use only when a design is already chosen and the task is "match this." Prefer product-design when craft/explore path is unclear; frontend-design for full FE feature implementation. Not for open-ended exploration (ui-explore first) or inventing new visual systems (design-system / craft).
|
Mockup → production implementation
Job: Ship the agreed design in production primitives — not a reinterpretation.
Sources (attribution)
- Design-to-code fidelity practice from OpenAI/Figma “implement design”
skill lineage: multi-state components, respect existing system, verify
visually.
- Repo
design/ workflows: HTML pickers, ?design= variants, selection
JSON, DESIGN-DIRECTION locks (SilphCo-style and similar).
- ui-explore skill: exploration stays in throwaway HTML; this skill starts
after a winner is chosen.
When to load
- “Port Trade Floor v7 mockup” / “implement design B”
- Figma frame → React
- Screenshot parity tickets
- Agents redesign while “implementing”
Preconditions
- Signed-off source named (path, frame, or URL)
- design-system constraints known (tokens, kit)
- Out of scope listed (don’t “while we’re here” redesign nav)
If not signed off → ui-explore (or Figma) first; do not implement fog.
Workflow
1. Inventory the mockup
Extract a checklist:
| Concern | Notes |
|---|
| Layout regions | header / body / sticky / HUD |
| Typography | which roles (title, meta, mono price) |
| Components | map to kit (Button, Sheet, Panel…) |
| States | empty, loading, error, selected, disabled |
| Motion | none / subtle / explicit |
| Breakpoints | mobile vs desktop differences |
| Data | real fields vs placeholder |
2. Map mock → code
| Mock element | Production target |
|---|
| Pretty div button | Kit Button variant |
| Hard-coded color | Token class / CSS var |
| Fake data | Real query + empty/error |
| Absolute artboard | Responsive layout + sticky rules |
Never paste mock CSS wholesale if it bypasses tokens.
3. Implement minimal delta
- Prefer smallest PR that matches the signed surface
- Reuse routes/features; don’t new-page without need
- Preserve existing analytics/a11y hooks
4. Fidelity gate
Side-by-side:
- Mockup (or HTML
?design=winner)
- Local prod build
Check:
5. Verify
Use browser-verify (and mobile-product-ux if applicable). Update snapshots
only when intentional.
Anti-patterns
- “Improved” colors/fonts during port
- Shipping desktop mock only when mock specifies mobile
- Leaving mock placeholder copy in production
- New dependencies for something the kit already does
- Scope creep into adjacent pages
Relation to ui-explore
ui-explore → pick winner → mockup-implement → product-ui-craft polish → browser-verify
Hand off
| Need | Next skill |
|---|
| Tokens/primitives | design-system |
| Post-port polish | product-ui-craft |
| Mobile sticky | mobile-product-ux |
| Browser proof | browser-verify |
