How do I install AINDF?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does AINDF need an API key?

No required environment variable is listed on this record.

When was AINDF last checked?

Last checked 2026-11-08. Read-only MCP server for one AINDF design-system bundle: look up what it offers, validate screens.

AINDF MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y @ai-native-design-framework/[email protected]

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1claude mcp add io.github.0design-aindf -- npx -y @ai-native-design-framework/kit@0.2.1

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.0design-aindf": {4      "command": "npx",5      "args": [6        "-y",7        "@ai-native-design-framework/[email protected]"8      ]9    }10  }11}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 0.2.1
Last checked

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

"You’re absolutely right, I ignored your design system and hardcoded UI. Again."— Your AI-Agent

Get started

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 like examples/demo-ds: the seven 0.2 sources (tokens, taxonomy, slots, applicability, presets, components, bindings) plus aindf.config.json, which lists them (schemas: 0.1 in schemas/, 0.2 in packages/aindf-kit/schema/0.2). From that folder run node <dir>/packages/aindf-kit/src/cli.mjs check aindf.config.json until it passes, then node <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 run claude 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>/plugin and set its bundle path); any other agent runs the same node … 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 call validate-screen until 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.

Install

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.

To give an agent without the plugin the screen-authoring skill, install it with the skills CLI:

npx skills add 0design/ai-native-design-framework

It installs aindf-screen-author, which works through the MCP server connected above.

How it works

  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).

What's in this repo

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.

Contribute

You can improve the spec, the kit or the plugin, or suggest an idea.

Fork the repository and make a branch.
Make your change and run the checks: 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.
Open a pull request. Changes to the kit, the plugin and the examples are checked automatically.

Have an idea? Open an issue and describe what result you want.

AINDF

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install AINDF?

Does AINDF need an API key?

What transport does AINDF use?

When was AINDF last checked?

Documentation

Get started

Install

How it works

What's in this repo

Contribute

Links