Read-only MCP server for one AINDF design-system bundle: look up what it offers, validate screens.
"You’re absolutely right, I ignored your design system and hardcoded UI. Again."
— Your AI-Agent
Add AINDF to my design system and this project. AINDF is at https://github.com/0design/ai-native-design-framework; version 0.2 runs from a clone. Clone it to
<dir>(an absolute path). In my design system's folder, write my design system down likeexamples/demo-ds: the seven 0.2 sources (tokens,taxonomy,slots,applicability,presets,components,bindings) plusaindf.config.json, which lists them (schemas: 0.1 inschemas/, 0.2 inpackages/aindf-kit/schema/0.2). From that folder runnode <dir>/packages/aindf-kit/src/cli.mjs check aindf.config.jsonuntil it passes, thennode <dir>/packages/aindf-kit/src/cli.mjs bundle aindf.config.json --out aindf.bundle.json. Connect the bundle to your agent's MCP settings; in Claude Code runclaude mcp add aindf -- node <dir>/packages/aindf-kit/src/cli.mjs mcp <absolute path>/aindf.bundle.json(or start Claude Code with--plugin-dir <dir>/pluginand set its bundle path); any other agent runs the samenode … mcp …command as a stdio server in its MCP settings. From then on, write screens only as screen configs pinned to that bundle: look up components, slots, modifiers and presets, and callvalidate-screenuntil it passes. Never hardcode a value my design system does not have; when something is missing, tell me instead of writing your own CSS. Do not change the design system without my approval.
The prompt above works from a clone; the kit is also on npm, so you can do the same without one. You need Node.js 20.10 or newer. From your design system's folder:
npx -y @ai-native-design-framework/kit check aindf.config.json
npx -y @ai-native-design-framework/kit bundle aindf.config.json --out aindf.bundle.json
claude mcp add aindf -- npx -y @ai-native-design-framework/kit mcp /absolute/path/to/aindf.bundle.json
The first command checks your design system, the second makes the bundle (one file per version), the third connects it to Claude Code. Any other agent runs the last command as a stdio MCP server.
your prompt
│
▼
your agent ◀──── MCP ────▶ your design system
│ asks what it offers: components, slots, modifiers, presets
▼
screen config (JSON, pinned to one version of your design system)
│
▼
check ── refused: "Heading has no prop color; …" ──▶ your agent asks you
│ to add it to your
│ passes design system
▼
builder ──▶ a screen built only from your design system
Without AINDF your agent writes HTML and CSS itself and can ignore your design system. With AINDF the screen is a
config, and the check passes only what your design system offers. Fix how a component looks or works in your design
system once, and every screen built from it gets the fix on the next build, once the screens are moved to the new version (aindf repin).
SPEC.md: the specification.packages/aindf-kit: the check, the builder and the MCP server.plugin: the plugin for Claude Code.examples/demo-ds: a demo design system with three examples you can run.schemas and patterns: the JSON Schemas of version 0.1 and an example pattern. The 0.2
schemas are in packages/aindf-kit/schema/0.2.You can improve the spec, the kit or the plugin, or suggest an idea.
node --test packages/aindf-kit/test/*.test.mjs and
node examples/demo-ds/examples.mjs. If you change a schema, update SPEC.md and patterns/starter.json in the
same pull request.Have an idea? Open an issue and describe what result you want.
Source-derived launch command. Check the maintainer’s required arguments and credentials before running:
npx -y @ai-native-design-framework/kitMerge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.
{
"mcpServers": {
"io-github-0design-aindf": {
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.
Claude Desktop setup reference@ai-native-design-framework/kitnpmAINDF works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.
~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.~/.cursor/mcp.jsonRestart Cursor for changes to take effect..vscode/mcp.jsonReload VS Code window for changes to take effect.~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect..mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.