canvas-ui
A UI design skill for AI coding agents. It explores three genuinely different design directions, puts them side by side on a live comparison canvas, lets you tune them with real design tokens, and then refines the chosen one against real screenshots until it holds up. Works in Claude Code, Codex, Gemini CLI, Cursor, OpenCode, and any model that can read a prompt (DeepSeek, GPT, Gemini web).
One brief (a field-recording library), three directions from different engines: a tape-log workspace, a single recording as hero, a place-first atlas. Built, linted and captured by the bundled tools. Source in examples/fieldnote.
Live demo → Four example rounds you can open on the real canvas: squint, go blind, tune the dials, and pick.
| Example | Kind | Notes |
|---|
| Tidepool | Mobile homepage | Generated end to end by Claude Code with the skill installed, from a one-paragraph brief and no human input |
| Rootstock | Desktop dashboard | A coffee roaster's roast day: ruled log vs day dial vs stencilled stock |
| Proof | Launch page | Three persuasion skeletons: product as the page, type as image, one full-width curve |
| Fieldnote | Product UI | Search-first workspace vs a single recording as hero vs a map |
Why it's different
Most "design skills" are a long style guide. canvas-ui is a workflow plus tools, and every step produces something you can check:
| |
|---|
| Directions are data | Each direction is a direction.json card: north star, engine, five tone dials, type, color, skeleton, hero. Not adjectives. |
| Dials → tokens | tokens.mjs turns a card into ~60 CSS variables (OKLCH color ramps, type scale, spacing, radius, shadow, motion). All text colors pass WCAG AA by construction; small type is floored at 12/13px. |
| A canvas you can steer | Grid, Focus, A/B with synced scroll, Overlay onion-skin, Squint test, Blind mode, per-candidate keep/change notes, and live Tune: drag the dials, recolor, re-scale type — the page re-tokenizes instantly. Pick copies a paste-ready instruction for your agent, including your token tweaks. |
| A design lint on the real render | Every screenshot is checked in the browser for readability bugs (contrast against the actual background, tiny text, tight leading, overflow, clipping, stuck animations, tap targets) and AI-default tells (gradient text, emoji icons, eyebrow labels, glow blobs, purple-blue gradients, icon-tile feature grids, nested cards, pills everywhere, default-font-only…). |
| Divergence is enforced | The canvas builder warns when two directions share 2+ of display font, color family, engine and tone. The squint sheet shows when two directions have the same light/dark masses. |
| Zero dependencies | Node scripts + your installed Chrome over raw CDP. No npm install, no Python, no Puppeteer. |
| Agent-neutral | One SKILL.md, plus adapters for Codex, Gemini CLI, Cursor, and a portable prompt for chat-only models. |
Install
Any agent that supports skills:
npx skills add riz007/canvas-ui
Or from a clone:
git clone https://github.com/riz007/canvas-ui && cd canvas-ui
./install.sh claude # ~/.claude/skills/canvas-ui
./install.sh agents # ~/.agents/skills (Codex + Gemini CLI)
./install.sh cursor --project ~/code/my-app
./install.sh all --link # symlink everything (for hacking on the skill)
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
