签名 — OpenCode 的形状与身份管道
源自最佳设计灵感前50网站（在浏览器中打开50个站点现场验证，2026年10月22日）以及 Nutlope's Hallmark 的核心流程。每个形状和身份都引用真实的语料库证据——库是观察结果，而非品味传闻。
分工（不可模糊）
- 前端设计负责手艺：艺术指导、字体判断、色彩判断、动效理念、文案撰写、自我批评循环。当它被加载时，遵循它——不要在此重复其规则。
- 签名负责流程与库：此构建使用哪个页面形状、穿戴哪个身份、无重复分类账，以及机械（grep 和计算）门控列表。
动词
构建（默认）
- 将简报拆分为：领域、受众和能量词汇（“电影感”、“密集”、“个人”、“宏大”）。
- 从
references/structures.md中选择一个形状。用一行表述：Shape: <名称> (备选: <名称>)。如果简报模糊，则提供领域三选一——切勿默默默认。 - 对照语料库验证：使用 Playwright MCP（导航+截图工具）或 webfetch 打开形状/身份行中的 1-2 个证据 URL。无效链接则提升下一行。调色板锚点是种子，直到你查看过实际页面。
- 从
references/identities.md中选择一个与形状情绪共鸣的身份，然后根据实际所见来修正其令牌锚点。 - 先编写令牌：一个语义化的
:root块 + 印章（见下方），然后才编写组件 CSS。 - 构建。一个令人难忘的元素支撑整个页面；其余部分保持安静（前端设计的克制规则——应用，不要重新推导）。
- 运行所有门控并修复每个失败。然后进行品味检查——如果前端设计已加载则通过它进行，否则依据其 AI 特征校准列表进行。
audit <target>
读取代码/网站并仅运行门控。每个失败用一个项目符号：文件:行号 — 门控编号 — 单行修复。仅限机械性发现；当遇到品味问题时，用一行指出相关的前端设计原则，而不是发明新规则。若存在印章，则报告形状是否重复了之前构建。
redesign <target>
保留信息架构、文案和品牌资产。用 grep 搜索印章：新形状必须与上次封印的形状不同。身份可以轮换；更改品牌语调或调色板需事先询问。
study <url | 截图>
打开源文件。提取：章节顺序 → 最接近的形状；调色板锚点（采样实际颜色）；类型角色及观察到的字体 → 最接近的身份。输出一行：study: source=<url> shape≈<Shape> identity≈<Identity> anchors=<hexes>。如果库中没有匹配项，则追加新的身份行（格式见 identities.md 底部）——但切勿静静地将研究结果替换为库选项：如果用户想要逐字使用研究的原始设计，则印章变为 identity=studied:<source>，且研究值成为令牌。
分类账即代码
- 在主样式表顶部盖章（并在仅 HTML 构建中在
index.html的 head 中镜像）：/* signature: shape=<Shape> identity=<Identity> refs=<实际打开的URLs> */ - 选择前，用 grep 查找项目中现有的印章。没有两个连续构建共享同一形状；最好也不要重复使用身份。
- 没有单独的分类账文件。CSS 就是分类账。
约定
- 设计令牌放在一个地方（
:root自定义属性或项目的tokens.css/Tailwind@theme）。名称是语义角色（--color-ink），而不是值。 - 复用项目自己的令牌名称，不要覆盖；扩展 Tailwind 主题，切勿内联任意值。
- 现有的全局样式表是仅追加的：保留每个
@tailwind/@import "tailwindcss"指令原封不动，在现有规则下方添加令牌，并将任何新的@import放在最顶部。切勿默默剥离框架指令——这会取消整个应用的样式。仅当明确要求时才进行全面重写。 - 匹配项目的文件命名约定。不要重新发明项目已有的路由/布局模式。
- 范围：这是一个品味流程。不编造文案（如果用户未提供词语，则询问）；没有业务逻辑；不凭空选择品牌身份——遵循你被给予的那个。
门控（机械性——每个答案必须是“否”；每个失败 = 在交接前进行一次修复）
令牌纪律
- 如果任何组件中出现未解析为命名令牌的
#hex、oklch()、rgb()或font-family，则失败。将其提升或替换。 - 如果任何内边距/间距/外边距偏离项目的间距比例（如无命名令牌则为 4px 的倍数），则失败。任意的
17px是 AI 特征。 - 如果印章注释缺失，或命名了从未实际打开的 URL，则失败。
布局生存
4. 如果页面在任何视口宽度 320–1920px 下水平滚动，则失败。在 html 和 body 上使用 overflow-x: clip（不是 hidden——clip 保留 sticky/fixed）。
5. 如果包含图像的 1fr 网格/行轨道不是 minmax(0, 1fr)，则失败。
6. 如果显示尺寸的文本缺少 overflow-wrap: anywhere（并且其容器缺少 min-width: 0），则失败——长复合词会溢出手机屏幕。
7. 如果可点击文本（按钮、导航、标签、CTA 标签）在 320/375/768/1280px 下可以换行至两行，则失败。
代码事实
8. 如果存在 transition: all，则失败——需指定属性名。
9. 如果一个元素承载了多于一个悬停效果（平移+缩放+阴影+颜色组合），则失败。
10. 如果输入框在不同状态间改变了 border-width，则失败；状态变化应使用颜色/轮廓/阴影。焦点环是 outline，而非边框。禁用状态至少需具备两项：opacity、cursor: not-allowed、disabled/aria-disabled。
11. 如果任何 <svg>/<canvas>/装饰元素既没有 aria-hidden="true" 也没有可访问名称，则失败。
动效与性能
12. 如果任何动画/关键帧缺少 prefers-reduced-motion: reduce 降级，则失败。
13. 如果自动轮播内容没有悬停和焦点暂停（WCAG 2.2.2），则失败。
14. 如果 LCP 主角资源是 loading="lazy"，或者主角视频缺少 poster/fetchpriority="high"，则失败。
对比度与诚实性 15. 如果任何颜色/背景对未达到 WCAG 4.5:1（正文）或 3:1（大文本、图标、焦点环），则失败。两个高发点：文本从父级继承颜色但父级切换了表面；按钮填充与其文字亮度相差 5% 以内。 16. 如果存在捏造的事实——用户从未提供的指标、百分比、引用、名称、价格，或填充统计槽位，则失败。占位槽位应写“确认”，切勿编造。 17. 如果使用 emoji 作为功能/步骤/定价图标，则失败；每页最多一个图标库。 18. 如果重绘了浏览器界面：伪造的浏览器栏、伪造的手机刘海、伪造的终端/IDE 窗口框架，则失败。使用真实截图或完全不用。
库纪律 19. 如果加载的字体不是已知的免费/许可网络字体，则失败。语料库中的铸造字体（Commercial Type、Klim、Grilli Type、type.today、Pangram Pangram 试用版）是显示引用——检查许可，购买前询问。Google Fonts 和开放可变字体通过。 20. 如果此构建的形状与项目最近一次印章匹配，则失败（根据分类账规则先用 grep 查找）。
参考资料——按需阅读，切勿一次性全部阅读
references/structures.md— 十种页面形状，包含骨架、证据和领域三选一表。在选择形状时阅读（构建/重新设计/审计）。references/identities.md— 二十种身份：调色板种子、字体配对、语料库证据。在选择身份时阅读（构建/重新设计/学习）。
工作示例（来自语料库自身的指导）
简报：“Meet India Journeys — 旅游运营商网站，提供河流与文化遗产的喀拉拉邦之旅。”
领域词汇“旅行” → 三选一为 Scroll Story · Case Catalog · Luxury Ledger。选择 Scroll Story（备选：Case Catalog），因为主题是逐个展示的地点。打开 apple.com 和 simplychocolate.dk 以现场研究章节节奏、英雄媒体和全出血处理。身份：Forest Confection（深绿+可可色、紧凑显示）适合河流与文化遗产；在修正令牌前采样现场参考。印章：
/* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */