CodeCrafted Design

Name: CodeCrafted Design
Author: codecrafted-uk

作者：codecrafted-ukバージョン 2.4.0i★ 0iクラウドで動く

レジストリ名uk.co.codecrafted/design

インストール方法

What it does

Guide user-led frontend design decisions from project brief through implementation review.

Connects クラウドで動く
Account or key Sign in to the service when you connect (OAuth)
Category デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 4/4 合格 · 質問内容は提供元のサーバー（design.codecrafted.co.uk）を通ります · ✓ コマンド確認済み 2026年11月13日

まず：どの AI を使っていますか？

ClaudeWeb · アプリ · スマホChatGPTWebClaude CodeターミナルCursorコードエディタVS Codeコードエディタその他その他のアプリ

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげます · 約 2 分

キー不要、インストール不要 · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー（Owner）が追加

Claude の Connectors ページを開く
CustomizeConnectors
完了
「Add」→「Custom」→「Web」を押し、この 2 つを入力
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
Name · 名前CodeCrafted Design
Remote MCP server URL · アドレスhttps://design.codecrafted.co.uk/mcp
Claude が検出したサインイン設定の画面で Continue を押す · Authentication は作者の説明どおり（Sign in now・Sign in when needed・No sign in）を選び Add を押します
完了
チャットで有効にする
+ConnectorsCodeCrafted Design
完了
試してみる
CodeCrafted Design を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude が CodeCrafted Design を使っていると言うか、回答に CodeCrafted Design のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT との接続はプランしだい

フル MCP：Web 版 ChatGPT の Business・Enterprise・Edu · Pro：読み取り/取得の権限で接続、データを変えるツールは使えないことがあります · Plus：公式ドキュメントで未確認。プラグイン画面にカスタム MCP を追加する項目があれば試せます · Web のみ

Web 版 ChatGPT で MCP の追加ページを開く
Plugins+Add custom MCP server
完了
名前とアドレスを入力
名前を入れ、Connection にアドレスを貼り付け、注意事項にチェックして Create as a plugin を押します
Name · 名前CodeCrafted Design
Connection · アドレスhttps://design.codecrafted.co.uk/mcp
完了
チャットで CodeCrafted Design を選ぶ
新しいチャットを開き、入力前にプラグインの一覧から CodeCrafted Design を選びます
完了
試してみる
CodeCrafted Design を使って、私に何ができるか教えて、1 つやってみせて
✓ ChatGPT が CodeCrafted Design を使っていると言うか、回答に CodeCrafted Design のツール名が出れば接続成功です

メニュー名は 2026年11月11日に OpenAI のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Claude Code につなげます · 約 2 分

キー不要、インストール不要

ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
完了

このコマンドを貼り付けて Enter

claude mcp add --transport http --scope user design https://design.codecrafted.co.uk/mcp

完了

Claude Code で /mcp と入力
CodeCrafted Design が一覧にあり、接続済みと表示されれば OK です
完了
試してみる
CodeCrafted Design を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude Code が CodeCrafted Design を使っていると言うか、回答に CodeCrafted Design のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげます · 約 2 分

キー不要、インストール不要

このボタンで Cursor を開く
Cursor で開く
Cursor がインストールの確認をするので Install を押します
完了
Cursor の AI チャットを Agent モードで開く
完了
試してみる
CodeCrafted Design を使って、私に何ができるか教えて、1 つやってみせて
✓ Cursor が CodeCrafted Design を使っていると言うか、回答に CodeCrafted Design のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげます · 約 2 分

キー不要、インストール不要

このボタンで VS Code を開く
VS Code で開く
VS Code がインストールの確認をするので Install を押します
完了
VS Code の AI チャットを Agent モードで開く
完了
試してみる
CodeCrafted Design を使って、私に何ができるか教えて、1 つやってみせて
✓ VS Code が CodeCrafted Design を使っていると言うか、回答に CodeCrafted Design のツール名が出れば接続成功です

メニュー名は 2026年11月11日に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

Web 経由でつなぐアプリ用のアドレス

アドレスhttps://design.codecrafted.co.uk/mcp

JSON 設定は下の「開発者向け」にあります

つまずいたら？CodeCrafted Design を使っている人に聞いてみましょう💬 ディスカッション →

開発者向け：ターミナルのコマンドと JSON 設定

Web 経由

Claude Code

claude mcp add --transport http --scope user design https://design.codecrafted.co.uk/mcp

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "design": {
      "url": "https://design.codecrafted.co.uk/mcp"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "design": {
      "type": "http",
      "url": "https://design.codecrafted.co.uk/mcp"
    }
  }
}

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

GitHubスター i: 0
週あたりのダウンロードi: npm/PyPIにない
確認済みドメイン: ✓ codecrafted.co.uk
ライセンス i: ライセンスの記載なし
接続方法: クラウドで動く
トランスポート: streamable-http
最新バージョンi: 2.4.0
カテゴリi: デザイン・画像・音声
レジストリ公開日i: 2026年7月18日
コードの最終更新i: 2026年7月18日
作者: codecrafted-uk
リポジトリ: codecrafted-uk/cc-design-mcp
ウェブサイト: design.codecrafted.co.uk
レジストリでの状態: 有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

インターネット経由でつなげるアプリ

Claude ChatGPT Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Open WebUI Raycast

すべてのアプリと長所・短所 →

できること

