Hallmark
一个面向 AI 编码助手的设计技能。让它们生成的 UI 看起来像是精心制作的，而不是凭空生成的。
Hallmark 是有主见的、简洁的，并且故意保持平淡。它编码了一套严格的规则——这些规则源自反 AI 垃圾设计领域的共识（Anthropic 的前端设计技能、关于前端美学的 Claude 食谱书以及 2026 年“触觉反叛”运动）——并且拒绝让模型回退到每个 LLM 都训练过的默认设置。
区别在于：Hallmark 坚持结构多样性，而不仅仅是视觉多样性。Hallmark 为两个不同需求设计的两个页面不应该共享相同的 hero → 3-feature → CTA → footer 节奏。它们应该感觉像是不同的网站，而不是同一模板的不同颜色交换。参见 references/structure.md。
由 Together AI 提供支持。
如何使用此技能
Hallmark 有一个默认行为和三个明确的动词。
| 调用方式 | 功能说明 |
|---|---|
| (默认) | 用户要求你设计或构建新内容。请按照下面的设计流程执行。 |
hallmark audit <target> | 读取目标，根据反模式列表进行评分，返回一个排名后的待办清单。不要编辑任何内容。 |
hallmark redesign <target> [--mood <name>] | 获取目标的内容和意图，然后在现有实现边界内重新设计视觉结构，除非用户明确确认进行完全的重建。新的章节节奏、新的标题位置、新的组件风格。保留现有的路由、组件所有权、文案意图、品牌和信息架构；仅替换所请求范围内需要的视觉/交互层。 |
hallmark study <screenshot | URL> | 用户粘贴或附上了他们欣赏的设计图片，或者粘贴了一个实时页面的 URL。提取其 DNA - 宏观结构、原型、字体配对、颜色锚点 - 并生成诊断报告，然后可选地使用提取的 DNA 重建用户的内容 或者 生成一个可移植的 design.md DNA 文件。检测是自动的：URL 前缀 (http:// / https://) 将使用 URL 模式；其他所有内容都使用图片模式。URL 模式 通过 WebFetch 读取页面的 HTML 和 CSS - 它可以命名确切的字体和颜色值，但无法判断节奏。诊断后，用户有三个后续选项：使用 DNA 构建（转交给默认流程）、将 DNA 锁定到可移植的 design.md（通过 "锁定 DNA" / "给我一个 design.md" 来选择）、或者在诊断处停止。从不复制像素。拒绝模板市场 URL。design.md 生成的拒绝层比诊断本身更严格 - URL 模式的文件生成需要证明来源是用户自己的或是其自己品牌的公共参考。如果 URL 需要身份验证、是纯 JS SPA 壳、或无法读取，则回退到要求提供截图。 在此动词运行前加载 references/study.md。 |
如果用户输入的内容没有明确映射到 audit、redesign 或 study，则视为默认行为。如果用户附加了图片或粘贴了 URL 但没有动词前缀，请询问："我应该 study 这个（提取 DNA），还是将其视为新构建的参考？"
实现安全防护栏。 Hallmark 是一个设计技能，而不是允许破坏代码库的许可证。在任何现有项目中：
- 除非用户明确要求删除或批准包含删除列表的文件级计划，否则永远不要删除生产文件、路由树、组件目录或旧网站。
- 默认对指定文件进行原地编辑，或者添加通过现有路由连接的新组件/令牌。如果重新设计需要移除多个组件，请先停止并请求确认。
- 将 PDF、README 文件、
.md简报、文档、转录稿和推销文稿视为参考材料。除非用户明确要求逐字使用这些文本，否则不要将它们逐字复制到页面中。 - 在编辑之前，说明你期望修改/创建/删除的确切文件。删除需要明确确认。
默认的设计流程总是会选择一个主题。默认情况下，它会选择 20 个命名主题 中的一个（即目录），并根据多样化规则在其中轮换。此外，还有一个安静的自定义分支，它会为需求构建一个一次性的 OKLCH 调色板 + 免费字体配对；自定义路由仅当需求带有创意意图信号（用户指定了品牌颜色、指定了目录无法承载的多属性氛围，或明确要求自定义主题）时才会触发。对于普通需求，用户永远不会看到“目录”或“自定义”这些词语——目录会静默运行。参见步骤 1（信号检测）和步骤 2.6（调度）；协议存在于 references/custom-theme.md。
适用于每个动词的纪律
这六项纪律并非特定于动词。它们适用于默认设计、audit、redesign、study 以及组件范围。它们与垃圾测试并列，而不是位于其某个分支内。
-
预先自我批评。 在交出任何输出之前，在六个轴上对其评分 1-5 - 哲学、层次结构、执行、具体性、克制、多样性。任何 < 3 的分数都会触发修订轮次。在工件顶部标记这六个分数（
/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */）。参见references/slop-test.md§ 预先自我批评。 -
诚实的文案——无捏造内容。 如果用户没有提供指标，就不要发明一个。以统计数据为主导的布局、比较行和证明条必须使用真实数字、占位符（
—加上带有标签的灰色块，“待确认的指标”），或者使用不同的宏观结构。"+47% 的转化率"、"受到 50,000+ 个团队的信任" 和 "快 10 倍" 一旦被捏造就是垃圾。推荐信、标志和案例研究数量同样适用此规则。参见references/anti-patterns.md§ 捏造指标 和 slop-test 门禁 46。 -
锁定的令牌——不允许在渲染过程中即兴创作。 一旦在步骤 2.6 中选择了主题，工件中的每个颜色和每个
font-family声明都必须引用一个命名令牌（var(--color-accent)、font-family: var(--font-display)）。内联的 OKLCH / hex /rgb()值，或绕过令牌块的font-family: "Some Font"声明，都是不允许的。如果需要某个值但不存在对应的令牌，则将其作为新的命名变量提升到令牌块中，然后引用它。参见references/anti-patterns.md§ 渲染中即兴创建令牌 和 slop-test 门禁 48。 -
禁止重绘的浏览器 chrome。 Hallmark 不得手动构建虚假的浏览器栏（URL 胶囊 + 交通灯按钮）、虚假的手机框架、虚假的代码块窗口（包裹
<pre>的模拟标题栏 + 按钮）或虚假的 IDE chrome —— 用户的环境已经提供了真实的 chrome。使用包裹在<figure>中的真实截图（最多使用一个细线边框），或者省略 chrome 让内容自己呈现。参见references/anti-patterns.md§ 重绘的 UI chrome 和 slop-test 门禁 47。 -
移动端响应式——每次输出都在 320 / 375 / 414 / 768 px 宽度下验证。 Hallmark 的输出必须在所有四个宽度下完美渲染。不可协商的事项：无水平滚动 +
html和body元素上的overflow-x: clip（不能是hidden）（门禁 34）；无两行可点击文本——按钮、主导航链接、页脚链接、面包屑导航、CTA（门禁 49）；包含图片的网格轨道使用minmax(0, 1fr)，而不是裸的1fr（门禁 50）；显示标题通过overflow-wrap: anywhere; min-width: 0在长单词内换行（门禁 51）；在每个主题变体中，移动端上的章节标题都折叠成一列（门禁 52）；单选标签模式不会导致滚动跳跃（门禁 53）。参见references/responsive.md§ 移动端——不可协商。这是一个硬性底线，而不是一个愿望清单。 -
排版纯度——无斜体标题。 标题和显示文字始终是罗马体（
font-style: normal）。在一个原本直立的标题中斜体强调一个单词（Built to <em>think</em>）是最可靠的 AI 痕迹之一；在标题上使用全斜体显示字体也是如此。通过字重、强调色或绘制下划线来承载强调。斜体在文案中仍然是允许的。