Free and open source · MITNew: the audit, drawn on your own page
Your AI tools know what to build. OpenDesigner tells them how it should look: a design system, one set of rules that every new screen follows, and that it updates when you change your mind.
Two commands in Claude Code, then a few plain questions
/plugin marketplace add ckryptickunal/OpenDesignerDo you have a brand color or a logo?
You#15803D
/* build/css/tokens.css, resolved */ --ds-radius-control: 6px; --ds-size-control-md: 32px; --ds-text-body-md-size: 14px; --ds-color-bg-action-primary: #15803d;
DESIGN.mdButtons and fields have 6px corners; cards have 8px corners.
Marlowe & Pratt Supplies · due Fri 16 Oct
$14,860.00
Works in the AI tool you already use
01On a page you already built
Point OpenDesigner at a page you have. It measures the page, marks each problem on it, and fixes it with your own design system. Every fix says what it makes better.
The page as it is today. Watch the audit, or press Audit to see what it finds.
3 filled buttons; 3.3:1 on Send reminders
Fixing this makes the next step obvious: one filled button, New invoice, and every label readable.
3 filled buttons → 1; 3.3:1 → 6.02:1
2.54:1 on 40 pieces of text
Fixing this makes dates, emails and column titles readable for everyone.
2.54:1 → 7.23:1
left-aligned, proportional digits
Fixing this makes amounts quick to compare, right-aligned with digits of equal width.
proportional → tabular digits
a colored dot
Fixing this makes status clear to everyone, including people who can't tell red from green: each one says Paid, Due or Overdue.
a dot → a label and an icon
20 x 20 px, "Send"
Fixing this makes row actions easy to hit, and each button names its invoice for screen readers.
20 px → 32 px
3 corner radii, 5 text sizes and 12 colors off Merriweft's tokens
Fixing this makes the page look like one product: every corner, size and color comes from Merriweft's tokens.
20 values off the tokens → 0
$112.5k shown twice; 4 bars, no values, 8 px labels at 1.47:1
Fixing this makes one place for each number, and a chart you can read: each week's total against September's average.
$112.5k twice → once; no values → 4
Real output from the review skill on an invented invoicing app. Both pages are live HTML, not pictures: probe.js measured them before and after, and each box is measured on the page as drawn. Laid out at 1200 px and scaled to fit. Photo: Annie Spratt on Unsplash. Open the full report · How it was made
02The problem
One page gets rounded buttons, the next gets square ones, and a new blue appears. People notice: they judge how a page looks in 17 to 50 milliseconds, and simple, familiar screens are the ones they rate most appealing (research).
A copy in every tool
Each tool keeps its own corner value. Each new screen makes its own small choice, and the copies drift apart.
One source that every tool reads
The agreed value lives in one token file. Designers, engineers and AI coding tools all read the same number.
03The fix
OpenDesigner turns a few plain answers into rules for color, type, spacing, corners and motion. Here are three products, each made from five answers.
The five answers
What the engine wrote
#E0457B stays your brand color, but white text on it reads at only 3.96:1, and the system's dark text at 3.93:1. So buttons use #d13c71, which reads at 4.57:1.
Mia and Sam · 20 minutes a day
12-day streak
The five answers
What the engine wrote
Your color stays exact on buttons: white text on #1e3a8a reads at 10.36:1.
Your vehicle
The five answers
What the engine wrote
Your color stays exact on buttons: white text on #15803d reads at 5.02:1.
Marlowe & Pratt Supplies · due Fri 16 Oct
$14,860.00
Real engine output (site/demo_systems.py), nothing tuned by hand. Each system also has dark mode, three densities and reduced motion. Photo: Sean Fahrenbruch on Unsplash.
04Real screens
B2B screens built by AI agents through OpenDesigner and reviewed by the maintainer. Every brand is invented, and much of the identity work was done outside the tokens.
Photos: Photoholgic, Annie Spratt, Harshal Tandel on Unsplash.
05How it works
It reads your CSS, Tailwind config, tokens, logo and fonts, and never asks what they already answer.
What you're making, who it's for, where it runs, how it should feel, and your brand color.
It checks contrast, target sizes, focus and motion, then saves the rules as files in your project.
$ engine.py build Passes: no errors. Checked 164 color pairs in every mode, 12 mode combinations and 427 tokens.
Your AI reads DESIGN.md before changing the interface, and a review flags any value that drifted.
$ engine.py review card.css:1 border-radius: 7px → use var(--ds-radius-container)
06What you can build
One type scale, one spacing rhythm, one set of buttons. A new page looks like it was always there.
Your first design systemOne system exports to CSS, Tailwind, Swift and Jetpack Compose, so every platform shares one look.
Export to codeCompact rows, tabular numbers and hairline separators keep dense tables and forms easy to scan.
For engineersA decision log, locked values and house standards. Every change records why it was made.
For design-system teams07Why it stays consistent
Every value records how it was set and why. Locked values change only with the owner's yes.
D-0056 · dials.roundness = 75
chosen supersedes D-0033
“Use iOS style rounded edges with iOS kerning everywhere instead of sharp corners.”
WCAG 2.2 AA contrast, 24 px targets, focus rings and reduced motion: a floor, not a certificate.
Point it at a website, screenshot, Figma file or repo. It keeps the structure, never another brand's identity.
WebsiteScreenshotFigma fileRepositoryBrand book
It asks you for the logo, photos, typeface and voice, and never fakes them.
Logo · Not enough informationVoice guide · Not enough information
Glassmorphism, bento, risograph, Swiss: each style is named, shown and mapped to settings.
No account and no server. The engine is one Python file with no network calls.
$ python3 engine.py --help … stdlib only, no network
The same answers always give the same tokens and exports, for your code, Figma and your next AI session.
DESIGN.mdyour rules in plain wordsopendesigner/tokens/the source, DTCG 2025.10build/css/, build/tailwind/CSS and Tailwind v4build/figma/Figma variablesbuild/swift/, build/compose/iOS and Android
08Learn the craft
The rules come from people who build loved interfaces, such as Emil Kowalski. See each one live, with its source.
Easing, timing and where things enter from, shown live.
Open the guideSide-by-side choices for toasts, drawers, errors and touch.
Open the guideThe small things that add up: radii, numbers, borders, focus.
Open the guideThe people and references behind the house standards.
Open the guide09Get started
You need your own AI tool. Claude Code, the Claude app and other agents also need Python 3.10 or newer; ChatGPT needs nothing installed.
Add the plugin, then ask for a design system in your project.
/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesignerThen say: “Create a design system for this project.”
Build the skill zip, then upload dist/opendesigner.zip under Customize > Skills. Code execution must be on.
git clone https://github.com/ckryptickunal/OpenDesigner && cd OpenDesigner
python3 tools/build_dist.py Then, in a chat: “Create a design system for my app.”
These tools read skills from .agents/skills/ in your project.
git clone https://github.com/ckryptickunal/OpenDesigner
mkdir -p your-project/.agents/skills
cp -R OpenDesigner/.agents/skills/opendesigner* your-project/.agents/skills/ Then ask your agent: “Create a design system for this project.”
No install: a Project with an instructions file and five knowledge files from chatgpt-project/ in the repository.
1. Create a Project.
2. Paste the part of chatgpt-project/instructions.md below its line into the Project instructions.
3. Upload the five files in chatgpt-project/knowledge/. Then: “Create a design system for my app.”
No AI needed: Python 3.10 or newer, and nothing else to install. The same answers give the same tokens and exports.
git clone https://github.com/ckryptickunal/OpenDesigner
python3 OpenDesigner/skills/opendesigner/scripts/engine.py sketch --name "Acme" --feel friendly,minimal
python3 OpenDesigner/skills/opendesigner/scripts/engine.py buildThen open opendesigner/overview.html.
10Tested in the open
AI agents do real tasks with and without OpenDesigner. The engine builds systems from 18 fixed briefs. Our own checkers face pages with planted mistakes. When a test fails, the page says so.
Agent evals
91% with OpenDesigner
58% without it, on the same 8 tasks
Design evals
162 of 162 required checks
18 briefs; 50 of 54 stricter quality checks
Checker evals
57 of 59 planted mistakes caught
5 checkers; 1 false alarms on clean pages
Showcase audit
34 of 40 rebuilt pieces pass
before: ours lost 30 of 37 blind pairs
Status
The most useful help right now: try it on a real project and tell us where it breaks.
ContributeHow to contributeGood first issuesReport a problem
Live from GitHub. Tell us where it breaks: that is the most useful thing right now.
Talk it through
A free 20-minute call with Kunal, OpenDesigner's maintainer, to see whether it fits your product and where to start. OpenDesigner stays free; you never need a call to use it.
FAQ
OpenDesigner is a free, open-source add-on for AI tools like Claude, ChatGPT, Codex and Cursor. It helps you make a design system: the rules for how your app looks, like colors, text sizes, spacing, corners and buttons. It reads your project, asks a few plain questions, suggests an answer for each with a reason, checks the result, and saves the rules as files in your project.
The code, skills and data are under the MIT licence. The written research and docs are under CC BY 4.0. You need your own AI tool, which may cost money. See the introduction.
Part of it is written instructions your AI follows, yes. The math is done by a Python engine. It works out color ramps, type and spacing scales, contrast checks and every export. The same answers give the same files. The questions follow a fixed order, so nothing is asked before the things it depends on. You can also run the engine with no AI at all. See How it works.
It is packaged for Claude Code, the Claude app, ChatGPT (as a Project), and for Codex, Cursor, VS Code with Copilot, Gemini CLI and other agents that read skills from .agents/. A recorded test run in each of those tools is still on the to-do list. See Install.
The engine runs on your computer, uses Python's standard library and makes no network calls. Your chat still goes to whichever AI provider you use, as with any prompt. The illustration skill searches open-licence art sites, but only when you use it. In the Claude app, the scripts run in Claude's code-execution sandbox.
The private log of your steps is off unless you say yes, and it stays in your project. Anonymous reports to the maintainers are a separate yes, and no server collects them yet, so nothing is sent today. See the privacy page.
Try it
One set of rules, and every screen after that follows it.
Photo: Marcel Strauß on Unsplash