Book a callGitHub1

OpenDesigner docs: build a design system with the AI you already use, and keep it consistent.

It asks the decisions a design system needs, one at a time, and suggests a sourced default for each. It checks contrast and writes design tokens, CSS, a Tailwind theme and a DESIGN.md that your team and your coding agents build from. Free and open source.

Install Read the introduction
Claude Code/plugin marketplace add ckryptickunal/OpenDesigner

Works withClaude Code, the Claude app, ChatGPT, Codex, Cursor and other tools that read Agent Skills.

Decision 5 of 8 · ShapeZoom 1 · broad

How soft should corners feel: square, slightly rounded, rounded, or pill?

Square0–2 px
Subtle4–6 px
Soft8–12 px
PillRound
SuggestedCorners of 4–6 px: businesslike. The safest default across audiences; containers get 8–12 px, and focus rings follow the corners.
Pick one, or answer in your own words. A suggestion is never recorded as your answer.
build/css/tokens.cssBuilt
--ds-radius-control: var(--ds-radius-6);
--ds-radius-container: var(--ds-radius-8);
--ds-radius-overlay: var(--ds-radius-12);
engine.py review1 drift
card.css:1 border-radius: 7px
→ use var(--ds-radius-container)
One decision at a time: a real question from the shape stage (the suggestion's reason shortened), its four options drawn as they would look, the suggested one with its reason, then what the engine writes from the answer and what it flags later. Photo: Philipp Hubert on Unsplash.

Documentation

Start here

All 30 pages
Getting startedInstallTwo commands in Claude Code, or a skills folder in other tools.Getting startedYour first design systemFive questions, the files you get, and what to look at first.GuidesFor design-system teamsDecision log, locks, standards, drift checks and a pilot plan.ReferenceHow it worksFrom your answers to tokens, exports and checks.

Process

Where it fits in your process

  1. 01

    Start

    Answer up to five questions in your AI tool, or point it at the app or brand you already have. You get a working draft of color, type, spacing, corners, depth and motion, each with its reason.

  2. 02

    Use

    Import the tokens, the CSS variables or the Tailwind theme. Coding agents read DESIGN.md before they touch the interface, so new screens follow the same rules.

  3. 03

    Keep

    Changes go through a decision log that records who set what and why. A review command finds colors, sizes and radii in the code that drifted from the tokens.

01 · Start5 questions
What are you making?Studyhall
Who is it for?regularly
Where does it run?web, iPhone
How should it feel?calm, friendly
A brand color or logo?#167874
Each comes with a suggested answer and its reason.
02 · UseBuilt
--ds-space-16: 16px;
--ds-radius-control: var(--ds-radius-6);
--ds-color-brand-seed: #2338ff;
Course name
Save planCancel
Your UI, and your coding agent, read the same tokens.
03 · Keep2 drifts
card.css:1  #f3f4f6
  → use var(--ds-color-surface-sunken)
card.css:1  padding: 13px
  → use var(--ds-space-12)
D-0025raw.brandColor = "#2338FF"chosen
Every change lands in the decision log with its reason.
The three places it fits: the questions at the start (the quickstart's Studyhall example), the files your interface and your coding agents build from, and the review that finds values drifting from the tokens.

Who it is for

What it changes for you

Two people sketching a page layout on a whiteboard
Photo: Kaleidico on Unsplash

Product designers

  • Hand the scales, states and contrast checks to the engine, and keep the direction yourself.
  • Every choice has a reason you can show in a design review.
  • Export Figma variables so the design file and the code use the same names.
Guide for product designers
Hand-drawn screen wireframes and sticky notes on an office glass wall
Photo: NEW DATA SERVICES on Unsplash

Design-system teams

  • A decision log with reasons and who set each value. Lock what must not drift.
  • House and project standards apply automatically; the extend skill reads decisions before any change.
  • DTCG 2025.10 tokens fit existing token pipelines. It's new: no team pilots yet.
Guide for design-system teams
Rows of paint color swatches on a shelf
Photo: Declan Sun on Unsplash

Engineers

  • CSS variables, a Tailwind v4 theme, Swift and Compose files from one source.
  • DESIGN.md and an AGENTS.md note keep coding agents on the system.
  • engine.py review names the token to use instead of a hard-coded value.
Guide for engineers

Photos: Kaleidico, NEW DATA SERVICES, Declan Sun on Unsplash.

After the first run

What you have after the first run

Files in your project, readable by people and AI tools. Nothing lives on a server, and the same answers always give the same tokens and exports.

  • DESIGN.mdyour rules in plain words
  • opendesigner/tokens/DTCG 2025.10
  • build/css/tokens.cssCSS variables
  • build/tailwind/theme.cssTailwind v4
  • build/figma/Figma variables
  • build/swift/, build/compose/iOS and Android
  • overview.htmlthe system on one page
  • decisions.mdevery choice and why
The overview page generated for OpenDesigner's own brand, with each area marked Chosen, Default or Not enough information.
A real overview page: what you chose, what is still a default, and what only you can give, like a logo. Photo: Annie Spratt on Unsplash.

For teams

For design-system teams

A written record your team and your AI tools build from, kept as files in your repository. It is early for teams: nobody has run a team pilot yet, and there is no hosted service and no SSO.

Read the team guideSecurity and data

  • A decision log with the reason and who set each value, append-only.
  • Locked values that the skills refuse to change without the owner's consent.
  • House and project standards applied on every build, each with its reason.
  • A drift check that names the token to use instead of a hard-coded value.
  • DTCG 2025.10 tokens with a resolver for light and dark, density and motion.
  • Runs locally, with no account and no server: your repository's access control applies.

Every page

All 30 pages

  1. 01IntroductionGetting started
  2. 02Install OpenDesignerGetting started
  3. 03Your first design systemGetting started
  4. 04For product designersGuides
  5. 05For enterprise design-system teamsGuides
  6. 06For engineersGuides
  7. 07Start from an existing app or brandGuides
  8. 08Change or extend a systemGuides
  9. 09Export to code and design toolsGuides
  10. 10A design system for CursorGuides
  11. 11Design tokens for Claude CodeGuides
  12. 12Improve a vibe-coded UIGuides
  13. 13What an AI design system generator should doGuides
  14. 14What is a design system?Concepts
  15. 15Design tokens and DTCGConcepts
  16. 16Zoom levelsConcepts
  17. 17Decisions, DESIGN.md and the overview pageConcepts
  18. 18Accessibility floorsConcepts
  19. 19Brand assets and asset hooksConcepts
  20. 20Design styles, namedConcepts
  21. 21Motion that feels rightCraft
  22. 22UX patterns, comparedCraft
  23. 23Interface details that add upCraft
  24. 24Who OpenDesigner learns fromCraft
  25. 25How it worksReference
  26. 26Engine commandsReference
  27. 27The files it writesReference
  28. 28The eight dialsReference
  29. 29FAQReference
  30. 30Security and dataReference

Status

Where it stands

  • The repository was created on 2026-09-23. It is early, and one person maintains it.
  • There is no tagged release yet: 0.1.0 is planned. The engine's tests pass on the maintainer's computer; no CI runs are recorded yet.
  • No watched user trials have happened yet. The usability tests so far were role-played by AI testers, and a recorded run in every AI tool is still on the list.
  • AI agents built the showcase through the process, and weak pieces were rebuilt after review. See them, with the findings.

FAQ

Questions

All questions

What is OpenDesigner?

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.

Isn't this just a prompt?

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.

Which AI tools does it work with?

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/skills/. A recorded test run in each of those tools is still on the to-do list. See Install.

Does it send my code or data anywhere?

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.

How long does it take?

The sketch is up to five questions. Its planned length is about 3 minutes, but nobody has timed real people yet. The engine part takes about two seconds. After that, you zoom in only where you want to. See Zoom levels.