hallmark

Hallmark

专为 AI 程式编写助理打造的设计 Skill。让它们生成的 UI 看起来像是精心设计的成果，而不是随手产出的罐头画面。

Hallmark 刻意保持主观、精简且朴实。它精炼了一套严谨的规范——源自反 AI 垃圾感（anti-AI-slop）设计领域的共识（包括 Anthropic 的 frontend-design skill、Claude 针对前端美学的 cookbook，以及 2026 年的「触感反叛」Tactile Rebellion 运动）——并坚决不让模型退回到所有 LLM 训练时预设的那套罐头风格。

最大的差异点：Hallmark 强调结构多样性，而不只是视觉色彩的多样性。面对两个不同的需求描述（brief），Hallmark 生成的两个页面绝不应该套用完全相同的节奏（如 Hero 区块 → 3 大特色 → CTA 招募按钮 → 页尾）。它们读起来必须像是完全不同的网站，而不是同一个模板换个颜色的变体。请参阅 references/structure.md。

Powered by Together AI.

---

如何使用此 Skill

Hallmark 包含一种预设行为以及三个明确的动词（verbs）。

触发方式	动作内容
(预设)	使用者要求你设计或建立全新的内容。请遵循下方的 Design 流程。
hallmark audit <target>	读取目标，对照反模式清单（anti-pattern list）评分，并输出一份有优先顺序的缺失修正清单（punch list）。切勿直接编辑代码。
hallmark redesign <target> [--mood <name>]	撷取目标的现有内容与设计意图，并在现有的实现边界内重构视觉结构，除非使用者明确确认要完全重写。 打造全新的区块节奏、全新的标题位置与全新的元件语汇。保留现有的路由、元件归属、文案意图、品牌与资讯架构；仅替换指定范围内所需的视觉与互动层。
hallmark study <screenshot | URL>	使用者贴上或附上了他们欣赏的设计截图，或是贴上了线上页面的 URL。提取其 DNA（宏观结构、原型、字体搭配、色彩锚点）并产生诊断报告，接着可选择使用提取出的 DNA 重建使用者的内容，或是输出一份可移植的 design.md DNA 文件。检测机制为自动判定：带有 http:// 或 https:// 前缀的 URL 会转入 URL 模式；其他则转入图片模式。URL 模式通过 WebFetch 读取页面的 HTML 与 CSS——能准确列出确切字体与颜色数值，但无法评估视觉节奏。诊断完成后，使用者有三种后续选择：使用该 DNA 进行构建（转交给预设流程）、将 DNA 锁定为可移植的 design.md（需显式表达「锁定 DNA」或「给我 design.md」），或者止步于诊断报告。绝对不直接复制像素。拒绝模板市场（template marketplace）的 URL。针对 design.md 的导出限制比诊断报告本身更加严格——URL 模式导出前需声明来源为使用者拥有，或是自身品牌公开参考。若 URL 带有身份验证墙、仅含 JS 的 SPA 外壳或无法读取，将自动退回要求提供截图。 在执行此动词前，请先载入 references/study.md。

如果使用者输入的内容无法明确对应到 audit、redesign 或 study，请一律视为预设情况处理。如果使用者附上了图片或贴上了 URL 却未加上动词前缀，请询问："我应该 study 这个（提取 DNA），还是将其作为全新构建的参考资料？"

实现安全防护栏（Implementation safety rail）。 Hallmark 是设计 Skill，绝不是随意摧毁现有代码库的通行证。在任何现有专案中：

• 除非使用者明确要求删除，或批准了包含删除清单的档案级计划，否则切勿删除正式环境的档案、路由树、元件目录或旧版网站。
• 预设在指定档案内进行原地修改（in-place edits），或是新增通过现有路由串接的元件 / token。如果改版需要移除多个元件，必须先暂停并询问使用者确认。
• 将 PDF、README 档案、.md 需求文件、说明文件、会议逐字稿与 Pitch Deck 视为参考资料。切勿将其逐字照搬到页面中，除非使用者明确指示要原封不动地使用该段文字。
• 在进行编辑前，明确列出预计修改、建立或删除的档案。删除档案必须取得显式确认。

