Claude Code integration

Claude Code generates and edits code. preset AI makes that code design-system-aware.

Claude Code is Anthropic's coding agent: a CLI binary that reads your repo, writes code, and runs tools. On its own, the agent has no vocabulary for your design system: it sees bg-[#0a0a0a] and might propose semantic-looking alternatives that don't actually exist in your token catalog. Connect preset AI's MCP server and Claude Code validates against your tokens, cites your rules by name, and proposes fixes from your canonical preset library.

This page is the setup config. For the operating loop, prompting pattern, and team policy, see Claude Code operating guide.

CLAUDE.md setup

Claude Code reads CLAUDE.md at the start of each session. To make sure the agent calls preset AI on UI work, append this block to your project's CLAUDE.md (or create one if it doesn't exist):

## preset AI MCP: design system enforcement

When working on UI components, Tailwind classes, CSS, or design tokens:

1. Before writing or suggesting UI code, call `validate_code` from the preset AI
   MCP server to check it against the active design system. Cite the returned
   `ruleId` and `fix` fields verbatim in your response.
2. When the user shares a hex color, px value, or arbitrary Tailwind value
   (e.g. `bg-[#0a0a0a]`, `p-[17px]`), call `resolve_value` to get the
   canonical token name or closest alternatives.
3. When generating new components or files, call
   `get_active_constraints(filePath)` first to learn path-scoped rules.
4. Before introducing a new utility or class, check `get_forbidden_primitives()`.

Always cite preset AI rule names (e.g. `no-uppercase`, `no-inline-hex-color`,
`ai-slop-arbitrary-spacing`) when explaining design system violations.

This pattern was validated on Cursor (.cursor/rules/preset.mdc) and Codex (AGENTS.md): CLAUDE.md is the Claude Code equivalent.

Install the skill family

The MCP connection above lets the agent call preset AI when it judges a tool relevant. The skill family goes further: it materializes your design system into Claude Code skills that load before the agent writes UI, enforce on write, and answer on demand. It is the same shape as Stripe's stripe-best-practices skill, except the payload is your live design system, not static vendor docs.

Install

Run this in your project, with preset AI connected (OAuth, or a pk_live_ key for headless use):

preset skills export --skill-family preset

This fetches your live design system and writes the skills into .claude/skills/:

preset-best-practices/: the guidance skill. Loads your ranked principles, named anti-patterns, forbidden primitives, and recommended presets when you build or edit UI. You do not invoke it; it fires on UI work.
preset-check/: /preset:check [file] validates a file against your design system.
preset-tokens/: /preset:tokens shows your token reference.
preset-explain/: /preset:explain <principle> explains one of your principles in full.
preset-propose-preset/: /preset:propose-preset proposes a new preset from the current component.

A manifest.json records what was materialized. preset doctor reads it offline to report the materialized skills, their age, and the template version; to check the snapshot against your live design system, use preset skills export --skill-family preset --check.

Verify

Open a UI file (a .tsx component) and ask Claude Code to make a change. The preset-best-practices skill loads your doctrine into the agent's context before it writes.
Run /preset:tokens in Claude Code. It returns your token reference on demand.
Run preset doctor. It reports the materialized skills, their age, and the current enforcement mode.

The enforcement lever

One field in .presetrc governs how strict the family is, consistently across the skill, the write-time hook, and CI:

// .presetrc
{ "designSystem": "your-ds-slug", "mode": "advisory", "skipPaths": ["src/legacy/**"] }

advisory (the default): the agent sees findings; nothing blocks.
warn: findings plus a "not yet fixed" note; still nothing blocks.
enforce: the PreToolUse hook blocks a write that carries an error-severity violation, and CI fails the check.

Start on advisory to feel the gate without friction, then flip to enforce when your team is ready. preset doctor nudges you once the family has been advisory for a while. preset init seeds .presetrc at advisory for you.

Refresh after design system changes

The materialized body is a snapshot. When you change principles, tokens, or rules, re-run the export:

preset skills export --skill-family preset

preset doctor is offline: it reports the snapshot's age and template version and reminds you to verify, but it does not detect principle or token edits on its own. The live check is preset skills export --skill-family preset --check, which exits non-zero when the snapshot is behind your design system, so it doubles as a CI gate.

Troubleshooting

The skill is not firing on UI work. Confirm .claude/skills/preset-best-practices/SKILL.md exists (re-run the export if not), and that you are editing a UI file (.tsx / .jsx / .vue / .svelte under a components path). The skill deliberately skips tests, docs, config, and server-only files.

