Style 看板
Style 看板是已生成作品页面中 Style tab 的文档模型。它解释一个生成页面如何被转换成可复用的视觉系统：字体、色彩、布局、间距、表面、按钮、图标、形状和设计指导。
这个 tab 之前曾叫 Design System。当前面向用户的名称是 Style，但内部实现仍可以继续使用 design-system 数据结构，直到明确规划更大范围的重构。
绑定约定
Style 看板与已生成作品页的 Style tab 绑定。
- UI 来源：
src/components/work-design-system-board.tsx，Styletab 面板。 - 文档来源：
docs/STYLE_BOARD.zh.md。 - 阅读路由：
/zh/docs/style-board。 - 同步规则：当
Styletab 的卡片、提取证据、视觉样本、字段名称或空状态变化时，必须在同一次改动中更新本文档。 - 反向同步规则：当本文档改变 Style 看板模板或功能契约时，也必须同步更新
Styletab 实现。 - 命名规则：面向用户的 tab 文案应使用
Style；内部 class name、data key 和 parser name 可以继续保留design-system，直到明确计划整体重构。
目标
Style tab 应帮助用户回答六个问题：
- 这个生成项目建立了什么可复用视觉身份？
- 哪些字体、色彩、布局、间距和表面规则可以复用？
- 哪些组件处理方式已经由生成 HTML 和 prompt 证据证明？
- 未来生成中哪些规则应该保留，哪些应该避免？
- 哪些特殊 Skill 正在影响当前风格？
- 哪些提取细节足够可信，可以复制到另一个 prompt 或 skill 中？
这样，已生成作品页不只是生成结果预览，也会成为风格分析界面。
看板结构
Style tab 是由证据卡片组成的视觉看板。只有当项目从 design.md、full prompt、生成 HTML、解析 token 或作品分析中拥有足够证据时，卡片才应出现。
推荐卡片顺序：
- Typography / 字体
- Colors / 色彩
- Layout / 布局
- Spacing / 间距
- Buttons / 按钮
- Icons / 图标
- Elevation & Depth / 层级与深度
- Shapes / 形状
- Do's and Don'ts / 应做与避免
- Interface Lab Skills
- Empty evidence state / 空证据状态
看板应保持足够紧凑，便于分析；但每张卡片必须只描述一个可复用风格层。
1. Typography / 字体
Typography 记录可在生成作品中复用的字体系统。
它应展示：
- 标题系统
- 正文系统
- 字体族
- 字母和数字样张
- 字体证据的复制操作
证据可以来自已解析的字体 token、design.md、生成 HTML class、inline style，或 full prompt 中关于字体层级的指令。
2. Colors / 色彩
Colors 捕获项目调色板和色彩使用信号。
它应展示：
- 命名色板
- Hex 或 CSS 色值
- 使用比例信号
- 当颜色可归一化时展示色阶
- 检测到渐变时展示渐变样本
- 色彩证据的复制操作
这张卡片应避免编造调色板。如果没有色彩证据，就不应渲染该卡片。
3. Layout / 布局
Layout 解释生成页面的结构组成。
它应展示：
- 布局类型
- 内容宽度
- 网格或框架模式
- 检测到的页面区域
- 简单线框预览
- 布局证据的复制操作
使用这张卡片保留页面结构节奏，而不是只保留表面观感。
4. Spacing / 间距
Spacing 从 token、代码和 prompt 证据中提取项目节奏。
它应展示：
- 常用间距值
- padding、margin 或 gap 测量
- 紧凑间距样张
- 间距证据的复制操作
目标是让间距能在未来 prompt 和 skill 中复现。
5. Buttons / 按钮
Buttons 记录可复用的操作按钮处理方式。
它应展示：
- 从 HTML 中检测到的按钮文案
- 背景色和文字色信号
- 圆角与 padding 信号
- Primary、secondary 或 supporting action 样本
- 组件证据的复制操作
这张卡片应描述真实交互 chrome，而不是泛泛的组件理论。
6. Icons / 图标
Icons 描述生成项目使用的图标处理方式。
它应展示：
- 图标风格
- 代表性图标样本
- 图标对齐、描边或填充指导
- 图标证据的复制操作
证据可以来自图标库、SVG 使用、class name 或 prompt 指令。
7. Elevation & Depth / 层级与深度
Elevation & Depth 捕获表面如何建立层级。
它应展示：
- 表面风格
- 边框处理
- 阴影处理
- blur 或 backdrop-filter 使用
- 存在时展示渐变边框或玻璃质感技术
- 层级证据的复制操作
这张卡片应解释材质逻辑，而不是孤立描述装饰效果。
8. Shapes / 形状
Shapes 记录圆角和轮廓系统。
它应展示：
- radius token 或测得的 border-radius 值
- 表面、输入框和标签样本
- 卡片、按钮、输入框、badge 和辅助表面的指导
- 形状证据的复制操作
使用这张卡片避免未来生成漂移到无关的几何语言。
9. Do's and Don'ts / 应做与避免
Do's and Don'ts 将风格分析转化为可复用约束。
它应展示：
- 应保留的正向规则
- 应避免的负向规则
- 指导证据的复制操作
这张卡片是未来 prompt 生成的风格 lint 层。
10. Interface Lab Skills
Interface Lab Skills 将生成页面连接到可复用 Skills。
它应展示：
- Skill 名称
- Skill 分类
- 影响等级
- 目标对象，例如字体、布局、动效、WebGL、图标或表面
- 该 Skill 为什么重要的简短原因
这张卡片解释哪些可复用 Skill 层正在塑造当前项目。
11. Empty Evidence State / 空证据状态
如果项目没有提供足够的 design.md、prompt、生成 HTML 或分析证据，Style tab 应显示明确空状态。
空状态应说明当前看板还不可信，而不是用猜测的风格规则填满界面。
模板规则
构建或维护 Style tab 时遵守以下规则：
- 面向用户的 tab 名称保持为
Style。 - 把视觉证据看板保留为已生成作品分析节点的第一个 tab。
- 只有存在足够源证据时才渲染卡片。
- 优先使用提取 token、生成 HTML、full prompt 和作品分析，不编造内容。
- 每张卡片应能按 section 复制。
- 视觉样本应紧凑且便于比较。
- 使用空状态，不编造风格分析。
- 保持 Style 看板文档与 Style tab 行为同步。
功能契约
Style 看板完整的条件：
- Tab 名称为
Style。 - 字体、色彩、布局、间距、按钮、图标、层级、形状、指导规则和 Skill 影响在存在证据时渲染。
- 每张已渲染卡片暴露一个明确可复用风格层。
- 空证据状态被明确处理。
- 文档和 UI 通过绑定约定保持同步。
这个契约让已生成作品页成为可复用风格模板，而不是孤立截图。