Book a callGitHub1

Getting started01/03

Introduction

Updated · Edit on GitHub

OpenDesigner is a free, open-source (MIT) add-on that helps you make a design system with the AI tool you already use, such as Claude, ChatGPT, Codex or Cursor. A design system is the set of rules for how your app looks: colors, text sizes, spacing, corners, depth, motion and parts like buttons. OpenDesigner 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.

1 · ReadsYour project firstCSS, Tailwind config, package.json, token files, logo and font files. It doesn't ask what a file already answers.
2 · AsksUp to 5 questionsOne at a time, each with a suggested answer and its reason. Zoom in only where you care.
3 · ChecksFixed rulesContrast, target sizes, focus rings and reduced motion. Errors block the build.
4 · WritesFiles you keepDTCG tokens, CSS variables, a Tailwind theme, DESIGN.md and a log of every decision with its reason.
The four steps of every run: it reads what your project already answers, asks the rest one question at a time, checks the result with fixed rules, and writes the files your team and your coding agents build from.

What it does

  • It reads your project first. It looks at your CSS, Tailwind config, package.json, token files, logo and font files. It doesn't ask what a file already answers.
  • It starts with a sketch. Up to five questions give you a complete first version.
  • You zoom in only where you care. Go deeper on color, text, spacing or motion, or stop. See Zoom levels.
  • It checks its own work. Fixed rules check contrast, target sizes, focus rings and reduced motion. Errors block the build.
  • It writes files you keep. Design tokens in the open DTCG 2025.10 format, CSS variables, a Tailwind v4 theme, Figma variables, Paper tokens, and Swift and Jetpack Compose files.
  • It writes down every decision and its reason, in a log and in a DESIGN.md that people and AI tools can read.
  • It asks you for what a person should make, such as a logo, icons, illustration, photos or a brand typeface.

Who it is for

Students and beginners

You don't need to know design words. It asks one question at a time, suggests an answer, and explains each new term in one line.

Sketch · Q-aud-01one question per message

Who uses it, and how often: all day for work, often, or now and then on the go?

Density is how tightly things are packed on the screen, from roomy to tight. Designers: compact, comfortable or spacious · Code: semantic.density.{compact|comfortable|spacious}

A
Often, in an everyday app recommended
Body text 16 px and controls 36-40 px: balanced for an everyday app.
B
All day, in tools full of data
C
Now and then, on a phone or in public
Pick one, say "show me", or tell me what you want.
One question from the sketch, as the interview shows it: the plain meaning of a new term, the suggested answer first with its reason, the other options, and room to answer in your own words. Photo: Sean Fahrenbruch on Unsplash.

Product designers

The engine does the repetitive work: scales, tokens, states and contrast checks. You keep direction, taste and the assets only a person should make. See For product designers.

Engineers

You get token files and code to import, a DESIGN.md your coding agents can follow, and a command that finds hard-coded values. See For engineers.

Design-system teams

You get a decision log with reasons, locked decisions, house and project standards, and open token files. It is early for teams: nobody has run a team pilot yet. See For enterprise design-system teams.

People with an app already built

It reads what exists, fills the gaps, and leaves a system that later changes can follow. See Start from an existing app or brand.

What it is not

  • A canvas design tool. It doesn't draw screens the way Figma does. It writes the rules, and your AI builds with them.
  • A logo, icon, illustration or photo maker. It asks you for these. The illustration skill can find and recolor open-licence art. It never fakes a logo.
  • A replacement for designers or for user testing. The accessibility checks set a minimum. Automated checks catch only part of WCAG, so people who use assistive technology should still test your app.
  • A hosted service. There is no account, web app or server. It runs inside your AI tool, and the engine runs on your computer. In the Claude app, it runs in Claude's code-execution sandbox.

What you need

  • Your own AI tool and plan. OpenDesigner is free, but the AI is not part of it. Your chat goes to your AI provider, as with any prompt.
  • Python 3.10 or newer for the engine. In the Claude app, code execution must be on.

The eight skills

A skill is a set of instructions your AI tool loads when a task needs it.

  • opendesigner creates a design system with you.
  • opendesigner-extract learns from a website, screenshot, Figma file, repo or brand book.
  • opendesigner-extend changes or extends a system you already made.
  • opendesigner-export gets the system into code, Figma or Paper.
  • opendesigner-illustrate finds open-licence illustrations, ranks them and recolors them to your tokens.
  • opendesigner-review checks a built interface like a careful user would: every screen size and theme, scrolling, hover, keyboard and motion, with measured spacing, type, fonts and contrast, and evidence for each finding.
  • opendesigner-paint makes original art painted in code in your palette: hero films, loops and still paintings in styles such as watercolour, sketch or woodcut.
  • opendesigner-preflight checks anything visual before you export or share it (a page, a deck, a video, a card) for the small mistakes that make it look cheap or wrong.

How early it is

  • The repository was created on 2026-09-23. Version 0.1.0 is planned, and there is no tagged release yet.
  • No watched user trials have happened yet. The usability tests so far were role-played by AI testers.
  • The packaging for each AI tool is in the repository, but a recorded test run in each tool is still to do.
  • If something breaks or confuses you, please open an issue. That is the most useful help right now.

Where to go next