以 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,作为校验用的资源随附发布。
工作方式
- 01只需运行一次 onboarding
该 skill 是 markdown-html 插件共用的品牌归属方:md-document、md-review 与 md-slides 都消费它写出的配置,因此一次运行即可为所有转换打上品牌。
- 02回答这十个问题
向导会记录 default_output_dir、主色与强调色 HEX、标题与正文字体、design_style、code_theme、toc.behavior,以及可选的 company_name 和 logo_url。
- 03让校验把关保存
brand_palette_validator.validate() 会在每次改动后运行,因此每编辑一个字段都会重新校验该配色对,而不只是在向导结束时才检查。
- 04派生这十二个 token
derive_palette() 会计算 token,例如 --md-surface 取 bg 亮度上下浮动 4-6%,--md-text-muted 取 rgba(text, 0.68),并将它们存到同一配置文件的 derived_palette 下。
- 05按优先级解析配置
config_loader.py 是每个转换器在渲染前都会调用的可导入加载器;它依次合并项目配置、全局配置和内置默认值,并遵循 bypass 环境变量。
- 06非交互式覆盖或重置
除向导之外,onboard.py 还支持 --defaults、--set key=value、--scope project、--show 和 --reset,因此无需再走一遍问题即可修改或清除品牌字段。