规则清单

前面各章的结论，压成能逐条核对的形式。第一部分是 design.md 开头给编码 agent 的契约，第二部分是它末尾的自查清单——agent 做完后应该拿这张表自己过一遍，每一条不过都改掉再提交。

十条

自查清单

• 页面是五种布局之一；每个侧栏宽度是 64 / 320 / 360，参数栏是 320。
• 视图 tab 在画布顶部居中，Tips 胶囊在顶部末端，缩放簇在底部起始端；导出在侧栏底部或画布底部末端角，内容滚动时不动。
• 没有自己的顶栏和第二层覆层；z-index 不超过 3。
• 每个控件高度是 24、28、32 或 40；输入框和下拉 28，按钮 32，唯一的大号主操作 40。
• 每个圆角是 4、6、8、12 或正圆，只有展开状态下属性卡片标题行的下两角是直角；开关轨道和 Tips 按钮是仅有的两个胶囊。
• 输入框静止时灰底无边框，聚焦时白底加 1px stroke-active 边框，宽 92px；下拉 110px。
• 参数在带展开标题的属性卡片里；行是 标签 ⋯ 控件，内边距 8/16。
• 组件 CSS 里没有裸颜色；每个颜色都是 --color-* 变量，:root 里每个 hex 都在调色板中（或在你声明的换肤里）。
• 面板文字 12px，按钮与侧栏标题 14px，缩略图标签 11px，工具栏文字 10px（或你声明的字号体系并一致应用）。
• 选中态有 2px 品牌色描边或对勾，不只靠颜色；每个错误在其控件旁有消息。
• 每个可交互目标至少 24×24；每个纯图标按钮有 aria-label；每个装饰性图标是 aria-hidden。
• 每个响应点击的控件是 cursor: pointer，文本字段是光标，禁用是 not-allowed；纯展示的数值保持默认箭头。
• 图标是内联 SVG 且 stroke: currentColor；没有加载图标字体。
• 滑块以数字显示当前值；开关是真实 checkbox 且装饰层 pointer-events: none；下拉遵守 combobox 契约或使用原生。
• 没有超过 200ms 的动效，加载时没有动画，prefers-reduced-motion 把所有时长归零。
• 存在 data-atomm-export-button 且注册了 export 生命周期钩子；导出文件是 1:1 的 mm 尺寸。
• dir="rtl" 下流程可用：侧栏、覆层、滑块填充、开关圆钮全部镜像；画布内容不镜像。
• 960px 以下区域堆叠，画布在先，导出保持固定，没有横向滚动。

要与不要

布局

• 要选五份模板之一，并保留它的区域与宽度。
• 要把导出放在模板放它的地方——侧栏底部，或画布底部末端。
• 不要加顶栏、加第二层覆层、给派生结果单开一列。
• 不要给实时预览型生成器加 Generate 按钮。

控件

• 要把参数分组进带展开标题的属性卡片，行为 标签 ⋯ 控件。
• 要把状态集当作封闭的；看起来需要第九种状态的控件需要的是重新思考。
• 要在替换原生控件之前先写出键盘与读屏契约，然后逐项还上。
• 不要给静止的输入框加边框，不要用原生上下箭头。
• 不要把破坏性按钮填成红色；用次级外壳配 red-default 文字加二次确认。
• 不要让装饰层夺走下方控件的指针事件。

颜色与字体

• 要处处引用 --color-* 变量；组件里出现裸 hex 就是 bug。
• 要让地面（bg-editor）比面板深，白卡片立在面板上。
• 要在换肤后对每个表面重算文本档。
• 不要在导出的档位之间自造字号；要么把字段那一档整体从 12-regular 提到 14-regular，要么不动。
• 不要只靠颜色传达状态——选中的缩略图有描边，错误有消息。

工程

• 要给「填满空间且能滚动」的面板同时写 flex: 1 和 min-height: 0——少任何一条就是那个溢出 bug。
• 要把浮层挂到 body 上 position: fixed。
• 要内联描边 SVG 图标并继承颜色。
• 不要指望经典滚动条不占空间；用细的。
• 不要给布局属性（width、height、inset）做动画；opacity、transform 与颜色是安全的那一组。