Documentation
Choose a client, add one hosted MCP endpoint and authenticate securely. Most interactive clients use OAuth automatically.
Agent-led installation
Paste this into Codex, Claude Code, OpenCode or Hermes Agent. Your agent checks its existing connection, configures the MCP if needed, installs the matching design skill and verifies the connection.
Read https://design.codecrafted.co.uk/install.md and set up CodeCrafted Design for this agent, including its MCP connection and design skill. Reuse any existing setup and verify that it works.
Your agent handles setup on your computer. You may need to complete your client's normal sign-in or trust prompt. Future tasks reuse the connection.
Quick start
Register and verify your email address.
Use https://design.codecrafted.co.uk/mcp in your agent.
Use OAuth, or an API key for CI and unattended automation.
https://design.codecrafted.co.uk/mcpAgent setup
Check claude mcp list first. Add only if missing, then use /mcp in Claude Code if sign-in is required. Newer clients also support claude mcp login; check local help.
claude mcp add --transport http --scope user codecrafted-design https://design.codecrafted.co.uk/mcp
Check codex mcp list first. Add only if missing. Run codex mcp login codecrafted-design only when authentication is required. Codex surfaces using the same configuration reuse the connection.
codex mcp add codecrafted-design --url https://design.codecrafted.co.uk/mcp
Check your version and existing configuration first. Merge this V2 entry into your configuration, preserving other settings. Authenticate through its MCP interface only if required. V1 uses a different structure; the agent installation guide covers both.
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"servers": {
"codecrafted-design": {
"type": "remote",
"url": "https://design.codecrafted.co.uk/mcp"
}
}
}
}On V1, put the server directly under mcp with enabled: true; use opencode mcp auth codecrafted-design if sign-in is needed.
Check hermes profile and hermes mcp list first. Add only if missing, keeping the active profile. First connection handles OAuth; use hermes mcp test codecrafted-design to check it. hermes mcp login forces re-authentication, so use it only to recover a confirmed authentication failure.
hermes mcp add codecrafted-design --url https://design.codecrafted.co.uk/mcp --auth oauth
For a named profile, insert -p PROFILE after hermes. The skill installer supports --client hermes and respects HERMES_HOME. See the installation guide for profile and project setup.
Add a remote or Streamable HTTP MCP server using the endpoint above and your client's configuration format. OAuth-capable clients discover the sign-in flow. For clients without OAuth, use their secret mechanism to supply an API key as a Bearer token. Cloud clients use their host's connector settings.
Optional agent skill
The skill teaches an agent when to ask questions, when to make a design decision and how to use the review loop. The MCP server works without it.
expected_revision and a unique idempotency_key. Retry an uncertain response with the original arguments and key; if another agent changed the project, read and review that newer revision first..agents/skills/codecrafted-design/SKILL.md
.claude/skills/codecrafted-design/ · OpenCode-native: .opencode/skills/codecrafted-design/ · Codex personal: ~/.agents/skills/codecrafted-design/. Reuse an existing legacy or plugin installation rather than creating a second copy.Your design contracts
Ask your agent to guide you through a private, reusable design contract. It helps you decide the purpose, layout, visual character, typography, colour, components, behaviour and acceptance checks, one section at a time.
Help me create a reusable private design contract with CodeCrafted Design. Guide me through each design decision, explain options and tradeoffs, save my progress and ask me to approve the completed contract.
You can start with original ideas or use the catalogue for inspiration. Your agent saves drafts and asks you to confirm the choices. Once approved, the contract can guide several of your projects. Each project keeps the exact approved version it uses, even if you revise the contract later.
Contract approval records your design decisions. Your agent still needs to implement and test them, including your custom acceptance checks.
Workflow
The agent records the goal, audience, content, brand and constraints.
CodeCrafted returns a page plan, visual system, colour roles and component guidance.
Review the saved revision in the dashboard, approve its choices and download a handover for the implementing agent. Later design changes require a new approval.
The agent compares its implementation with the plan, fixes clear issues and records what still needs human review.
Authentication
Interactive clients should use OAuth. Connections are revocable from the dashboard. API keys remain available for CI and unattended automation; keep them out of source control and browser JavaScript.
Limits
CodeCrafted does not replace browser testing, assistive-technology testing, user research or human visual review. It does not inspect a live implementation unless a tool explicitly says it retrieved bounded public component metadata.