Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 5/5 合格 · 質問内容は提供元のサーバー(csscreme.com)を通ります
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげます · 約 2 分
キー不要、インストール不要 · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー(Owner)が追加
CustomizeConnectors
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
CSS Crèmehttps://csscreme.com/mcpAuthentication は Claude が検出したままにして Add を押します
+ConnectorsCSS Crème
CSS Crème を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT は法人向けプランのみ接続できます
Web 版 ChatGPT Business・Enterprise・Edu で、ワークスペースの管理者かオーナーが追加します · Free・Plus・Pro の場合:あなたの ChatGPT プランではまだ MCP を自分でつなげません
Plugins+Add custom MCP server
名前を入れ、Connection にアドレスを貼り付け、注意事項にチェックして Create as a plugin を押します
CSS Crèmehttps://csscreme.com/mcp新しいチャットを開き、入力前にプラグインの一覧から CSS Crème を選びます
CSS Crème を使って、私に何ができるか教えて、1 つやってみせて✓ ChatGPT が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に OpenAI のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Claude Code につなげます · 約 2 分
キー不要、インストール不要
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --transport http --scope user design-systems https://csscreme.com/mcpCSS Crème が一覧にあり、接続済みと表示されれば OK です
CSS Crème を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげます · 約 2 分
キー不要、インストール不要
CSS Crème を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげます · 約 2 分
キー不要、インストール不要
CSS Crème を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
Web 経由でつなぐアプリ用のアドレス
https://csscreme.com/mcpJSON 設定は下の「開発者向け」にあります
Claude Code
claude mcp add --transport http --scope user design-systems https://csscreme.com/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"design-systems": {
"url": "https://csscreme.com/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"design-systems": {
"type": "http",
"url": "https://csscreme.com/mcp"
}
}
}この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
インターネット経由でつなげるアプリ
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
ツールの名前と説明は、サーバーが2026年11月8日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。
search_themesFind a design system by describing what you are building ("dark developer tool", "calm fintech dashboard", "playful consumer app"). Returns matching themes with their DESIGN.md URL and shadcn install command. Call this first when the user has no design system defined.
list_themesBrowse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.
get_design_mdFetch the full DESIGN.md for one theme: semantic colour roles, the complete shadcn token set in light and dark, typography, radius, spacing, MEASURED WCAG contrast ratios, and numbered rules the generated UI must follow. Read this before writing any UI. Save it at the repo root a
get_theme_tokensGet the shadcn/ui registry item (OKLCH tokens, light and dark) plus the paste-ready CSS variables for one theme, and the one-line command that installs it for real. Use after get_design_md when you are ready to write the tokens into globals.css.
how_to_useExplains where a DESIGN.md belongs for a given coding agent (Claude Code, Cursor, v0, Codex, Lovable) so the design rules apply to every session rather than one message.
get_install_commandReturn the exact `npx shadcn@latest add ` command that installs one theme into a shadcn/ui project, plus the registry URL it reads. Use when the user says "install it" and you already know the id.
get_agent_rulesReturn a short standing-instructions block that makes every future session read DESIGN.md before touching UI. Paste it whole into CLAUDE.md, AGENTS.md or .cursor/rules/design.mdc. It points at the DESIGN.md rather than restating it, and carries the token fingerprint so drift is d
decode_urlFetch a public site's HTML and stylesheets and return what its CSS declares: named custom properties that look like design tokens, the colours it uses most, its font stacks, border radii, spacing values, and the framework it appears to be built with. Also returns a "drop" report:
css_featureAnswers two questions about a modern CSS feature with data instead of recall. First, its Baseline status (widely available, newly available, or limited availability), the date, and which core browsers lack it, read from the open web-features dataset at build time. Second, how man
get_design_md_for_urlRead the stylesheets of a public site and return a full DESIGN.md: semantic roles with the token each came from, measured WCAG contrast pairs, the tokens the site itself declares (framework internals counted separately), font families, the type scale with the ratio between steps,
decode_siteRead a sample of pages from one site (from its sitemap.xml, or the homepage links when there is no sitemap) and report what is CONSISTENT across them: which declared tokens, colours, font stacks, radii and spacing values appear on every page read, and which appear on only some. O
verify_design_mdEvery DESIGN.md carries a Fingerprint line. Pass the id and that fingerprint; the server answers whether the copy matches the current token set, and if not, returns the current tokens so the agent can update the file instead of following a stale one. Call this at the start of a s
get_scene_embedReturns paste-ready code for a CSS Crème Scene: an interactive 3D meadow (four seasons, dandelion clocks, or a garden of peonies, white roses, lilies, irises, hydrangeas, tulips or daffodils, at any hour) grown by code in the browser, with no models or images to load. Give it the
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月12日にチェック
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック5項目のうち5項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。
GitHubリポジトリの最終更新は20 日前、最新バージョン(1.8.1)がレジストリに届いたのは2 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URL で接続するので、リモート MCP に対応したアプリでも使えます(例:ChatGPT Business 以上)。
同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
A Claude Code skill that gives a coding agent a real design system before it writes UI: semantic tokens, measured WCAG contrast, and rules it can be held to.
Free. No account, no API key, no paid tier.
An agent asked for UI with no design system does the same thing every time: invents a palette, mixes three or four corner radii, adds a second font nobody asked for, and ships contrast that was never checked. The result is recognisable on sight, and no amount of prompt rewording fixes it, because the problem is missing input rather than weak instruction.
A file fixes it. Tokens the agent must use, ratios that were computed rather than asserted, and numbered rules that can be diffed against what actually got built. "Use only these six roles" is checkable. "Make it clean" is not.
Fastest: connect the MCP server (free, no account, no key):
claude mcp add --transport http csscreme https://csscreme.com/mcp
That gives the agent thirteen tools with no files to manage: search_themes, list_themes, get_design_md, get_theme_tokens, get_install_command, get_agent_rules, how_to_use, decode_url, get_design_md_for_url, decode_site, verify_design_md, css_feature and get_scene_embed. The URL tools are the ones worth knowing about: point the agent at a live URL and it decodes that site into the same format, then checks its own generated UI against the file afterwards. css_feature answers whether a modern CSS feature is safe to ship, from Baseline data and from what curated sites actually ship. The skill below adds the house rules on top.
Claude Code (project):
mkdir -p .claude/skills/csscreme
curl -o .claude/skills/csscreme/SKILL.md \ https://raw.githubusercontent.com/damnepic/csscreme-skill/main/SKILL.md
Claude Code (all projects): same, into ~/.claude/skills/csscreme/.
Then ask for UI as normal. The skill fires on things like "build a dashboard", "make this look less generic", or "match the design of stripe.com".
npx shadcn@latest add .| URL | Returns |
|---|---|
csscreme.com/d/ .md | DESIGN.md for a curated theme |
csscreme.com/d/t/ .md | DESIGN.md for a template theme |
csscreme.com/t/ .md | DESIGN.md for an extracted theme |
csscreme.com/r/ .json | shadcn/ui registry item |
csscreme.com/t/ .json | shadcn/ui registry item, extracted |
csscreme.com/mcp | MCP server (JSON-RPC 2.0 over POST) |
All CORS-open and cacheable, served as text/markdown or application/json.
A DESIGN.md is a contract rather than a description. Eight fields: semantic colour roles in hex and OKLCH, the full shadcn token set in light and dark, two font families, one radius token, an explicit spacing scale, WCAG contrast ratios that were computed rather than asserted, numbered rules each checkable against the tables above them, and paste-ready CSS variables.
The contrast section is the part worth reading twice. If a colour pair fails AA, the file says FAILS WCAG instead of quietly shipping it. Nothing in the file is an adjective the agent has to interpret.
The files are plain Markdown, so nothing here is Claude-specific. Per-tool wiring for Cursor, Codex, v0 and Lovable: https://csscreme.com/ai/design-md
Full field spec, with a worked example generated at build time: https://csscreme.com/ai/design-md
Nobody owns the DESIGN.md file name, us included. The useful part here is the generator and the measured contrast, not the noun.
MIT. The skill is MIT; the themes it fetches are free to use.