yuanfang-design

共享设计库，提供以下内容：

• base.css — 包含 30+ 个 Token CSS 变量（颜色、字体、尺寸、间距、圆角、阴影、装饰、功能开关）
• themes/ — 12 套主题覆盖样式，每套主题均为一个独立 CSS 文件，使用 [data-theme="..."] 选择器实现
• layout-types/ — 可复用的 HTML 模块（如 cover.html、future bullets/kpi-grid 等）
• showcase/ — 可视化质量验证工具：12 套主题 × 6 个平台 = 72 个 iframe，以网格形式展示
• references/authoring-guide.md — 新增主题 / layout-type 的规范说明

适用场景

在以下情况中使用该能力：

• 用户希望添加新的视觉风格 → 创建新的主题文件
• 用户希望添加新的布局类型（例如 bullets、kpi-grid）→ 创建新的 HTML 模块
• 用户希望一次性预览所有主题与布局 → 打开展示页（showcase）
• 用户希望了解整个设计系统 → 阅读 authoring-guide.md

目录结构

yuanfang-design/
├── base.css              # 所有 Token 的默认值（.cover 规则中不包含字面量）
├── themes/.css     # 每个主题 = 一组 Token 覆盖规则
├── layout-types/.html
├── animations.css        # 共享动画库（当前为占位文件）
├── references/authoring-guide.md
└── showcase/cover-showcase.html

主题工作原理

每个主题是一个独立 CSS 文件，用于覆盖 base.css 中定义的 Token：

[data-theme="dark-gold"] {
  --bg: #1A1A2E;
  --text: #F5E6D3;
  --accent: #E2B714;
  /* ... */
}

cover.html 这类 layout-type 仅引用 Token。切换主题即可完成整个布局的重新配色与样式重映射。

如何添加新主题

1. 将 themes/_template.css 复制为 themes/.css
2. 覆盖所需 Token：颜色、字体、尺寸、装饰、功能开关等
3. 测试：运行 npm run render -- --theme --layout cover --platforms xiaohongshu-v
4. 更新 showcase/cover-showcase.html，加入新主题

如何添加新 layout-type

1. 在 layout-types/.html 中创建 HTML 模块，并使用 {{}} 占位符表示可变内容
2. 在 base.css（或新建文件）中添加对应的 .layout- 样式规则
3. 测试：运行 npm run render -- --theme minimal-white --layout --platforms all
4. 将新 layout-type 添加至 showcase