Hallmark：让编码 Agent 按设计约束建页面

编码助手已经能很快写出一个页面，但“能打开”与“像经过设计”之间仍隔着很长一段距离。常见结果是首屏堆满抽象标题，功能区排成三张同样大小的卡片，图片像临时占位，页面结尾再放一个没有后端的订阅框。问题并不只是模型缺少审美，而是多数提示词只给出一种气氛，没有把事实核验、页面任务、响应式布局和交互完整性写成可执行的约束。

Hallmark 试图在编码助手的工作流里补上这一层。它由 Together AI 开发，是一个面向 Claude Code、Codex、Cursor 和 OpenCode 的设计技能。安装方式很短：npx skills add nutlope/hallmark -g。安装后，它可以参与新建页面、按用户描述做定制设计，也可以处理现有的改版与审计任务。

它不是模板库，而是一套设计判断

Hallmark 最容易被误解成“四十八个网站模板”。仓库里的主题确实很多，但每个主题只定义纸张、字体、颜色、表面、组件和纹理等材质属性，不规定页面有哪些区块，也不规定这些区块的顺序。同样的主题用于两个不同任务，仍应得到两种不同的页面结构。主题文件最大约八千字节，一次构建只读取一个主题，因此选择主题是在确定视觉材料，不是在挑选一张已经排好的稿纸。

它先要求助手读取项目现场：已有字体、配色、组件框架，以及是否已经存在锁定的设计说明。然后只问一次素材、受众、目标和语气四件事。没有真实截图、数字、客户评价或品牌授权时，助手必须把缺失写进素材清单，不能为了把页面填满而编造。这个顺序看似只是流程整理，实际把“先画一个像官网的东西”改成了“先确定这个页面能拿什么事实说话”。

页面结构也从访问者任务倒推。预订页要完成预订，商店要完成购买，通讯页要完成订阅。动作应该出现在该类网站合理的位置，并成为页面收束点，而不是在末尾机械追加一个通用行动按钮。Hallmark 把这个任务称为页面的 job，再用构图、首屏姿态、导航和页脚共同服务它。

一次构建如何发生

完整流程大致分为八步。第一步做项目预检，确认哪些现有视觉规则必须保留。第二步向使用者收集一次关键材料。第三步把访问者要完成的事情说清楚，并据此抽取页面结构。第四步从主题库中抽取三种候选，由助手结合内容选择真正适合的一种，同时确定首屏和主要版式。

第五步先只构建英雄区。英雄区完成渲染后，由一个没有参与构建过程的审查上下文重新查看截图，判断标题是否只属于这个产品、首屏信息是否完整、视觉主体是否足够强。只有这一屏通过，才继续写页面其余部分。这样做把首屏从“最后再看一眼的封面”变成了先被验证的页面核心。

第六步补齐整页，并在样式文件开头写下本次构建的选择记录，包括构图、主题、首屏姿态、图片策略和签名元素。第七步运行静态检查与浏览器检查。第八步再次使用新的上下文做终审，再把所有可替换素材槽位、尺寸和缺失材料交还给用户。整个流程不是让模型一次生成更多内容，而是把设计判断拆成几个必须回答的问题。

三层门禁把偏好变成约束

Hallmark 把规则分为三层。第一层叫 Floor，任何页面都不能越过。它包含足够对比度、可见键盘焦点、减少动态效果、手机布局不横向溢出、英雄区的标题和主要动作在常见笔记本首屏内可见、交互元素可使用、内容即使没有脚本也能出现，以及不得编造指标、评价、客户标志或案例数量。颜色和字体必须来自声明过的设计令牌，动画不能作用于宽高与位置，页面也不能使用未经说明的嵌套卡片、紫色到蓝色渐变或表情符号充当图标。

第二层叫 Reflex，指的是语言模型反复落入的默认习惯。比如每个标题前都加一行很小的大写说明，标题里单独挑一个词换颜色，所有段落用相同间距分隔，或者把完整页面做成“英雄区、三张特性卡、行动号召、页脚”。这些做法不是绝对错误，但必须给出与当前页面有关的真实理由，明确记录豁免。没有理由的默认选择不能静默通过。

第三层叫 Finish，关注在手臂距离之外不容易看见的工艺细节。审查者仍要回答所有发现，但这些问题不会像 Floor 那样阻止交付。三层规则的区别很重要：可访问性和事实真实性不能被“风格需要”抵消，模型惯性可以被具体证据说服，工艺建议则应该被认真回答，而不应假装不存在。

在真实浏览器里复核

