
让 AI 写出不像 AI的页面impeccable 设计技能系统实战拆解【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableimpeccable 是一套面向 AI 前端协作的设计技能系统它给 AI 代理装上评审、打磨、增强、修复一整套设计命令与检测护栏把 AI 生成的界面从安全平庸拉到生产级设计水准。本文按上手流程、访问者模式、六大命令工作流、护栏机制、Rust 引擎内幕与质量红线的顺序带你过一遍这套 AI 设计工作流读完后可以直接在你的项目里跑起来。上图是仓库里 comp 保真度测试用的视觉基准一个复古机车俱乐部页面AI 构建的变体会被逐像素比对到这张图——这就是设计可验证的具象化。一、为什么需要它AI 页面的安全平庸问题如果你用过 AI 生成前端页面大概率见过这个套路Inter 字体、居中的三张同尺寸卡片、01/02/03 章节编号、渐变文字、玻璃拟态、hero 区一个大数字加一行小标签。每一页单看都没错合在一起就是千篇一律——安全、克制、不敢出错。impeccable 的定位一句话讲它不是又一个提示词模板而是一套授予 AI 设计权限与工具的完整系统。技能主文档 SKILL.md 开篇就写明了它的核心主张激活之后模型要以获奖设计总监的标准面对每个设计任务——生产级代码、峰值创造力、清晰的立场POV、对客户端与用户需求的深度理解、卓越的工艺。它自称要做出配得上超分布工艺out-of-distribution craft的作品。支撑这个主张的是三条被固定在文档最前面的工作原则全力以赴不投机取巧、不走捷径交付物必须完整用户必须自备的资产除外。大胆做梦产出独特、美观、出众、有启发性的东西而不是过得去的东西。有界验证而非死循环先完整构建再做一轮批量检查Web 端桌面与移动端一起看一次性修复暴露的全部问题最多再确认一轮就停。文档直言无休止的自我 QA 是在浪费用户的钱而且做得不如一次干净的交付交接好。二、五分钟上手context 会话引导与失败降级技能以目录形式分发到各个 AI harness 下.hermes/、.claude/、.cursor/等目录里各有一份同名副本。每次会话的第一步是运行引导命令把项目的产品上下文注入 AI 的工作区.hermes/skills/impeccable/scripts/impeccable context这条命令加载PRODUCT.md产品持久上下文、DESIGN.md在位视觉系统记录、匹配的 surface brief以及原生平台指导带--target path可以指定某个具名源文件或路由。它的输出是指令AI 必须遵循且每个会话只跑一次。这个启动器背后是一个自包含的 Rust 二进制不需要 Node。它按固定顺序找引擎环境变量IMPECCABLE_BIN→ 脚本同目录的bin/os-arch/impeccable→ 家目录缓存 → 版本固定缓存 → PATH → 最后才从发布通道下载下载路径必须通过.sha256校验失败即拒绝执行。具体解析逻辑在 skill/scripts/impeccable 这个 POSIX sh 启动器里Windows 下用同目录的impeccable.cmd。⚠️降级路径如果context被拒绝或运行失败AI 会在下一次工具调用前单独发一条消息大意是上下文加载没有执行我将直接读取现有项目上下文然后直接读PRODUCT.md和DESIGN.md——不得虚构缺失的上下文也不得因此阻塞规划与编辑。启动器挂掉工作照样能推进。三、四种访问者模式先想清楚访客的成功impeccable 最特别的设计之一是它要求 AI 在动手前回答一个问题这个界面上访客的成功长什么样答案决定一切取舍。模式由请求的表面决定而不是由产品类型决定并且只持久化在那张 surface brief 里。模式访客成功典型表面Persuade做出决策并行动设计即产品落地页、营销、活动、定价页Operate完成任务应用 UI、仪表盘、编辑器、后台、设置Read理解某件事文档、文章、指南、帮助、更新日志Experience身处作品之中作品集、画廊、展示四条判定规则值得记住Persuade赢得注意与行动。brief 需要真实影像就交付真实影像跟随已承诺的视觉世界而不是品类习惯。Operate可扫读性、一致性、原生预期优先于表达欲品牌不靠大 Logo而是存在于精确细节里。Read先为理解而组织结构然后让阅读体验本身值得停留。Experience作品从首屏开始主导界面退居其次。判定严格到近乎刻板一个开发工具的落地页仍然是 Persuade一家时装屋的文档仍然是 Read文档索引是 Read 而非 Persuade。新表面的完整决策流程见 new-work.md。四、命令系统六大工作流23 个命令怎么挑技能把 23 个设计命令组织进六个工作流。下面挑高频的 9 个展开其余压成清单带过。Build搭起来init把持久产品真相采写入PRODUCT.md——主要用户与情境、产品机制、必须保留的约束最多三轮聚焦访谈。它只记录产品事实不发明视觉世界、不写 DESIGN.md。teach是它的别名。document反过来从现有代码生成DESIGN.md把在位视觉系统记下来。shape写代码之前规划 UX/UI负责任务发现只在需要视觉世界决策时才进入 new-work 流程。其余extract抽可复用令牌与组件进设计系统、craft普通 new-work 的已废弃别名别用。Evaluate打分critique带启发式评分的 UX 设计评审输出分数与 p0/p1 问题清单是后续打磨的依据。audit技术质量检查——可访问性、性能、响应式原生平台有audit.native.md变体。Refine收一收polish发布前的最终质量收尾按 critique 的分数清账。bolder放大安全或平淡的设计把没毛病变成有观点。quieter弱化激进或过度刺激的页面。其余distill剥到本质、harden错误态、i18n、边缘情况面向生产就绪、onboard首次运行、空状态、激活流程。Enhance加一加animate有目的性的动效、colorize单色 UI 加战略性色彩、typeset排版层级与字体、layout间距、节奏、视觉层级、delight个性与难忘细节、overdrive突破常规极限。Fix修一修clarifyUX 文案与错误消息、adapt多设备适配含原生变体、optimizeUI 性能诊断与修复。Iterate迭代live与generate——浏览器内活体迭代第九章细说。路由规则很简单显式或明显隐含的请求加载对应 reference 照做两个命令都合适时只问一次不带参数只发/impeccable时读 routing.md 呈现上下文感知菜单跑一次impeccable signals读 JSON按项目状态给 2–3 个最高价值的下一步绝不自动执行任何命令。 想让高频命令脱离/impeccable前缀用 pin 建独立快捷方式.hermes/skills/impeccable/scripts/impeccable pin pin critique执行后/impeccable critique target变成独立的/critique targetunpin移除。AI 会简报脚本结果出错时原样转述 stderr。五、常见请求场景这句话该用哪个命令把抽象命令映射到真实对话上这个落地页太平了更大胆一点→bolder。它是为安全或平淡的设计设计的放大命令会按已承诺的视觉世界加码而不是随手加渐变。后台界面信息太吵让人安静下来→quieter。注意方向不是polish那是收账而是主动降调削减过度刺激的表达。给产品页加动效→animate。它要求一次编排的主时刻而不是一堆零散特效这点在第八章红线里有硬约束。帮我看看这个页面怎么样→ 先critique拿分数和 p0/p1 清单再按分数决定是polish清账还是回到bolder/layout调结构。还有一条隐含规则Brief 优先。如果用户在DESIGN.md或 brief 里固定了某个审美、时代、字体、调色板即使它与饱和模式比如满屏 Inter 加 indigo冲突也要尊重固定值——把明确的需求扭向 AI 自己的品味在这套系统里算失败。六、护栏机制Hooks 即时拦截与 Doctor 漂移诊断Hooks每次编辑后的设计检测器。/impeccable hooks on|off|status|ignore-*管理按项目开关的设计检测钩子UI 文件被编辑后自动跑检测器并浮出发现。规则分两层——即时层只报机械、无歧义、值得打断编辑的问题坏图、溢出裁剪、对比度失败、渐变文字、发光阴影、设计系统漂移其余一切文案节奏、调色板与排版品味、布局韵律延迟到会话结束的Stop 深度通道对整场会话碰过的 UI 文件跑完整规则集去重后一次性浮出。配置解析逻辑在 crates/hook/src/hook_lib.rs规则分层的完整协议在 hooks.md。例外管理走三级命令最窄的例外优先ignore-value 规则 值压单值如确认 Inter 是有意选的就压Inter这一个值ignore-file glob压整文件所有规则仅当文件完全超出设计评审范围如 fixture 或生成物ignore-rule id整项目压一条规则用户明确要求时才用。所有写入都走impeccable hooks命令钩子自身永不写忽略配置.hermes/skills/impeccable/scripts/impeccable hooks ignore-value overused-font Inter --shared --reason User confirmed Inter is intentionalDoctor工件与当前版本之间的漂移诊断。impeccable doctor --json检查PRODUCT.md、DESIGN.md及其 sidecar、.impeccable/config.json、持久化 surface brief、设计钩子这些工件和当前版本所读内容之间的漂移输出findings每条带severity与修复建议。三级处置auto不承载决策跑一次doctor --fix应用并一行汇报mention用户需知晓但此刻无需决策每条一句带修复建议route需要init/document等特定命令仅当用户本轮要求才运行——init 与 document 是对话不是可无人值守的修复。铁律绝不在设计任务中顺带修复漂移发现只报告、不处置。协议全文在 doctor.md。七、引擎内幕一个 Rust 二进制撑起全部动词技能里每条命令最终都落到随技能分发的Rust 自包含引擎。入口在 crates/cli/src/main.rs一个match verb就是完整的动词分派表context、pin、doctor、signals、concept-seed、generate-image等会话与设计决策设施归impeccable_contextcratedetect/ignores归检测器 cratehook、hook-before-edit、hooks归impeccable_hook所有live*前缀归impeccable_livecomp-spec、comp-diff、font-match、build-phase是 comp 保真度四件套——从像素读 cap height、按网格量测组件、生成栅格 plate、用总相似度72% 为通过线且无硬否决判断重建是否忠实。启动器对候选二进制的信任分级很有意思环境变量、同目录二进制、版本固定缓存被视为可信直接 exec因为钩子每次编辑都要跑它们必须快家目录与 PATH 上的候选则先做一次engine-probe握手——该动词让引擎输出impeccable-engine version并返回 0用来把本引擎和已退役的 3.x npm CLI 区分开后者对任何未知动词只回 Unknown command。探测安静且快小于 100ms。一个小知识点这里有三个相互独立的版本号——npm CLI 打印的 4.0.0、技能 frontmatter 的 4.2.2、scripts/VERSION里的引擎版本 0.1.14分别跟踪 npm 包、技能内容与引擎二进制别拿--version的输出去对技能版本。上图是同一 comp 基准的深色换色构建结果与第一张基准图一起演示了 comp 保真度如何把视觉变体变成可量化的比对。八、红线清单Craft Floor 的硬约束技能要求在任何 UI 编辑包括小修开始前读 craft-floor.md——它承载质量底线、绝对禁令以及检测器抓不到的反射。从里面挑最该背下来的几条作为红线清单绝对禁令brief 也挣不回的标题上方的 kicker/eyebrow 小字标签禁。这是唯一的无赦条款任何 brief 都救不了它。可验证的数值底线Verify 侧对比度正文与占位文本 ≥ 4.5:1大文本 ≥ 3:1。正文行长 65–75ch展示字最大 6rem字距下限 -0.04em。间距紧群组、宽分隔标题上方的空间必须大于下方。阴影必须带偏移与柔和模糊硬偏移块阴影只属于真正的 neobrutalist 世界。动效要有一次编排的主时刻而非零散特效状态必须覆盖 hover、disabled、loading、error、empty 与键盘焦点。品类默认拒绝区Refuse 侧brief 可以挣回同尺寸图标标题文本卡片堆叠hero 指标模板大数字小标签统计无信息量的 01/02/03 编号渐变文字装饰性玻璃模糊1px 的彩色 border-left/rightsparkline 与进度环冒充内容等宽字体装扮技术感。这些不是建议是检测器与评审者都会拿来对照的账。九、进阶live 浏览器活体迭代live是整套系统里最活的命令在浏览器里直接点选元素、选设计动作AI 通过 HMR 热替换生成的 HTMLCSS 变体。前提两条运行中的 HMR dev serverVite、Next.js、Bun 等或浏览器中打开的静态 HTML且只支持本地 checkout——禁止注入生产站点禁止削弱生产 CSP。核心循环很短.here/.hermes/skills/impeccable/scripts/impeccable live启动后进入live-poll长轮询按事件type分派generate生成变体、steer定向调整、accept接受变体、discard丢弃、exit等动作。会话状态持久在.impeccable/live/sessions/中断后用live-status与live-resume --id SESSION_ID恢复。协议全文见 live.md。注意live与impeccable detect的 URL 扫描仅限 Web 平台原生项目不要指望它。写在最后impeccable 本质上把设计总监的审稿习惯拆成了可执行的命令、可验证的底线和可拦截的钩子context 注入上下文模式框定目标命令覆盖全流程Hooks 与 Doctor 兜住漂移Rust 引擎保证每条命令都有确定的实现。它解决的不是AI 能不能写页面而是AI 写的页面能不能过设计评审。下一步建议先在你的项目里跑一次impeccable context看它怎么读你的PRODUCT.md/DESIGN.md对任何一张现成表面跑critique拿基线分数然后精读三篇 reference——routing.md命令怎么选、craft-floor.md红线在哪、new-work.md新表面怎么走。跑通一轮 critique → polish你就知道这套设计命令系统的水位了。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考