CSS Crème

csscreme skill

UI の作成前に、コーディングエージェントに実際のデザインシステムを与える Claude Code スキルです。 セマンティックトークン、測定済みの WCAG コントラスト、そして遵守すべきルールを提供します。

無料です。アカウントも API キーも、有料プランも必要ありません。

理由

デザインシステムなしで UI を依頼されたエージェントは、毎回同じことをします。パレットを独自に考案し、3〜4種類の角丸を混在させ、誰も求めていない2つ目のフォントを追加し、コントラストを一度も確認しないままリリースします。結果は見ただけですぐに分かります。プロンプトの言い換えをどれだけ試しても解決しません。問題は指示の弱さではなく、入力が不足していることだからです。

ファイルがあれば解決できます。エージェントが使用しなければならないトークン、主張ではなく実際に計算された比率、そして実際に構築されたものと差分を比較できる番号付きルールです。「この6つの役割だけを使う」は検証できます。「すっきりした見た目にする」は検証できません。

インストール

最速の方法：MCP サーバーに接続する（無料、アカウント不要、キー不要）：

claude mcp add --transport http csscreme https://csscreme.com/mcp

ファイルを管理することなく、エージェントが13個のツールを使えるようになります。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、get_scene_embed です。特に知っておくと便利なのは URL ツールです。エージェントに公開中の URL を渡すと、そのサイトを同じ形式に変換し、その後、生成した UI とファイルを照合します。css_feature は、Baseline のデータと、厳選したサイトで実際に使われている状況をもとに、最新の CSS 機能を安心してリリースできるかどうかを回答します。以下のスキルは、その上にプロジェクト独自のルールを加えます。

スキルとして

Claude Code（プロジェクト単位）：

mkdir -p .claude/skills/csscreme
curl -o .claude/skills/csscreme/SKILL.md \
  https://raw.githubusercontent.com/damnepic/csscreme-skill/main/SKILL.md

Claude Code（すべてのプロジェクト）： 同じ内容を ~/.claude/skills/csscreme/ に配置します。

あとは通常どおり UI を依頼します。このスキルは、「ダッシュボードを作って」「もっとありきたりでない見た目にして」「stripe.com のデザインに合わせて」のような依頼で起動します。

機能

1. 厳選テーマの DESIGN.md を https://csscreme.com/themes から取得します。
2. 任意のサイトから DESIGN.md を抽出します。https://csscreme.com/extract を使い、URL またはスクリーンショットを入力すると、役割に対応付けられたトークンが出力され、両方のモードでコントラストがチェックされます。
3. npx shadcn@latest add <registry-url> を使って、トークンを実際にインストールします。

使用するエンドポイント

URL	返される内容
csscreme.com/d/<slug>.md	厳選テーマの DESIGN.md
csscreme.com/d/t/<slug>.md	テンプレートテーマの DESIGN.md
csscreme.com/t/<id>.md	抽出したテーマの DESIGN.md
csscreme.com/r/<slug>.json	shadcn/ui レジストリアイテム
csscreme.com/t/<id>.json	抽出したテーマの shadcn/ui レジストリアイテム
csscreme.com/mcp	MCP サーバー（POST 経由の JSON-RPC 2.0）

すべて CORS が許可され、キャッシュ可能です。text/markdown または application/json として配信されます。

エージェントが実際に得るもの

DESIGN.md は説明ではなく、契約です。8つのフィールドで構成されています。HEX と OKLCH で示すセマンティックカラーの役割、ライトモードとダークモードの shadcn トークン一式、2種類のフォントファミリー、1つの角丸トークン、明示的なスペーシングスケール、主張ではなく実際に計算された WCAG コントラスト比、上にある表と照合できる番号付きルール、そしてそのまま貼り付けられる CSS 変数です。

特に詳しく読む価値があるのはコントラストのセクションです。色の組み合わせが AA に適合しない場合、ファイルには黙ってリリースするのではなく、FAILS WCAG と記載されます。ファイル内に、エージェントが解釈しなければならない形容詞はありません。

ほかのツールでも使えます

ファイルはプレーンな Markdown なので、Claude 専用ではありません。Cursor、Codex、v0、Lovable のツールごとの設定方法については、https://csscreme.com/ai/design-md をご覧ください。

フォーマット

ビルド時に生成された使用例を含む、すべてのフィールドの仕様： https://csscreme.com/ai/design-md

DESIGN.md というファイル名の所有者はいません。私たちも含めて、誰のものでもありません。役立つのは生成ツールと測定済みのコントラストであって、名称ではありません。

ライセンス

MIT です。スキルは MIT で、取得したテーマは無料で使用できます。