hallmark 是做什么的？
让编码助手生成的 UI 看起来是“精心设计的”，而不是“生成出来的”：它是对抗模型默认趋同的坚实底线，一个精心选择的方向以防止连续构建陷入雷同，每屏只承载一个核心想法。在底线之上，页面完全由你掌控——你是一位有能力的设计师。
由 Together AI 提供支持。
底线
绑定所有输出，无一例外，即使没有其他参考信息也必须遵守。
- 每种颜色和每种字体都必须通过
:root中声明的 token（或声明的主题块）来引用。token 块之后不得出现字面颜色或font-family。(48) - 永远不要用
transition: all。永远不要对width、height、top或left进行动画。(10a) - 罗马体标题内永远不要有单个斜体单词。(38i)
html和body都使用overflow-x: clip。永远不要用hidden，也永远不要用100vw。(34)- 包含图片的网格轨道使用
minmax(0, 1fr)；显示标题带有overflow-wrap: break-word; min-width: 0。(50) - 每个交互元素都必须有
:focus-visible，且应立即出现。(26a, 15) - 每个动画都需提供
prefers-reduced-motion: reduce回退方案，并且内容在禁用脚本时仍可见。(27, 62) - 永远不要使用虚构的指标、用户评价、Logo 墙或案例研究计数。(46a)
- 永远不要使用“眉题”，也永远不要使用追踪大写或小型大写字母的标签：标签、说明文字、表格标题、标签和导航链接应使用正文字体（或主题的标签字体），小一个字号，采用句子大小写或小写，无字符间距。(54, 67)
- 永远不要使用中点连接的元数据字符串、粘在链接文本上的箭头或装饰性的状态圆点。(63)
- 永远不要使用紫蓝色渐变、卡片中的卡片、作为图标的表情符号或手绘风格的浏览器/操作系统窗口。(2a, 4, 30a, 47a)
- Hero 区域的标题、一个句子和主要操作在 1280x800 分辨率下无需滚动即可完全可见。(44b)
- 任何单个屏幕上的文字量约为 80 个单词；Hero 区域的文本只有标题、一个句子及其操作。(58)
- 容器限制最大宽度并居中：在 1920 宽度下，外边距（gutter）增大，但度量（measure）和网格保持不变。(44d)
- CSS 源文件的第一个非空行必须是 Hallmark 标记，然后是评审行，最后是任何豁免声明。(20)
- 如果 Node 可用，在交还控制权前运行
node <skill-dir>/scripts/sloplint.mjs <output> --render。修复所有FAIL；修复或豁免所有REFLEX。
在底线之上，Reflex 通关门是模型易陷入的默认情况，如果有正当理由可以记录豁免；Finish 检查则是工艺细节，需要回答但不会阻塞流程（references/gates.md § 1 和 § 2）。
工作流
- 预检： 在提问之前先阅读项目。
- 一次性提问： 询问素材、受众、用途和基调。
- 形状设计： 设计页面布局，然后为其命名。
- 方向确定： 分发一个主题，或在用户要求自定义时自由设计。
- 加载文件： 加载布局、图像、工艺、类型和主题文件以及
gates.md§ 1 至 § 4。 - 选择块： 输出一次决策概要。
- 构建： 先构建 Hero 区域，然后是整个页面；添加标记、
tokens.css、日志。 - 扫描： 运行
sloplint --render直到检查通过，然后进行人工评审门控、完成度审查和素材核对。
命令动词， 仅在用户提到 Hallmark 时可用：redesign <target>（完整重新设计，保留内容和连线）和 audit <target>（生成一份报告）；使用前请先阅读 references/redesign.md。对现有设计的任何其他更改都不属于 Hallmark 任务：请按用户要求在项目自身的系统中执行。
Codex CLI 和 OpenCode 应先阅读 references/flow.md § 工具链部分；其他工具链直接按本文档执行。
0. 预检
信号优先级，按顺序：项目根目录的 design.md 或 DESIGN.md（锁定系统：覆盖以下所有内容，且页面共享此设计）；.hallmark/brand-spec.md 或直接提到真实品牌的提示（运行 references/brand-truth.md；切勿凭记忆为主题使用真实品牌）；项目使用的字体、调色板、间距、动效库和框架（package.json、Tailwind 配置、:root、tokens、字体链接）；产品本身：一个 URL、一个正在运行的开发服务器、一个通过一条命令即可启动的项目或机器上的一个应用，构建过程会使用 scripts/capture.mjs 捕获其屏幕截图（imagery.md § 4）；一个 Inspo MCP 服务器（mcp__inspo__* 工具：信号 8，flow.md § Signal 8）；包含 /hallmark 提示、提到 Hallmark 或明确要求自定义的提示优先级更高；TOGETHER_API_KEY 环境变量已设置（信号 9，构图步骤）。
输出一个信息块（包含文件:行 引用、保留了什么、引入了什么），缓存到 .hallmark/preflight.json（flow.md § 预检）。
1. 一次性提问
即使提示只有五个词，也只发一条消息：
在开始构建之前，有四个问题。1. 素材，最重要的那个：页面可以展示什么？截图或屏幕录像（或者把应用、它的 URL 或文件夹指给我，我会运行它并截图），你的照片，真实数据（客户数、运行时间、价格），带发言人姓名的引语，你可以使用的 Logo。请粘贴或提供路径；没有照片我会从 Hallmark 的图片库中放置占位图，你稍后自行替换，我绝不会编造数据、引语或 Logo。2. 受众：谁会使用这个页面，他们关心什么？3. 用途：这个页面应该驱动的一个核心行动。4. 基调：选择一个极端方向（编辑风、野兽派、柔和派、实用派、奢华派、趣味派、技术派、朴素派）；“干净现代”不是一种基调。再加上 4 到 8 个词描述氛围，以及如果你有的话，一个锚点颜色。或者说 开始吧，我会自行推断并告诉你我选择了什么。
被跳过的字段视为选择退出：推断它们，在回复顶部用一行说明推断结果，并打上标记；不得追问。事实绝不能推断：未提供的数字、引语或 Logo 就是缺失；未提供的图片就是占位符。当提示已经回答了所有四个问题，或者没有人能回答（无头运行、批量处理）时，不要提问。
类型识别， 静默进行：AI 工具、生成式、音乐、视频、语音、暗色、氛围感 → 氛围感；SaaS、企业级、API、平台、开发者工具、基础设施、B2B → 现代极简；趣味、好玩、友好、柔和、儿童、游戏、社区 → 趣味风；其余情况默认为编辑风，它涵盖了大多数消费者和家庭类提示。一旦主题被分发，其类型优先级最高（类型文件、标记、--genre）。当两个非默认类型同时触发时，在消息中添加一个二选一选项，或者在“开始吧”情况下自行选择并告知。
范围。 如果一个提示只命名一个元素（按钮、输入框、卡片、模态框、导航、页脚、标签页、芯片）或说“只要 X”，则视为组件（flow.md § 组件范围）。用户在其中工作的屏幕（仪表盘、管理后台、设置页面、工具页面）视为应用屏幕（flow.md § 应用屏幕）。
2. 形状设计
素材优先。 列出清单，一行一个：真实（提示和项目提供的所有具体内容：名称、声明、数字、地点、日期、图片），图片（页面展示什么以及每张图片的来源：用户的、真实产品的截图、构建出来的产品、图片库），缺失（页面将不会拥有的所有证据：没人提供的 Logo、引语、指标）。形状紧随其后：以图片为主的页面，用图片引导（imagery.md § 1）；以文字为主的页面，承载字体和事实（长文档、信件、索引优先、宣言）。
任务。 确定访问者前来做什么（订阅、预订、访问、参加、购买、试用、注册、雇佣、加入、收听），然后在 references/anatomy.md 中查阅该任务：同类真实网站把行动按钮放在哪里，它们围绕哪些版块构建（菜单、阵容、问题、记录），以及它们如何收尾。页面根据这个解剖结构构建，绝不能使用默认的“图片、步骤、邮件订阅栏”序列（85）。
然后设计页面：它的形状，如何开场，每个版块的内容和构成，导航，页脚，以及 Hero 区域承载什么。起点：references/macrostructures.md 中的 21 种形状（仅加载你选中的那个文件）；layout.md 中的构成、导航和页脚。
抽签。 在主题构建中，一旦第 3 步选定了主题，运行 node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <job> --theme <slug> [--log .hallmark/log.json]。在不考虑日志和主题图片的情况下，它将分派形状、Hero 姿态、导航、页脚、第一个版块、行动位置、两个要排除的构成以及 Hero 以什么为主导。除非素材拒绝某个选择，否则全盘接受它，并在“选择块”中说明任何替换：一个提示，一个主题，构建两次，会生成两个不同的页面。镜像测试： 相同类别下的相邻提示是否也会得到这个完全相同的组合？如果是，更改其中一个决策并说明更改了哪个。
标志性元素。 访问者会记住的一件事：提示中最强大的真实内容，以最佳方式呈现（展示地点的照片、执行其核心功能的产品、因为那就是报价而设得巨大的价格、一个可供尝试的控件）。使用主题的素材制作它（在自定义运行中，使用它自己的外观），在第一个屏幕上展示它，在“选择块”和标记中命名它。以标记形式绘制的数字是一种手段，不是标志性元素（82）。
所有这些都先保留，在第 5 步一次性输出。
3. 方向确定
第一个匹配项胜出。
- 用户指定了主题 → 构建该主题（标记
theme: <name> (by request)）。 - 用户要求自定义（“custom”、“derive it”、“bespoke”、“no theme”、“a world of its own”） →
references/direction.md：设计完全由你掌控。它将替换抽签结果、形状、layout.md、类型文件以及第 6 步的构成和折叠规则；但底线、门控检查和扫描流程仍然有效。沉默永远不走此路。 - 其他所有情况都分发一个主题：
node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<the prompt>" [--log .hallmark/log.json]
这将分发三个适合提示且清除了日志的主题。查看三张主题图片，选择其素材最能承载提示（动效、照片、代码）的那个，说明选择原因和理由，然后仅加载 references/themes/<slug>.md。只有在被要求时才重新分发（--reroll 1）。如果没有 Node：手动从 references/themes/index.json 中选择并标记 deal: manual。
主题是一种素材，而不是一个计划：它绝不设置页面包含什么内容或内容的顺序。当主题与形状、类型或工艺文件在素材、控件或动效上存在分歧时，主题胜出；但底线和用户自己的话语优先级高于两者。
4. 加载
对于页面构建，确切加载以下文件：references/layout.md · references/anatomy.md（对应任务部分）· references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md 及其图片（分发时已查看；如果是直接命名的主题，则现在查看 <slug>.jpg）。从主题中获取其调色板平衡、字体风格、表面质感以及它的“范围”（无需照片即可构建的版块），绝不获取其布局 · references/gates.md § 1 至 § 4。自定义运行加载 direction.md 来代替布局、类型和主题文件。
仅在需要时，从 references/ 中额外加载：一个宏观结构文件 · 用于有状态 UI 的 microinteractions.md · 用于表单的 interaction-and-states.md · 用于不常见布局的 responsive.md · 当主题明确提到纹理时的 texture.md · 用于滚动讲故事的 scroll-choreography.md · 用于双模式（明暗）的 dark-mode.md · 用于图表的 data-viz.md · 自定义运行时的 fonts.md · 信号 9 时的 comp.md（构图、生成静态图）· 用于锁定系统的 design-md.md。
gates.md § 5 等到第 7 步，§ 6 等到审查时；加载过多文件是最大的可避免成本。
5. 选择块
本次运行中唯一一次宣示其决策的地方，也是用户重定向的窗口：
**Hallmark · v2.0.0**
- **形状** · Workbench，来自抽签 7f3a2c · 类型 modern-minimal · 任务: sign up，行动按钮在 Hero 区域和价格旁边
- **主题** · Coral，从 3 个中选了第 2 个（暖灰色，一个珊瑚色信号，General Sans，柔软药丸形状）· 在 paper 组上清除了 Cobalt
- **界面元素** · 导航: 边缘对齐，一个文字标志和一个行动 · 页脚: 一个主桅杆样式，文字标志在链接上方
- **Hero** · 舞台: 标题占第 1 到 5 列，内容槽占第 6 到 12 列，高度 560px，居中
- **标志性元素** · 追讨逾期付款的发票列表，在 Hero 中实时构建
- **版块** · Hero（发票列表） · Pinned（一笔逾期付款，在三个面板中追讨） · Switcher（客户视角和你自己的视角） · Table（定价） · Footer
- **素材** · 真实: 2 分钟设置、CSV 导入、里斯本 · 图片: Hero 中构建的发票列表、里斯本工作室的图片库照片（柔和色调） · 缺失: Logo、引语、指标
- **扫描** · 构建后运行
自定义运行的条目在 direction.md 中。然后是一行安静的提示，在组件范围或存在 design.md 时跳过：系统可移植？说 lock the system 以生成 design.md。 在信号 9 时，comp.md 在此处运行。
6. 构建
- 从脚手架开始。
node <skill-dir>/scripts/theme.mjs scaffold <slug>（使用分发时的--dealt；自定义运行使用--custom）会在项目样式表旁边生成tokens.css（主题的 token 和共享的尺度比例）和base.css（底线已决定的内容），并打印标记骨架、两个导入语句和插槽脚本。只编写页面的内容。 - 阅读
references/patterns.md一次： 涵盖所有八种状态的控件、一个插槽、一个缺失的事实、一个尚未提交的表单、一个揭示效果、用于对比的图形。仅采用它们的形状，绝不复制文案。 - Hero 优先。 先编写导航和 Hero 区域，不写它们下面的任何内容，运行
node <skill-dir>/scripts/sloplint.mjs <file> --render --stage hero，然后在新的上下文中进行 Hero 审查（gates.md§ 6）。Hero 确认无误后再构建其余版块；图片版权信息和全页面检查等待整个页面完成。 - 每屏一个核心想法，大胆呈现。 Hero：一个标题（不超过 7 个词或 50 个字符），一个句子（不超过 12 个词），一到两个操作。总共 6 到 9 个版块（包含 Hero 和 Footer），对于内容较少的提示不超过 5 个，最多 450 个可见单词，每个版块都是该类别本身内容的一部分，并采用有分量的构成（
layout.md§ 4 和 § 5）。Hero 是第一屏，且仅为第一屏，其姿态取自任务（layout.md§ 4 和 § 5）。
…（由于篇幅限制，原文档被截断，但翻译已按规则处理至此处）