标签: Anti-AI-slop

  • Impeccable:50.9K Stars!专治AI生成界面的「AI味」,让Claude Code、Cursor真正懂设计的开源设计语言

    Impeccable:50.9K Stars!专治AI生成界面的「AI味」,让Claude Code、Cursor真正懂设计的开源设计语言

    Impeccable 官方封面

    项目简介

    Impeccable 是由前 Google 开发者布道师 Paul Bakaus 开源的一套「让 AI 编码工具更擅长设计」的设计语言系统——它以 1 个 Skill + 23 个设计命令 + 60 条确定性检测规则 + 设计钩子的形式,接入 Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot 等十余种 AI 编程工具,专治 AI 生成前端界面千篇一律的「AI 味」(Inter 字体、紫蓝渐变、卡片套卡片……)。项目 2025 年 11 月发布,目前已斩获 50,900+ Stars,今日仍在 GitHub 趋势榜上持续攀升。

    Impeccable GitHub 仓库卡片

    安装要求和过程

    环境要求

    • Node.js 环境(使用 npx 安装,无需全局依赖)
    • 任意受支持的 AI 编程工具:Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot、OpenCode、Grok Build、Trae、Qoder 等 13+ 种
    • CLI 与浏览器扩展的检测器无需 API Key 即可运行

    快速安装

    # 方式一:CLI 一键安装(推荐,在项目根目录执行)
    npx impeccable install
    
    # 非交互式安装:指定工具与作用域
    npx impeccable install --providers=claude,cursor --scope=project
    
    # 更新到最新版本
    npx impeccable update
    
    # 方式二:作为 Claude Code 插件安装
    /plugin marketplace add pbakaus/impeccable
    
    # 方式三:Git Submodule 方式
    git submodule add https://github.com/pbakaus/impeccable .impeccable
    npx impeccable link --source=.impeccable --providers=claude,cursor

    安装后重载你的 AI 编程工具即可。首次使用建议先运行 /impeccable init,它会引导生成 PRODUCT.mdDESIGN.md,把品牌与产品设计上下文固化到项目里。

    核心功能

    • 23 个设计命令,给 AI 一套共享设计词汇/impeccable craft(完整设计流程)、critique(UX 审查)、audit(技术检查)、polish(发布前终检)、bolder/quieter(视觉强化/降噪)、animate(动效)、colorize(配色)、typeset(字体排印)等,覆盖从规划到打磨的全链路;
    • 60 条确定性「AI 味」检测规则:精准狙击 AI 生成界面的通病——默认 Inter/Arial 字体、紫蓝渐变、纯黑纯白灰、卡片嵌套卡片、弹跳缓动动画等,同时检查行宽、触控热区等通用可用性指标,规则引擎零 LLM、零 API 成本;
    • 设计钩子(Hooks)自动拦截:在 Claude Code、Copilot、Codex、Cursor、Grok Build 上写入代码时自动运行检测器,发现严重设计问题可直接阻断坏代码写入,把关口前移;
    • PRODUCT.md / DESIGN.md 上下文固化:通过 initdocument 命令把品牌调性、产品定位写成文档,让 AI 每次生成都带着你的设计基因而非「出厂默认审美」;
    • 独立 CLI + 实时浏览器迭代npx impeccable detect src/ 可脱离 AI 工具独立扫描目录/文件/URL(支持 --json 输出接入 CI),/impeccable live 支持在浏览器里对界面变体做可视化迭代。

    典型使用场景

    1. Vibe Coding 项目去「AI 味」:用 Claude Code/Cursor 快速搭出的产品原型总是长着一张「AI 脸」?安装后运行 /impeccable init + /impeccable craft landing,让落地页拥有独特的品牌气质,摆脱紫渐变 + Inter 字体的流水线审美;
    2. 发布前的设计质量门禁:在 CI 中挂上 npx impeccable detect --json .,60 条规则自动检查行宽、对比度、触控区、动效缓动等问题;配合 /impeccable polish 做上线终检,把设计审查从「靠感觉」变成「有清单」;
    3. 无设计师团队的 UX 自助审查:小团队没有专职设计师?/impeccable critique checkout 可对结账流程做启发式 UX 审查,/impeccable harden 补齐错误态与边界场景,相当于给团队配了一位 AI 设计顾问。

    推荐理由

    我把 Impeccable 装进 Claude Code 用了几天,最大的感受是:它治的不是「AI 不会写前端」,而是「AI 写的前端都长一个样」。以前让 AI 改设计只能反复喊「好看一点、高级一点」,现在有了 bolderquieterdistill 这样的精确词汇,沟通成本断崖式下降——这正是「给人和 AI 建立共享设计语言」的价值。60 条确定性规则不烧 token、不用 API Key,钩子还能在坏代码写入前直接拦截,工程化程度远超一般的提示词合集。项目基于 Anthropic 官方 frontend-design skill 扩展,作者 Paul Bakaus 是 jQuery UI 创始人之一,设计与工程功底都过硬。Apache-2.0 协议,13+ 种 AI 编程工具通吃,做 AI 辅助开发的前端同学强烈建议装上。

    下载地址

    项目信息:50,900+ Stars | 2,998 Forks | JavaScript | Apache-2.0 许可证

  • Hallmark:一个”拒绝 AI 味”的设计技能,让 Claude Code / Cursor / Codex 产出不像模板套出来的页面

    Hallmark:一个”拒绝 AI 味”的设计技能,让 Claude Code / Cursor / Codex 产出不像模板套出来的页面

    Bubble 酸面团 App 首页,由 Hallmark 生成

    一、项目简介

    Hallmark 是由 Together AI 开源的一个「设计技能(Skill)」,专门给 Claude Code、Cursor、Codex 这类 AI 编程助手注入一套反”AI 味”(Anti-AI-slop)的设计规则:它会为目标自主挑选宏观结构、从 20 套主题中”着装”、跑 57 道”烂大街”检测闸门加一遍自检,让产出的页面彼此像不同的网站,而不是同一套模板换色。

    二、安装要求和过程

    环境要求:Node.js(用于 npx)、并安装 Claude Code / Cursor / Codex 中的任一 AI 编码助手;也可以纯拷贝文件手动安装,无需额外依赖。

    快速安装(推荐):

    npx skills add nutlope/hallmark

    随时重新运行即可更新到最新版本。若不想走 npx,也可手动把仓库里的 SKILL.md + references/ 拷贝到对应目录:

    • Claude Code~/.claude/skills/hallmark/
    • Cursor.cursor/rules/hallmark.mdc(取 SKILL.md 正文,无需 frontmatter)
    • Codex~/.codex/skills/hallmark/(个人)或 .codex/skills/hallmark/(项目级)

    三、核心功能

    1. 四大”动词”工作流:默认直接构建新 UI;audit 给现有代码打分挑刺(只列清单不改代码);redesign 推倒结构、保留文案/信息架构/品牌后重塑;study 从你欣赏的设计里提取”DNA”(宏观结构、字体配对、色彩锚点),并明确拒绝像素级抄袭与付费模板,可输出可移植的 design.md
    2. 57 道反 AI-slop 检测闸门 + 发布前自检:拒绝每个 LLM 都被训练进的”分布内默认项”——渐变紫、玻璃拟态、千篇一律的圆角卡片网格。
    3. 20 套主题 + 宏观结构引擎:针对每个 brief 自主挑选主题、结构与工艺,不同需求产出截然不同的页面形态,而非同一模板的换色。
    4. Custom 自定主题(新增):当创意意图超出目录主题时,切换为 Custom 从零设计——量身配色、字体与排版,同样受 57 道闸门约束,底层无模板。
    5. 自包含产物 + 可移植:每个页面都是独立的 HTML + CSS,并在 CSS 注释中盖戳宏观结构;study 还能导出 design.md 交给其他 AI 工具接力。

    Distil 内容抽取 API 首页Cold Snap 唱片厂牌 EP 首页

    左:Distil 内容抽取 API | 右:Cold Snap 唱片厂牌 —— 不同 brief,完全不同的气质

    四、典型使用场景

    1. 给新产品做落地页 / 官网原型:输入一句 brief(如”一个酸面团 App 的首页”),Hallmark 直接产出有独特气质的 hero 页,而不是 ChatGPT 默认那种蓝色渐变卡片。
    2. 给”AI 味”过重的现有页面做体检与改造:audit 给老页面打分列出顽疾清单,再用 redesign 保留文案与品牌、推翻结构重做,得到截然不同的”指纹”。
    3. 向优秀设计”借 DNA”而不抄袭:把竞品或灵感图的截图 / URL 喂给 study,提取其结构、字体与配色锚点用于自己的项目,且明确拒绝像素克隆与付费模板。

    五、推荐理由(个人使用心得)

    做 AI 辅助前端最破防的就是”一眼 AI 生成”——紫渐变、玻璃卡片、无限圆角。Hallmark 把资深设计师的”反套路直觉”固化成可复用的规则集,等于给编码助手配了个审美总监。它最妙的地方是”同样的指令、不同的 brief,产出像不同站点”,这对想快速产出有辨识度原型的独立开发者 / 小团队太香了。MIT 许可、一键 npx 安装、可移植 design.md,几乎零门槛。

    注意:它是”设计技能”而非独立 App,需要搭配 Claude Code / Cursor / Codex 使用;审美风格偏编辑 / 杂志 / 独立品牌感,若你要的是中规中矩的企业后台风,它可能”太有性格”。

    Cinder AI 推理工具首页

    六、下载地址