Teach your AI what good design actually looks like.
A skill is a plain text file that tells an AI tool how to think about a piece of work — the same way a good brief does. Drop one in, and Claude, Cursor, or Figma stops guessing.
Canon collects the twenty worth having. Every one read in full, not scraped.
Canon in use
You install one file. Then you just describe the work — and Canon brings in the right guidance for it. Here's what that looks like.
You type
Design the hero for our launch page.
Canon brings in
What it tells the AI
- The hero states the thesis rather than decorating it.
- Rules that don't bend: animate
transformandopacityonly; enters slightly slower than exits;prefers-reduced-motionfully supported with a static poster state that still communicates. - If a flourish would survive being described in a sentence to a stakeholder, it's probably earning its place.
- The first screen on a phone shows the argument, not the navigation.
You type
Review this dashboard table before I ship it.
Canon brings in
What it tells the AI
- Restraint isn't a style preference here — it's the functional requirement. A flourish that delights on first encounter becomes a tax on the four-hundredth.
- Encode state in form as well as color: a pill, a chip, a severity stripe, an icon. Color alone fails for ~8% of users and in every grayscale print.
- Most dashboard interactions land in the bottom two rows. Animate
transformandopacityonly; enters slightly slower than exits; never animate a keyboard-initiated action;prefers-reduced-motionfully supported. - Errors are calm, plain, and actionable: what happened, what to do next. Zero playfulness in anything touching data loss or permissions.
You type
Audit this screen on mobile.
Canon brings in
What it tells the AI
- The discipline that makes it work: an opinion must never read as a defect, and a must-fix must never read as a preference.
- Tap targets: ≥44×44 CSS px in touch contexts. Check the functional hit area, not the visual box — padding on a wrapper isn't tappable if the anchor doesn't own it.
- Font size in inputs: ≥16px, or iOS Safari zooms on focus.
- State plainly what you could not assess: emulators lie about safe areas and address-bar behavior, dev servers lie about performance, and neither can tell you how the thing feels in one hand on a bus.
A scripted example, not a live session. Every line above is quoted from the kit it names.
More ways to ask — or, if you work in Figma rather than Claude Code, download the same guidance as one file .
Kits
Several skills bundled for one job, in the order you'd actually use them. Canon picks the right bundle for the first three; Full Redesign you install on its own.
Full Redesign
Brand foundation through pre-ship audits — the long arc, in working order.
4 phases · 10 skills
Marketing / Landing Site
A site that has to persuade in one scroll — with signature moments that earn their weight.
5 phases · 9 skills
Mobile-First Review
Audit what you already shipped — judgment and device reality, kept apart on purpose.
3 phases · 4 skills
Product UI / Dashboard
Dense, data-heavy interfaces where restraint is the whole discipline.
4 phases · 8 skills
This month's picks
Depth — how much judgment a skill carries, from a single technique (1) to a full method (5).
Deter — Depth 4 of 5
A review that removes — every finding priced against the surface's job and how often people meet it, one thing kept, and never a rewrite nobody asked for.
Strata — Depth 4 of 5
A record of what users actually said, in dated layers — verbatim kept apart from your reading of it, and two people never counted as a pattern.
Impeccable — Depth 5 of 5
A design director you invoke by verb — shape, critique, bolder, quieter, distill, harden — each command a separate playbook, loaded only when the work actually calls for it.
Improve UI — Depth 4 of 5
A read-only audit that refuses to guess — a connection counts only when it is proven through rendering, and the output is a plan for another agent, not an edit.
Layers — Orient — Depth 4 of 5
Seven layers of product design, and a diagnostic that names the lowest one with unresolved decisions — because polishing the surface above a broken conceptual model is wasted work.
All skills
Deter — Depth 4 of 5
A review that removes — every finding priced against the surface's job and how often people meet it, one thing kept, and never a rewrite nobody asked for.
Graft — Depth 4 of 5
Maps a Claude Code session as a branch diagram: your turns as the trunk, subagents as forks, compactions as diamonds.
Strata — Depth 4 of 5
A record of what users actually said, in dated layers — verbatim kept apart from your reading of it, and two people never counted as a pattern.
Impeccable — Depth 5 of 5
A design director you invoke by verb — shape, critique, bolder, quieter, distill, harden — each command a separate playbook, loaded only when the work actually calls for it.
Improve UI — Depth 4 of 5
A read-only audit that refuses to guess — a connection counts only when it is proven through rendering, and the output is a plan for another agent, not an edit.
Layers — Orient — Depth 4 of 5
Seven layers of product design, and a diagnostic that names the lowest one with unresolved decisions — because polishing the surface above a broken conceptual model is wasted work.
Ship It — Depth 4 of 5
Sixty-six product patterns, each tiered so "use judgment" has an anchor — catches the password reset you forgot, not the padding you got wrong.
Design Motion Principles — Depth 5 of 5
Three named motion philosophies — Kowalski, Krehel, Tompkins — weighted by project context, with a frequency gate that decides whether it should animate at all.
Falling Leaves — Depth 4 of 5
Why generic particles read as confetti and a tumble that crosses zero reads as a leaf — drifting foliage built from the physics the eye actually checks.
Scroll-Scrubbed Visual Sequence — Depth 4 of 5
Turn one visual transformation into a scroll instrument — normalized progress as the single source of truth, with the renderer (video, frames, canvas, SVG) swappable underneath.
Three.js Landscape — Depth 4 of 5
A live landscape that stays quiet behind the subject — polar-grid terrain, slope-and-moisture coloring, GPU grass, and a time-of-day system that cross-fades instead of cutting.
Thumb-First — Depth 4 of 5
A three-skill mobile review team — design judgment and device reality run as separate passes, then merge into one report that never lets an opinion read as a defect.
Emil Design Eng — Depth 5 of 5
The taste-and-polish philosophy behind Improve Animations, generalized to every UI decision, not just motion.
Huashu Design — Depth 5 of 5
Type a sentence, get a shippable prototype, deck, or launch animation — no Figma, no After Effects.
Nothing Design — Depth 4 of 5
A named, numbered visual system — Swiss typography plus Nothing's dot-matrix industrial cool, budgeted down to exactly three type layers.
Frontend Design — Depth 5 of 5
Claude's actual design-lead persona — useful for turning "clean and modern" into an actual point of view.
Brand Guidelines — Depth 4 of 5
A tight, portable pattern for baking exact brand colors and type rules into anything Claude touches.
Improve Animations — Depth 5 of 5
Turns "the app feels off" into a prioritized, execute-anywhere motion audit.
Better Accessibility — Depth 5 of 5
The a11y reference you actually want cited inline — focus rings to ARIA, with real before/afters.
Make Interfaces Feel Better — Depth 5 of 5
Nineteen small physical details — concentric radii, tabular numbers, scale-on-press — that add up to "feels expensive."
Better Writing — Depth 4 of 5
Microcopy rules that catch "Oops, something went wrong" before it ships.