CSS Crème

csscreme 技能

一项 Claude Code 技能，让编码 Agent 在编写 UI 前就获得真正的设计系统： 语义化令牌、经过测量的 WCAG 对比度，以及可供严格遵循的规则。

免费。无需账户、API 密钥或付费套餐。

为什么

如果 Agent 在没有设计系统的情况下被要求制作 UI，每次都会做出同样的事：自创一套配色， 混用三四种圆角，再添一种没人要求的字体，最后交付未经检查的对比度。结果一眼就能认出来， 无论怎样改写提示词都无济于事，因为问题在于缺少输入，而不是指令不够明确。

一个文件就能解决这个问题。Agent 必须使用的令牌、经过计算而非凭空宣称的比例，以及 可与实际构建结果逐项比对的编号规则。“只使用这六种角色”可以检查，“做得简洁”则不行。

安装

最快方式：连接 MCP 服务（免费、无需账户或密钥）：

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

这样 Agent 就能使用十三种工具，无需管理任何文件：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 提供给 Agent，它就能把该网站解析为 相同格式，之后再用生成的文件检查自己制作的 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. 也可以从任意网站提取，通过 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 格式提供。

Agent 实际获得的内容

DESIGN.md 是一份契约，而非描述。它包含八个字段：以十六进制和 OKLCH 表示的语义颜色角色、 浅色和深色模式下完整的 shadcn 令牌集、两个字体系列、一个圆角令牌、明确的间距刻度、 经过计算而非凭空宣称的 WCAG 对比度、可根据上方表格逐项检查的编号规则，以及可直接粘贴的 CSS 变量。

对比度部分值得仔细读两遍。如果某个颜色组合未达到 AA 标准，文件会写明 FAILS WCAG，而不是默默将其用于正式发布。文件中没有任何需要 Agent 自行揣摩的形容词。

也适用于其他工具

这些文件是纯 Markdown，因此并非 Claude 专用。Cursor、Codex、v0 和 Lovable 的工具接入方式： https://csscreme.com/ai/design-md

格式

完整字段规范及构建时生成的示例： https://csscreme.com/ai/design-md

DESIGN.md 这个文件名不属于任何人，包括我们。真正有用的是生成器和经过测量的对比度， 而不是这个名词。

许可证

MIT。该技能采用 MIT 许可证；它获取的主题均可免费使用。