The hook is not blocking in enforce mode. The PreToolUse hook ships with the plugin and shells to the preset CLI, so make sure preset is on your PATH (curl -fsSL https://presetai.dev/install.sh | sh) and .presetrc mode is enforce. If preset AI is unreachable, the hook falls back to a local check and never blocks on a connection failure.

A slash command says it cannot reach preset AI. The utilities work offline against the materialized body and fall back to the live MCP when available. If a command needs live data (token values, the freshest principle copy) while you are offline, re-run the export when you are connected.

To declare the principles and anti-patterns this family materializes, see the design system's Principles section in the preset AI dashboard.

What this catches

Tested end-to-end. Sample violations and the agent's response when validate_code fires:

Violation	preset AI MCP returns	Claude Code agent renders
`<div className="bg-[#0a0a0a]">`	`no-inline-hex-color`, `severity: warning`, fix: "Use CSS variable"	"Hit on `#0a0a0a`: use `var(--color-surface)`"
`<span className="uppercase tracking-widest">BETA</span>`	`no-uppercase`, hits on `uppercase` and `tracking-widest`	"Use sentence case + size/weight hierarchy: `text-xs font-medium text-[var(--color-text-secondary)]`"
`<div className="p-[17px]">`	`ai-slop-arbitrary-spacing`, `forbidden_primitive`	"Off-grid spacing: use `p-4` from the spacing scale"
`style={{ backgroundColor: '#00aaff' }}`	`no-inline-hex-color`	"Saturated cyan `#00aaff` is specifically out of system"

How it works

OAuth vs API key

OAuth (recommended): Each Claude Code user authenticates individually. Tokens refresh automatically. Best for individuals and teams.

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

API key (Bearer): Generate a pk_live_* key at presetai.dev/api and pass it as the Authorization header:

claude mcp add --transport http preset https://mcp.presetai.dev/mcp \
  --header "Authorization: Bearer pk_live_xxx"

Best for shared-account or CI setups where browser-based OAuth isn't viable.

Tool scoping

Claude Code's agent has access to all of preset AI's MCP tools by default and chooses which to call based on the task. Like Cursor and Codex, Claude Code is IDE-class: it benefits from the full tool surface (generation + validation + lookup), not the narrowed 7-tool review profile that PR-review clients (e.g. CodeRabbit) use.

Data flow

When Claude Code's agent calls a preset AI tool, it sends the file path, code snippet, and any inferred intent. preset AI resolves the active design system's rules: forbidden primitives, context rules, tokens, presets, scoped by layer if configured, and returns structured results. Claude Code renders these inline and applies suggested fixes if you accept them.

No code is stored on preset AI's side. Queries are processed in real time and logged to the design system's audit trail, not Anthropic's.

FAQ

Which Claude plan do I need?

Any Claude plan that includes Claude Code works. preset AI is plan-agnostic on the Anthropic side: your preset AI connection authenticates against your preset AI account, not your Anthropic subscription tier.

Does this work in Claude Desktop?

Yes. Claude Desktop supports MCP servers via claude_desktop_config.json. The configuration is slightly different from Claude Code; see preset AI's in-app Connect → Claude Desktop section for the desktop-specific snippet.

How do I revoke Claude Code's access?

Two paths. From Claude Code: claude mcp remove preset. From preset AI: Connect → Active integrations, find the Claude Code entry, revoke. Either revokes the refresh token immediately.

What's the difference between the MCP install and the plugin install?

The MCP install (claude mcp add ...) registers preset AI as an MCP server. Claude Code's agent can then call its tools when it judges them relevant. The plugin install (claude plugin install ...) does that plus registers slash commands (/preset:check, /preset:tokens), pre-write validation hooks, and auto-injects design-system rules. The plugin is richer; the MCP-only path is simpler.

Why does the agent sometimes ignore preset AI and read local docs instead?

Claude Code's agent picks the cheapest path to an answer. If your repo already has CLAUDE.md, tokens.css, or design-system docs that cover the same ground, it may read those instead of calling preset AI. The recommended CLAUDE.md snippet above tells the agent when preset AI is the authoritative source.

What gets logged?

Every MCP call from Claude Code is logged to preset AI's audit trail with client ID, tool name, and timestamp: queryable from the preset AI dashboard. OAuth events (token issuance, refresh, revocation) are captured in the oauth_events telemetry table.