5 分钟接入 Claude Code让 AI 写出的界面立刻去掉AI 味【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable如果你最近让 Claude Code、Cursor 或 Codex 生成过落地页多半已经见过那几张熟面孔全局 Inter 字体、紫色到蓝色的渐变、卡片套着卡片、彩色背景上的灰色小字、标题上方永远顶着个圆角方形图标。模型都在同一批 SaaS 模板上训练跳过引导直接生成结果就是每个项目都撞车。impeccable 就是来打破这种AI 味的它是一套面向 AI 编程助手的设计语言由 1 个 skill、24 条设计命令和 59 条确定性检测规则组成见 README.md。接入 Claude Code 只需要两条命令之后 AI 每写一版界面都会先被设计上下文约束、再被规则引擎体检。这篇文章会带你走完安装、初始化、写产品与设计文档、第一个页面精修的全流程并附上从源码里扒出来的常见报错速查。先弄明白一件事AI 味到底是什么impeccable 的 README 把问题说得很直白所有模型在同一批 SaaS 模板上训练跳过设计指导你会在每个项目里得到同样的一组记号——Inter 字体用到底、紫蓝渐变、卡片套卡片、彩色背景上的灰字、标题上方那个圆角方形图标块。这些记号在仓库里被逐条命名成了检测规则见 crates/live/assets/antipatterns.jsonside-tab卡片一侧的粗彩色边框——AI 界面最著名的识别标记gradient-text渐变文字装饰性强、信息量为零ai-color-palette紫色/紫罗兰渐变配深色底的青色点缀overused-fontInter、Roboto、Fraunces、Space Grotesk 这些被用滥的字体nested-cards卡片套卡片造成的视觉噪音bounce-easing过时的回弹/弹性缓动cream-palette暖奶油色背景成了新的安全牌默认。规则不止抓坏习惯skill/reference/craft-floor.md 里还有一份拒绝清单渐变文字、玻璃拟态装饰、卡片侧边彩色描边、硬偏移阴影、用 emoji 充当图标体系、给每个 section 都加 eyebrow 标签……这些是模型的条件反射不是设计决策。impeccable 的解法分三层上下文注入把产品事实和视觉语言写进文档每次会话都加载、命令驱动critique、audit、polish、bolder、quieter 等 24 条命令让 AI 有明确的设计词汇表、确定性检测59 条规则由自带的 Rust 引擎直接跑不需要 LLM、不需要 API key纯机械、可审计。第一步5 分钟装好以 Claude Code 为例在项目根目录执行npx impeccable install安装器会做三件事检测你机器上的 harness~/.claude、~/.codex、.cursor等让你保留或裁剪 providers询问装进当前项目还是全局在 Claude Code、Cursor、Codex、GitHub Copilot、Grok Build 上顺带安装 provider 原生的 hook manifest。装完重启你的 AI 工具输入/impeccable应该能看到命令列表。npx impeccable只是一个 shim背后是同一条自包含的引擎二进制首次运行会下载到~/.impeccable/bin/hook 和 skill 的运行不需要 Node。在 Claude Code 上安装器写入的是.claude/settings.local.jsongitignored机器本地挂在Edit|Write和Stop事件上具体 wiring 见 plugin/hooks/hooks.json。想跳过交互、纯脚本化安装npx impeccable install --providersclaude,codex,cursor --scopeproject之后刷新用npx impeccable update。Claude Code 也支持插件方式/plugin marketplace add pbakaus/impeccable后在/plugin里安装。装好后impeccable 会在项目里生成.impeccable/config.json共享配置、.impeccable/config.local.json开发者个人覆盖gitignored。README 提供了一段可以直接贴进.gitignore的标记块把截图、live 会话、运行时缓存挡在仓库外同时保留config.json、design.json、surfaces/*.md这类需要提交的共享产物。第二步/impeccable init把产品事实写进 PRODUCT.md在 Claude Code 的对话框里输入/impeccable init注意init不是 CLI 命令必须在你 AI 工具的聊天里敲——在终端里敲会直接收到一条报错initis not a CLI command. Type /impeccable init in your AI coding agents chat... not in this terminal.这条文案就写在 crates/detect/src/lib.rs 里。init干的事很克制先扫描项目已有的文档、路由、品牌素材、平台信号然后只问材料性缺口最多三轮聚焦问题最后把确认过的事实写进PRODUCT.md。skill/reference/init.md 给出了完整的 11 个章节模板## Platformweb / ios / android / adaptive## Stack仅绿地项目用户对技术栈的明确选择## Users主用户、场景、要完成的 job## Product Purpose产品做什么、成功意味着什么## Positioning竞品无法照抄的机制或主张## Operating Context使用/评估产品时的事实性工作流与环境## Capabilities and Constraints已确认的能力、术语、技术约束、未决事项## Brand Commitments用户明确绑定为强制的名称、语气、资产## Evidence on Hand真实内容、数据、案例、素材及其路径## Product Principles三到五条可落地的战略原则## Accessibility Inclusion已确认的用户需求或标准两条铁律只谈产品不谈美学——init 阶段绝不问你要什么配色、什么字体、什么氛围那些留给后面的视觉决策严禁编造——客户、报价、基准数据、能力声明写进去就是事故不确定的就明确标注 undecided。仓库里有一份可参考的成品demos/landing-demo/PRODUCT.md。它是虚构产品 Lumina 的产品记录其中 Anti-references反参考清单这一节特别值得学把团队明确要避开的模板Fraunces-cream-peach SaaS 模板、三图标功能宫格、hero 超级latitude、玻璃拟态写死成禁令AI 后续生成就有据可依。第三步DESIGN.md 与 DESIGN.json把视觉世界写下来init 只记录产品事实不碰视觉。视觉世界由两条来路沉淀已有代码/impeccable document从现有项目的 tokens、组件、CSS 变量里提取生成根目录的DESIGN.md新建项目/impeccable new-work流程在交付时由 documenter 从建成的世界里写出 DESIGN.md——先建后写而不是先写一本没被验证过的规则书。一份 DESIGN.md 长什么样看 demos/landing-demo/DESIGN.md开头是 YAML front matter颜色值、字体栈、圆角、间距、组件 tokens正文分 Colors / Typography / Elevation / Components / Dos and Donts 几章关键是它把审美规则化了The Cream-Family Rule所有中性色都向品牌色相偏移不允许纯白、纯黑、未调色的灰The 10% Accent Rule烧橙色装饰不超过任何渲染表面的 10%稀缺本身就是重点The One-Italic Rule每页斜体只出现一次用在 hero 标题的一个强调词上The No-Gradient-Text Rule文字永远是纯色hero 的渐变是区块背景不是字体效果The Flat-By-Default Rule默认无阴影hover 用translateY(-1px)禁用玻璃拟态与霓虹辉光。同目录的 demos/landing-demo/DESIGN.json 是机器可读的 sidecar每个颜色带 OKLCH 色相和 tonal ramp每个组件带可直接复用的 HTML/CSS 片段。这份 JSON 是 live mode 面板和设计系统检测器读的格式PRODUCT.md管产品事实、DESIGN.md管视觉决策、surface brief 管单页策略三级分工明确。第四步第一个页面从生成到精修装好、init 完工作流就通了。以落地页为例一个典型轮次是/impeccable shape # 写代码前先定 UX/UI 结构 /impeccable craft # 生成第一个版本 /impeccable critique # UX 评审层级、清晰度、情绪感染力 /impeccable audit # 技术体检a11y、性能、响应式 /impeccable polish # 上线前终检命令背后有两条自动机制在兜底设计 Hook实时门禁。Claude Code 的PostToolUse事件会在每次 UI 文件编辑后跑即时层检测只报机械性、确定无疑的问题坏图、内容溢出、对比度失败、渐变文字、辉光阴影、设计系统漂移。Stop事件再跑一次深度层对会话中动过的所有 UI 文件跑完整规则集去重后一次报完。Cursor 则用preToolUse在坏写入落地之前直接拦截。没有装 hook 的会话impeccable context会在启动时给出MANUAL_DETECTOR_REQUIRED指令要求结束前手动跑一次detect。Live Mode浏览器里迭代。/impeccable live会在浏览器里注入一个辅助层需要本地 dev server HMR或直接打开的静态 HTML你在页面上选中元素AI 生成若干 HTMLCSS 变体热替换预览选中即写回源码。/impeccable generate还能自动生成变体而不用手动挑选。仓库里有一个现成的 before/after 演示最能说明AI 味长什么样反面demos/landing-demo/classic/index.html——深色底#0a0a14、logo 用紫粉渐变文字background-clip: text、Inter 全套、玻璃拟态导航、发光阴影。每一个元素都能在 crates/live/assets/antipatterns.json 里对号入座gradient-text、ai-color-palette、glassmorphism、overused-font。正面demos/landing-demo/index.html——同一份 Lumina 产品换成奶油纸底色、Fraunces 展示字体配 Inter 正文、One-Italic 规则只允许 hero 里一个斜体词、10% 烧橙点缀、无阴影靠色调分层和发丝线边框建立深度。两套代码的差距就是 DESIGN.md 里那些命名规则全部生效后的差距。精修类命令按需取用/impeccable bolder放大平淡的设计、/impeccable quieter给过于喧闹的设计降温、/impeccable distill砍到本质、/impeccable typeset修字体层级、/impeccable harden补错误态与边界情况。高频命令还能用/impeccable pin audit钉成/audit这样的独立快捷指令。常见接入报错速查症状原因与解法终端里敲impeccable init报 initis not a CLI command命令要在 AI 工具的对话里敲终端里没有 init 这个子命令见 crates/detect/src/lib.rs 的INIT_MESSAGECodex 装完 hook 不生效Codex 按 hook 定义追踪信任需打开/hooks批准项目 hook每次 update 改动了.codex/hooks.json可能要重新批准Grok Build hook 不跑需要对项目文件夹执行/hooks-trust或--trusthook 脚本才有执行权限Cursor 不认 skillCursor 需要切到 Nightly 频道Settings → Beta并在 Settings → Rules 里启用 Agent SkillsGemini CLI 无 Skills需先装 preview 版npm i -g google/gemini-clipreview再在/settings里启用 SkillsHermes 项目级 skill 被忽略Hermes 把仓库内的过程文档视为注入向量需在项目根执行一次hermes skills trustinstall/update 因 manifest 损坏中止默认中止以防覆盖确认后用--force重跑损坏文件会备份为.bak不想装自动 hook交互式安装时选否或加--no-hooks该次运行不记录选择hook 静默失效、想排查在.impeccable/config.json里设hook.auditLog为文件路径每次 hook 调用写一行 NDJSON正常使用保持不设npx impeccable detect退出码看不懂0扫描完成且无主发现项1有目标未能扫描2完成但存在主发现项可读的 findings 走 stderr--json走 stdout 供 CI 用找不到 launcherhook 命令用[ ! -f ... ] || ...守卫launcher 缺失时是静默 no-op不会炸会话还有一个容易踩的点设计 hook 只扫它认识的扩展名.tsx、.jsx、.html、.vue、.svelte、.astro、.css、.scss、.sass、.less、.ts、.js。项目用 Blade、Twig、ERB、Handlebars 模板时要在.impeccable/config.json的detector.extensions里声明比如{ ext: .blade.php, engine: html }。收尾把默认变成选择接入 impeccable 前后最大的区别不是 AI 突然有审美了而是它的每一次输出都从模板统计变成了上下文约束PRODUCT.md 定事实、DESIGN.md 定视觉世界、surface brief 定单页策略、59 条确定性规则兜底机械错误。检测规则是底线不是天花板——craft-floor 文档里写得很清楚The floor holds the mechanics; it never picks the direction.底线管机械细节它不替你做方向选择。方向永远在开发者手里impeccable 负责让 AI 的默认输出不再替你决定它。如果你手头正有一个被 Claude Code 生成得平平无奇的页面现在就可以跑一遍npx impeccable install然后进对话敲/impeccable init。五分钟之后你写的每一行界面代码都会有人确切地说有一条规则引擎在旁边把关了。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/20 1:38:19 · 阅读 1.2k 5 分钟接入 Claude Code：让 AI 写出的界面立刻去掉“AI 味“
5 分钟接入 Claude Code让 AI 写出的界面立刻去掉AI 味【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable如果你最近让 Claude Code、Cursor 或 Codex 生成过落地页多半已经见过那几张熟面孔全局 Inter 字体、紫色到蓝色的渐变、卡片套着卡片、彩色背景上的灰色小字、标题上方永远顶着个圆角方形图标。模型都在同一批 SaaS 模板上训练跳过引导直接生成结果就是每个项目都撞车。impeccable 就是来打破这种AI 味的它是一套面向 AI 编程助手的设计语言由 1 个 skill、24 条设计命令和 59 条确定性检测规则组成见 README.md。接入 Claude Code 只需要两条命令之后 AI 每写一版界面都会先被设计上下文约束、再被规则引擎体检。这篇文章会带你走完安装、初始化、写产品与设计文档、第一个页面精修的全流程并附上从源码里扒出来的常见报错速查。先弄明白一件事AI 味到底是什么impeccable 的 README 把问题说得很直白所有模型在同一批 SaaS 模板上训练跳过设计指导你会在每个项目里得到同样的一组记号——Inter 字体用到底、紫蓝渐变、卡片套卡片、彩色背景上的灰字、标题上方那个圆角方形图标块。这些记号在仓库里被逐条命名成了检测规则见 crates/live/assets/antipatterns.jsonside-tab卡片一侧的粗彩色边框——AI 界面最著名的识别标记gradient-text渐变文字装饰性强、信息量为零ai-color-palette紫色/紫罗兰渐变配深色底的青色点缀overused-fontInter、Roboto、Fraunces、Space Grotesk 这些被用滥的字体nested-cards卡片套卡片造成的视觉噪音bounce-easing过时的回弹/弹性缓动cream-palette暖奶油色背景成了新的安全牌默认。规则不止抓坏习惯skill/reference/craft-floor.md 里还有一份拒绝清单渐变文字、玻璃拟态装饰、卡片侧边彩色描边、硬偏移阴影、用 emoji 充当图标体系、给每个 section 都加 eyebrow 标签……这些是模型的条件反射不是设计决策。impeccable 的解法分三层上下文注入把产品事实和视觉语言写进文档每次会话都加载、命令驱动critique、audit、polish、bolder、quieter 等 24 条命令让 AI 有明确的设计词汇表、确定性检测59 条规则由自带的 Rust 引擎直接跑不需要 LLM、不需要 API key纯机械、可审计。第一步5 分钟装好以 Claude Code 为例在项目根目录执行npx impeccable install安装器会做三件事检测你机器上的 harness~/.claude、~/.codex、.cursor等让你保留或裁剪 providers询问装进当前项目还是全局在 Claude Code、Cursor、Codex、GitHub Copilot、Grok Build 上顺带安装 provider 原生的 hook manifest。装完重启你的 AI 工具输入/impeccable应该能看到命令列表。npx impeccable只是一个 shim背后是同一条自包含的引擎二进制首次运行会下载到~/.impeccable/bin/hook 和 skill 的运行不需要 Node。在 Claude Code 上安装器写入的是.claude/settings.local.jsongitignored机器本地挂在Edit|Write和Stop事件上具体 wiring 见 plugin/hooks/hooks.json。想跳过交互、纯脚本化安装npx impeccable install --providersclaude,codex,cursor --scopeproject之后刷新用npx impeccable update。Claude Code 也支持插件方式/plugin marketplace add pbakaus/impeccable后在/plugin里安装。装好后impeccable 会在项目里生成.impeccable/config.json共享配置、.impeccable/config.local.json开发者个人覆盖gitignored。README 提供了一段可以直接贴进.gitignore的标记块把截图、live 会话、运行时缓存挡在仓库外同时保留config.json、design.json、surfaces/*.md这类需要提交的共享产物。第二步/impeccable init把产品事实写进 PRODUCT.md在 Claude Code 的对话框里输入/impeccable init注意init不是 CLI 命令必须在你 AI 工具的聊天里敲——在终端里敲会直接收到一条报错initis not a CLI command. Type /impeccable init in your AI coding agents chat... not in this terminal.这条文案就写在 crates/detect/src/lib.rs 里。init干的事很克制先扫描项目已有的文档、路由、品牌素材、平台信号然后只问材料性缺口最多三轮聚焦问题最后把确认过的事实写进PRODUCT.md。skill/reference/init.md 给出了完整的 11 个章节模板## Platformweb / ios / android / adaptive## Stack仅绿地项目用户对技术栈的明确选择## Users主用户、场景、要完成的 job## Product Purpose产品做什么、成功意味着什么## Positioning竞品无法照抄的机制或主张## Operating Context使用/评估产品时的事实性工作流与环境## Capabilities and Constraints已确认的能力、术语、技术约束、未决事项## Brand Commitments用户明确绑定为强制的名称、语气、资产## Evidence on Hand真实内容、数据、案例、素材及其路径## Product Principles三到五条可落地的战略原则## Accessibility Inclusion已确认的用户需求或标准两条铁律只谈产品不谈美学——init 阶段绝不问你要什么配色、什么字体、什么氛围那些留给后面的视觉决策严禁编造——客户、报价、基准数据、能力声明写进去就是事故不确定的就明确标注 undecided。仓库里有一份可参考的成品demos/landing-demo/PRODUCT.md。它是虚构产品 Lumina 的产品记录其中 Anti-references反参考清单这一节特别值得学把团队明确要避开的模板Fraunces-cream-peach SaaS 模板、三图标功能宫格、hero 超级latitude、玻璃拟态写死成禁令AI 后续生成就有据可依。第三步DESIGN.md 与 DESIGN.json把视觉世界写下来init 只记录产品事实不碰视觉。视觉世界由两条来路沉淀已有代码/impeccable document从现有项目的 tokens、组件、CSS 变量里提取生成根目录的DESIGN.md新建项目/impeccable new-work流程在交付时由 documenter 从建成的世界里写出 DESIGN.md——先建后写而不是先写一本没被验证过的规则书。一份 DESIGN.md 长什么样看 demos/landing-demo/DESIGN.md开头是 YAML front matter颜色值、字体栈、圆角、间距、组件 tokens正文分 Colors / Typography / Elevation / Components / Dos and Donts 几章关键是它把审美规则化了The Cream-Family Rule所有中性色都向品牌色相偏移不允许纯白、纯黑、未调色的灰The 10% Accent Rule烧橙色装饰不超过任何渲染表面的 10%稀缺本身就是重点The One-Italic Rule每页斜体只出现一次用在 hero 标题的一个强调词上The No-Gradient-Text Rule文字永远是纯色hero 的渐变是区块背景不是字体效果The Flat-By-Default Rule默认无阴影hover 用translateY(-1px)禁用玻璃拟态与霓虹辉光。同目录的 demos/landing-demo/DESIGN.json 是机器可读的 sidecar每个颜色带 OKLCH 色相和 tonal ramp每个组件带可直接复用的 HTML/CSS 片段。这份 JSON 是 live mode 面板和设计系统检测器读的格式PRODUCT.md管产品事实、DESIGN.md管视觉决策、surface brief 管单页策略三级分工明确。第四步第一个页面从生成到精修装好、init 完工作流就通了。以落地页为例一个典型轮次是/impeccable shape # 写代码前先定 UX/UI 结构 /impeccable craft # 生成第一个版本 /impeccable critique # UX 评审层级、清晰度、情绪感染力 /impeccable audit # 技术体检a11y、性能、响应式 /impeccable polish # 上线前终检命令背后有两条自动机制在兜底设计 Hook实时门禁。Claude Code 的PostToolUse事件会在每次 UI 文件编辑后跑即时层检测只报机械性、确定无疑的问题坏图、内容溢出、对比度失败、渐变文字、辉光阴影、设计系统漂移。Stop事件再跑一次深度层对会话中动过的所有 UI 文件跑完整规则集去重后一次报完。Cursor 则用preToolUse在坏写入落地之前直接拦截。没有装 hook 的会话impeccable context会在启动时给出MANUAL_DETECTOR_REQUIRED指令要求结束前手动跑一次detect。Live Mode浏览器里迭代。/impeccable live会在浏览器里注入一个辅助层需要本地 dev server HMR或直接打开的静态 HTML你在页面上选中元素AI 生成若干 HTMLCSS 变体热替换预览选中即写回源码。/impeccable generate还能自动生成变体而不用手动挑选。仓库里有一个现成的 before/after 演示最能说明AI 味长什么样反面demos/landing-demo/classic/index.html——深色底#0a0a14、logo 用紫粉渐变文字background-clip: text、Inter 全套、玻璃拟态导航、发光阴影。每一个元素都能在 crates/live/assets/antipatterns.json 里对号入座gradient-text、ai-color-palette、glassmorphism、overused-font。正面demos/landing-demo/index.html——同一份 Lumina 产品换成奶油纸底色、Fraunces 展示字体配 Inter 正文、One-Italic 规则只允许 hero 里一个斜体词、10% 烧橙点缀、无阴影靠色调分层和发丝线边框建立深度。两套代码的差距就是 DESIGN.md 里那些命名规则全部生效后的差距。精修类命令按需取用/impeccable bolder放大平淡的设计、/impeccable quieter给过于喧闹的设计降温、/impeccable distill砍到本质、/impeccable typeset修字体层级、/impeccable harden补错误态与边界情况。高频命令还能用/impeccable pin audit钉成/audit这样的独立快捷指令。常见接入报错速查症状原因与解法终端里敲impeccable init报 initis not a CLI command命令要在 AI 工具的对话里敲终端里没有 init 这个子命令见 crates/detect/src/lib.rs 的INIT_MESSAGECodex 装完 hook 不生效Codex 按 hook 定义追踪信任需打开/hooks批准项目 hook每次 update 改动了.codex/hooks.json可能要重新批准Grok Build hook 不跑需要对项目文件夹执行/hooks-trust或--trusthook 脚本才有执行权限Cursor 不认 skillCursor 需要切到 Nightly 频道Settings → Beta并在 Settings → Rules 里启用 Agent SkillsGemini CLI 无 Skills需先装 preview 版npm i -g google/gemini-clipreview再在/settings里启用 SkillsHermes 项目级 skill 被忽略Hermes 把仓库内的过程文档视为注入向量需在项目根执行一次hermes skills trustinstall/update 因 manifest 损坏中止默认中止以防覆盖确认后用--force重跑损坏文件会备份为.bak不想装自动 hook交互式安装时选否或加--no-hooks该次运行不记录选择hook 静默失效、想排查在.impeccable/config.json里设hook.auditLog为文件路径每次 hook 调用写一行 NDJSON正常使用保持不设npx impeccable detect退出码看不懂0扫描完成且无主发现项1有目标未能扫描2完成但存在主发现项可读的 findings 走 stderr--json走 stdout 供 CI 用找不到 launcherhook 命令用[ ! -f ... ] || ...守卫launcher 缺失时是静默 no-op不会炸会话还有一个容易踩的点设计 hook 只扫它认识的扩展名.tsx、.jsx、.html、.vue、.svelte、.astro、.css、.scss、.sass、.less、.ts、.js。项目用 Blade、Twig、ERB、Handlebars 模板时要在.impeccable/config.json的detector.extensions里声明比如{ ext: .blade.php, engine: html }。收尾把默认变成选择接入 impeccable 前后最大的区别不是 AI 突然有审美了而是它的每一次输出都从模板统计变成了上下文约束PRODUCT.md 定事实、DESIGN.md 定视觉世界、surface brief 定单页策略、59 条确定性规则兜底机械错误。检测规则是底线不是天花板——craft-floor 文档里写得很清楚The floor holds the mechanics; it never picks the direction.底线管机械细节它不替你做方向选择。方向永远在开发者手里impeccable 负责让 AI 的默认输出不再替你决定它。如果你手头正有一个被 Claude Code 生成得平平无奇的页面现在就可以跑一遍npx impeccable install然后进对话敲/impeccable init。五分钟之后你写的每一行界面代码都会有人确切地说有一条规则引擎在旁边把关了。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考