# CodeCrafted Design

This MCP server carries interface work from project brief to implementation review, keeping key decisions available across sessions. It connects to Claude Code and other MCP clients.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI
- Author: codecrafted-uk
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/codecrafted-uk/cc-design-mcp
- Updated: 2026-07-18
- HTML: https://affpapa.org/en/nevibecode/mcp/codecrafted-design

## What it does

CodeCrafted Design keeps project briefs, route plans and compact continuation state. An agent can explore visual directions without changing the project; it waits for explicit approval and supports revisions or undo. That approval step matters when design choices need to stay in the user’s hands.

The service helps shape site and product structures, visual foundations, semantic colour roles and component contracts. Users choose layout, presentation and interaction variants for components. Design tokens are portable, and implementation review follows an evidence-based correction loop.

The MCP service can run without the optional skill. Clients without OAuth, including CI setups, need an API key sent as a Bearer token. To add the server in Claude Code, run `claude mcp add --transport http codecrafted-design https://design.codecrafted.co.uk/mcp`.

## Requirements
- Remote server: `https://design.codecrafted.co.uk/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http design https://design.codecrafted.co.uk/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add codecrafted-design --url https://design.codecrafted.co.uk/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "codecrafted-design": {
            "url": "https://design.codecrafted.co.uk/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "codecrafted-design": {
            "type": "http",
            "url": "https://design.codecrafted.co.uk/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http codecrafted-design https://design.codecrafted.co.uk/mcp
```

## When to use it
- keep project briefs and route plans available between sessions
- explore visual directions before approving changes
- define semantic colour roles and component contracts
- select layout and interaction variants
- review an implementation and work through corrections

## Example prompts
- Save the project brief and route plan so we can continue in another session.
- Explore visual directions, but wait for my approval before changing the project.
- Review the interface implementation and guide me through corrections.

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36427
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7527
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6144
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md