# preset AI

> Make AI fluent in your design system. preset AI is the design governance layer: it sits between your design system and the AI coding tools generating UI from it, so agents can read it, defer to it, and be validated against it in real time.

## What preset AI does

preset AI solves the problem of AI coding tools (Cursor, Claude Code, GitHub Copilot, Windsurf) ignoring design systems when generating code. Instead of producing visually plausible but semantically wrong output, AI tools connected to preset AI generate code that uses your actual tokens, components, and patterns.

Key capabilities:
- **MCP Gateway**: 60+ design system tools that AI coding assistants query in real time
- **Semantic Presets**: Intent-based component configurations (e.g., "destructive-action" instead of raw prop combinations) that encode usage guidance, constraints, and accessibility rules
- **Token Studio**: Import, validate, and curate design tokens from Figma, Storybook, CSS, Tailwind configs, or Git repos
- **Theme Studio**: Visual theme editor with live preview and token-aware constraints
- **Import Pipeline**: Sync from Figma Variables, scan Storybook, connect Git repos, or upload token files
- **Design System Layers**: Product-specific overrides on a shared base system

## Connect an AI tool

preset AI is an MCP server at `https://mcp.presetai.dev/mcp`. OAuth is the recommended sign-in: no config files or API keys to manage. API keys and GitHub Actions OIDC are also supported.

Claude Code: `claude mcp add --transport http preset https://mcp.presetai.dev/mcp`

- [Agent resources](https://www.presetai.dev/docs/agent-resources): Every surface AI tools can read: MCP server, llms.txt, per-page markdown
- [Claude Code](https://www.presetai.dev/docs/platform/integrations/claude-code)
- [Cursor](https://www.presetai.dev/docs/platform/integrations/cursor)
- [Codex](https://www.presetai.dev/docs/platform/integrations/codex)
- [CodeRabbit](https://www.presetai.dev/docs/platform/integrations/coderabbit)
- [v0](https://www.presetai.dev/docs/platform/integrations/v0)
- [Figma](https://www.presetai.dev/docs/platform/integrations/figma)

## Supported tools and libraries

AI tools: Cursor, Claude Code, OpenAI Codex, GitHub Copilot, Windsurf, CodeRabbit, v0, and any MCP-compatible assistant
Component libraries: shadcn/ui, Material UI, Ant Design, Chakra UI, Tailwind CSS
Import sources: Figma Variables, Storybook, GitHub/GitLab repos, CSS files, Tokens Studio JSON

## Docs

- [Documentation](https://www.presetai.dev/docs): Scan a repo, set up enforcement, connect an AI tool
- [Docs llms.txt](https://www.presetai.dev/docs/llms.txt): Manifest of every docs page with a one-line summary
- [Docs llms-full.txt](https://www.presetai.dev/docs/llms-full.txt): The full docs corpus in one file
- [Scan your repo](https://www.presetai.dev/docs/scan)
- [Set up enforcement](https://www.presetai.dev/docs/enforce)
- [Guides](https://www.presetai.dev/guides/): The loop, start to finish: connect a design system, structure it into rules, install preset AI for your AI coder, and catch drift

## Writing

- [Generate vs Govern](https://www.presetai.dev/writing/generate-vs-govern/): AI generates the UI. Your design system has to live with it.
- [Forbidden, suggested, resolved](https://www.presetai.dev/writing/forbidden-suggested-resolved/): Why design-system guardrails want three tables, not one
- [Tools that suggest the next tool](https://www.presetai.dev/writing/tools-that-suggest-the-next-tool/): How MCP responses tell an AI agent what to do after a violation
- [Reconciliation that converges](https://www.presetai.dev/writing/reconciliation-that-converges/): Syncing design-system artifacts between source documents and a canonical store without losing data

## Pages

- [Homepage](https://www.presetai.dev/): Overview and early access
- [Platform](https://www.presetai.dev/platform/): Full feature breakdown of MCP Gateway, Token Studio, Theme Studio, and Semantic Presets
- [Integrations](https://www.presetai.dev/integrations/): One MCP server for every AI coding tool your team uses
- [Governance](https://www.presetai.dev/governance/): Keeping every agent fluent in your design system as it evolves
- [Observability](https://www.presetai.dev/observability/): Compliance, drift, and coverage across your design system
- [Pricing](https://www.presetai.dev/pricing/): Free, Starter, Pro, and Enterprise plans
- [Changelog](https://www.presetai.dev/changelog/): What shipped, week by week
- [Security](https://www.presetai.dev/security/)
- [Trust](https://www.presetai.dev/trust/)
- [Privacy Policy](https://www.presetai.dev/privacy/)
- [Terms of Service](https://www.presetai.dev/terms/)

## Company

preset AI is built by fndd, LLC. Contact: hello@presetai.dev