Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
パソコンで動く
Chart Color System
What it does
Solve, audit and simulate colorblind-safe chart palettes. WCAG contrast, OKLab ΔE. Read-only.
- Connects クラウドで動く
- Account or key No key needed
- Category デザイン・画像・音声
インストール
使っているAIアプリを選んで、設定をコピーしてください。
チェック 4/5 合格 · 質問内容は提供元のサーバー（chart-color-mcp.vercel.app）を通ります · ✓ コマンド確認済み 2026年11月13日
まず：どの AI を使っていますか？
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげます · 約 2 分
キー不要、インストール不要 · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー（Owner）が追加
Claude の Connectors ページを開く
CustomizeConnectors
「Add」→「Custom」→「Web」を押し、この 2 つを入力
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
Name · 名前Chart Color SystemRemote MCP server URL · アドレスhttps://chart-color-mcp.vercel.app/mcpClaude が検出したサインイン設定の画面で Continue を押す · Authentication は作者の説明どおり（Sign in now・Sign in when needed・No sign in）を選び Add を押します
チャットで有効にする
+ConnectorsChart Color System
試してみる
Chart Color System を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Chart Color System を使っていると言うか、回答に Chart Color System のツール名が出れば接続成功です
メニュー名は 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 · 名前Chart Color SystemConnection · アドレスhttps://chart-color-mcp.vercel.app/mcpチャットで Chart Color System を選ぶ
新しいチャットを開き、入力前にプラグインの一覧から Chart Color System を選びます
試してみる
Chart Color System を使って、私に何ができるか教えて、1 つやってみせて✓ ChatGPT が Chart Color System を使っていると言うか、回答に Chart Color System のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に OpenAI のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Claude Code につなげます · 約 2 分
キー不要、インストール不要
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
このコマンドを貼り付けて Enter
claude mcp add --transport http --scope user chart-color-system https://chart-color-mcp.vercel.app/mcpClaude Code で /mcp と入力
Chart Color System が一覧にあり、接続済みと表示されれば OK です
試してみる
Chart Color System を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Chart Color System を使っていると言うか、回答に Chart Color System のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげます · 約 2 分
キー不要、インストール不要
Cursor の AI チャットを Agent モードで開く
試してみる
Chart Color System を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Chart Color System を使っていると言うか、回答に Chart Color System のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげます · 約 2 分
キー不要、インストール不要
VS Code の AI チャットを Agent モードで開く
試してみる
Chart Color System を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Chart Color System を使っていると言うか、回答に Chart Color System のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
Web 経由でつなぐアプリ用のアドレス
アドレス
https://chart-color-mcp.vercel.app/mcpJSON 設定は下の「開発者向け」にあります
開発者向け：ターミナルのコマンドと JSON 設定
Web 経由
Claude Code
claude mcp add --transport http --scope user chart-color-system https://chart-color-mcp.vercel.app/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"chart-color-system": {
"url": "https://chart-color-mcp.vercel.app/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"chart-color-system": {
"type": "http",
"url": "https://chart-color-mcp.vercel.app/mcp"
}
}
}この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
ひと目でわかる
- 週あたりのダウンロードi
- npm/PyPIにない
- 接続方法
- クラウドで動く
- トランスポート
- streamable-http
- 最新バージョンi
- 0.1.2
- カテゴリi
- デザイン・画像・音声
- レジストリ公開日i
- 2026年10月4日
- コードの最終更新i
- 2026年10月4日
- 作者
- socraticstatic
- ウェブサイト
- socraticstatic.github.io
- レジストリでの状態
- 有効
使えるアプリ
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
インターネット経由でつなげるアプリ
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
できること
ツールの名前と説明は、サーバーが2026年11月13日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。
solve_paletteGenerate a categorical chart palette of n colors (1-12) that maximizes perceptual separation under normal vision and colorblindness, with the given brand colors locked as anchors in slot order. Returns the palette, the worst pair distances, the engine's relaxation notes, a full a
audit_paletteAudit existing chart colors for accessibility: pairwise OKLab separation under normal vision, deuteranopia, protanopia, tritanopia and achromatopsia, plus WCAG 2.2 non-text contrast (3:1) of every color against the chart background. Returns a pass / warn / fail verdict with the n
simulate_paletteShow what each color looks like to readers with deuteranopia, protanopia, tritanopia or achromatopsia (published Machado 2009 matrices), so an assistant can describe or render the palette as a colorblind reader sees it.
build_rampBuild an evenly spaced perceptual (OKLab) color scale: sequential from start to end, or diverging from start through mid to end. Returns the steps and a background-contrast audit (pairwise separation is not judged for ramps).
基本チェックi
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック
話し合い
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
ユーザーレビュー
まだレビューはありません
デザイン・画像・音声のほかのサーバーとの比較i
- このカテゴリのほかの3061件のうち0%よりスターが多い
- このカテゴリのほかの3061件のうち39%より最近レジストリに公開
- 基本チェックの結果が、このカテゴリのほかの3061件のうち55%と同じかそれ以上
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
よくある質問
Chart Color Systemは安全ですか？
当てはまる基本チェック5項目のうち4項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
どんなキーやコードが必要ですか？
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
パソコンで動きますか、それともクラウドですか？
作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。
今もメンテナンスされていますか？
GitHubリポジトリの最終更新は41 日前、最新バージョン（0.1.2）がレジストリに届いたのは41 日前です。
どのアプリで使えますか？
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
Next AI Draw.io
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
パソコンで動く
作者のREADME
READMEを開く
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
chart-color-mcp
The Chart Color System as a read-only MCP server: the same engine as the app (npm chart-color-system), callable by any assistant. The app is static on GitHub Pages, so this directory is its own Vercel project (chart-color-mcp, team socraticstatics-projects), deployed from here, not from the Pages workflow.
- Endpoint:
https://chart-color-mcp.vercel.app/mcp - Docs for humans and assistants: https://socraticstatic.github.io/Visualizations/mcp-docs.html (source:
public/mcp-docs.html) - Tools:
solve_palette(anchored, audited categorical palette),audit_palette(pass / warn / fail with the numbers),simulate_palette(deutan, protan, tritan, achromatopsia),build_ramp(sequential or diverging) - Engine version is reported in every result (
engine_version); bump thechart-color-systemdependency to ship a new engine.
Deploy and verify:
cd mcp && npm run deploy && npm testnpm test runs the contract tests against production plus the local card and handler tests; MCP_BASE= npm test runs the contract tests against a preview deployment.
Release to the MCP Registry (io.github.socraticstatic/chart-color-system): bump version in server.json and package.json (one number, the server reports it), deploy, then tag mcp-v and push the tag. .github/workflows/publish-mcp.yml publishes over GitHub OIDC and refuses a tag that disagrees with the card or with what the live server reports.