行业背景与关注价值
当前各类AI代码生成工具产出的前端页面，普遍存在高度趋同的视觉特征：无意义的渐变装饰、统一风格的圆角卡片、千篇一律的居中hero区块，以及大量为了填充空间添加的无效占位元素。这类被统称为“AI流水线产物”的页面，即使功能完全符合需求，也会在第一时间让访客察觉到内容的非人工属性，直接降低用户对产品的信任度。
现有的AI辅助设计工具大多聚焦于提升生成速度、增加模板数量，没有从底层规则层面剔除所有属于AI生成的典型视觉特征。多数生成流程完成后没有配套的校验环节，产出结果的真实感完全依赖大模型的随机发挥，稳定性和一致性无法得到保障。
针对这一普遍存在的空白，专门面向大模型设计的设计规则体系出现，它没有采用传统设计系统的组件库思路，而是从反AI生成特征的角度搭建了完整的约束框架，所有产出页面的人工感下限被直接拉高到普通独立设计师的输出水准。
项目概述
该项目由Together AI团队开发，核心定位为面向Claude Code、Codex、Cursor、OpenCode等AI编程工具的设计技能集，目标是让所有生成的页面完全摆脱AI流水线产物的典型特征。项目当前迭代到v2版本，内置的规则体系已经经过大量真实页面的校验优化。
整套体系不依赖复杂的第三方图形库，所有规则都以可被大模型直接读取的结构化描述形式存在，不需要额外的服务端部署流程，接入现有AI编程工具的成本极低。体系的校验逻辑完全基于真实浏览器的渲染结果运行，而非仅在代码层面做静态检查。
技术架构深度分析
项目的架构设计采用三层递进的校验闸门模型，不同层级的规则拥有不同的优先级和处理逻辑，完全避免了传统设计系统中规则互相冲突、过度约束创意发挥的问题。三层闸门的权重从高到低依次递减，上层规则绝对不可突破，下层规则可根据实际业务场景的需求灵活调整。
底层核心模块设计
第一层为Floor闸门模块，所有规则属于硬约束范畴，任何产出结果只要触发该层的任意一条规则，就会直接被判定为不合格，不允许进入后续流程。该模块的校验范围覆盖基础对比度、可访问性焦点、减少动效适配、事实性内容准确性、移动端响应式布局等基础体验指标，完全从根源上杜绝了AI生成页面最常出现的低级错误。
第二层为Reflex闸门模块，专门针对大模型的惯性输出特征设计。该模块收录了所有大模型在无约束情况下会默认生成的典型冗余设计，包括标题上方多余的装饰性分割线、全大写加字间距的标签样式、标题中单独设置高亮色的无意义单词、大量空白占位的空框架区块等内容。该层规则不做绝对拦截，只要开发者能提供明确的业务层面合理理由，就可以记录说明后绕过对应约束。
第三层为Finish校验模块，属于工艺细节类的检查项，所有检查结果仅作为优化建议输出，不会阻断最终产出流程。该模块的校验内容集中在像素级对齐、动效过渡自然度、文本排版细节等不影响核心功能的体验优化点，用于进一步提升页面的精细度。
配套资源模块设计
项目内置独立的主题素材库模块，所有主题都以实体材料作为设计原点，而非抽象的色彩规范集合。每个主题都配套独立的纸张质感定义、字体组合方案、色彩体系、表面纹理规则、专属组件样式以及对应的成品页面参考图，大模型生成页面时会直接基于选中的完整主题素材搭建，不需要从零开始拼凑样式。
项目还内置独立的公开授权照片库模块，库存755张不同主题的高清图片，所有图片均为公开授权可免费商用，生成页面时系统会根据当前页面的业务主题自动匹配对应的图片资源，并且在页面底部自动标注图片版权信息，完全规避了AI生成页面经常出现的版权图片误用问题。
最终审核模块设计
项目的最后一环设置了独立的新鲜上下文人工审核节点，所有经过三层闸门校验的页面，最终都会提交给完全没有参与前序生成流程的审核人员做最终判断，确保页面不存在任何被规则遗漏的AI生成特征。该模块不提供自动化校验逻辑，完全依赖人工的直观视觉感受判断结果是否符合要求。
核心功能详解
五十套实体材质主题库
每套主题都对应一种真实存在的实体材料属性，包含完整的纸张质感、字体组合、色彩体系、表面纹理、专属组件定义，配套对应风格的成品页面参考图。大模型生成页面时会直接套用整套主题规范，产出的页面视觉风格统一且带有强烈的实体材质质感，完全区别于AI生成页面常用的虚拟渐变风格。该功能适用于所有需要统一视觉风格的页面生成场景，不需要开发者手动调整大量样式参数。
基于业务目标的页面生成逻辑
所有页面的结构组织完全围绕页面的核心业务动作展开，预订类页面的核心预订入口会放置在访客最容易找到的位置，电商类页面的商品购买流程会直接贯穿整个页面的内容流，资讯订阅类页面的订阅按钮会出现在内容结束的合理位置。页面不会出现无意义的填充区块，所有内容最终都会指向核心业务动作，不会在页面末尾强制添加通用的邮件订阅表单这类AI生成页面的典型冗余元素。
自定义设计生成能力
支持用户仅通过自然语言描述的设计需求生成完全定制化的页面，生成过程依然遵循整套反AI特征的校验规则，不会因为自定义需求就回到传统AI生成的流水线风格。生成过程中所有的设计决策都会被规则体系约束，确保最终产出的页面依然保持高真实度的人工设计质感。该功能适用于没有现成模板可以匹配的特殊定制页面需求。
现有站点自动适配能力
支持指向已上线的线上页面、本地开发服务器或者内部应用地址，系统会自动抓取页面截图和现有内容，基于原有内容重新做设计优化，不需要用户手动导出页面的内容素材。整个适配过程不会改动原有页面的核心业务逻辑和内容结构，仅对视觉表现层做优化调整。该功能适用于对现有页面做视觉升级的场景，不需要重新梳理页面的内容架构。
内置商用正版图片库
内置755张经过筛选的公开授权高清图片，所有图片都可以免费商用，生成页面时系统会根据当前页面的业务主题自动匹配最合适的图片资源，不需要用户额外去外部图库搜索素材。页面生成完成后会自动在页脚位置标注所有用到图片的版权信息，完全规避图片版权纠纷风险。该功能解决了AI生成页面经常出现的占位图替换不及时、商用图片版权不明的问题。
页面重设计与审计命令
提供专用的命令行指令，输入对应路径后即可自动对目标页面执行全流程的重设计和合规性审计。重设计过程会完全保留页面原有功能，仅替换视觉表现层的内容，审计环节会自动列出当前页面存在的所有AI生成典型特征，给出对应的优化调整建议。该功能适用于批量检查现有存量页面的AI特征，快速完成整体视觉风格的统一升级。
项目地址：https://github.com/Nutlope/hallmark
⭐ Stars：47236
🔍 来源：GitHub
Anti-AI-slop design skill for Claude Code, Cursor, and Codex.
微信扫一扫，打赏作者吧～
网友评论