Skip to the page
TACTILE UI

Getting started

Using it with Claude and Cursor

The brain is a folder an agent reads before it builds: the laws, every part’s rules, two skills and a verify tool that checks its work.

On this page
  1. What an agent gets
  2. Set it up
  3. The two skills
  4. The verify tool
  5. Objects and blocks
  6. Prompts to try

What an agent gets

Left alone, a coding agent builds generic UI: a blue button, a gradient, a card inside a card. The brain is the part of the kit written for it. It ships with the Pass, next to kit.css:

rules.md
The ten laws and how to work
INVENTORY.md
Every part, its markup, its use, its rules file
foundations/
Materials, light, colour, printing, grid, states, motion, voice, anti-patterns, recipes
parts/
One rules file per part
skills/
Building with the kit · reviewing against it
tools/verify.mjs
Checks a page against the laws

See every file in the brain, by name; the contents come with the Pass.

Set it up

Claude Code. Copy the brain into your project and the two skill folders into .claude/skills/. The skills are plain SKILL.md files with a name and a description, so Claude picks them up when a task matches.

cp -r kit/brain ./kit/brain
cp -r kit/brain/skills/building-with-tactile-ui      .claude/skills/
cp -r kit/brain/skills/reviewing-against-tactile-ui  .claude/skills/

Cursor, or any other agent. Point a project rule at the brain, so every request starts from it:

Before building UI, read kit/brain/rules.md and kit/brain/INVENTORY.md.
Use only parts from the inventory. For each part you use, read
kit/brain/parts/<part>.rules.md. When done, run
node kit/brain/tools/verify.mjs <file> and fix every violation.

The two skills

building-with-tactile-ui

Ten steps from reading the laws to a verified page: pick a composition recipe, map every need to a part, read each part’s rules, decide the one contrast key per surface before anything else, write copy in the kit’s voice, check both finishes and 390px, run verify.

reviewing-against-tactile-ui

A review of a finished screen: verify first, then every anti-pattern, then each part’s rules, both finishes and 390px, then every highlight and shadow against the lamp. Findings come back ordered by severity, each with the element and the fix.

The verify tool

A dependency-free Node script. It reads the markup and prints one line per violation, exiting 1 if there are any, so an agent can run it, read the lines and fix them, and so can CI. This is its real output on a deliberately broken draft, then on a fixed page:

$ node kit/brain/tools/verify.mjs draft.html
draft.html: [finish] no finish script in <head> that follows prefers-color-scheme (see foundations/materials-and-finishes.md)
draft.html: [hue] .hero h1 uses #7c3aed — a purple/violet accent
draft.html: [contrast-key] 2 primary keys on one surface (<section class="tui-panel">); keep one
draft.html: [label] <input name="email"> has no label
draft.html: [ghost] data-ghost "88" is 2 wide but the value "02:52" is 5

$ node kit/brain/tools/verify.mjs page.html
ok — 1 page(s), no violations

It checks what source can show: colour literals outside displays, purple and orange hues, contrast keys per surface, labels on every control, display ghost widths and the finish script. --contrast prints the printing contrast of both finishes. It is not the eyes: the review skill still asks the agent to look.

Objects and blocks

Every object and block comes with two prompts: one that rebuilds it exactly, down to the tokens, and one that teaches its technique for a design of your own. For an iOS, Android, React Native or Flutter app there is a third that ports it. All three are on the piece’s page in the lab, under Prompt; the first two travel in its package. The Pass opens them for every piece; for a free piece, signing in is enough.

Prompts to try

  • Build a settings page for a home battery with the Tactile UI Kit. Follow the building-with-tactile-ui skill and run verify before you finish.
  • Review app/billing.html against Tactile UI. List findings by severity with the fix for each.
  • Turn this pricing section into Tactile UI: one contrast key per plan panel, readouts for the figures, a graphite band for the call to action.
Docs
Finish
Volume