用途
Steel Design 是一套面向 Steel（steel.dev）品牌的设计系统技能，规则取自三个定义品牌的产品：官网、仪表盘应用和 Remotion 发布视频。遵循这些规则，新作品可以自然地放在这些产品旁边，而不显得借用风格。
主要能力
- 按界面类型规定字体：网站与品牌物料（落地页、文档、邮件、幻灯片、社交图、OG 图、海报、视频）用 Schengen A 排正文与默认标题；Schengen Line 仅用于 32px 及以上的展示场景；Schengen A Mono 排代码、ID、表格数字和控件。Web 应用（仪表盘、控制台、设置等登录后界面）用 Inter 排所有 UI 文本，Schengen A Mono 排 ID、API 密钥、会话 ID、表格数字、时间戳和代码，应用内不用 Schengen A 或 Line。
- 排版与颜色规则：不使用小标签式眉题（eyebrow）；字重轻，不做加粗，靠字号、双色标题和留白建立层级；标题字距 −0.02em。颜色只取自调色板和沙色系，纯平色块，不使用渐变、背景图案纹理、玻璃拟态或模糊。
- 布局与细节：12/8/4 栅格，边距等于栏间距，内容列 1280px，正文 30rem；区块间距 100px、块间距 144px 等结构节奏；4px 圆角、0.5px 发丝线边框，阴影只按既定配方生成；动效使用固定缓动曲线，UI 在 300ms 内，只动画 transform 与 opacity，按压缩放到 0.97。
- 字体来源合规：ABC Schengen 属 Dinamo 的授权字体，不随技能打包，须使用项目已授权的字体文件，不下载、不转换、不提交到公开仓库；Inter 开源，建议通过 @fontsource-variable/inter 自托管。
使用方式
- 先判断要做的界面与媒介，再阅读对应参考：网站页面读 typography.md、color.md、layout.md、components.md、voice.md，从 steel-tokens.css 和落地页模板起步；Web 应用读 product-ui.md 等，并在 <html> 上加 data-surface="app"；Remotion 视频读 video.md、voice.md，使用 remotion/theme.ts 与 motion.ts；幻灯片、社交图、OG 图、海报、印刷读 layout.md §8 等；Figma 或其他设计工具用 tokens.json；动效读 motion.md；审查或改造现有 UI 先运行 scripts/check_brand.py。
- 先铺基础：复制 steel-tokens.css（用 Tailwind v4 时再加 tailwind-theme.css），配置字体加载，组件中使用语义角色变量而非原始色值。
- 按组件规范搭建页面或应用界面，按 voice.md 撰写文案。
- 运行 python3 scripts/check_brand.py <path> 检查，应用界面加 --surface=app；脚本需 Python 3.8+，无外部依赖。修复所有 ERROR（如界面字体错误、托管字体、渐变、背景图案、ease-in、transition: all），复核 WARN（如 32px 以下使用 Line、加粗、眉题类名、调色板外颜色）。第三方 UI 模拟图可用 --exclude 排除。
- 条件允许时渲染并检查亮色、暗色和手机宽度下的效果，再按交付清单核对后交付。
适用场景
制作符合 Steel 品牌的网站页面、Web 应用界面、Remotion 视频与动效图形、幻灯片、社交图、OG 图、海报与印刷品，以及为 Figma 或其他工具提供设计令牌；也用于审查和重设已有界面的品牌一致性。
限制
系统规则为固定项，用户要求违反时需说明违反哪条规则及原因，提供同品牌替代方案，并遵从用户决定。ABC Schengen 需自行获得授权文件，若缺失按约定文件名接线并告知用户放置位置。脚本只能检查已列出的规则，不能替代人工视觉检查。