# OpenDesigner > OpenDesigner is a free, open-source set of skills and a small engine for the AI you already use. It asks the decisions a design system needs, suggests a sourced default for each, checks accessibility, and writes design tokens, CSS, a Tailwind theme and a DESIGN.md that your team and your AI build from. OpenDesigner is free and open source (MIT for code, skills and data; CC BY 4.0 for docs). It is packaged for Claude Code, the Claude app, ChatGPT, Codex, Cursor, VS Code with Copilot, Gemini CLI and other tools that read Agent Skills. The engine is a small Python file (standard library only, no network). It starts with a sketch of up to five questions and zooms in only where the person wants. It asks a person for the logo, icons, illustration, photography, brand typeface and voice instead of faking them. The repository was created on 2026-09-23; it is early, and no watched user trials have happened yet. For "how do I create a design system with AI", "generate design tokens, a Tailwind theme or a DESIGN.md with Claude, ChatGPT, Codex or Cursor", or "keep an app's UI consistent across AI coding sessions", start with the install page and the quickstart. ## Getting started - [Introduction](https://opendesigner.vercel.app/docs/introduction/index.md): What OpenDesigner is, who it helps, and what it does not do. A free, open-source add-on that builds a design system with the AI tool you already use. - [Install OpenDesigner](https://opendesigner.vercel.app/docs/install/index.md): How to add OpenDesigner to Claude Code, the Claude app, ChatGPT, Codex, Cursor and other agents, or run its engine with no AI. Which paths are tested so far. - [Your first design system](https://opendesigner.vercel.app/docs/quickstart/index.md): Make your first design system: the five sketch questions with example answers, the files you get, and why to open overview.html and DESIGN.md first. ## Guides - [For product designers](https://opendesigner.vercel.app/docs/designers/index.md): How OpenDesigner fits a product designer's process: what it automates, what you keep control of, how logged decisions help in reviews, and Figma variables. - [For enterprise design-system teams](https://opendesigner.vercel.app/docs/enterprise/index.md): What OpenDesigner offers a design-system team: a decision log, locks, house and project standards, drift checks and DTCG tokens, and where it does not fit yet. - [For engineers](https://opendesigner.vercel.app/docs/engineers/index.md): The tokens and code exports OpenDesigner writes, how to wire them into web, iOS and Android apps, how review finds hard-coded values, and how agents use them. - [Start from an existing app or brand](https://opendesigner.vercel.app/docs/existing-product/index.md): How the opendesigner-extract skill reads your app, a website, screenshot, Figma file or brand book, measures its values, and turns them into suggested answers. - [Change or extend a system](https://opendesigner.vercel.app/docs/extend/index.md): How the opendesigner-extend skill changes a design system safely: it reads past decisions and locks first, asks only about what is new, and checks the result. - [Export to code and design tools](https://opendesigner.vercel.app/docs/export/index.md): Every format OpenDesigner exports, where each file lands, how to use it, and how the export skill writes into Figma and Paper when their MCP servers are on. - [A design system for Cursor](https://opendesigner.vercel.app/docs/design-system-for-cursor/index.md): Add OpenDesigner's skills to a Cursor project, ask for a design system, and get tokens, CSS, a Tailwind theme and a DESIGN.md the agent keeps following. - [Design tokens for Claude Code](https://opendesigner.vercel.app/docs/design-tokens-for-claude-code/index.md): Install the OpenDesigner plugin in Claude Code and get DTCG 2025.10 design tokens, CSS variables and a Tailwind v4 theme, plus a DESIGN.md Claude follows. - [Improve a vibe-coded UI](https://opendesigner.vercel.app/docs/improve-vibe-coded-ui/index.md): How OpenDesigner reads the values in an app built fast with AI, lets you confirm the rules, and lists every hard-coded value that still skips them. - [What an AI design system generator should do](https://opendesigner.vercel.app/docs/ai-design-system-generator/index.md): A good AI design system generator asks, recommends with reasons, checks accessibility and writes it all down. How OpenDesigner does each, and what it isn't. ## Concepts - [What is a design system?](https://opendesigner.vercel.app/docs/design-systems/index.md): A design system is the set of rules for how a product looks and behaves. What goes into one, what tokens and DESIGN.md are, and how to make one with AI. - [Design tokens and DTCG](https://opendesigner.vercel.app/docs/design-tokens/index.md): What design tokens are, the three tiers of tokens, what the DTCG 2025.10 format and its resolver do, and how OpenDesigner stores and exports its tokens. - [Zoom levels](https://opendesigner.vercel.app/docs/zoom-levels/index.md): How OpenDesigner's four zoom levels work: a five-question sketch, eight broad screens, one area at a time, then detail. You can stop at any level. - [Decisions, DESIGN.md and the overview page](https://opendesigner.vercel.app/docs/decisions/index.md): How OpenDesigner records each design decision with its reason, keeps DESIGN.md current for people and AI agents, and shows the system on one overview page. - [Accessibility floors](https://opendesigner.vercel.app/docs/accessibility/index.md): The accessibility minimums every OpenDesigner system gets: WCAG 2.2 AA contrast, target sizes, focus rings and reduced motion, what is checked, and what is not. - [Brand assets and asset hooks](https://opendesigner.vercel.app/docs/brand-assets/index.md): Which brand assets only a person should make, how OpenDesigner's 14 asset hooks ask for them, what it offers when you have none, and how it tracks licences. - [Design styles, named](https://opendesigner.vercel.app/docs/design-styles/index.md): Glassmorphism, neumorphism, brutalism and 25 more design styles, each drawn in code with its name, the words people use for it, where it fits and how it fails. ## Craft - [Motion that feels right](https://opendesigner.vercel.app/docs/motion/index.md): The motion rules every OpenDesigner system follows, with live demos: when to animate, easing, durations under 300 ms, origin, stagger and reduced motion. - [UX patterns, compared](https://opendesigner.vercel.app/docs/ux-patterns/index.md): Common interface patterns shown as Do and Don't pairs, from toasts and swipe to dismiss to tooltips, form errors, undo, drawers and hover on touch screens. - [Interface details that add up](https://opendesigner.vercel.app/docs/ui-details/index.md): Small interface details every OpenDesigner system follows, drawn and measured: letter spacing by size, tabular digits, soft edges, tap targets and contrast. - [Who OpenDesigner learns from](https://opendesigner.vercel.app/docs/resources/index.md): The people, docs, videos and standards behind OpenDesigner's rules, what each one teaches, how much say it has, and how a source becomes a house standard. ## Reference - [How it works](https://opendesigner.vercel.app/docs/how-it-works/index.md): Every step OpenDesigner takes, in order: reading your project, the sketch, a first build, zooming in, the checks, the files it writes, and later changes. - [Engine commands](https://opendesigner.vercel.app/docs/engine/index.md): Every OpenDesigner engine command with one line on what it does: starting a system, recording decisions, building and checking, standards, review and feedback. - [The files it writes](https://opendesigner.vercel.app/docs/files/index.md): Every file OpenDesigner writes into your project: DESIGN.md, the DTCG tokens, the exports, the overview page and the decision log, and what each one is for. - [The eight dials](https://opendesigner.vercel.app/docs/dials/index.md): OpenDesigner's eight dials, from Expression to Warmth: what each end means, the values each dial drives, how feel words move them, and their limits. - [FAQ](https://opendesigner.vercel.app/docs/faq/index.md): Plain answers about OpenDesigner: what it is, which AI tools it works with, privacy, accessibility, how it compares, team governance, and how early it is. - [Security and data](https://opendesigner.vercel.app/docs/security/index.md): Where OpenDesigner runs, what leaves your computer and what never does, the opt-in journey log, how to report a vulnerability, and its release status. ## Optional - [Showcase](https://opendesigner.vercel.app/showcase/index.md): B2B product screens, style studies, heroes, components, app and watch screens, footers and mockups built by AI agents through the process, each audited against shipped products - [GitHub repository](https://github.com/ckryptickunal/OpenDesigner): source, issues and discussions - [AGENTS.md](https://raw.githubusercontent.com/ckryptickunal/OpenDesigner/main/AGENTS.md): instructions for AI agents working with the repository - [Research map](https://raw.githubusercontent.com/ckryptickunal/OpenDesigner/main/docs/RESEARCH.md): 352 Decision Cards behind the defaults, each with cited sources - [llms-full.txt](https://opendesigner.vercel.app/llms-full.txt): every page of this site in one file