your files
- DESIGN.md colors, type, rules
- AGENTS.md how to build
- tokens.css every value
What you get back
A small window lists three files, DESIGN.md, AGENTS.md and tokens.css, and a ready badge appears at the end.
Free tool, no sign-in
Write a DESIGN.md your AI agent can follow
From your website or a few answers. Get DESIGN.md, AGENTS.md and tokens.css, free to copy or download.
Loading an example result…
How to read this
What the result means.
It writes the three files an AI coding agent needs to build UI that matches your brand: DESIGN.md (the full spec), AGENTS.md (the rules) and tokens.css (the values). It starts from your site’s brand color, fonts and corners, or from a short description, and fills in the rest with UIX’s engine.
- DESIGN.md
- The full spec: color scales and what each step is for, light and dark tokens, type scale, spacing, radius, shadows and the component list. Your agent reads it before building UI.
- AGENTS.md
- The short rules: use these tokens and never raw hex, use these components, keep these contrast pairs. Claude Code, Cursor, Codex and others read AGENTS.md on their own.
- tokens.css
- The same tokens as CSS variables, for light and dark. Import it once and every color, font and radius is a variable.
- Taken from your site
- The line above the file says what came from your page: the brand color (from buttons and links), the fonts and the corner style. Everything else is UIX’s.
- Corner styles
- Sharp, balanced, soft, round or pill, picked from the radius your buttons and fields use (about 2, 8, 12, 16 or 20px for a medium corner).
- Contrast
- Every text color in the files passes WCAG AA (4.5:1) on the background it’s meant for, in light and dark.
How it works
Three steps, all in your browser.
Your page is fetched once, then measured here. The report isn’t saved anywhere.
- Pick where to startPaste your website, or switch to “From a few answers” and describe what you’re building.
- Press Write my filesFrom a website it takes 5 to 15 seconds. From answers it’s instant.
- Copy or download, then commitSwitch between the three files, copy or download each one, and put them in the root of your project.
Questions
Questions people ask.
Short answers about this tool, your data and what it can’t see.
Ask us anythingWhat is DESIGN.md?
A plain Markdown file that describes your design system: colors, type, spacing, components and the rules for using them. AI coding agents read it so they build UI that matches your brand instead of guessing.
What is AGENTS.md?
A file in the root of your project with instructions for coding agents. Claude Code, Cursor, Codex and others read it on their own. The one here tells them to follow DESIGN.md and use your tokens.
Is it free?
Yes, all three files, with no account. If you want the system as hosted CSS, a shadcn theme, React components, Figma variables or an MCP server your agent can ask, that’s what UIX is for.
What is the example?
Files for a made-up dental clinic booking app (“calm, trustworthy”, brand color teal), written by the same engine your files come from.
Can I change it later?
Yes. Open the system in UIX to change colors, fonts and corners and export the files again, or edit the Markdown by hand.
Start with one color.
Free to start. Your designers, your developers and your AI agent get one system to follow.
Figma
tokens.css
Agent