プロトタイプ · プレビュー版:公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。Google でログインするとレビューを書けます。
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説

CSS Crème

作者:damnepicバージョン 1.8.1i★ 0iクラウドで動く
レジストリ名com.csscreme/design-systems

インストール方法

What it does

Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.

  • Connects クラウドで動く
  • Account or key No key needed
  • Category デザイン・画像・音声

インストール

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

チェック 5/5 合格 · 質問内容は提供元のサーバー(csscreme.com)を通ります

まず:どの AI を使っていますか?

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

Claude につなげます · 約 2 分

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

  1. Claude の Connectors ページを開く

    CustomizeConnectors

    CustomizeConnectors1+ Add2https://…3Add4
  2. 「+ Add」→「Add custom connector」を押し、この 2 つを入力

    ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します

    Name · 名前CSS Crème
    Remote MCP server URL · アドレスhttps://csscreme.com/mcp

    Authentication は Claude が検出したままにして Add を押します

  3. チャットで有効にする

    +ConnectorsCSS Crème

  4. 試してみる

    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 を自分でつなげません

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

    Plugins+Add custom MCP server

    ChatGPTPlugins1+2https://…3Create4
  2. 名前とアドレスを入力

    名前を入れ、Connection にアドレスを貼り付け、注意事項にチェックして Create as a plugin を押します

    Name · 名前CSS Crème
    Connection · アドレスhttps://csscreme.com/mcp
  3. チャットで CSS Crème を選ぶ

    新しいチャットを開き、入力前にプラグインの一覧から CSS Crème を選びます

  4. 試してみる

    CSS Crème を使って、私に何ができるか教えて、1 つやってみせて

    ✓ ChatGPT が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です

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

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

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

  1. ターミナルを開く

    Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く

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

    claude mcp add --transport http --scope user design-systems https://csscreme.com/mcp
  3. Claude Code で /mcp と入力

    CSS Crème が一覧にあり、接続済みと表示されれば OK です

  4. 試してみる

    CSS Crème を使って、私に何ができるか教えて、1 つやってみせて

    ✓ Claude Code が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です

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

Cursor につなげます · 約 2 分

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

  1. このボタンで Cursor を開く

    Cursor で開く

    Cursor がインストールの確認をするので Install を押します

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

  3. 試してみる

    CSS Crème を使って、私に何ができるか教えて、1 つやってみせて

    ✓ Cursor が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です

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

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

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

  1. このボタンで VS Code を開く

    VS Code で開く

    VS Code がインストールの確認をするので Install を押します

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

  3. 試してみる

    CSS Crème を使って、私に何ができるか教えて、1 つやってみせて

    ✓ VS Code が CSS Crème を使っていると言うか、回答に CSS Crème のツール名が出れば接続成功です

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

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

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

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

アドレスhttps://csscreme.com/mcp

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

つまずいたら?CSS Crème を使っている人に聞いてみましょう💬 ディスカッション →
開発者向け:ターミナルのコマンドと JSON 設定

Web 経由

Claude Code

claude mcp add --transport http --scope user design-systems https://csscreme.com/mcp

Cursor (~/.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に従ってください。

ひと目でわかる

週あたりのダウンロードi
npm/PyPIにない
確認済みドメイン
✓ csscreme.com
接続方法
クラウドで動く
トランスポート
streamable-http
最新バージョンi
1.8.1
レジストリ公開日i
2026年9月26日
コードの最終更新i
2026年10月23日
作者
damnepic
ウェブサイト
csscreme.com
レジストリでの状態
有効

使えるアプリ

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

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

ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

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

できること

ツールの名前と説明は、サーバーが2026年11月8日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。

  • search_themes

    Find 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_themes

    Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.

  • get_design_md

    Fetch 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_tokens

    Get 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_use

    Explains 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_command

    Return 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_rules

    Return 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_url

    Fetch 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_feature

    Answers 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_url

    Read 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_site

    Read 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_md

    Every 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_embed

    Returns 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

基本チェックi

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

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名はドメイン csscreme.com で確認済みです(レジストリがドメインの所有を確認しています)

  • ✓ 合格

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

    コードの最終更新:20 日前

  • ✓ 合格

    ライセンスがある

    MITを使用

  • ✓ 合格

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

    461ミリ秒で応答(HTTP 200)

  • – 対象外

    OAuthでサインイン

    サインイン不要

  • ✓ 合格

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

    13件のツールの説明を読み、AIへの隠れた指示は見つかりませんでした

話し合い

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

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

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

Google でログインして投稿

ユーザーレビュー

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

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

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

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

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

よくある質問

CSS Crèmeは安全ですか?

当てはまる基本チェック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

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万15 日前更新

パソコンで動く

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万 リポジトリ全体のスター5 日前更新

パソコンで動く

作者のREADME

READMEを開く

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

csscreme skill

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.

Why

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.

Install

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.

As a skill

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".

What it does

  1. Fetches a DESIGN.md for one of the curated themes at https://csscreme.com/themes.
  2. Or extracts one from any site via https://csscreme.com/extract - URL or screenshot in, role-mapped tokens out, contrast checked in both modes.
  3. Installs the tokens for real with npx shadcn@latest add .

Endpoints it uses

URLReturns
csscreme.com/d/ .mdDESIGN.md for a curated theme
csscreme.com/d/t/ .mdDESIGN.md for a template theme
csscreme.com/t/ .mdDESIGN.md for an extracted theme
csscreme.com/r/ .jsonshadcn/ui registry item
csscreme.com/t/ .jsonshadcn/ui registry item, extracted
csscreme.com/mcpMCP server (JSON-RPC 2.0 over POST)

All CORS-open and cacheable, served as text/markdown or application/json.

What the agent actually gets

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.

Works with other tools too

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

The format

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.

Licence

MIT. The skill is MIT; the themes it fetches are free to use.