canvas-ui

Three real directions, side by side, before a line of production code.

canvas-ui is a design skill for AI coding agents. It explores genuinely different directions, puts them on a live canvas you can squint at and tune, and then checks the real render, not the code.

npx skills add riz007/canvas-ui
Claude Code · Codex · Gemini CLI · Cursor · OpenCode · any model via a portable prompt
01

Directions as data

Each direction is a card with a north star, an engine and five tone dials, not a list of adjectives.

02

Dials become tokens

Colors, type scale, spacing, radius and motion are generated from the card. Text contrast passes AA by construction.

03

A canvas you steer

Compare, squint, go blind, tune the dials live, then Pick. Your notes and tweaks are copied as one instruction.

04

Checked on the render

Every screenshot is linted for legibility bugs and AI-default tells, then reviewed by an agent that never saw the build.