Hallmark 的工程哲学如何把审美写成可执行规则让 AI 设计告别模板感【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个专为 Claude Code、Cursor、Codex 打造的「反 AI 味」anti-AI-slop设计技能它不靠感觉而是把审美判断编译成一组可执行规则——21 种命名宏观结构、22 个主题、60 道slop 测试关卡外加交付前的六维自评。它的目标是让 AI 生成的页面看起来是做出来的而不是生成出来的。对新手来说Hallmark 最大的价值不在好看而在可复现它把资深设计师脑子里那套这里不该放三栏卡片、那里不该用渐变标题的隐性经验写成模型每一步都必须遵守、可被逐条检查的显性规则。下面拆开它背后的四层工程思路。它要解决的真问题AI 页面为什么结构同卵先看清问题。大模型生成的落地页视觉上常常各有差异结构上却几乎一模一样Hero → 三个等宽特性卡 → 一个 CTA → 四栏页脚。Hallmark 在 structure.md 里把话说得很重结构同卵才是 AI 的指纹而不是视觉同卵。所谓默认吸引子default-attractor效应是模型被海量 SaaS 页面训练出来的肌肉记忆——你不加约束它一定会落回那个最安全的模板。于是 Hallmark 把那些一眼 AI 的特征逐一命名写进 anti-patterns.md每条都附上为什么会显得 AI 怎么修紫蓝渐变 Hero最被公认的 AI 审美一个锚点色都不该给到Inter 全包正文标题都用同一字体没有搭配就是模板页三栏等宽特性卡图标在标题上方、三行正文几乎所有 LLM 都会输出渐变标题background-clip: text的紫粉渐变是AI 生成的最快信号全视口居中 Heromin-height: 100vh 一句短话 一个大按钮是默认落地页的标配。下面这张图就是一个典型的改版前——深色背景、紫蓝渐变标题、居中排版正是模型最爱落回的那个默认形态。手法一先选宏观结构并强制每次都不一样Hallmark 把整页长什么样抽象成21 种命名宏观结构见 macrostructures.mdBento Grid、Long Document、Marquee Hero、Stat-Led、Workbench、Conversational FAQ、Manifesto、Photographic、Quote-Led、Specimen……每一种都是一个完整的页面指纹——标题位置、正文排布、分隔线语言、按钮语气、图像处理、进场方式打包成一个可命名的选择。关键设计是强制多样化规则写代码前必须先挑一个结构如果项目里已存在上一份输出的结构印章这次必须选一个不同的。用 Hallmark 自己的话说为两个不同需求生成的两页应该像两个不同的网站而不是同一个模板换色。这直接解决了结构同卵。同样是帮我做个落地页一个 SaaS、一个工作室会落到完全不同的形状上手法二把感觉拆成 60 道必须全过的关卡这页看着像 AI是一句感觉。Hallmark 的做法是把感觉拆成可勾选的清单。交付前输出必须通过 slop-test.md 里的60 道关卡每一题的答案都必须是no——字体是不是 Inter有没有紫蓝渐变有没有三栏等宽卡焦点环会不会淡入间距是不是 4pt 标尺的倍数更狠的是交付前的六维自评pre-emit self-critique在跑关卡之前先给方案在 Philosophy有没有立场、Hierarchy两秒能否分清主次、Execution细节是否都达标、Specificity是否像这个需求而非谁都能用的页、Restraint删掉了所有不赚钱的装饰了吗、Variety结构和上一份重复了吗六个轴上打 1–5 分任何一维低于 3 分就强制返工。这是把品味真正变成了模型自己必须跑一遍、留痕可查的评分流程。手法三诚实与底线被写成硬约束工程化的第三层是把底线从口号变成不可绕过的规则诚实文案用户没给数据就不许编。转化 47%已有 50,000 团队信赖这类数字一旦是编的就是 slop。用真数据、带标签的占位块或者干脆换结构锁定 tokens主题一经选定所有颜色、字体必须引用命名 tokenvar(--color-accent)禁止在渲染中途临时写死 OKLCH / hex /font-family避免画到一半自己改规则禁止重绘 chrome不许手搓假浏览器栏、假手机壳、假代码窗口——真实环境已经提供了移动端是硬地板320 / 375 / 414 / 768px 四个宽度必须都渲染无误不许横向滚动、不许按钮文字换两行——这不是愿望清单是门槛。一套规则库四个动词同一套规则库按 SKILL.md 的调度被封装成四个动词动词用途(默认)新建 UI先选宏观结构、套主题交付前跑完 slop 测试hallmark audit只读诊断按反模式清单给现有代码打分输出整改清单不改任何文件hallmark redesign保留文案 / 信息架构 / 品牌重建视觉与结构层换一套页面指纹hallmark study从你欣赏的设计截图 / URL里抽取DNA——结构、字体搭配、色彩锚点拒绝像素级抄袭与模板站study是很有意思的一个它提取的是结构而非像素。比如丢给它一张你喜欢的落地页它会先给一份诊断报告说清这是什么宏观结构、哪些反模式别带过来再帮你用自己的内容重搭。redesign则直观体现了换指纹同一场开发者大会从紫蓝渐变默认样重建为橙色衬线、非对称、带仪式感的页面。工程化细节扫描先行、记忆落盘、按需加载真正让它像系统而非提示词的是几处不起眼的工程细节Preflight 扫描先行动手前先读项目已有的字体栈、色板、动效库、间距标尺、框架把结果缓存到.hallmark/preflight.json避免踩掉用户已有的设计项目记忆落盘每次生成把用了哪个结构 / 哪个主题写进.hallmark/log.json下次读取后主动避开最近三次的结构多样化规则由此有据可查按需加载控制成本规则文件用先读索引、再只挑中那一份的方式加载——21 个结构只读你选中的那一份46 个组件原型只读用到的几份。过度预载被明确列为最大的可避免成本组件级 / 页面级分流日常需求大多是一个按钮、一张卡Hallmark 会识别并走更轻的组件流程而不是套一整页的重装备。完整规则库在 references/ 下四个主题流派editorial / modern-minimal / atmospheric / playful各自有一份 genres/ 文件约束下游一切。如何安装以及它接下来要去哪安装很简单一行命令即可重跑即更新npx skills add nutlope/hallmark或手动把 SKILL.md 加 references/ 拷到Claude Code 的~/.claude/skills/hallmark/、Cursor 的.cursor/rules/hallmark.mdc、Codex 的~/.codex/skills/hallmark/。规则本体全部是纯文本可读、可 fork、可审计MIT 协议。看 ROADMAP.md 能感受到它的方向感收紧 22 个主题的差异化、hallmark variant同一需求并排出三个结构不同的版本让你第一次意识到原来可以不一样、品牌优先流程、让study也能读你自己的代码库甚至把实时预览 截图回喂自评做成一个 MCP server——把生成与审计的闭环真正闭上。更多实战示例见 docs/recipes.md、docs/study-examples.md以及可直接打开的成品页 site/_tests/。一句话总结 Hallmark 的工程哲学审美不该靠运气和临场手感而应该被写成选一个结构 → 套一套主题 → 跑一遍关卡 → 自评打分的确定性流程。当品味变成了可执行、可检查、可复现的规则AI 生成的页面才有机会摆脱那个一眼 AI 的默认形态。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考