このサーバーは、ツール一覧を表示する前にサインインを求めます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月13日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名はドメイン codecrafted.co.uk で確認済みです（レジストリがドメインの所有を確認しています）
✓ 合格
今もメンテナンスされている
コードの最終更新：4 か月前
– 対象外
ライセンスがある
対象外：codecrafted.co.uk の所有者が自ら運営するクラウドのサーバーで、リポジトリのコードを実行しません
✓ 合格
エンドポイントが応答する
270ミリ秒で応答（HTTP 401）
✓ 合格
OAuthでサインイン
OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます
… 未チェック
ツールの説明に隠れた指示がない
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

Google でログインして投稿

ユーザーレビュー

まだレビューはありません

Google でログインしてレビューを書く

デザイン・画像・音声のほかのサーバーとの比較i

このカテゴリのほかの3020件のうち0%よりスターが多い
このカテゴリのほかの3020件のうち15%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの3020件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

CodeCrafted Designは安全ですか？

当てはまる基本チェック4項目のうち4項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は4 か月前、最新バージョン（2.4.0）がレジストリに届いたのは4 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URL で接続するので、リモート MCP を受け付けるアプリでも使えます。例：Web 版 ChatGPT（Business 以上はフル MCP、Pro は読み取りのみ）。

代わりに使えるものは？

同じカテゴリには：Figma Context MCP, AutoClip, Next AI Draw.io

同じカテゴリのほかの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

作者：GLips広く使われている↓ 15.2万/週★ 1.6万5 か月前更新

パソコンで動く

インストール

AutoClip

Clip long videos into short clips with covers and captions. Local CLI and MCP.

作者：zhouxiaoka広く使われている↓ 205/週★ 1万16 日前更新

パソコンで動く

インストール

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

作者：DayuanJiang広く使われている↓ 2.2万/週★ 3.7万リポジトリ全体のスター今日更新

パソコンで動く

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

CodeCrafted Design MCP

CodeCrafted Design 2.4 gives AI coding agents a persistent, user-led process for planning, building and reviewing websites and product interfaces.

MCP Registry name: uk.co.codecrafted/design

Website: https://design.codecrafted.co.uk
Setup: https://design.codecrafted.co.uk/docs
MCP endpoint: https://design.codecrafted.co.uk/mcp
Free account: https://design.codecrafted.co.uk/register

Connect your agent

Claude Code

claude mcp add --transport http --scope user codecrafted-design https://design.codecrafted.co.uk/mcp

claude mcp login codecrafted-design

Codex

codex mcp add codecrafted-design --url https://design.codecrafted.co.uk/mcp

codex mcp login codecrafted-design

OpenCode

Add clients/opencode.json to your OpenCode configuration, then run:

opencode mcp auth codecrafted-design

Other MCP clients

Cursor, VS Code, Zed, Gemini CLI and other clients supporting remote or Streamable HTTP MCP servers can use the same endpoint. OAuth-capable clients discover sign-in automatically. For CI or a client without OAuth, use an API key as a Bearer token; see clients/generic-mcp.json.

Ready-made configuration files are in clients/.

Optional agent skill

The codecrafted-design skill gives compatible agents the recommended brief, direction, build and review workflow. The MCP service works without it.

Install the extracted folder in a location supported by your agent:

.agents/skills/codecrafted-design/          portable project location

.claude/skills/codecrafted-design/ Claude-compatible project location .opencode/skills/codecrafted-design/ OpenCode project location ~/.codex/skills/codecrafted-design/ Codex personal location

Download: https://design.codecrafted.co.uk/downloads/codecrafted-design-skill.zip

What the service provides

persistent project briefs, route blueprints and compact continuation state;
non-mutating design-direction exploration with explicit approval, adjustment and undo;
composable site and product structures, visual foundations and semantic colour roles;
invariant component contracts plus user-selected layout, presentation and interaction variants;
portable design tokens; and
an evidence-based implementation review and correction loop.

The exact 30-tool public surface is generated from the synchronized protocol inventory in TOOLS.md.

MCP Registry publication

This repository is the publication source for the hosted remote server. Platform releases must synchronize the protocol inventory, release manifest and skill before a Registry version is published:

npm run sync -- ..\design-platform

npm run check

Publication is gated by the matching version tag, official Registry validation, a live endpoint version/tool check and domain ownership of codecrafted.co.uk. See REGISTRY.md for the complete first-publication and automated-release process.

Repository boundary

This repository contains public Registry metadata, synchronized protocol contracts, client configuration, tool documentation and the installable agent skill. It does not contain the proprietary hosted server, design catalogue, customer data, deployment configuration or operational secrets.

See NOTICE.md and SECURITY.md. CodeCrafted Design is operated by CodeCrafted Ltd, company number 17265819.

CodeCrafted Design

What it does

インストール

Claude の Connectors ページを開く

「Add」→「Custom」→「Web」を押し、この 2 つを入力

チャットで有効にする

試してみる

Web 版 ChatGPT で MCP の追加ページを開く

名前とアドレスを入力

チャットで CodeCrafted Design を選ぶ

試してみる

ターミナルを開く

このコマンドを貼り付けて Enter

Claude Code で /mcp と入力

試してみる

このボタンで Cursor を開く

Cursor の AI チャットを Agent モードで開く

試してみる

このボタンで VS Code を開く

VS Code の AI チャットを Agent モードで開く

試してみる

Web 経由

ひと目でわかる

使えるアプリ

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

話し合い

ユーザーレビュー

デザイン・画像・音声のほかのサーバーとの比較i

よくある質問

同じカテゴリのほかの候補

Figma Context MCP

AutoClip

Next AI Draw.io

作者のREADME

CodeCrafted Design MCP

Connect your agent

Claude Code

Codex

OpenCode

Other MCP clients

Optional agent skill

What the service provides

MCP Registry publication

Repository boundary