Sampo：UI 设计、动效与3D
为任何关于屏幕外观或动效的工作提供统一路径：网页、应用界面、组件、动画、3D场景，或“让它看起来更好”。它会路由到 UI 操作手册（playbooks）（以下路径相对于本技能；使用 sampo playbooks show ui/NAME 可打印相同文件）以及衡量结果的 sampo 动词。目标是创建具有独特观点的 UI，而非千篇一律的卡片组合：以下每一步要么确立决策，要么验证决策。终端 UI 或 Claude Code 模式则使用 ../playbooks/references/ui/terminal-ui.md。
在聚焦的任务内工作（每一步编辑文件）。每步只阅读其指定的操作手册。
1. 方向：决定应有的感觉
- 仓库已有一个（包含
## Direction部分的DESIGN.md，品牌指南，已交付的设计系统）：以此为准。阅读后进入第2步，除非用户要求全新的外观。 - 没有方向，或用户想要可供选择的外观或风格：加载：技能 sampo:directions（根据一句话生成六张单屏卡片，选择的卡片保存为带有胆识等级的
DESIGN.md）。 - 展示真实样本而非描述：
sampo page looks为每张外观卡片创建一个包含真实样本的图库；sampo looks根据用户过去的保留和还原对二十个样本进行排名，因此优先提供其前列的样本。 - 设计立场、品味词汇、方向库以及“应避免的默认值”：
../playbooks/references/ui/design-direction.md。
2. 设计标记：字体、颜色、间距
../playbooks/references/ui/type-and-colour.md：字体等级与配对、OKLCH 调色板角色、暗色模式作为独立环节。- 现有 CSS：
sampo design extract SRC从自定义属性中提取标记表并写入 DESIGN.md 的## 设计标记部分（--out -则打印到标准输出）。从头开始：sampo design palette SEED --out tokens.css基于一种颜色生成明暗调色板（--format css|dtcg|tailwind）；它输出到标准输出，因此需使用 > 重定向。来自 Figma 或 DTCG .json 的标记：sampo design tokens tokens.json --to md --out DESIGN.md。硬编码值：sampo design infer SRC提出建议标记。 - 品牌资产：
sampo design tokens DESIGN.md --to brand --out public/写入 favicon.svg 和 card.svg。 - 标记漂移：
sampo design xray PAGE --out xray.png将每个元素高亮为绿色（标记颜色）或红色。 - 构建前验证：
sampo design contrast TOKENS检查角色对比（暗色模式下正文文本为7:1）。
3. 构建：布局与行为
- 从严格模板开始：
sampo new list，然后sampo new web DIR（一个页面）或sampo new scene DIR（一个3D场景）；sampo new check PATH保持严格性。 ../playbooks/references/ui/composition.md：节奏、网格、单一光源深度、主视觉、状态图集。../playbooks/references/ui/interaction.md：反馈时限、键盘导航、表单错误、360像素触控规则。- 图表：
../playbooks/references/ui/data-viz.md。故事页面：../playbooks/references/ui/scrollytelling.md。 - 代码侧卡片：
sampo lib show NAME（操作手册中命名它们）。
4. 动效：精心设计，而非随意点缀
../playbooks/references/ui/motion.md：时间标记、状态到动效映射表、故事板、减少动效作为独立路径。- 编写动效评分表（仓库根目录下的
motion.toml），然后使用sampo motion check（检查缺失的减少动效形式、未知的缓动曲线、DESIGN.md 缺少的标记）以及sampo motion compile --to css|waapi|three|lab --out FILE生成代码。 - 游戏和趣味性 UI：
../playbooks/references/ui/game-feel.md。音效：../playbooks/references/ui/sound-design.md。
5. 3D：永不破坏页面的场景
../playbooks/references/ui/scene-3d.md：构图、光照与材质、帧预算、生存契约（无 WebGL、减少动效、上下文丢失）、黑屏故障排查。- 将场景描述为数据（摄像机、灯光、材质、网格、动画）并存放在
scene.json中，然后使用sampo scene compile scene.json --to three --out scene.js（一个 three.js 模块）或--to component（一个组件）。 - 无依赖：单文件 WebGL2 模板
../playbooks/references/ui/templates/scene.html（sampo new scene）。 - 灯光组合与 PBR 预设：
sampo lib show light-and-material；针对单个表面的着色器纹理，非整个方向：sampo lib list --area looks，然后sampo lib show shader-NAME；库：sampo lib show three-js、sampo lib show react-three-fiber。
6. 检查：通过视觉验证
sampo design lint SRC：通用设计问题和工艺瑕疵；修复每项或说明保留原因。其最后一行列出 DESIGN.md 中标记但未在文件中使用的标记：在代码中引入它们或从标记表中删除它们。sampo design check：DESIGN.md 中选择启用的检查（## 检查条件，- brief: advisory|blocking）：检查代码中出现的颜色、字体族和时长；- a11y：…：标记对比对、减少动效路径、无快速闪烁、img alt 和可见聚焦样式；- debt: advisory 40：每个文件中未标记化的颜色、时长和半径，低于预算。- 任何颜色更改后再次运行
sampo design contrast TOKENS；任何动效更改后再次运行sampo motion check。 sampo critique URL：页面实际使用的样式与 DESIGN.md 标记的对比（未命名、近似重复、一次性样式）；--why SELECTOR显示哪条规则生效。--bingo对九个模板化外观特征进行评分（整行命中时退出代码1）；--marks shot.png将截图上的铅笔红色笔划转换为每个标记元素的一个捕获的修复项（--note说明每项要求）；--brief [ID]检查设计简报中引用的短语是否出现在页面上。../playbooks/references/ui/visual-qa.md：sampo smoke拍摄帧矩阵（360/768/1440，亮色和暗色，减少动效）；读取 PNG 并查看。前后对比：sampo img diff A.png B.png --out diff.png。- 组件的状态（默认、悬停、错误、空、加载中）：
sampo stories CHART将每个状态拍摄到一个矩阵页面中。sampo shot和sampo stories接受--profile tv|eink|car|wrist（该界面的尺寸和缩放）以及--reduced-motion（用于海报和静态状态的 prefers-reduced-motion: reduce）。 - 将每项记录作为任务步骤的证据；UI 更改不能仅依赖绿色测试完成。
7. 品味
用户保留或还原某个外观：sampo looks keep LOOK 或 sampo looks revert LOOK，以便下次排名从中学习。