CodeCrafted Design

Documentation

Connect
Design MCP.

Create an API key, add the endpoint to your MCP client and start using the design catalog.

Quick start

Get connected in four steps.

  1. Create a free account.
  2. Generate an API key in your dashboard.
  3. Add the endpoint and API key to your MCP client.
  4. Install the optional CodeCrafted Design skill.
Generic MCP configuration
{
  "mcpServers": {
    "codecrafted-design": {
      "type": "streamable-http",
      "url": "https://design.codecrafted.co.uk/mcp",
      "headers": {
        "Authorization": "Bearer ${CODECRAFTED_DESIGN_TOKEN}"
      }
    }
  }
}

Recommended workflow

Choose structure first, then style.

1

Find a site structure

search_website_archetypes

Choose the pages, sections and behaviour the product needs.

2

Find a visual style

search_design_styles

Choose a compatible look without weakening accessibility or performance.

3

Create the build plan

compose_design_system

Combine the selected structure and style into one plan for the agent.

4

Check the result

audit_design_contract

Compare the implementation with the plan, then complete browser and accessibility testing.

Tools

Available through MCP.

get_catalog_statusCheck the catalog version and availability
search_website_archetypesFind site structures
search_design_stylesFind visual styles
get_website_archetypeView one site structure
get_design_styleView one visual style
compose_design_systemCreate a build plan
explain_selectionExplain why a result was chosen
compare_design_systemsCompare design directions
plan_design_adaptationAdapt a plan for different needs
export_design_tokensExport reusable design values
audit_design_contractCheck an implementation against its plan

API keys

Keep your API key safe.

Keys are shown once, stored securely and can be revoked from your dashboard. Do not commit a key to source control or place it in browser JavaScript.

Request headerAuthorization: Bearer ${CODECRAFTED_DESIGN_TOKEN}

Errors

Errors explain what to fix.

If a search is empty or two choices are incompatible, the response includes a suggested next step. Accessibility and security requirements are never silently relaxed.