Getting Started

pudge-ui works by feeding design specs to your coding agent. There are two ways to use it.

With MCP (Recommended)

If your tool supports MCP (Claude Code, Cursor, etc.), add pudge-ui as an MCP server:

{
  "mcpServers": {
    "pudge-ui": {
      "command": "npx",
      "args": ["-y", "pudge-ui-mcp"]
    }
  }
}

Then ask your agent:

"Build me a push button using pudge-ui specs"

The MCP server serves foundation context + component specs automatically.

Manual (Copy & Paste)

No MCP? No problem. Copy the specs directly into your LLM context:

1. Copy foundation files — Start with tokens, materials, and depth model.
2. Copy component spec — Browse the component gallery, find the component you need, and use the "Copy spec for LLM" button.
3. Paste into your LLM — Include both foundation + component spec in your prompt.

Prompt Templates

For best results, use structured prompts. See the For LLMs guide for templates and tips.

Foundation Overview

The foundation consists of 9 specification files that define the design system's rules: