G
YouTube TikTok Games
Book a callGitHub142

Design systems with your own AI.

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 36 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.OverviewHow it worksThe whole system on one page: two ways in, the engine and the files you keep.

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 36 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. 10Good practices: set your AI up to design wellGuides
  11. 11Get found in search and AI answersGuides
  12. 12Use the component libraryGuides
  13. 13A design system for CursorGuides
  14. 14Design tokens for Claude CodeGuides
  15. 15Make a vibe-coded app look professionalGuides
  16. 16What an AI design system generator should doGuides
  17. 17What is a design system?Concepts
  18. 18Design tokens and DTCGConcepts
  19. 19Zoom levelsConcepts
  20. 20Decisions, DESIGN.md and the overview pageConcepts
  21. 21Accessibility floorsConcepts
  22. 22Brand assets and asset hooksConcepts
  23. 23Design styles, namedConcepts
  24. 24Motion that feels rightCraft
  25. 25UX patterns, comparedCraft
  26. 26Interface details that add upCraft
  27. 27Who OpenDesigner learns fromCraft
  28. 28Empty, loading and error statesCraft
  29. 29How it worksReference
  30. 30Engine commandsReference
  31. 31The files it writesReference
  32. 32The eight dialsReference
  33. 33FAQReference
  34. 34Security and dataReference
  35. 35Evals: how we test OpenDesignerReference
  36. 36Contribute to OpenDesignerReference

Status

Where it stands

  • The repository was created on 2026-09-23. It is early, and one person maintains it.
  • Version 0.3.1 came out on 11 November 2026. 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?

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.

Code, skills and data are MIT; the written research and docs are CC BY 4.0. You need your own AI tool, which may cost money. See the introduction.

Isn't this just a prompt?

Partly: the skills are written instructions your AI follows. A Python engine does the math, from color ramps and type scales to contrast checks and every export, and the same answers give the same files. You can 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 Codex, Cursor, VS Code with Copilot, Gemini CLI and other agents that read .agents/skills/. A recorded test run in each of them is still to do. See Install.

Is OpenDesigner a Claude skill?

Yes. In Claude Code the plugin installs its nine skills, and in the Claude app you upload them as a skill zip; the same skill folders also work in Codex, Cursor and other agents that read skills. See Install.

How do I install OpenDesigner?

In Claude Code it takes two commands and a new session; the Claude app, ChatGPT, Codex, Cursor and other agents each have a short path too. Then open your project and say "Create a design system for this project." See Install.

For developers
/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesigner