How to use it
Canon stays dormant until you call it — it will not interrupt you with design opinions you did not ask for. That means you name it. Say canon, or name a kit, and describe the work in your own words. It picks the rest.
Before any of this
Install it once —
/plugin marketplace add jamesmadson/canon
in Claude Code, or
download one file for Figma.
Starting something new
Say what you are making before you make it. Canon picks the kit and applies its judgment while the work is being shaped, rather than reviewing it afterwards.
Use canon. I need to design the hero for our launch page.
What comes back — Marketing / Landing Site — brand foundation, the page’s job, motion that earns its weight.
Use canon to help me design the settings screen for our admin tool.
What comes back — Product UI / Dashboard — restraint as a functional requirement, density and data craft.
Canon: I’m building a pricing page. What should I get right first?
What comes back — The order to decide things in, not a list of components to place.
Reviewing what already exists
Point it at something built. Canon separates judgment from verification, so an opinion never arrives disguised as a defect.
Use canon to review this dashboard table before I ship it.
What comes back — Tabular numbers, stable column alignment, state encoded in form as well as colour.
Canon — audit this screen on mobile.
What comes back — Mobile-First Review — two passes, then one prioritised report. Tap targets, safe areas, iOS input zoom.
Run canon over this page and tell me what I got wrong.
What comes back — Findings against the kit that fits, with the reasoning attached to each.
When you are not sure which applies
Ambiguity is a supported answer. Canon asks rather than guessing when two kits fit equally well.
Which canon kit applies to redesigning our onboarding flow?
What comes back — The three routes in one line each, and a question back if it is genuinely a toss-up.
What design skills do I have available for this?
What comes back — What is installed, what each covers, and which one this task needs.
Mid-work checks
Smaller questions, asked while you work. These reach a kit’s specific guidance rather than a full pass.
Canon: is this animation earning its place?
What comes back — The frequency gate — how often a user sees this, and what that permits.
Use canon to check the copy on this empty state.
What comes back — Plain, actionable, no apology; what happened and what to do next.
Canon, is this ready to ship?
What comes back — The kit’s pre-ship gates — keyboard pass, 375px pass, contrast measured over real backgrounds.
In Figma, or any single-file tool
canon-all.md
carries all three kits in one file, so there is no separate router to invoke —
the guidance is already loaded. Describe the work and it applies the section
that fits. The prompts above still read correctly; you can drop the word
"canon" if you prefer.
What it will not do
- Trigger on its own. General design chatter is not an invocation.
- Guess when two kits fit equally. It asks which you meant.
- Mix two kits' guidance silently. If the work shifts from a dashboard to a landing page, it re-routes and says so.
- Hand you a component library. Canon carries judgment, not house style.