mockups

Solid

Render 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.

Web & Frontend 1 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
10
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# mockups — Push Screen Mockups to Claude Design Turn the blueprint's **Screens contracts** into reviewable visuals: one self-contained HTML page per screen (plus each pinned state variant), styled from `design-system.md` tokens, pushed to a **claude.ai/design design-system project** (per `${CLAUDE_PLUGIN_ROOT}/assets/canvas-push.md`) so the user reviews them on the canvas. Since blueprint flow passes render and review each flow's screens **in-pass** (blueprint §6a), this command is the **batch / regeneration tool**: re-render everything after a design-system change, refresh a legacy repo, or redo one flow post-hoc. It requires reviewed Screens contracts and a design system, and is **never a gate for `/vwf:plan`**. **Mockups are realizations, not contract.** They are *views* of the blueprint, regenerated at will: generation happens in an **ephemeral build directory** (the session scratch dir — never inside the repo, never committed), and the Claude Design project is the store of record. A canvas refinement that changes what a screen should *be* routes through `/vwf:blueprint <flow>` or `/vwf:design-system` — then re-run this command (regenerate-over-edit). Nothing here ever writes into `docs/blueprint/`. ## Doc Paths | Doc | Path | | ------------- | -------------------------------------------------------...

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

Web & Frontend Listed

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

0 Updated 2 days ago
zakariaf
AI & Automation Solid

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

1 Updated yesterday
virajp
AI & Automation Solid

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.

2 Updated 4 days ago
Federico-Anastasi