AI Tools · Design Systems
Design Context Canvas
Overview
A guided canvas that turns a design system into context every AI tool can read, so Claude, Cursor and image models stop guessing what a brand looks like.
Each block asks for one part of the system: brand strategy, style, color, type for web and print, shape, icons, illustration, motion and image generation. Every block ends with compulsory notes: what the AI should take from the references, and how closely it should match them.
Password protected. Get in touch for access.
Problem
AI tools forget your design system between tools, sessions and prompts.
- 01
Tokens aren’t enough
A hex code says which colour, not how to use it. AI tools need the reasoning too: which pairs belong together, what to avoid, what the brand is for.
- 02
References are ambiguous
Attach a moodboard and the model guesses what you liked about it: the layout, the palette, the illustrations, or all of it.
- 03
Every tool wants a different format
Claude reads CLAUDE.md, Cursor reads rule files, image models want a prompt, code wants CSS variables. Keeping four copies in sync by hand doesn’t last.
System
One canvas, five exports.
The layout borrows from brand guideline decks: white blocks on a single strong colour, small uppercase headers, swatches with their names and hex codes on the colour. Each block shows a live preview, so a font change or a new easing is visible straight away.
Compulsory notes
A block isn’t complete until it says what to take from the references and includes notes for the AI. Incomplete blocks are listed at the top of every export, telling the AI to ask before guessing.
Match fidelity
A five-step scale from loose inspiration to exact replica, set per block. Diwali’s colours are locked at 5; its motion is a 3, free to adapt.
Web and print
Typography switches between web, print or both, and asks for the rules each needs: rem units and line height, or point sizes and CMYK proofing.
Exports
- CLAUDE.md. Read automatically by Claude Code from the project root.
- Cursor rule. A .mdc file in .cursor/rules, applied to every UI file.
- Flora prompt. An image prompt built from the palette, style, mood and negatives.
- CSS tokens. Colour, type, radius, spacing and motion variables, with reduced-motion handled.
- JSON. The raw data, for other tools.
Test
Does the context hold up on motifs the brand never drew?
I asked FLORA for three new Diwali motifs: a gift box, ladoo and a sky lantern. Each was made three ways, with the same model (Nano Banana 2.1) and the same seed, so the only thing that changes between rows is the context the model was given.
- 01
Bare prompt
What most people type: “A Diwali gift box illustration”. No brand context at all.
- 02
Canvas prompt
The prompt the canvas exports. It is already engineered: every phrase is pulled from a block of the canvas (see below).
- 03
Canvas prompt + references
The same canvas prompt, with four of the original motifs attached as style references.
01 · Bare prompt
Glossy gold, glowing diyas, marigolds and “Happy Diwali” lettering: almost everything on the brand’s never-do list. It all looks artificial: an over-rendered sheen with no handcrafted touch and nothing of a modern aesthetic. It is what an image model thinks Diwali looks like, not what Diwali Party looks like.
02 · Canvas prompt
The prompt the canvas builds is not a casual one. It is assembled from six blocks, so it carries the brand’s style, colour and rules without anyone having to write it by hand:
Flat vector illustration, bold geometric shapes, no outlines, solid saturated colour fields with a fine dot-grid texture, playful and modern festive mood. Subject: a single wrapped Diwali gift box… Style: Illustrated, Flat, Geometric. Mood: Playful, Bold, Warm, Friendly. Palette: marigold #FF7011, magenta #E836DC, indigo #3636E8, leaf #328532, gold #F7C869, rose #FFB0FA. Avoid: photorealism, 3D render, gradients, gold foil, drop shadows, text, paisley borders, clip art.
Where each part comes from
- Look. the image generation block’s “visual look”.
- Style. the design style and illustration blocks.
- Mood. brand personality, from the brand strategy block.
- Palette. the exact hex codes from the color block.
- Avoid. the “never do” list and the negative prompt.
- Fidelity. the compulsory “how closely to match” note, added when references are attached.
The jump from row 01 is big: the palette lands exactly, the gold foil and lettering are gone, and everything is flat. But every image still fills the frame with flowers, sparkles and patterns. It reads as good festive illustration, not yet Diwali Party.
03 · Canvas prompt + references
Attaching four of the original motifs did what words couldn’t. The backgrounds calm down to one colour field, objects get simpler, and the white sprinkle details from the jalebi appear on the gift and the ladoo.
The bare prompt got Diwali. The canvas prompt got the palette and the rules. The references got the style.
Findings
- 01
Words describe, references define
A bare prompt falls back on the model’s idea of Diwali: gold, glow and lettering. The canvas prompt fixed the palette and the rules, but “flat vector, bold geometric shapes” still describes half the illustration on the internet. Only the reference images pinned it to this brand.
- 02
The test showed what the canvas was missing
None of the nine images has the die-cut white sticker border, and the lantern is still far more detailed than the originals. The canvas never said so. Both are now rules in the illustration block: one object, sticker border, no more than five shapes of detail.
- 03
Fidelity needs to travel with the images
“Near exact” in the prompt did little on its own. It worked once the model had something concrete to be near.
Learnings
- 01
A design system for AI needs intent as well as values: what to borrow, what to avoid, and how strictly.
- 02
Making the notes compulsory changed what I wrote down. Things I’d have left implicit, like “no shadows, depth comes from overlapping colour”, became rules.
- 03
Testing on new subjects is the honest test. Redrawing existing motifs would have looked better and proved less.