genjutsu

paint

The Master Painter. A full design pipeline: mandatory brainstorm, a visual and an interaction thesis, a design system written into your repo, then implementation and a full audit against the thesis.

All documentation

paint builds a complete visual universe. It is not a beautifier and it is not a faster cast. It is a design pipeline with five phases, two validation gates, and a written artefact that outlives the session.

With the Claude Code plugin it is /genjutsu:paint. After an npx install or on claude.ai, type /genjutsu and ask for a design; the router sends it here.

paint against cast

cast paint
Premise Make this thing exceptional Build an identity, or rebuild one
Entry Adapts to existing code Mandatory brainstorm, then a mode for existing projects
Discovery Light, and only when vague Five domains, or one question in light scope
Design system Optional, implicit Writes MASTER.md, except in light scope
Audit Quick check before delivery The full audit
Scope One component, page or effect The project’s visual identity

Both call the same modules to implement. The difference is everything that happens before the first line.

One exception, and it announces itself. When the target is a single component, the project already has colours and type, and nothing downstream needs systematising, paint runs light: one question instead of five, an interaction thesis only, no MASTER.md, and the quick audit instead of the full one. It says which pipeline you got in one line before it starts, and you can overrule it.

Phase 1: Brainstorm

Never skipped. Least of all when the brief is “just make it look good”, because that sentence contains no decisions and the decisions still have to be made by somebody.

Right after the stack scan, before its read of the project and the first question, comes one check. When the brief is a whole site or web app on a web stack (or no project yet), the session can spawn subagents, and there is real material to harvest, two audiences or languages, a first version meant for a client, or a request for the full treatment, paint proposes bunshin once: what it would do, whether Impeccable is installed, the two times it would ask you, and its cost range, measured on one seven-page site. It switches only on a yes and does not ask again in that session. With nobody there to answer, it names bunshin in one line and in the final report, and carries on.

It opens with its read of the project in one line (what it is, for whom, where it seems to be heading, on which stack) and asks you to correct it before the first question. Then five domains get covered: product (what it is, and what is true of it that its closest neighbour, or a template, could not claim), audience, mood (three to five adjectives), references, and stack. The stack is usually answered by the scan rather than by you. References only ever come from you: paint never suggests famous sites of its own, because a name it offers anchors the thesis on someone else’s look.

One question at a time. Vague answers get concretised rather than accepted, and a mood word is answered with a fact about the product rather than with another brand: “clean” comes back as “clean compared to what? Tell me one thing that is true of this product and that its closest competitor could not say about itself.” “What would feel wrong” is asked when “what do you want” stalls, because negative examples are often sharper.

If you push to skip ahead, it will not simply comply. It tells you what has been covered, what is missing, what that gap will affect, and offers you the choice: one more question, or it proceeds on stated assumptions that you can correct. Either way the assumptions are named out loud rather than buried.

Phase 2: Two theses, and this is a gate

The visual thesis is one sentence that must address four things explicitly: colour direction, typographic spirit, spacing philosophy, and component style. The typographic spirit names the display face and why this one, or says so plainly when it is still open: display face: undecided, chosen at the design-system gate.

Dark neo-brutalist interface with bold monospace type, fluorescent chartreuse accents, generous whitespace, and raw-edged components with offset shadows.

The interaction thesis is one sentence that must address four others: timing range, hover behaviour, scroll behaviour, and forbidden patterns.

Fast, dry transitions (100 to 200ms), hover with a subtle 1.02 scale, scroll-triggered reveals with stagger, no bounce and no elastic, all sharp ease-out.

The test each has to pass is that you can derive the actual CSS, Kotlin or Swift from reading it. “Nice typography” fails. The second is the guessability test: if someone could have written the thesis from the product category alone (a fintech gets navy and a clean sans, a design studio gets an editorial serif on paper), it is the category’s default rather than a decision, and it is rewritten from what is true of this product.

Under the two theses comes one more line, Allowed patterns:, naming every deliberate device the design relies on that a reader could take for decoration or habit: mono labels, hairline rules, a paper ground, grain, a glow, a looping animation. It reads Allowed patterns: none when there are none. You see it before you say yes, and the audit reads it: a tell counts as allowed only when this line lists it, so a mood word never lets one through.

Both theses must be validated before phase 3, and both are shown the way you chose at the first visual gate: a rendered page, a live preview in your project, or text. What each of those means on claude.ai, Cowork, Claude Code or another host is under cast.

From the validated theses it then reads three dials: how far the layout departs from convention (variance), how much moves (motion), and how tightly the page is packed (density). They come from what the theses say, never from the raw brief or a default, and a dial the theses do not settle is left unset. The values are shown with the design system.

