Install
Put one file where your agent reads.
71UI is a single Markdown file, 2,123 lines long. There’s nothing to build or run: save it, then ask for a page.
Three ways to install
Any agent
Drop it in your repo
Save design.md at the root of your project and point your agent at it from AGENTS.md or CLAUDE.md, so every UI task starts there. This works with Codex, Cursor, Claude Code and any agent that reads your files.
AGENTS.mdFor any UI work, follow design.md. Read its Agent Protocol first.
Claude Code
Install the skill
Put SKILL.md and design.md in one folder under your skills directory. Claude Code loads 71UI when a task involves interface work, or when you type /71ui. If you keep the whole 71UI folder, link it instead.
Terminalmkdir -p ~/.claude/skills/71ui && mv ~/Downloads/SKILL.md ~/Downloads/design.md ~/.claude/skills/71ui/
Or link the folderln -s ~/71UI ~/.claude/skills/71ui
Code
Use the tokens directly
The front matter is a valid DESIGN.md, so Google’s CLI can lint it and export it: a Tailwind v4 theme for code, or DTCG tokens for Figma and Style Dictionary.
Tailwind themenpx @google/design.md export --format css-tailwind design.md > theme.css
Lintnpx @google/design.md lint design.md
Prompts
Prompts that work.
Straight from the file’s Agent Protocol. Name the mode and the playbook, and ask for the token plan first.
- Build
Follow design.md. Build the landing page for Ledgerline, a DeFi yield vault for treasuries. Use playbook C1 and start with the token plan.
- Build an app screen
Follow design.md, playbook F. Build the integrations settings page for our CRM: sidebar, detail header, a sync table and permission rows.
- Restyle
Follow design.md in RESTYLE mode. Make src/app/(dashboard) clean and distinctive without changing any logic. Show a before/after table.
- Review
Follow design.md in REVIEW mode. Audit the pricing page at 390px and 1440px and give me the findings table and a verdict.
- Category switch
Follow design.md. Same product, but restyle the marketing site from playbook A to playbook I (enterprise editorial).
Questions
What people ask first.
Which agents does it work with?
Any agent that can read files in your project: Claude Code, Codex, Cursor, Windsurf, Gemini CLI and others. The file is plain Markdown with YAML front matter, so nothing ties it to one tool.
Does my agent read all 2,123 lines?
No. The Agent Protocol at the top routes each task to the sections it needs: usually the core rules plus one category playbook. Headings are stable anchors, so the agent can search instead of scrolling.
Can I change the tokens?
Yes. Edit the front matter, then lint the file. Components refer to roles like ink-subtle and primary, never raw values, so a new palette flows through without touching markup.
Does it pick light or dark for me?
Each playbook has a default theme chosen for its content, not for category clichés. Say which you want in your prompt and the agent follows that instead.
What’s a “loud idea”?
The one signature move a page spends its boldness on: a display face, a shape, a hero technique or a color block. Everything else stays quiet. Each work in this studio names its loud idea on its case page.
Does following it make a site accessible?
It enforces a floor: AA contrast measured on the real surface, visible focus, 24px minimum targets, reduced motion and semantic HTML, checked by a 24-item Pre-Ship Checklist. It doesn’t replace testing with a keyboard, a screen reader and the people who’ll use your product.
The works
See what it builds.
Fictional products, one playbook each, all planned, built and checked with this file alone.