prettygoodventures/prettygood-mcp-design-dev

MCP Design Dev 🎨

Turn Claude Code into a design analysis powerhouse
Pretty Good Ventures × MCP

What This Does

Hey! This is an MCP server that gives Claude Code design superpowers. Point it at a Figma file or website, and it'll analyze the hell out of it. Extract design tokens, check accessibility, generate critiques - all the stuff designers do manually, but instant.

The magic: Claude Code can now see and understand design like a senior designer would.

Quick Start (3 Minutes)

# 1. Clone and setup
git clone https://github.com/prettygoodventures/mcp-design-dev
cd mcp-design-dev
npm install
npm run build

# 2. Configure your Figma token
./setup.sh
# Enter your token when prompted (get one at figma.com/developers)

# 3. Add to Claude Code
# Edit ~/.claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mcp-design-dev": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-design-dev/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token-here"
      }
    }
  }
}

Restart Claude Code. Boom. Design tools ready.

The Tools

🎯 analyzeFigmaDesign

Tears apart a Figma file and tells you everything about it. Components, styles, layout patterns - the works.

// What Claude Code can now do:
await analyzeFigmaDesign({
  fileUrl: "https://figma.com/file/abc123",
  analysisDepth: "comprehensive"
})

🌐 analyzeWebDesign

Points Playwright at any website and extracts the visual hierarchy, design patterns, and screenshots.

await analyzeWebDesign({
  url: "https://example.com",
  includeScreenshot: true
})

🎨 extractDesignTokens

Pulls out every color, font, spacing value, and design token from either Figma or websites. Perfect for design system work.

await extractDesignTokens({
  source: "https://example.com",
  sourceType: "website"
})

♿ evaluateAccessibility

Runs WCAG compliance checks. Finds contrast issues, missing ARIA labels, keyboard navigation problems.

await evaluateAccessibility({
  url: "https://example.com",
  wcagLevel: "AA"
})

💭 generateDesignCritique

AI-powered design critique. Like having a senior designer review your work, but instant.

await generateDesignCritique({
  designUrl: "https://example.com",
  focusAreas: ["typography", "layout", "color"]
})

Architecture (How It Works)

graph LR
    CC[Claude Code] -->|MCP Protocol| S[Server]
    S --> RL[Rate Limiter]
    RL --> T{Tool Router}
    
    T --> T1[analyzeFigmaDesign]
    T --> T2[analyzeWebDesign]
    T --> T3[extractDesignTokens]
    T --> T4[evaluateAccessibility]
    T --> T5[generateDesignCritique]
    
    T1 --> FG[Figma API]
    T2 --> PW[Playwright]
    T3 --> P[Parser]
    T4 --> AX[Axe-core]
    T5 --> AI[OpenAI]
    
    style CC fill:#f9f,stroke:#333,stroke-width:4px
    style S fill:#bbf,stroke:#333,stroke-width:2px

Under the Hood

graph TD
    R[Request] --> RL{Rate<br/>Limiter}
    RL -->|Under Limit| CB{Circuit<br/>Breaker}
    RL -->|Over Limit| E1[429 Error]
    
    CB -->|Closed| C{Cache}
    CB -->|Open| FB[Fallback]
    
    C -->|Hit| CR[Cached Response]
    C -->|Miss| EX[Execute Tool]
    
    EX --> RS[Response]
    FB --> DR[Degraded Response]
    
    style R fill:#9f9,stroke:#333,stroke-width:2px
    style RS fill:#9f9,stroke:#333,stroke-width:2px
    style E1 fill:#f99,stroke:#333,stroke-width:2px
    style DR fill:#ff9,stroke:#333,stroke-width:2px

The Numbers

Because people like metrics:

• 5,000 lines of focused TypeScript
• 258/273 tests passing (94.5%)
• <5 second build time
• <10 second test suite
• <100MB memory usage
• <1 second response time

Why This Exists

Look, designers and developers speak different languages. Designers think in components and tokens. Developers think in code and functions. This bridges that gap.

With this MCP server, Claude Code can:

• Review designs before implementation
• Extract exact values instead of eyeballing
• Catch accessibility issues early
• Generate design documentation
• Compare designs across versions

It's not replacing designers. It's making the handoff actually work.

Development

Project Management

This project uses Taskmaster AI for all task management. Claude's native task system is disabled. If you're working on this with Claude Code, Taskmaster handles everything.

Running Tests

# Run all tests
npm test

# Run specific test suite
npm run test:unit
npm run test:integration

# Run specific test
npx vitest tests/unit/specific.test.ts

Project Structure

src/
├── tools/            # 5 MCP design tools
├── utils/            # Rate limiter, cache, circuit breaker
└── index.ts          # MCP server entry

tests/
├── unit/             # Tool-specific tests (253 passing!)
└── integration/      # MCP protocol tests (5 passing!)

Philosophy

This is a Pretty Good Ventures project. What's that mean?

• Ship what matters - Core functionality over feature creep
• Ideas over implementation - The tool should spark creativity
• Zero to working in minutes - Not hours, not days
• Pretty good is good enough - 90% perfect, 100% shipped

What We Didn't Build (On Purpose)

We could have added:

• OAuth complexity (token auth works fine)
• Mock test infrastructure (real tests are better)
• VS Code extension (MCP is enough)
• Multi-platform support (Figma first, others later)
• Performance benchmarks (it's already fast)

But we didn't. Because this is v1.0, and v1.0 should work, not impress.

Contributing

Found a bug? Want a feature? Cool.

But remember: Keep it lean. This isn't trying to be everything - it's trying to be good at design analysis.

If your PR adds more than it removes, think twice.

License

MIT. Use it, fork it, sell it, whatever. Just make cool stuff.

Built with 💜 by Pretty Good Ventures
When execution becomes free, ideas become everything