mockups
SolidRender the blueprint's screens as self-contained static HTML mockups — one page per screen plus the state variants the Screens contract pins, styled from design-system tokens — and push them to a claude.ai/design design-system project for canvas review. Mockups are realizations, never contract; generated in an ephemeral build dir, never committed.
Install
Quality Score: 78/100
Skill Content
Details
- Author
- virajp
- Repository
- virajp/ai-plugins
- Created
- 2 months ago
- Last Updated
- yesterday
- Language
- JavaScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
hyperbuild-8-mockups
Step 8 of the hyperbuild pipeline — reads the PRD's canonical screen inventory, freezes the mockup screen list (every full/partial screen per its mockup_feasibility, cap 12 standard / 20 premier), and spawns 3-6 hb-mockup-smith subagents in parallel, grouped by design, so EVERY full/partial screen exists as a self-contained HTML mockup in all 3 design systems (tokens inlined, REAL PRD content — never lorem ipsum, phone-frame wrapper for mobile; partial screens get real chrome over a clearly-marked placeholder viewport; none screens get an art-direction card per design instead of a mockup). The orchestrator then renders screenshots/<screen>.png for every mockup via headless Chrome and writes runs/<run_tag>/designs/index.html — a side-by-side iframe gallery grouped by screen with design names and jump nav — the page the user opens to pick a design at the step 12 gate. Every smith is bound by docs/DESIGN-CRAFT.md — the craft contract (signature element, depth model, shape language, type pairing, CSS-drawn art) p
screens
Two-way screen sync with Claude Design. "prompt <flow>" writes one wireframe-level design brief per device type (docs/prompts/screens/<project>/<device>/<NNN>-<flow>/<platform>.md) — always the flow's full screen blueprint, regenerated in place, never a change note, transcribing each screen's contract-pinned components and their rules — commissioning one interactive page per flow per platform on the claude.ai/design canvas under a strict naming contract (pages <flow>--<platform>, frames named by the pinned screen codes, happy paths stitched into index--<platform>); it also maintains each platform canvas project's conventions CLAUDE.md (CLAUDE--<platform>.md — one design project per platform, generated sections regenerated, canvas-owned section preserved); the files are the deliverable, never run against the canvas; "import [flow]" reads the designed pages back as data, diffs them against the Screens contracts (components included), folds canvas-discovered conventions back into the conventions file, and routes
mockup
Composes a component-based mockup (mockup.json) from the standard themed component library. Uses the data model when available to structure the views. The interactive HTML is generated by the backend on demand.