行业背景与痛点
当前由AI生成的网页界面普遍存在高度同质化的视觉特征：无意义的大字号装饰性标题、全大写的跟踪间距标签、标题中突兀插入的单个彩色单词、大面积空白占位框架、铺满页面的无逻辑配图，这类特征被行业统称为AI生成垃圾（AI slop）。这类界面不仅视觉质感粗糙，还存在大量功能层面的问题：移动端布局错乱、对比度不符合无障碍标准、动效未适配减少动效设置、虚构不存在的业务功能、每个页面末尾都强制插入无意义的邮件订阅表单、提交后无后续响应的空表单。
这类问题的根源在于大模型生成界面时，只会优先匹配训练数据里的高频模式，没有内置统一的设计约束和校验规则，生成结果完全依赖模型的随机输出，很难达到符合生产级要求的设计标准。大量开发者使用AI代码助手生成前端页面后，需要投入数倍的时间手动调整视觉细节、修正功能逻辑，整体生产效率并没有得到有效提升。
针对这类普遍存在的问题，专门面向AI代码助手的设计约束工具开始出现，这类工具不再依赖开发者手动调整细节，而是从生成规则层面直接过滤掉所有常见的AI生成视觉特征，输出的页面天然符合生产级设计要求。
项目概述
该项目由Together AI团队开发，核心定位是面向Claude Code、Codex、Cursor、OpenCode等AI代码助手的专属设计能力，目标是让AI生成的网页完全摆脱可被识别的AI生成特征，达到人工专业设计师的产出水准。项目内置多层校验机制，所有生成内容都会经过多轮自动检查，最终还会由全新上下文的AI评审员做最后核验，确保产出质量符合预设标准。
当前项目已迭代到v2版本，核心能力覆盖主题库、业务逻辑优先生成、自定义设计、现有页面重构等多个维度，所有校验规则都分层设置，不会出现无意义的强制拦截，兼顾设计规范性和业务灵活性。
技术架构深度分析
该项目采用分层门控的架构设计，从生成的不同阶段设置不同强度的校验规则，避免单一校验模式要么过度拦截影响生成灵活性，要么校验宽松无法过滤劣质内容的问题。三层门控从底层到上层分别为Floor层、Reflex层、Finish层，每层的校验逻辑独立运行，互不干扰，权限规则清晰明确。
Floor层架构设计
Floor层作为底层硬约束，所有校验项完全不允许通过，只要命中任意一项，生成流程直接回退重跑，不会进入后续环节。该层的校验逻辑全部在真实浏览器环境中运行，直接对渲染后的DOM节点做检测，而非在代码层面做静态正则匹配，确保检测结果完全符合实际渲染效果。校验范围覆盖无障碍对比度、焦点交互逻辑、减少动效适配、虚构事实排查、移动端响应式布局适配，从根源上杜绝影响可用性的低级错误流出。
Reflex层架构设计
Reflex层针对大模型的默认输出惯性设置校验规则，这类规则对应大模型生成界面时最容易触发的默认套路。该层的校验规则支持带理由的人工覆盖，当业务场景有明确合理的设计需求时，开发者可以提交对应的说明文档，绕过对应校验项，避免僵化的规则限制合理的创意设计。这种设计既可以过滤掉90%以上的无意义AI惯性输出，又不会对合理的特殊设计产生不必要的阻碍。
Finish层架构设计
Finish层作为最后一层 craft 细节校验，所有校验项都不会阻塞生成流程，仅作为优化建议提示给开发者。该层的校验内容全部是提升设计质感的细节项，比如边距统一、字体层级对齐、图标风格匹配这类不影响功能可用性，但会影响最终视觉完成度的内容，开发者可以根据实际项目需求自行决定是否调整。
整个架构的校验流程完全嵌入AI代码助手的生成链路中，不需要开发者手动触发校验操作，所有检测都在后台自动完成，不会打断正常的生成流程。分层的规则设置让整个系统的维护成本大幅降低，后续新增校验项可以直接归类到对应层级，不需要调整整体架构逻辑。
核心功能详解
50套独立材质主题库
每套主题都对应一套完整的材质体系，包含专属的纸张质感、字体组合、色彩系统、表面样式、独立组件库和纹理细节，所有主题都附带真实落地的页面参考样例。生成页面时系统会自动从50套主题中随机选出3套供选择，最终选定的主题会贯穿整个页面的生成流程，所有组件的样式都严格匹配对应主题的设计规范。开发者不需要手动调整任何样式参数，生成的页面天然拥有统一的视觉风格，不会出现不同组件样式割裂的问题。
业务目标优先生成逻辑
所有页面的生成逻辑完全围绕页面的核心业务动作展开，预订页面优先实现完整的预订流程，商品售卖页面优先实现交易转化逻辑，资讯订阅页面优先实现完整的订阅链路。核心业务操作按钮会按照用户的行为习惯放置在最合理的位置，页面的内容排布完全服务于核心业务目标，不会出现大量无关的填充内容。页面的内容会在核心动作完成后自然结束，不会在页面末尾强制插入通用的邮件订阅模块这类和当前业务无关的内容。
纯提示词自定义设计能力
开发者可以直接提交自定义的设计需求提示词，系统会基于提示词的描述生成完全定制化的页面设计，整个生成过程依然严格遵循预设的三层校验规则。自定义生成的内容不会受预设主题库的限制，可以适配完全特殊的品牌视觉规范，所有校验规则依然生效，不会因为是自定义需求就降低质量标准。该能力可以快速适配小众行业的特殊设计需求，不需要提前维护对应的主题配置。
现有页面自动重构能力
系统支持指向任意线上页面URL、本地开发服务器地址或者已有的应用界面，自动抓取页面的截图和现有功能逻辑，基于原有页面的业务内容做完整的重新设计。重构过程不会破坏原有页面的业务功能逻辑，只会优化视觉设计和交互细节，原有页面的所有核心功能都会完整保留。开发者不需要手动整理现有页面的功能清单，系统会自动识别所有交互元素和业务流程，大幅降低现有项目的改版成本。
内置755张开源授权实拍图库
所有配图全部来自公开授权的实拍照片，没有AI生成的虚假合成图片，系统会根据当前页面的主题内容自动匹配对应的实拍素材，不需要开发者自行寻找配图。所有图片的版权信息都会自动在页面对应位置标注，不会出现版权纠纷问题。图库的分类覆盖绝大多数常见的网页设计场景，不需要额外引入第三方图片资源库。
页面重构与审计命令行工具
提供命令行指令，直接在指定的项目路径下运行即可触发页面重构流程，自动扫描路径下的前端文件，完成页面的重新设计和质量审计。审计过程会自动标记所有命中AI生成特征的内容，输出对应的优化建议，开发者可以直接根据报告调整页面细节。整个命令行工具和现有前端项目的工作流完全兼容，不需要修改现有项目的工程配置。
项目地址：https://github.com/Nutlope/hallmark
⭐ Stars：46578
🔍 来源：GitHub
Anti-AI-slop design skill for Claude Code, Cursor, and Codex.
微信扫一扫，打赏作者吧～
网友评论