fireworks-design
An open-source Claude Code workflow that replicates ClaudeDesign — fan out many distinct design directions, judge them like a panel, synthesize the best, and adversarially refine to a single world-class frontend page.
One-sentence pitch: Stop rolling the dice on a single model output.
fireworks-designexplores 6–8 independent aesthetics in parallel, scores each across 6 design dimensions, grafts the winners together, then critique-fix-loops the result until it's shippable.
📦 Install
In Claude Code, just say:
Install fireworks-design into this project — repo is
yizhiyanhua-ai/fireworks-design.
Claude drops the workflow into .claude/workflows/ and adds a /fireworks-design slash command — done.
mkdir -p .claude/workflows .claude/commands
curl -fsSL -o .claude/workflows/fireworks-design.js \
https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-design/main/fireworks-design.js
curl -fsSL -o .claude/commands/fireworks-design.md \
https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-design/main/.claude/commands/fireworks-design.md
🚀 Usage
Type the slash command, then your request:
/fireworks-design a landing page for a coffee shop, save to ~/design/coffee, 6 directions, brand #7c3aed
Claude runs the workflow in the background (watch it live with /workflows) and hands you a finished final.html. Or just ask in plain language:
Use fireworks-design to build a landing page for a coffee shop. Save it to
~/design/coffee.
Tweak it conversationally — …explore 8 directions, refine 3 rounds, brand color #7c3aed.
What you get: a single self-contained final.html (plus the explored draft-*.html directions) and a summary of which aesthetic won and why.
Workflow({
name: "fireworks-design",
args: { prompt: "...", outputDir: "/abs/path", variants: 6, refineRounds: 2 }
})
prompt and outputDir (absolute path) are required; variants (3–8), refineRounds, brand, and lenses are optional. Full reference in the Arguments section below.
✨ Featured outputs (效果解读)
14 real pages across totally different domains — all live on GitHub Pages · full table + deep-dives. Four highlights:
| Page | Winner & why it fits | Signature moment | |
|---|---|---|---|
| 🎬 | LUMIÈRE — movie rating | Dark Premium — theatrical immersion beat editorial; antique-gold rationed as "prestige currency" (only ratings/CTA/top ranks) | one-shot gold projector-beam sweeps the 9.2 score |
| 🎵 | NOVA · AURORA — album | Bold Editorial — oversized Didone wordmark, midnight-violet-teal 60/30/10 | generative cover + 32-bar visualizer + play-state changes the whole room |
| 🎨 | OBJECT & ECHO — studio | Bold Editorial — gallery-zine, kinetic grotesque "object" vs ghosted italic "echo" | spatial afterimage echo behind the hero wordmark |
| ✈️ | AZORES — travel | Bold Editorial — photography-as-product, NatGeo-meets-Cereal | interactive islands map with breathing halo + cross-fade detail panel |
Winner diversity proves the point: across 14 briefs, Bold Editorial won ×8, Dark Premium ×3 (movie/restaurant/ecommerce), Swiss Minimal ×2 (fitness/edtech), Editorial ×1 (nonprofit). Different briefs crown different winners — that's why we judge instead of generating once. Full 效果解读 (winning rationale, signature moments, real bugs the refine/polish pass caught) in
examples/README.md.