仅靠源码规则无法判断首屏是否真的完整、文字是否换行断裂、图片是否撑破容器，或者手机宽度下是否出现被裁切却不产生滚动条的内容。Hallmark 的 sloplint 因此提供渲染层检查，覆盖三百二十、三百七十五、四百一十四、七百六十八、一千零二十四、一千二百八十、一千四百四十和一千九百二十像素八个宽度，并记录一千二百八十乘八百、一千四百四十乘九百与一千九百二十乘一千零八十分辨率下的首屏。

检查器还会读取实际计算样式与页面截图，例如判断首屏标题和主要按钮是否落在折叠线内、页面是否存在横向溢出、正文行长是否失控、按钮是否缺少键盘焦点、同一窗口是否承载过多文字，以及下一区块是否在首屏留下明显空白。浏览器检查依赖 Node 18 或更高版本、Chrome 和 puppeteer-core。缺少浏览器环境时，静态检查仍然可以运行，但动态布局判断会缺席，这个边界应当在交付时明确说出来。

改版不是把颜色换掉

对现有页面执行 /hallmark redesign <path> 时，Hallmark 的核心要求是保留内容与功能接线。页面原有的事实、名称、价格、日期和说明不能因为视觉改版而消失，链接、表单字段、事件处理器、测试钩子、脚本选择器同样必须保留。助手只能改变视觉系统与页面构图，不能在重排过程中顺手删掉一个没人注意但仍被脚本依赖的标识。

改版前的记录由 sloplint --before 完成，它会收集链接、字段、处理器、标题和图形等现场信息。改版后使用 sloplint --kept 对比，如果某个链接、表单字段、处理器或测试钩子消失，检查会直接失败。这个设计把“看起来还在”与“真的还能用”分开：截图漂亮不等于改版成功，原有功能仍然接得上才算完成。

/hallmark audit <path> 则只生成审计，不修改代码。对于已有设计团队和既有约束的产品，这种区分比“一键重做”更实用。设计系统可以被逐条检查，是否真的改变页面则由使用者明确选择。

照片、素材与事实边界

当页面需要真实图片时，Hallmark 不使用 Unsplash、Pexels 或 Pixabay 之类的图库地址。内置照片库列出七百五十五张托管在 Wikimedia Commons 的照片，每张分别采用 CC0、公有领域、CC BY 或 CC BY-SA 许可。助手按主题、用途、色调与构图选择照片，并必须在页面上逐张署名。仓库不保存这些图片本身，只保存来源、大小、作者、许可和内容描述。

更重要的是，照片不能被当作事实替身。人物照片不能暗示成客户证言，城市照片不能替代真实办公地点，产品截图也不应被模型手绘的假界面取代。如果产品可以通过网址、开发服务器或本地目录访问，Hallmark 要求先截取真实产品；只有产品尚不存在或无法运行时，才允许构建可替换的产品示意。

这些规则不能证明生成页面一定“有品味”，但能约束最容易识别的事实问题。仓库也包含作者用于比较不同模型输出质量的内部评测目录，不过它不是一个公开发表、可复现的第三方基准。因此不应把 Hallmark 描述成已经在某个独立测试中超过其他模型的方案。它可以被验证的是流程、规则、脚本和实际产物，而不是一个未经外部复核的性能百分比。

适合放在什么位置

Hallmark 更适合被当作编码助手的一层页面设计协议。它对以下场景最有价值：需要快速建立产品落地页、活动页或说明页；已有页面内容完整但视觉系统混乱；需要让助手在改版时保留表单与事件接线；以及团队希望把“不要编造数字”“不要在手机上溢出”“首屏必须完整”等要求从口头提醒变成检查项。

它不能替代产品定义、真实素材准备或人工品牌决策。没有目标受众、没有产品截图、没有可信数字时，设计约束只能阻止模型乱填，不能让缺失的信息自己出现。它也不能保证所有生成结果都达到专业设计工作室的完成度；三层门禁、冷审查和浏览器截图仍是质量流程，不是对审美结果的数学证明。

如果准备在团队项目中采用，可以从仓库、技能说明和图片许可开始检查，再选择一个低风险页面做对照：先用真实内容与现有系统跑一次审计，再决定是否允许助手进入改版。项目采用 MIT 许可，可以修改和分发；照片则仍各自保留原有许可，不能因为代码仓库采用 MIT 就把照片一并视为同一授权。

Hallmark 值得关注的地方，不是它为模型增加了多少装饰选项，而是它把设计工作拆成了可检查的判断：页面要让谁完成什么，哪些事实真实存在，什么材质适合这件事，哪些默认习惯需要证据才能保留，以及改版后原有功能是否仍然工作。对编码助手来说，这些约束比再多的“现代、简洁、高级感”提示词更接近真正可执行的设计输入。