技能介绍

要解决什么问题

做多平台视觉稿时，颜色、字号、圆角和阴影往往散落在各处 CSS 里；换一套风格就要改一堆选择器，layout 和 skin 也容易缠在一起。yuanfang-design 把「令牌 + 主题 + 布局块 + 对照页」拆成一条可维护链路：layout 只引用 token，换主题等于整页换肤。

技能如何工作

库内主要几块：

base.css：30+ 个 CSS 变量（colors、fonts、sizes、space、radius、shadow、decor、feature flags）
themes/：12 个主题，每个是单文件，用 [data-theme="..."] 覆盖 base 令牌
layout-types/：可复用 HTML 块（如 cover.html，后续可扩展 bullets、kpi-grid 等）
showcase/：视觉 QA，12 主题 × 6 平台共 72 个 iframe 网格
references/authoring-guide.md：新增主题与 layout 的规范

新增主题：复制 themes/_template.css → 在 themes/ 下命名新文件 → 覆盖 colors、fonts、sizes、decor、feature flags → 用 npm run render -- --theme <名> --layout cover --platforms xiaohongshu-v 验证 → 在 showcase/cover-showcase.html 登记。

新增 layout-type：在 layout-types/ 写带 {{}} 占位符的 HTML → 在 base.css（或新文件）补 .layout-* 规则 → npm run render -- --theme minimal-white --layout <名> --platforms all → 加入 showcase。

适用边界

这是共享设计库与 authoring 约定，不是通用 UI 框架：新样式应走「主题文件覆盖 token」，新版式应走「layout-types + token」，避免在 layout HTML 里硬编码色值。一次看全主题与 layout 时打开 showcase；理解体系优先读 authoring-guide.md。