{"id":"805ee32c-2966-4016-a5b7-f6b8fd7a9a56","slug":"canvas-ui","kind":"skill","name":"canvas-ui","summary":"A UI design skill for AI coding agents: explore distinct directions, compare them on a live canvas, tune tokens, refine against real screenshots.","owner":"riz007","repoUrl":"https://github.com/riz007/canvas-ui","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-25T15:18:41.000Z","addedAt":"2026-10-30T03:45:01.619Z","logoUrl":"https://avatars.githubusercontent.com/u/12785997?u=ebe50a1d32dd5bff29770090a1fcf79bb969247e&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools"],"tags":["claude","claude-ai","claude-code","claude-code-plugin","codex","codex-cli","design-tokens","gemini"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-30T05:32:19.210Z","sample":false,"url":"https://conduits.dev/tools/canvas-ui","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# canvas-ui\n\n**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).\n\n![Three directions for the same product, rendered and captured by canvas-ui](assets/readme/directions.png)\n\n<sub>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](examples/fieldnote/r1).</sub>\n\n**[Live demo →](https://riz007.github.io/canvas-ui/)** Four example rounds you can open on the real canvas: squint, go blind, tune the dials, and pick.\n\n| Example | Kind | Notes |\n| --- | --- | --- |\n| [Tidepool](examples/tidepool) | Mobile homepage | **Generated end to end by Claude Code** with the skill installed, from a one-paragraph brief and no human input |\n| [Rootstock](examples/rootstock/r1) | Desktop dashboard | A coffee roaster's roast day: ruled log vs day dial vs stencilled stock |\n| [Proof](examples/proof/r1) | Launch page | Three persuasion skeletons: product as the page, type as image, one full-width curve |\n| [Fieldnote](examples/fieldnote/r1) | Product UI | Search-first workspace vs a single recording as hero vs a map |\n\n## Why it's different\n\nMost \"design skills\" are a long style guide. canvas-ui is a **workflow plus tools**, and every step produces something you can check:\n\n|                                      |                                                                                                                                                                                                                                                                                                                                                                                |\n| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| **Directions are data**              | Each direction is a `direction.json` card: north star, engine, five tone dials, type, color, skeleton, hero. Not adjectives.                                                                                                                                                                                                                                                   |\n| **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.                                                                                                                                                                         |\n| **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.                                                                         |\n| **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…). |\n| **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.                                                                                                                                                                                              |\n| **Zero dependencies**                | Node scripts + your installed Chrome over raw CDP. No npm install, no Python, no Puppeteer.                                                                                                                                                                                                                                                                                    |\n| **Agent-neutral**                    | One `SKILL.md`, plus adapters for Codex, Gemini CLI, Cursor, and a portable prompt for chat-only models.                                                                                                                                                                                                                                                                       |\n\n![The comparison canvas](assets/readme/canvas.png)\n\n## Install\n\n**Any agent that supports skills:**\n\n```bash\nnpx skills add riz007/canvas-ui\n```\n\n**Or from a clone:**\n\n```bash\ngit clone https://github.com/riz007/canvas-ui && cd canvas-ui\n./install.sh claude            # ~/.claude/skills/canvas-ui\n./install.sh agents            # ~/.agents/skills (Codex + Gemini CLI)\n./install.sh cursor --project ~/code/my-app\n./install.sh all --link        # symlink everything (for hacking on the skill)\n```\n\n| Agent | How it loads | Tested |\n| --- | --- | --- |\n| Claude Code | Skill in `~/.claude/skills/canvas-ui` (project: `.claude/skills`) | ✅ 2.1 — triggers on design requests, stays out of bug fixes, runs a full canvas round unattended |\n| Codex | Skill in `~/.codex/skills` or `~/.agents/skills` (project: `.agents/skills`) | Paths confirmed in Codex 0.164; end-to-end run pending |\n| Gemini CLI | Native skill in `~/.gemini/skills` or `~/.agents/skills` (project: `.gemini/skills`). Older builds: `./install.sh gemini-extension` | Paths confirmed in Gemini CLI 0.62; end-to-end run pending |\n| Cursor | Project rule `.cursor/rules/canvas-ui.mdc` pointing at the skill | Not yet |\n| OpenCode / others | Skill folder, or point your `AGENTS.md` at `SKILL.md` | Not yet |\n| DeepSeek, ChatGPT, Gemini web, raw API | Paste [adapters/generic/PROMPT.md](adapters/generic/PROMPT.md) as the system prompt | Not yet |\n\n`./install.sh agents` installs once into `~/.agents/skills`, which both Codex and Gemini CLI read. Don't also install `codex` or `gemini` on top, or the skill is listed twice.\n\nRequirements for the tools: Node 20+ (22+ recommended) and Chrome, Chromium, Edge or Brave. The workflow itself needs nothing.\n\n## Use\n\nJust ask:\n\n- \"Use canvas-ui to explore three directions for our booking app's home screen.\"\n- \"Redesign this dashboard. Show me options on the canvas first.\"\n- \"Recreate this screenshot as HTML, then add a mobile layout.\"\n- \"Review our pricing page with canvas-ui. Don't change anything.\"\n\nWhat happens:\n\n1. **Directions in words.** The agent names the category and peers, sets the five tone dials with evidence, and writes three direction cards from different _engines_ (a material in a setting, a scene, a character, a movement, another medium's grammar, or rule-breaking). It sends you 3–4 lines each with a recommendation, and asks: build one, or see all three?\n2. **The canvas.** If you want to see them, it builds three first screens on generated tokens and opens the canvas. You compare, squint, tune, take notes, and **Pick**. Paste the copied text back.\n3. **Build.** Your token tweaks go into the card, and the full UI gets built: real hierarchy, real states, three echoing motions.\n4. **Evidence.** Desktop + mobile screenshots, full page, 200% details, motion frame strips, the lint. Every `fix` item is fixed; every `tell` is removed or justified in writing.\n5. **Independent review.** A fresh subagent that never saw the build scores it on a five-line rubric (direction, hierarchy, type & color, craft, specificity), and a blind UX walkthrough checks the main flow without being told the path.\n6. **Delivery notes**: chosen direction and why, what's not done, motions, review scores, copy removed, tells kept and why, where the evidence lives.\n\nMicro-edits (\"make the save button green\") skip all of this.\n\n## Tools\n\n```bash\nnode scripts/tokens.mjs  examples/fieldnote/r1 --specimen       # cards → tokens.css (+ specimen page)\nnode scripts/canvas.mjs  examples/fieldnote/r1 --open           # build and open the canvas\nnode scripts/canvas.mjs  examples/fieldnote/r1 --serve 4817     # or serve it for an agent's browser pane\nnode scripts/shoot.mjs   examples/fieldnote/r1 --sheet --squint # capture all, contact sheet, squint test, lint\nnode scripts/shoot.mjs   page.html --size desktop,mobile --full\nnode scripts/shoot.mjs   page.html --steps 'open: click .menu; filled: type #q \"rain\"' --size mobile\nnode scripts/shoot.mjs   page.html --compare reference.png --size 1280x800   # recreation diff\nnode scripts/shoot.mjs   page.html --steps \"click .play\" --frames 8          # motion strip\n```\n\nEach script has `--help`. Details: [references/tools.md](references/tools.md).\n\n## What's inside\n\n```\nSKILL.md                    the workflow (what the agent reads)\nreferences/\n  direction.md              category & benchmarks, tone dials, engines, color, cards, divergence test\n  tokens.md                 the token engine and how to use tokens in Tailwind / CSS / existing systems\n  visual-language.md        hierarchy, type, color, controls, subtraction\n  layout.md                 persuasion skeletons, workspace layouts, viewports, exact recreation\n  motion.md                 three basic motions, feel → springs, durations, scroll\n  canvas.md                 building candidates, manifest, reading a pick\n  review.md                 reviewer dispatch, /10 rubric, blind UX walkthrough\n  slop.md                   lint rules, AI-default tells, tells the lint can't see\n  tools.md · workspace.md\nscripts/                    tokens.mjs · canvas.mjs · shoot.mjs · lib/ (token engine, CDP, lint)\nassets/canvas.html          the canvas template\ntemplates/direction.json    the direction card schema, annotated\nadapters/                   Codex · Gemini CLI · Cursor · portable prompt\nexamples/                   four complete direction rounds, with shots (tidepool is agent-generated)\nsite/                       the demo site (index.html + build.mjs → _site/)\ntests/                      node --test (token guarantees, canvas build, lint on a real browser)\n```\n\n## Develop\n\n```bash\nnpm test            # 11 tests; the browser test is skipped if no Chrome is found\nnpm run example     # regenerate the example's tokens and open its canvas\nnpm run site        # build the demo site into _site/ (deployed to GitHub Pages from main)\n```\n\nPro features are planned; see [ROADMAP.md](ROADMAP.md). The core skill will stay MIT and complete on its own.\n\n## License\n\n[MIT](LICENSE)\n"}