bluzir Wireframe
Low-fidelity exploration with ≥3 variations along different axes. Uses design_canvas.jsx for side-by-side presentation.
Phase 0 — Context pre-flight (auto-detect, ONE question max)
Before exploring variations, silently check for context:
Read .claude/design-tokens.jsonif exists (but wireframes are greyscale — use only for layout hints)Bash(ls ~/.claude/design-systems/ 2>/dev/null)— brand folder matchGlobcodebase tokens at project root- Scan brief for github / Figma / image /
.mdattachments → dispatch ingestion skills
If nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using . Proceeding." — then proceed greyscale regardless (wireframes are pre-color).
Rules
- No color — greyscale only (grays + single accent if needed)
- Placeholders everywhere for imagery, icons, labels — a placeholder is better than a bad attempt
- Varying axes — layout, interaction metaphor, visual treatment, density, hierarchy
- Mix conservative and novel — one "by-the-book", one exploring new territory
Build
artifacts/<slug>-wireframes.htmlwith React + Babel +design_canvas.jsxBash(cp starters/design_canvas.jsx "$(dirname <html>)/")— copy next to the HTML file- Shell:
<DesignCanvas columns={3} label="Options for {{thing}}"> <DesignCanvas.Cell label="Option A — classic">...</DesignCanvas.Cell> <DesignCanvas.Cell label="Option B — dense">...</DesignCanvas.Cell> <DesignCanvas.Cell label="Option C — novel">...</DesignCanvas.Cell> </DesignCanvas> - Use dashed borders (
border: 1px dashed #999) and greybox for placeholder content. Block letters or[Image]labels, not actual SVG.
Verify + next steps
- Run
/serve(needed because design_canvas.jsx is external), then/done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html - Fix →
Skill: verify-artifactsilently - Ask user which direction(s) to develop → invoke
/interactive-prototypeon chosen option