Phase 3: Design system

This phase produces a file, not a vibe. On a web stack it first loads tells, the catalogue of defaults models reach for, so palette and type are chosen with it in view rather than audited afterwards.

The design-system dataset is then queried with the validated thesis and the dials, and what it returns is a proposal, not an answer. Every suggestion passes through the thesis and through tells before it is kept. The display face, serif or sans, gets in only with a reason for this product. The visual thesis gives it, or, when the thesis left the face undecided, this phase chooses it and says why in one line, shown with the design system: validating the design system amends the visual thesis with that line, and the build and the audit read the amended sentence. “Creative”, “premium” or “editorial” summon an editorial serif; “clean”, “modern” or “SaaS” summon a heavy grotesque; neither set of words is a reason, and trading one reflex for the other is not a decision. A warm paper ground stays only when the thesis says why this product belongs on paper. Glassmorphism because the product is a SaaS does not get in at all unless the thesis asked for it.

MASTER.md lands at your project root and becomes the single source of truth: colour palette (including semantic colours and both themes where relevant), a type scale with weight and line-height rules, a spacing scale with a stated base unit, radii, elevation levels, base component styling, and motion tokens for duration, easing and stagger.

Alongside it come the token files your stack actually reads:

Stack Generated
Web CSS custom properties, or a Tailwind config extension
Android Compose Theme.kt, Color.kt, Type.kt, Shapes.kt, Motion.kt
SwiftUI Color+App.swift, Font+App.swift, Animation+App.swift, Shape+App.swift
Compose Multiplatform Tokens in commonMain, with expect/actual for fonts and platform colours

Those files are children of MASTER.md and reference it. In a multi-stack repository, MASTER.md gets one delimited section per stack and each set of token files is generated.

Three MCP servers are used when the session has them connected, and only then: Stitch for mockups and wireframes, Nano Banana for visual assets such as illustrations, icons and backgrounds, and 21st.dev Magic for UI components from a description. They are optional. Without them paint skips that step; the design system and the code are the core path.

Phase 4: Implement

Page by page, validated page by page. Never the whole site in one pass: a wrong turn caught on page one costs one page. The same wrong turn caught on page four costs four.

Two rules hold throughout. Every colour, size, spacing, shadow and radius traces back to a MASTER.md token, with no magic numbers and no rogue hex values. And every interactive element gets all five states: default, hover, focus, active, disabled.

Phase 5: Audit

Always runs, in full. It opens with the thesis against the code: each promise of both theses matched to the file:line that keeps it, or reported missing. Then the checklist described under cast, a token-consistency sweep that flags any value not traceable to the design system, and the tells audit, where every finding gets one of three outcomes: allowed by an entry of the Allowed patterns: line, quoted next to it; not this tell, when the detection contradicts the entry’s own marker (a loop that reports a real loading state, a blur that is a modal backdrop), with the file:line that proves it, and never on a matter of taste; or a problem. A problem on a line the run wrote is fixed before the report, and the check runs again, two passes at most. What still fails after the second pass is reported with its file:line. A tell that was already in your project is listed for you and never changed by the audit.

What an agent cannot measure (frame timing, breakpoints, device settings) is handed over as a block marked unverified, with the exact thing to run. The report gives the counts, “N checked, M problems found, K handed over”, and ends with the modules that loaded and the ones that did not.

Running it on a project that already has a design

In phase 1, on a web project that already has a look, paint first takes an inventory of what is already there. The tells audit runs over the project, and the result comes back as one short block, What this project already does by reflex, counted by family with two or three file:line examples each. You see it before the preserve, partial or redesign question, and every finding in it is settled in the theses by the mode you pick: in preserve mode they stay by default, listed in the Allowed patterns: line as the brand’s own; in partial mode they go by default inside the areas you named; in redesign mode they go by default everywhere. You can keep or drop any one of them by name at the thesis gate.

Then, alongside the question about legacy code, paint asks which of three modes you want:

  • Preserve the brand. The thesis works inside the existing identity; the tokens stay.
  • Partial. The thesis replaces what you name and keeps the rest.
  • Redesign. The thesis replaces the visual layer. Existing tokens are only ever replaced in this mode.

In every mode, some things never change without your explicit agreement: public token names, URLs, navigation labels, form field names, the logo, and legal notices.

Before any token file is written, you see the diff. Afterwards the project is built the way its stack builds (tsc or the npm build, Gradle, xcodebuild), or, when that cannot run in the session, the check comes back marked unverified with the exact command.

If what you want is motion on the design you already have, that is still cast. If it is a whole site, first version, built by a team of subagents under one art director, that is bunshin.