SHELEG Design
概述
一个页面之所以感觉有电影感，并非因为动效繁多，而是源自一个单一真实来源（测量的滚动位置）驱动众多廉价、分层、可独立降级的响应。将滚动集中到一个存储中；各层每帧读取并用自己的语言做出反应。没有交叉淡入淡出——事物是重新部署的。每一层都降级至一个平静的静态状态。
必需的参考——关于电影感路径： 在实现滚动驱动页面之前，请阅读 SHELEG_DESIGN.md——架构、变形数学、DOM↔WebGL 桥梁、构建配方（第11节）、文件映射。产品 UI 工作无需阅读此文档；它唯一需要遵守的规则在此重复：如果某个包的动效令牌与 SHELEG 默认值不同，则以该包为准。
在任何动效开始前必需： 阅读 MOTION_DOCTRINE.md。SHELEG_DESIGN.md 说明动效如何构建；而原则说明是否要构建——即抑制高频重复路径上动效的频率表、缓动树和 ease-in 禁令、时长上限、禁止形式以及减少动效契约。
使用时机
- 将动效作为明确目标的落地/营销/英雄页面；与滚动关联的粒子或 WebGL 背景；滚动驱动的图表、步骤流、导轨、视差效果
- 现有的滚动网站感觉紧张、卡顿或相位不同步
- 需要锁定视觉系统的产品 UI——仪表盘、管理后台、内部/开发工具、令牌、亮/暗模式——仅限风格包，通过
workbench - AI 产品界面：聊天和代理 UI、流式输出、运行日志、模型错误、生成内容和确认状态 (
AI_PRODUCT_PATTERNS.md) - 在 Figma 边界之间双向移动视觉系统 (
FIGMA_BRIDGE.md)
切勿将电影感动效层应用于： 产品 UI、文档网站、静态内容网站——或任何视觉系统或文案尚未完成的页面。产品 UI 仅使用风格包的一半，不包含其他内容。
核心模式——五项原则，按顺序
- 一个时钟。 所有动效源自一个统一的测量滚动状态；没有图层自行测量滚动，因此各层永远不会相位漂移。
- 每帧读取，极少通知。 热消费者（WebGL/Canvas/导轨）主动读取存储，零框架渲染；仅粗粒度的 act/section 变化通知框架。
- 保持，然后重新部署。 在一个段落中保持形态约80%的时间，然后在短时段、相位交错、弧线弯曲的波形中变形。禁止交叉淡入淡出。
- 应得的动效。 仅对随时间叙述状态的工具使用滚动手势；悬停/入场动效保持在 500ms 以下，且绝不阻挡内容。
- 降级至平静。 减少动效/粗指针/无 WebGL 降级至静态、完全可读的页面。动效是额外奖励，绝非依赖项。
风格包
动效方法论与风格无关；视觉身份来自 styles/ 中的风格包。每个包文件以其完整的描述开头——此表用于选择，而非替代包的阅读：
| 包 | 外观 | 选择场景 |
|---|---|---|
instrument-console | 近黑色航天控制台，一种电蓝色，单色遥测 | 技术/系统/基础设施 · 核心合约 |
editorial-luxury | 奶油色和浓缩咖啡墨色，鼠尾草色强调，Fraunces/Newsreader | 编辑/研究/高端 B2B · 核心合约 |
workbench | 安静的亮/暗产品 UI，边框作为层级，单色数据 | 仪表盘/管理后台/内部及开发工具（独立）· 核心合约 |
briefing-room | 深色 16:9 演示文稿，一种 OKLCH 蓝色，抖动艺术 | 投资者和董事会演示文稿、简报、页面形式的演讲（独立）· 核心合约 |
atrium | 奶油色日光，一种赤陶色，照片上的凹槽玻璃 | 消费者健康、长寿、健康、高信任度 DTC · 核心合约 |
orchard | 暖燕麦色板块，鼠尾草色加糖果橙色，软 3D 药丸 | 友好的消费类生物科技、DTC 健康、套装和补充剂 · 核心合约 |
field-notes | 绿色调纸张，细线标尺，锈色强调，裁剪标记 | 以可审计性为卖点的开源和开发者工具（独立） |
showroom | 白色画廊，近黑色墨色，七层框架阴影 | 产品领先的公司，其最佳论据是屏幕上的应用 |
blueprint | 白色纸张，32px 网格，套准标记，无圆角 | 以精度为卖点的基础设施——向量搜索、存储、查询引擎 |
prism | 硬边的虹彩洗涤，怪诞字体搭配单色正文 | 开源基础设施项目的前门，第一步是命令 |
maquette | 近黑色桌子，奶油色轴测模型，淡青色 | 面向架构买家的企业数据基础设施 |
cyclorama | 32秒循环的柔和场，打字机衬线字体，橙色填充 | 企业 AI 转型和应用型 AI 咨询公司 |
scoreboard | 暖色纸张，墨色主色，仅标记的亮橙色，像素数字 | 论据是累积数字的产品——增长、广告、SEO |
一个物化的套件回答了核心包遗漏的部分。 npx sheleg-design-skill --kit <pack> 生成 src/styles.css，其组件部分是针对核心包拒绝指定的状态（:hover、:focus-visible、:disabled、选中等）的作者化 CSS。它不随此技能附带，因此仅读取此包的代理会自行发明它们。首先获取套件，并将套件与包之间的任何差异视为缺陷而非选择。
十三个包中有六个属于核心合约，这改变了你能得到的东西。 标记为核心合约的包不指定 ## Components、## Hero、## Responsive 或 ## Signature element——因此每个组件的状态、开启视口及其行数上限、折叠规则以及页面被记住的单个元素是由你决定的，并且在决定时需要明确说明。其他七个包则回答了所有四个问题。这种不对称性是库中最可能导致你发明一个值并相信你阅读了它的事情：核心包确实声明的内容精确到两位小数，而那种精确性并不能作为其保持沉默的一半的证据。每个包在其注册表上方的 Contract: 行声明自己的级别。
在设置任何样式之前完整阅读所选的包——它提供调色板、字体、纹理、动效令牌值、签名图案和禁令。每个包在 styles/tokens/<pack>.css 中提供现成的令牌层——直接复制该文件，而不是转录表格。对于新样式，复制 styles/STYLE_PACK_TEMPLATE.md 并保留每个标题——Register / Palette / Type / Texture & surface / Components / Hero / Responsive / Motion tokens / Signature motifs / Signature element / Motion flavor (仅电影感包适用) / Micro-interactions / Bans / Gotchas——然后在同一更改中编写其 tokens/<pack>.css；切勿即兴创建令牌值。
校准——三个旋钮
一个包回答了哪个寄存器。它没有回答多远。使用同一个包的两个落地页，一个用于受监管的保险公司，一个用于设计工作室，不会是同一个页面。三个旋钮承载了这种差异，并且在任何布局存在之前，需要明确设置一次。
DESIGN_VARIANCE1–10——1 是完美对称，10 是故意不对称且没有两个段落相同。MOTION_INTENSITY1–10——1 是静态，10 是电影感且物理化。VISUAL_DENSITY1–10——1 是画廊墙壁，10 是驾驶舱。
基准 7 / 5 / 4。 在构建之前声明这些值及一行推理；不要要求用户编辑文件，也不要默默偏离你宣布的内容。
从需求文档中读取它们
| 需求文档描述为 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 极简、平静、编辑风格、“像 Linear 一样安静” | 5–6 | 3–4 | 2–3 |
| 高端消费、品牌驱动、“感觉很昂贵” | 7–8 | 5–7 | 3–4 |
| 代理、作品集、实验性、奖项竞品 | 9–10 | 7–9 | 3–4 |
| 落地/营销页面，无其他信号 | 7 | 5 | 4 |
| 产品 UI：仪表盘、管理后台、内部工具 | 4–5 | 2–3 | 6–8 |
| 信任优先：受监管、公共部门、临床 | 3–4 | 2–3 | 4–5 |
| 演示文稿 | 5–6 | 1–2 | 3–4 |
| 重新设计，保留现有身份 | match | match +1 | match |
| 重新设计，明确彻底改造 | +2 | +2 | match |
一个需求文档可能匹配两行，并且它们可能相差三倍。 “一个安静的内部管理仪表盘”同时触发了 “像 Linear 一样安静”（DENSITY 2–3）和*“产品 UI”*（DENSITY 6–8）。优先级规则：命名表面的行优先于命名情绪的行。 表面决定必须容纳多少东西；情绪决定如何处理——在产品 UI 包中，“安静”是通过颜色和动效的克制获得的，而不是通过空洞。当两者被触发时，说明你选择了哪一行以及原因。
它们如何绑定
- 包在值上获胜，旋钮在数量上获胜。 旋钮不会发明颜色、字体或圆角——这些来自包的令牌层。它决定网格承载多少不对称性、页面有多少部分移动以及内容排列有多紧凑。
MOTION_INTENSITY受频率表上限约束，而不是相反。设置屏幕上的 9 仍然意味着键盘路径不会动效。首先阅读MOTION_DOCTRINE.md第1节；旋钮只能调高该表删除之后剩余的部分。- 声明的动效必须被实现。 高于 4 时，页面必须实际移动——英雄入场的 Entrance、关键段的 Reveal、主要操作的 Response。宣布 7 的静态页面是损坏的。如果可工作的动效不适合范围，请将旋钮调至 3 并交付一个干净的静态页面；绝不要半吊子构建动效，导致卡顿、截断或跳跃。
- 独立包固定自身的上限。
workbench和briefing-room没有电影感；这两个包上的MOTION_INTENSITY高于 3 是对包的误读，而非大胆选择。field-notes默认是独立的，并可以选择进入电影感层——它包含一个## Motion flavor部分说明如何操作——因此它是唯一没有硬上限的独立包。在调高旋钮之前阅读该部分。
工艺标准——“完成”的含义，按顺序
当任何人都能通过提示生成原型时，工艺是唯一的区分因素。设计师对它的含义进行排名（Figma, State of the Designer 2026, n=906）：视觉打磨 58% · 深思熟虑的问题解决 47% · 清晰直观的用户体验 36% · 情感和愉悦 35% · 一致性 15%。 将其解读为完成的定义，按此顺序：
- 打磨——无例外地应用包：使用令牌而非字面量；diff 中任何地方都没有临时的十六进制、圆角或字体大小。
- 系统思维——视觉决策存在于一个地方（令牌层、
SCENES注册表），其他所有内容都读取它。 - 清晰的用户体验——结构和行为不是此技能的一半；如果流程和状态尚未决定，请停下来先决定它们。
- 情感——仅使用应得的动效（原则 4），且绝不牺牲 1-3。
- 一致性——每个屏幕上的一个缓动、一组时长、一个强调色、一个原子负责一个任务。
按需加载——包层不决定的三个事项
- 场景深度——六层 (
SURFACE_COMPOSITION.md)，在为电影感页面编写 CSS 之前。一个场景有平面；所有内容都在一个平面上是任何缓动都无法修复的失败。 - 图表——将包交给
dataviz（同一文件），在任何包中绘制图表之前。令牌名称在十三个包中并不统一——只有--bg和--ink在所有地方都能解析——而未定义的自定义属性不会报错，它会静默回退。猜测一个是以最安静的方式交付错误的图表。 - 移动端表面 (
MOBILE_SURFACES.md)，当需求是原生应用的屏幕或移动端网页视图时——而非仅关注桌面页面折叠的移动端问题。五个包的每个包单独陈述的移动端规则，第六个没有包回答（类型缩放遵循视口宽度，而非用户的文本大小），以及在手机上没有任何包决定的一半内容：平台约定。
在包之间选择——挂载它们，而非想象它们
当多个包都能承载一个产品时，不要争论。渲染它们。
将候选包挂载到一个已有的、填充了内容的页面——包含真实标题、真实数据、真实密度——通过一个 ?variant=<pack> 搜索参数切换，并在浏览器中切换。只有令牌层发生变化；标记保持不变。
一个带有占位符内容的临时路由是一个真空：每个包在其中看起来都不错，这正是它无法解决任何问题的原因。如果确实还没有一个填充了内容的页面，那么选择为时过早——在需求文档的注册表指向的包中构建页面，当有真实内容可以切换时再重新审视。如果需求文档没有给出任何信号，默认值是产品 UI 用 workbench，营销页面用 showroom：两者都足够安静，以至于稍后切换出去会影响布局而非身份。（以前这里写着“默认包”但没有指名，这并非一个回退。）
比较方法是一种脚手架，而非可交付成果：它应在记录决策的同一更改中被移除。
AI 驱动的产品界面
设计 AI 产品现在是同一项调查中第三大最受欢迎的技能（37%）——领先于动效和信息架构——而且界面是全新的：模型流式输出、代理行动、可能错误的答案。在编写任何代码之前，请阅读 AI_PRODUCT_PATTERNS.md。