Checkpoint-driven design of a page/component with approvals at each step.
Uses
APIs to connect
This skill needs keys for these services. The link takes you where to get each one:
What it does
Designs a new page or component step by step with explicit approval at each checkpoint: context → structure → drafts from THREE models (GLM + Kimi K3 + Stitch, labeled side by side) → direction pick → final code hand-built by Claude Code (external LLMs never touch the final) → animations → audit. A scoreboard tracks every model win — over time you see which one actually designs best.
How to use
- 1Say “design page X” or
/design-page. - 2Answer the context, pick a structure.
- 3Three models draft in parallel — you pick a direction, the win tally accumulates.
- 4Claude Code builds the final + Emil + animation + audit, with your OK at every step.
When it triggers
Example
/design-page a pricing page — takes you from structure to polished code.
Updates
A brand reference now yields NUMBERS, not paraphrase: name a benchmark like Stripe or Linear and its token card (colors, fonts, spacing, radii) is pulled from the `VoltAgent/awesome-design-md` collection (MIT, 74 brands) — from a local copy pinned to a commit, with the name resolved through an allowlist. A round-trip check is mandatory at the end: the built code is compared against the reference and colour/font drift is shown as a table. The tool can answer "could not verify" with its own exit code — on a Tailwind project it says so honestly instead of returning a green report about nothing. It also catches Cyrillic: half the premium fonts in these cards lack it, so a Russian page built on Stripe's tokens silently loses its typeface.
Drafts are now always produced by THREE models in parallel — GLM-5.2, Kimi K3 and Stitch (Gemini 3.1 Pro), shown side by side with labels. A scoreboard was added: every pick is logged with a win tally and a “what I liked” note — over time the stats reveal which model is actually stronger. The final is locked to Claude Code: the winning draft is direction only, the final code is hand-built on your stack and passes the Kowalski discipline (taste → animation → audit).
Added an optional Google Stitch branch (Checkpoint 1.5).
Added to the RedSkills catalog.
Liked this skill? New breakdowns and updates land in the channel.