跳转到使用指南
design-system作者 Alireza Rezvani

Design System Skill.

Claude Code 和 Codex 的品牌和设计系统 skill:通过 10 个问题向导一次性捕捉品牌识别,用于后续文档和演示文稿。

  • Brand & Design Systems
  • 设计系统
alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)
正文和章节标题读取自 2026-09-14 的上游文件 · 完整 11,234 字符

01 功能说明

design-system skill 在 Claude Code 和 Codex 中做什么

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

design-system skill 是 markdown-html 插件的共享品牌负责人。它通过一个 10 个问题的上手向导一次性固化品牌身份——主色与强调色的 HEX 值、标题与正文所用的 Google Fonts、设计风格(编辑感、技术感、极简或活泼)、默认输出目录、代码主题、TOC 行为,以及可选的公司名称与 logo——随后依据 WCAG 2.2 AA 校验正文与链接的对比度,并在 HSL 空间中推导出 12 个 CSS 自定义属性。

三个仅依赖标准库的 Python 工具负责 onboarding、配置加载与调色板校验;优先级为项目配置高于全局配置高于内置默认值。每个转换器(md-document、md-review、md-slides)都会读取已保存的配置,因此改动一个 token 就会改变每一个渲染出的文档。

它产出什么

  • 一个保存品牌与派生调色板的配置文件,既可写入全局,也可写入项目内。
  • 内联进每个转换器 style 块中的十二个 CSS 自定义属性,例如 --md-surface、--md-border、--md-link 和 --md-warn。
  • 配置的 JSON schema,作为校验用的资源随附发布。
查看示例提示词 ↗

工作方式

  1. 01
    只需运行一次 onboarding

    该 skill 是 markdown-html 插件共用的品牌归属方:md-document、md-review 与 md-slides 都消费它写出的配置,因此一次运行即可为所有转换打上品牌。

  2. 02
    回答这十个问题

    向导会记录 default_output_dir、主色与强调色 HEX、标题与正文字体、design_style、code_theme、toc.behavior,以及可选的 company_name 和 logo_url。

  3. 03
    让校验把关保存

    brand_palette_validator.validate() 会在每次改动后运行,因此每编辑一个字段都会重新校验该配色对,而不只是在向导结束时才检查。

  4. 04
    派生这十二个 token

    derive_palette() 会计算 token,例如 --md-surface 取 bg 亮度上下浮动 4-6%,--md-text-muted 取 rgba(text, 0.68),并将它们存到同一配置文件的 derived_palette 下。

  5. 05
    按优先级解析配置

    config_loader.py 是每个转换器在渲染前都会调用的可导入加载器;它依次合并项目配置、全局配置和内置默认值,并遵循 bypass 环境变量。

  6. 06
    非交互式覆盖或重置

    除向导之外,onboard.py 还支持 --defaults、--set key=value、--scope project、--show 和 --reset,因此无需再走一遍问题即可修改或清除品牌字段。

02 找到适合场景

何时使用 design-system Skill

当工作是此类品牌与设计系统工作时,在 Claude Code 或 Codex 中使用 design-system skill。适用范围和限制来自该 skill 自己的文件。

适合场景

  • 某个工作区里有人第一次要求把 markdown 转成 HTML,因此 onboarding 从未运行过。
  • 某个仓库需要与其他工作不同的品牌,不应继承全局配置。
  • CI 或临时会话,需要零干预的默认值,而不是十个交互式问题。
  • 你已经至少有一个品牌 HEX,希望它一致地应用于各项 HTML 转换。
  • 你想在把候选主色与强调色写入配置前,先用 WCAG 检验它们。

了解边界

  • 它不是 Style Dictionary 或 Theo 那样的完整设计 token 系统;它只提供十二个 token,而非上百个。
  • 它不托管自定义字体——通过 CDN 引入的 Google Fonts 是唯一的字体来源。
  • 它不是无障碍审计套件;那由 axe-core 或 pa11y 负责,而该 skill 只强制校验对比度。
  • 它不会转换现有 CSS —— 派生出的色板只会注入到新生成的 HTML 中。

需要提供的信息

  • 默认输出目录该路径必须可写入;默认为 ./markdown-html-out/,取值不可写入或为空会阻止保存。
  • 品牌主色 HEX按 ^#?[0-9a-fA-F]{6}$ 校验;默认 #0A1628。强制提问库推荐你已经在用的 HEX,而不是现成的蓝色。
  • 强调色 HEX,或留空首次运行时留空,让派生逻辑生成一个搭配色;只有当品牌规范明确指定时才手填。
  • 标题与正文字体名称从 12 个安全默认字体中选取的 Google Font 名称,两个角色都默认使用 Inter。
  • 可选的公司名称与 logo URL两项默认均为空字符串;logo URL 可以留空,并在渲染时以 base64 内嵌。

03 Skill 内部