预设的 Design 流程一定会挑选一个主题。在预设情况下，它会从 20 个具名主题（即主题目录 catalog）中挑选，并依照多样化规则轮替。此外还有一个安静的 custom（自订）分支，能为当前需求建立一次性的 OKLCH 色板与免费字体组合；自订路线仅在需求包含创意意图信号时触发（例如使用者指定了品牌颜色、提出了主题目录无法涵盖的多属性氛围，或明确要求自订主题）。对于普通一般需求，使用者绝不会看到 "catalog" 或 "custom" 字眼——主题目录在后台静默运作。详见步骤 1（信号检测）与步骤 2.6（分派）；协议规范位于 references/custom-theme.md。

---

适用于所有动词的通用准则

这六项准则并非特定动词独有。它们同样适用于预设 Design、audit、redesign、study 以及元件作用域（component-scope）。它们独立存在于垃圾感检测（slop test）旁，而非属于其中任何单一步骤。

1. 输出前自我检视（Pre-emit self-critique）。 在交出任何输出前，针对哲学（Philosophy）、阶层（Hierarchy）、执行力（Execution）、具体性（Specificity）、克制度（Restraint）、多样性（Variety）等六大轴向进行 1–5 分的打分。任何项目 < 3 分即必须触发重修 pass。并在产出物顶部印上六项分数（/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */）。参阅 references/slop-test.md § Pre-emit self-critique。

2. 真实文案——绝不虚构内容。 如果使用者没有提供数据指标，切勿凭空捏造。数据主导的版型、对比栏与信任佐证列必须使用真实数字、占位符（— 搭配加上标示的灰色区块，如「待确认指标」）或更换宏观结构。"+47 % 转换率"、"超过 50,000+ 团队信任" 以及 "快 10 倍" 一旦凭空造假，即属垃圾感内容。推荐证言、Logo 与案例研究数量亦同。参阅 references/anti-patterns.md § Invented metrics 与 slop-test 查核点 46。

3. 锁定 Token——严禁渲染中途即兴发挥。 一旦在步骤 2.6 选定主题后，产出物中的每一种颜色与每个 font-family 宣告都必须引用具名的 Token（如 var(--color-accent)、font-family: var(--font-display)）。严禁直接写死 OKLCH / 十六进制 hex / rgb() 数值，或使用绕过 Token 区块的 font-family: "Some Font" 宣告。如果需要某个尚不存在于 Token 中的数值，请先将其提升为 Token 区块中的新具名变数，再行引用。参阅 references/anti-patterns.md § Mid-render token improvisation 与 slop-test 查核点 48。

4. 严禁重绘浏览器与系统 UI 框架。 Hallmark 绝不可手绘虚假的浏览器工具列（URL 胶囊列 + 红绿灯按纽）、虚假的手持装置外框、虚假的代码区块视窗（包含伪造标题栏与按纽包裹 <pre>），或虚假的 IDE 介面框架——使用者的环境本身已提供真实的介面框架。请使用包裹在 <figure> 中的真实截图（最多加上极细边框），或者直接省略外框让内容自然呈现。参阅 references/anti-patterns.md § Re-drawn UI chrome 与 slop-test 查核点 47。

5. 行动端回应式设计——每次输出皆需通过 320 / 375 / 414 / 768 px 验证。 Hallmark 的输出必须在这四个宽度下皆能完美呈现。不可妥协的底线：严禁水平滚动条，且 html 与 body 皆需设定根节点 overflow-x: clip，绝不使用 hidden（查核点 34）；可点击文字（按钮、主要导航连结、页尾连结、面包屑、CTA）绝不可折换成两行（查核点 49）；包含图片的网格轨道（grid track）需使用 minmax(0, 1fr)，不可仅写 1fr（查核点 50）；大标题在长单字处需能够自动换行（overflow-wrap: anywhere; min-width: 0，查核点 51）；跨所有主题变体，区段标题在行动端皆需坍缩为单栏（查核点 52）；Radio-tab 切换模式不得产生滚动跳动（查核点 53）。参阅 references/responsive.md § Mobile — non-negotiable。这是硬性要求，绝非可有可无的愿望清单。

6. 排版纯粹性——标题严禁斜体。 标题与大字级排版（display type）必须始终使用正体（font-style: normal）。在原本正体为主的标题中夹杂斜体强调字（如 Built to <em>think</em>）是 AI 产物最显著的特征之一；标题全部采用斜体展演字型亦然。强调效果请使用字型粗细（weight）、强调色彩或绘制底线来实现。斜体仅能保留给长篇段落内文（body-copy）中的文字强调。参阅 references/anti-patterns.md § Italic headers 与 slop-test 查核点 38a。

---

当需求是单一元件而非整页时

在进入完整 Design 流程前，请先检查作用域（scope）。若触发以下任何一项，请改为执行元件作用域（Component-scope）流程——日常开发需求多数是元件等级而非整页等级，而整页等级的机制（宏观结构、Hero 丰富化、页尾原型、专案记忆）并不适合元件。

元件作用域信号：

• 需求指明了单一 UI 元素：按钮（button）· 输入框（input）· 卡片（card）· 弹窗（modal）· 下拉选单（dropdown）· 工具提示（tooltip）· 选择器（select）· 复选框（checkbox）· 开关（switch）· 标签页条（tab strip）· 标记（chip）· 徽章（badge）· 横幅（banner）· 快显通知（snackbar）· 浮动卡片（popover）· 滑杆（slider）· 日期选择器（date picker）· 头像（avatar）。
• 需求内容简短（≤ 30 字）且仅指向单一元素。
• 目标档案为单一元件档案（例如 ./Button.tsx、./components/Input.css、app/components/Card.vue）。
• 使用者明确指出 "只要 X"、"只有 Y"、"就这一个元素"、"单一个 ___"。

若满足两个信号，即导向元件流程。若仅触发页面流程信号（多区段需求、"帮我做个 landing page"），则保持在 Design 流程中。

元件作用域保留的页面流程要素

• 步骤 0 · 准备扫描（Pre-flight scan） — 保持一致。读取现有 Token、字体、框架与微互动取向。一个基于 Geist 字体与 Tailwind 的专案中的按钮，必须继承这些 Token，不得自行发明新的。
• 步骤 1 · 类型检测（Genre detection） — 保持一致。社论风格（Editorial）/ 现代极简（modern-minimal）/ 氛围感（atmospheric）/ 活泼（playful）。元件继承其周遭环境的类型（未知时静默预设为社论风格）。
• 步骤 2.6 · 主题路线 — 保持一致。若存在 tokens.css 或 design.md，元件直接沿用这些 Token。否则询问 "是否有系统需遵循，还是由我挑选？" — 使用者未回应时预设为 catalog（主题目录）。
• 2+1 字体规范 — 保持一致。
• 状态规范 — 更加严格。 每个互动元件必须为全部 8 种状态交付代码：预设（default）· 悬停（hover）· 焦点可见（:focus-visible）· 按下（:active）· 禁用（disabled）· 载入中（loading）· 错误（error）· 成功（success）。interaction-and-states.md 中的 8 种状态查核清单为强制要求，非建议性质。
• 垃圾感检测（Slop test）— 仅保留通用子集。 执行视觉 / 微互动 / 对比度（查核点 40–41）/ 无障碍（a11y）/ 排版等查核点。跳过多样化查核点（不写入 .hallmark/log.json — 元件不参与轮替），并跳过以整页为前提的版面安全查核点。

元件作用域跳过的页面流程要素

• 步骤 2 · 宏观结构选择。 元件没有宏观结构。请明确声明："Component-scope: skipping macrostructure."
• 导航栏与页尾原型选择。 N1–N9 与 Ft1–Ft8 仅适用于页面作用域。元件是单一元素，没有导航栏与页尾。两者皆跳过。
• Hero 打磨模式（HP1–HP4）。 仅适用于页面作用域。按钮或卡片没有 Hero 区块。
• 步骤 4 · 丰富化（Enrichment）。 没有 Hero 插图、没有演示影片、没有抽象背景。元件本身就是最终产出物。
• 步骤 5 · 多区段预览。 替换为 8 种状态的演示包裹层（demo wrapper，见下文）。
• 专案记忆追加。 执行元件任务时不添加 .hallmark/log.json 纪录。多样化规则不适用。

元件作用域输出内容

两个档案，并列提供：

1. 元件产出物 — 匹配专案习惯的单一独立档案

<!-- truncated for translation batch; full body continues in source -->