mockup-builderlisted

# Mockup Builder ## Overview This skill turns screenshots / sketches / text prompts into a single self-contained HTML file that strictly follows the in-house **mockup-kit** wireframe spec (see `docs/mockup-kit.html` for the full living spec; or rely on `references/components-cheatsheet.md` here for the distilled cheatsheet). **Spirit of the skill:** It produces *structural wireframes*, not visual designs. The agent's job is to lay out information correctly — never to make it "prettier". Polish is Figma's job; structure is this skill's job. ## Quick Start (90% case) For a typical request — "用这个规范帮我把这张图做成 HTML" / "做个 dashboard demo" — follow this order: ``` 1. read references/red-lines.md ← the must-not-do list 2. read references/components-cheatsheet.md ← the lego catalog 3. (if screenshot involved) read references/theme-mapping.md ← pick theme 4. python3 scripts/new_demo.py <out>.html --theme <X> --title "<T>" # ↑ this also opens the file in the default browser by default # add --no-open if the user asked for "just generate, don't open" 5. open <out>.html, replace the <!-- SLOT:body --> placeholder block with real structure 6. python3 scripts/lint_demo.py <out>.html --open ← pre-flight + re-open final 7. report path + theme + chosen accent + 1-line rationale ``` If the user wants **multiple variants on one page** ("再给我画两版 / 三种方案对比") add `--multi`: ```bash python3 scripts/new_demo.py options.html --multi --title "Three options" ``` This swaps in `asse