MCP Server

An MCP server that lets AI coding agents build UI the 7onic way: token search, a catalog of 41 components, layout recipes, and rule validation via validate_code.
For llms.txt-based integration, see AI Integration (Components) and AI Integration (Tokens).

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

Claude Code plugin — installs the MCP server in one command (no npm install, ~3 MB).

Tools & Resources

9 tools, 3 resources, and 1 prompt. Queries work in English, Japanese, and Korean.

Component discovery

Search 41 components, inspect props/variants, fetch verified JSX examples.

list_componentsget_componentget_component_examples

Tokens

Search and look up tokens; get nearest-token suggestions for raw values (hex/px/ms).

search_tokensget_tokensuggest_tokens

Compose & verify

Responsive layout recipes, design-rule validation, and per-topic guidelines.

get_layout_patternvalidate_codeget_guidelines

Resources (3)

Core AI rules, a token cheatsheet, and the component catalog as Markdown.

Prompt: create_prototype

A guided prototype workflow: discovery → tokens → layout → validation loop.

How It Works

Figma tokens are the single source of truth. The same token names flow through CSS variables, Tailwind classes, and components — so AI-generated code never drifts from the design.

1. Discover components

list_components / get_component — prefer 7onic components over raw HTML.

2. Resolve tokens

search_tokens / suggest_tokens — always check tokens before writing a raw value.

3. Compose layout

get_layout_pattern — 4/8/12-column grid recipes with token gaps.

4. Validation loop

validate_code — fix until zero errors before delivering.

Tool queries and validate_code violation messages support English, Japanese, and Korean.

Setup

One command on Claude Code via the plugin; other MCP-capable agents can use manual configuration.

Claude Code plugin

Recommended

Adds the marketplace and installs in one command. The server ships as a self-contained bundle — no dependency install happens.

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

Other agents (manual setup)

Clone the repository and register the stdio server in your MCP config (e.g. .mcp.json). The dist bundle is committed, so there is nothing to build.

git clone https://github.com/itonys/7onic.git

{
  "mcpServers": {
    "7onic-design": {
      "command": "node",
      "args": ["/path/to/7onic/mcp/dist/index.js"]
    }
  }
}

Adjust the path to your clone location. Requires Node.js 20+.

validate_code

Generated code is checked mechanically against 14 rules. Representative detections:

Primitive colors (semantic-first)

bg-blue-500 → bg-primary

Arbitrary values (off-token numbers)

p-[17px] → p-4

dark: prefix (themes switch automatically)

dark:bg-gray-900 → bg-background

line-height overrides (tokens are paired)

text-sm leading-relaxed → text-sm

Raw HTML (components first)

<button className="..."> → <Button>

Inline styles

style={{ color: '#333' }} → token classes

Violation messages and fixes support en/ja/ko via the locale argument. A user-approved custom value can be suppressed with a ds-ignore comment.

Notes & Limits

Before you rely on it

This tool helps follow the design-system rules but does not guarantee 100% detection — violations validate_code cannot catch may exist.
It shines for prototypes, demos, and internal tools. Production code must still go through human review.
Final UI and design decisions belong to your team’s designer/owner, not to the tool.