CodeCrafted Design — Claude Code MCP server: features and setup
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.
claude mcp add --transport http design https://design.codecrafted.co.uk/mcpWhat CodeCrafted Design 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.
What it helps with
- 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 for the agent
- 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.
How to install CodeCrafted Design
Platform CLI: remote server
claude mcp add --transport http design https://design.codecrafted.co.uk/mcpPlatform CLI: remote server
codex mcp add codecrafted-design --url https://design.codecrafted.co.uk/mcpConfig file
{
"mcpServers": {
"codecrafted-design": {
"url": "https://design.codecrafted.co.uk/mcp"
}
}
}Config file
{
"servers": {
"codecrafted-design": {
"type": "http",
"url": "https://design.codecrafted.co.uk/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http codecrafted-design https://design.codecrafted.co.uk/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about CodeCrafted Design
How do I install CodeCrafted Design in Claude Code?
Run claude mcp add --transport http codecrafted-design https://design.codecrafted.co.uk/mcp to add the remote MCP server.
What does CodeCrafted Design do?
It supports interface planning from a project brief, keeps project decisions available and reviews the implementation. Design-direction changes require explicit approval.
Does connecting CodeCrafted Design require an API key?
OAuth-capable clients can sign in automatically. For CI or clients without OAuth, provide an API key as a Bearer token.