design-system Skill 为 Claude Code 和 Codex 定下的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 对比度必须通过,否则无可补救

    背景上的正文文本和背景上的链接都必须达到 WCAG 2.2 §1.4.3 规定的 4.5:1。

  2. 输出目录必须可写入

    向导会向上找到已存在的祖先目录并检查 os.access(parent, os.W_OK);路径为空或不可写入时以退出码 3 结束,output_path_resolver.py 在每次转换时应用同一规则。

  3. 定制必须改变输出

    只起装饰作用的字段通不过设计纪律:当 design_style、brand.primary、code_theme 或 toc.behavior 发生变化时,每个消费方都必须读取配置并渲染出不同结果。

  4. 优先级是固定的

    项目配置优先于全局配置,全局配置优先于内置默认值,深度合并会保留嵌套键,因此在项目中覆盖 brand.primary 不会丢掉全局的 typography.heading_font。

  5. 绕过机制只用于无头运行

    MARKDOWN_HTML_NO_CONFIG=1 服务于 CI、临时测试容器和评估循环;面对交互式用户时绝不要悄悄设置它,否则他们会疑惑自己的 token 去了哪里。

  6. 切勿把鲜艳的主色用作背景

    把饱和的品牌主色直接用作 brand.bg 会导致文本对比度过低;它属于强调色的位置。

  7. 保持在 12 个 token 的分类体系之内

    品牌语义不会在这十二个 token 之外的 derived_palette 中编码;新增一个 token 都需要明确的名称、用途和派生规则。

04 投入使用

在 Claude Code 或 Codex 中安装 design-system

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design-system 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

markdown-html/skills/design-system/SKILL.md 对应的通用 skills CLI 形式;各仓库可以记录自己的路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 用 config_loader.py --show 查看生效的配置,它按项目 > 全局 > 默认值的顺序解析。
  • 确认配置文件存在且 setup_completed_at 已设置;若该值缺失或为 null,转换器会拒绝执行,转而展示引导流程。
  • 在确定品牌之前,用 brand_palette_validator.py 的 --primary 与 --accent 抽查候选配色对的对比度。
  • 用 MARKDOWN_HTML_NO_CONFIG=1 运行,验证 bypass 行为与文档一致——此时只返回 DEFAULTS。

在 OpenDesign 中通过它 SKILL.md 里的链接导入 design-system:Plugins → Add → Skill → Import from link,然后在顶栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
markdown-html/skills/design-system/SKILL.md 在验证时记录的内容校验和;提交 19392f7
License
MIT 来自 LICENSE;SKILL.md 标注为"MIT"。
仓库星标数
25,934 于 2026-09-14 为整个 alirezarezvani/claude-skills 仓库拍摄的 GitHub 快照,该仓库在此目录中包含 5 个 skills。不是 design-system 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时调用症状→动作对照表:onboard、拒绝转换、项目范围、单字段设置、reset、defaults、bypass。
  2. 引导问题集(10 个问题)十个键的表格,含校验器与默认值,从输出目录到 logo URL。
  3. 硬性规则五条编号规则:WCAG AA 门槛、可写目录、真实自定义、固定优先级、有意的 bypass。
  4. 派生的 12-token 调色板逐个把 CSS 自定义属性映射到其用途与 HSL 推导规则的表格。
  5. 追问问题库(Matt Pocock 的 grill-with-docs 模式)五个每轮一问的问题,附推荐答案与 canon 引用。
  6. 实际使用中的自定义(完整示例)展示 onboarding、defaults、set、项目范围、reset、show 与 bypass 的 Bash 代码块。
  7. 前提假设四项前提:一个品牌 HEX、一到两分钟的设置、Google Fonts、WCAG AA 底线。
  8. 非目标它不是什么:token 系统、字体托管、深色模式切换器、审计套件、CSS 转换器。
  9. 区别于把本校验器与引导脚本同落地页版本和临床研究版本作对比。
  10. 输出产物指明全局与项目 JSON 路径,以及 schema 资源文件。
  11. 反模式(不要这么做)四种应避免的失败:跳过 onboarding、鲜艳背景、静默 bypass、脱离分类体系的 token。
  12. 参考资料WCAG 条款、排版与色彩书籍、目录(TOC)指南、同类脚本。
Skill 自身的描述
"通过 10 个问题的引导向导一次性捕获用户的品牌标识(主色/强调色 HEX + 标题 + 正文 Google Fonts + 设计风格 editorial/technical/minimal/playful + 默认输出目录 + 语法主题 + 目录行为 + 可选的 logo/公司名),根据 WCAG 2.2 AA 标准验证正文和链接的对比度,在 HSL 色彩空间中派生 12 个 CSS 自定义属性,并存储结果供所有 markdown-html 转换器使用。在任何 markdown-html 转换之前使用。在首次运行引导("设置品牌"、"配置 markdown-html"、"运行引导")、显式重置("重置设计系统"、"重新引导")时触发,每个转换器在渲染前通过 config_loader.py 检查。如果正文对比度未达到 AA 4.5:1 或输出目录不可写,则拒绝保存。优先级为项目级(./.markdown-html/)> 全局级(~/.config/markdown-html/)> 内置默认值;MARKDOWN_HTML_NO_CONFIG=1 可绕过。"

来自 SKILL.md 的 front-matter 描述。完整文件约 11,234 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-system skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

我必须在转换任何内容之前先完成 onboarding 吗?

转换器通过 config_loader.py 检查配置:若配置缺失或 setup_completed_at 为 null,转换会被拒绝并提示进行 onboarding。在你完成设置之前,输出会以占位默认值渲染——技术上可用,但没有品牌。

Design System

在真实品牌和 design-system 工作任务上运行 design-system。

下载 OpenDesign,从其 SKILL.md 链接导入 design-system,粘贴上述提示,在结果前阅读计划。

终端
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows