# OpenDesigner docs

- [Introduction](https://opendesigner.vercel.app/docs/introduction/): 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/): 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/): 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.
- [For product designers](https://opendesigner.vercel.app/docs/designers/): 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/): 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/): 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/): 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/): 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/): 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/): 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/): 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/): 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/): 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.
- [What is a design system?](https://opendesigner.vercel.app/docs/design-systems/): 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/): 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/): 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/): 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/): 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/): 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/): 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.
- [Motion that feels right](https://opendesigner.vercel.app/docs/motion/): 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/): 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/): 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/): 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.
- [How it works](https://opendesigner.vercel.app/docs/how-it-works/): 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/): 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/): 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/): 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/): 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/): 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.