Style tab 的视觉分析模板、证据来源、卡片结构和同步规则。
Style 看板是已生成作品页面中 Style tab 的文档模型。它解释一个生成页面如何被转换成可复用的视觉系统：字体、色彩、布局、间距、表面、按钮、图标、形状和设计指导。
这个 tab 之前曾叫 Design System。当前面向用户的名称是 Style，但内部实现仍可以继续使用 design-system 数据结构，直到明确规划更大范围的重构。
Style 看板与已生成作品页的 Style tab 绑定。
src/components/work-design-system-board.tsx，Style tab 面板。docs/STYLE_BOARD.zh.md。/zh/docs/style-board。Style tab 的卡片、提取证据、视觉样本、字段名称或空状态变化时，必须在同一次改动中更新本文档。Style tab 实现。Style；内部 class name、data key 和 parser name 可以继续保留 design-system，直到明确计划整体重构。Style tab 应帮助用户回答六个问题：
这样，已生成作品页不只是生成结果预览，也会成为风格分析界面。
Style tab 是由证据卡片组成的视觉看板。只有当项目从 design.md、full prompt、生成 HTML、解析 token 或作品分析中拥有足够证据时，卡片才应出现。
推荐卡片顺序：
看板应保持足够紧凑，便于分析；但每张卡片必须只描述一个可复用风格层。
Typography 记录可在生成作品中复用的字体系统。
它应展示：
证据可以来自已解析的字体 token、design.md、生成 HTML class、inline style，或 full prompt 中关于字体层级的指令。
Colors 捕获项目调色板和色彩使用信号。
它应展示：
这张卡片应避免编造调色板。如果没有色彩证据，就不应渲染该卡片。
Layout 解释生成页面的结构组成。
它应展示：
使用这张卡片保留页面结构节奏，而不是只保留表面观感。
Spacing 从 token、代码和 prompt 证据中提取项目节奏。
它应展示：
目标是让间距能在未来 prompt 和 skill 中复现。
Buttons 记录可复用的操作按钮处理方式。
它应展示：
这张卡片应描述真实交互 chrome，而不是泛泛的组件理论。
Icons 描述生成项目使用的图标处理方式。
它应展示：
证据可以来自图标库、SVG 使用、class name 或 prompt 指令。
Elevation & Depth 捕获表面如何建立层级。
它应展示：
这张卡片应解释材质逻辑，而不是孤立描述装饰效果。
Shapes 记录圆角和轮廓系统。
它应展示：
使用这张卡片避免未来生成漂移到无关的几何语言。
Do's and Don'ts 将风格分析转化为可复用约束。
它应展示：
这张卡片是未来 prompt 生成的风格 lint 层。
UI Design Lab Skills 将生成页面连接到可复用 Skills。
它应展示：
这张卡片解释哪些可复用 Skill 层正在塑造当前项目。
如果项目没有提供足够的 design.md、prompt、生成 HTML 或分析证据，Style tab 应显示明确空状态。
空状态应说明当前看板还不可信，而不是用猜测的风格规则填满界面。
构建或维护 Style tab 时遵守以下规则：
Style。Style 看板完整的条件：
Style。这个契约让已生成作品页成为可复用风格模板，而不是孤立截图。