Impeccable 设计技能(SKILL.md)完全指南:让 AI 前端设计达到出圈工艺水准的编排协议
【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable
本指南以.qoder/skills/impeccable/SKILL.md为骨架,结合仓库中的 launcher 脚本、参考文档与引擎实现,系统讲解 Impeccable 技能如何在 AI 编码工具中驱动"设计导演级"的前端产出:从会话初始化、命令路由、四大设计模式,到质量地板、方向合同、Live 变体迭代与漂移修复。读完你将掌握这套技能的操作协议、底层执行原理,以及如何用它把安全平庸的设计推进到真正值得被称为 craft 的水准。
技能是什么:一个让 AI 处理设计任务的完整编排层
Impeccable 是托管在.qoder/skills/impeccable/SKILL.md的 AI Agent 技能(当前版本 4.3.0,Apache 2.0 许可),它把"设计、重设计、塑形、评审、审计、打磨、澄清、蒸馏、加固、优化、适配、动效、配色、提取"等 21 个前端设计动词标准化为可执行的命令协议。它面向的场景覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导与空状态,并横跨 UX 评审、视觉层级、信息架构、认知负荷、无障碍、性能、响应式、主题、反模式、排版、字体、间距、布局、对齐、色彩、动效、微交互、UX 文案、错误状态、边界情况、i18n 以及可复用设计系统与 token。
它明确不处理后端或非 UI 任务。技能元数据通过 frontmatter 声明了调用触发条件与允许工具(SKILL.md):
name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface... version: 4.3.0 user-invocable: true argument-hint: "[shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]" allowed-tools: - Bash(npx impeccable *) - Bash(.qoder/skills/impeccable/scripts/impeccable *)技能的核心主张是:在此协议下,AI 的设计产出应当达到"值得被称为 out-of-distribution craft"的程度——生产级代码、峰值创造力、清晰的观点(POV)、对客户与用户需求的深刻理解,以及卓越的工艺。两条核心原则贯穿始终:全力投入(不做对冲、不走捷径、交付必须完整)与有界验证(在有限轮次内验证,而非无限循环:完整构建 → 一次批量截图检查(桌面与移动端)→ 一次性修复 → 至多再确认一轮 → 停止打磨)。
环境搭建与会话初始化
Launcher 是什么、如何工作
技能通过.qoder/skills/impeccable/scripts/impeccable(POSIX sh 脚本)启动引擎,Windows 上对应impeccable.cmd。阅读 launcher 脚本 可以看到它的完整候选搜索链:
$IMPECCABLE_BIN环境变量指向的二进制(直接信任,跳过握手校验);- 与脚本同级的
bin/<os>-<arch>/impeccable(或 Windows 的.exe); ~/.impeccable/bin/impeccable(需通过 engine-probe 握手);- 版本锁定缓存
~/.impeccable/bin/<version>/impeccable(由VERSION文件驱动); - PATH 上的
impeccable(同样需握手校验); - 最后兜底:从发布通道按
engine-v$version/impeccable-$os-$arch下载到用户缓存,并用.sha256sidecar 做 fail-closed 校验——sidecar 缺失、哈希工具缺失或校验失败都会拒绝执行而非运行未验证的二进制。
启动器的一个重要设计是engine-probe 握手:旧版 3.x npm CLI 也安装过名为impeccable的 bin,直接 exec 会让每个动词都以 "Unknown command" 失败,所以非信任候选必须先打印impeccable-engine <version>并退出 0 才被采纳;IMPECCABLE_LAUNCHER_PROBE=1标记探测子进程,使其跳过自身探测且拒绝下载,保证探测廉价且不会循环。整个 launcher 不需要 Node 或任何运行时。
每会话一次:impeccable context
按照 Setup 协议(SKILL.md),每个会话开始执行一次:
.qoder/skills/impeccable/scripts/impeccable context --target <path>其中<skill-base-dir>是包含 SKILL.md 的技能目录(而非插件根目录),cwd 保持在用户项目。该命令会加载 PRODUCT.md、DESIGN.md、匹配的 surface brief 以及适用的原生平台指引;其输出可能包含CONTEXT_STALE、NO_PRODUCT_MD、IMAGE_GEN_AVAILABLE、UPDATE_AVAILABLE、MANUAL_DETECTOR_REQUIRED等指令。技能规定:遵循其指令,且不要重复运行。Windows 无sh的 shell 使用impeccable.cmd。若 launcher 失败,则在下一个工具调用前单独发一条消息声明"Context loading did not run; I'll read the existing project context directly",然后直接读取现有 PRODUCT.md 与 DESIGN.md 继续——launcher 失败本身不阻断规划与编辑。
Setup 之后依次加载:请求对应的 playbook(显式/隐含子命令的 Commands 表引用,或新界面/替换视觉世界的 new-work.md);编辑前必须阅读 craft-floor.md(质量地板与绝对禁令,仅规划性工作不必加载)。
设计三原则:brief、精修与视觉权威
SKILL.md 的 "How to design" 小节定义了三条不可动摇的原则:
- Brief 说了算(The brief wins):即使与饱和模式警告冲突,也必须尊重被固定的美学、时代、材质、字体与调色板。把明确的 brief 导向自己的品味是失败。
- 精修保留,重设计替换(Refinement preserves; redesign replaces):精修保留在位身份的视觉、行为、文案及范围内的一切;替换事实性文案或添加主张前必须先询问。重设计保留产品真相、内容、功能、原生 affordance 与约束,但把旧外观视为证据与反参考(anti-reference),在 new-work 中选择替换世界并替换 DESIGN.md。绝不要在对已放弃外观的"抛光"上做折中。
- 视觉权威是证据,不是文件名(Visual authority is evidence, not a filename):缺少 DESIGN.md 本身不构成 greenfield,是否保留、扩展或替换在位世界由 new-work 决定。
四大设计模式:Mode 命名访客成功的形态
Mode 描述的是"访客在此界面上的成功长什么样",从请求的界面而非产品推导,且只持久化在对应的 surface brief 中(SKILL.md):
| Mode | 访客形态 | 适用表面 | 设计重心 |
|---|---|---|---|
| Persuade | 访客决策并行动;设计即产品 | 落地页、营销、campaign、定价 | 赢得注意与行动;brief 需要时投放真实影像,跟随已承诺的世界而非品类习惯 |
| Operate | 访客完成任务 | 应用 UI、仪表盘、编辑器、管理后台、设置、工具 | 可扫描性、一致性、原生预期与真实使用场景优先于表达;品牌活在精确细节里 |
| Read | 访客理解某事 | 文档、文章、指南、帮助、changelog | 为理解而结构化,再让阅读体验值得停留 |
| Experience | 访客置身作品之中 | 作品集、画廊、showcase | 让作品从第一视口就主导,界面退居其次 |
判例规则:工具的落地页仍是 Persuade;时装屋的文档仍是 Read;文档索引是 Read 而非 Persuade。深入指引见 operate.md(Operate/Read 的排版、色彩、布局、组件、动效约束,例如产品 UI 常态用 Restrained 色彩策略、固定 rem 缩放而非 fluid、150–250ms 过渡、加载用 skeleton 而非居中 spinner、overlay 必须逃逸 overflow 祖先)。
命令体系:21 个动词的完整参考表
SKILL.md 的 Commands 表是整套技能的索引(SKILL.md),按类别分组:
| 命令 | 类别 | 描述 | 参考 |
|---|---|---|---|
craft [feature] | Build | 已废弃的普通 new-work 请求别名 | craft.md |
shape [feature] | Build | 写代码前规划 UX/UI | shape.md |
init | Build | 在 PRODUCT.md 中捕获持久产品上下文 | init.md |
document | Build | 从现有项目代码生成 DESIGN.md | document.md |
extract [target] | Build | 把可复用 token 与组件抽入设计系统 | extract.md |
critique [target] | Evaluate | 带启发式评分的 UX 设计评审 | critique.md |
audit [target] | Evaluate | 技术质量检查(a11y、性能、响应式) | audit.md · 原生:audit.native.md |
polish [target] | Refine | 发布前最终质量通过 | polish.md |
bolder [target] | Refine | 放大安全或平庸的设计 | bolder.md |
quieter [target] | Refine | 调低激进或过度刺激的设计 | quieter.md |
distill [target] | Refine | 剥离到本质,移除复杂度 | distill.md |
harden [target] | Refine | 生产就绪:错误、i18n、边界情况 | harden.md |
onboard [target] | Refine | 设计首次运行流程、空状态、激活 | onboard.md |
animate [target] | Enhance | 添加有目的性的动画与动效 | animate.md |
colorize [target] | Enhance | 为单色 UI 添加策略性色彩 | colorize.md |
typeset [target] | Enhance | 改善排版层级与字体 | typeset.md |
layout [target] | Enhance | 修复间距、节奏与视觉层级 | layout.md |
delight [target] | Enhance | 添加个性与难忘触点 | delight.md |
overdrive [target] | Enhance | 突破常规边界 | overdrive.md |
clarify [target] | Fix | 改进 UX 文案、标签与错误消息 | clarify.md |
adapt [target] | Fix | 适配不同设备与屏幕尺寸 | adapt.md · 原生:adapt.native.md |
optimize [target] | Fix | 诊断并修复 UI 性能 | optimize.md |
live | Iterate | 浏览器内视觉变体模式:选元素、生成备选 | live.md |
所有参考文档位于.qoder/skills/impeccable/reference/目录;每个动词的意图信号同时沉淀在 command-metadata.json 中,供工具层做触发词匹配(例如用户说"bland、generic、lacks personality"→bolder;"slow、janky、bundle size"→optimize)。
路由协议:无参数、显式命令与一般设计工作
SKILL.md 定义了三条路由分支:
- 无参数:读取 routing.md 并呈现其上下文感知菜单,绝不自动运行命令。routing.md 规定:先运行
impeccable context;若报告NO_PRODUCT_MD则把/impeccable init作为首选推荐但仍展示其余菜单;否则运行一次impeccable signals读取 JSON,按信号(setup.hasDesign/hasCode、critique.latest的 score/p0/p1、git.changedFiles、devServer.running、setup.platform、scan.targets)给出 2-3 条最高价值命令,再附完整菜单。 - 显式或清晰隐含的命令请求:加载对应参考(原生平台用原生变体)并遵循;若两个命令都合适,只问一次。
- 工作流/命令选择类问题:读 routing.md 的 Workflow questions,只给建议不执行。
- 其余情况:当作一般设计工作。缺 PRODUCT.md 的新界面或替换世界经 init 后走 new-work;既有代码的窄幅精修按
impeccable context指示直接在位实现推进,事后(而非阻塞时)再提议 init。
别名与边界:teach是init的别名;craft是普通 new-work 的废弃别名且无额外行为;shape拥有任务发现权,仅在做视觉世界与界面概念决策时进入 new-work。init 写入 PRODUCT.md 后,直接恢复而不重跑impeccable context;当 init 记录的平台是ios、android或adaptive时,init 自行加载对应原生参考。
Pin / Unpin:独立快捷命令
.qoder/skills/impeccable/scripts/impeccable pin <pin|unpin> <command>创建或移除独立的/<command>快捷方式。技能要求:简明报告脚本结果,出错时原样转述 stderr。
质量地板(Craft Floor):检测器抓不到的底线
craft-floor.md 是编辑任何 UI(包括小修)前必须加载的文档,承载机械检查与绝对禁令。它在方向确定后加载,且不得对外宣布清单;设计 hook 激活时已在编辑时强制执行其中的机械检查,此时应处理其发现而非重新逐条审计。
Verify 检查清单(对构建结果而非意图的检查,批量截图轮中一次性执行):
- 对比度:正文与占位文本 ≥ 4.5:1,大文本 ≥ 3:1;彩色表面上用该色相或前景色给次级文本着色,绝不直接用灰色。
- 深度:阴影必须带偏移与柔和模糊;零偏移的彩色光晕只是装饰。
- 间距:紧密分组、宽松分隔、标题上方空间大于下方;读计算值而非目测。
- 排版:正文行宽 65–75ch,display 最大 6rem,字距下限 -0.04em,标题平衡,有清晰的字号与字重阶梯;每个断点跑真实文案并修复溢出。
- 动效:一个原创时刻,而非零散效果或每节同一个入场动画;指数级 ease-out,从可见默认状态出发;超越 transform/opacity——blur、backdrop-filter、clip-path、mask、shadow 在保持流畅时都属于动效调色板。
- 状态:hover、disabled、loading、error、empty,加上真实内容、可工作的控件、响应式构图、键盘焦点。
- 浏览器表面:文本选中、caret、自定义滚动条、focus ring、下划线偏移、表格数字字形——这些"你没画的部件"必须从调色板主题化。这是"构建出来"而非"拼装出来"的最廉价信号,也是模型最容易跳过的一项。
- 文案:产品自己的语言;控件命名其动作,错误命名问题与恢复路径。
- 覆盖度:brief 每项要求都存在且数秒内可找到。
Refuse 默认禁令(品类默认而非铁律,brief 原话可以赢回任何一项;但"用默认"意味着没在做决定):
- 页面脚手架:同尺寸"图标+标题+文本"卡片当页面结构(嵌套卡片永远错);hero-metric 模板(大数字+小标签+佐证统计+强调);标题上方的 kicker/eyebrow(这是铁律级禁令,没有 brief 能赢回);无信息价值的章节编号;为不需要打断或受保护焦点的任务开模态框。
- 表面习惯:渐变文字;作为装饰的 glass 与 blur;超过 1px 的彩色
border-left/right;非新粗野主义世界的硬偏移阴影;用迷你趋势图/进度环/圆角软阴影矩形充当内容;把等宽字体当"技术感"戏服;用系统 display 字体充当自有世界的展示声音(应自托管匹配的角色);用 Unicode 符号或 emoji 充当图标系统(图标必须绘制自真实图标库或手写 SVG,统一笔画与字重);用几何蒙版冒充有机轮廓(应从真实图像导出 alpha matte);按品类而非使用场景选明暗色。
地板负责机械层面,从不决定方向;检查全绿后,把页面花在已承诺的世界之上,在"精炼"与"承诺"之间犹豫时——承诺。
new-work 全流程:从视觉权威判定到完成评审
对"新界面或替换视觉身份",new-work.md 定义了七步流水线,是本技能最具纵深的部分:
1. 判定已经为真的事实:读 DESIGN.md、代表性代码、token、组件与资产,四选一——重设计(保留产品真相、替换视觉世界)、已确立世界(继承并在代码中记录身份)、不完整品牌(保留已确认资产、与用户共同扩展)、无视觉权威(与用户共创世界)。
2. 问什么会改变作品:用结构化提问工具问 2-3 个相关问题(Persuade 问谁必须行动/相信什么/什么证据;Operate 问任务、信息、重要状态、频率、约束;Read 问读者的问题与素材结构;Experience 问什么引领、探索如何展开)。绝不为 CSS 值或罐头美学通道。
3. 选择正确的发明量:扩展既有界面(继承世界)、在既有世界中创建整面界面(跑impeccable concept-seed --scope surface --mode <mode>发三张结构卡,用概念决策页让用户锁定,锁定卡片即批准并确定构建路径:comp-led 或 code-led)、或创建/替换视觉世界(从受众文化世界列出七个具体视觉系统,跑concept-seed --scope direction --mode <mode>发牌,融合 challenger 后按受众认同与产品清晰度两轴裁决,stand exit 始终作为安静的正统选项存在)。
4. 承诺世界:先定色彩策略(Restrained / Committed / Full palette / Drenched),再选字体(Operate/Read 用系统栈与工作马字体;Persuade/Experience 用有观点的字体,且 Fraunces、Playfair Display、Space Grotesk 等训练数据默认字体需要理由);明暗色永远不是默认,写一句物理场景(谁用、在哪、什么光)让答案自己浮现。
5. 记录决策:代码前把已选方向作为仅开发使用的合同写入 surface brief 的## Direction contract下——THESIS、OWN-WORLD、STORY、FIRST VIEWPORT、FORM、FINISH 六个短块(约 150 词),FINISH 行原文为 "unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance"。合同绝不复制进实现源码或任何浏览器交付物。读写命令:
.qoder/skills/impeccable/scripts/impeccable surface-brief read <primary-target> .qoder/skills/impeccable/scripts/impeccable surface-brief write <primary-target> <body-file> [related-target ...]6. 全力构建:构建被分配的既定方向而非其安全诠释。comp-led 路径把 comp 当作可测量的空间合同:impeccable build-phase start --direction <seed key> --kind <assigned|pick|challenger|canon>启动磁盘上的状态机,依次推进 comps → spec(comp-spec --comp <comp> --grid画坐标网格、--regions <file>命名区域、font-match --measure/--rank按像素测量字体)→ plates(每个栅格区域再生为资产、embed-prompt记录 provenance)→ hero(build-phase scaffold写布局 CSS 变量与参考页,comp-diff在 72% 通过线以上放行)→ sections → motion → responsive,每阶段由build-phase advance关门,exit 2 表示关卡失败并打印原因。
7. 检查与完成:一次批量截图轮覆盖桌面与移动端(web)或各 OS 的已发货设备类别(原生),两轮封顶;comp-led 构建跑comp-diff --comp <approved comp> --build .impeccable/review/desktop.png --spec .impeccable/build/spec.json --out-dir .impeccable/review/diff/final读 region 行与成对裁剪图。然后派生 shipped finish reviewer(impeccable-finish-reviewer)按四个 disposition 词行动:recapture(证据失败,重新捕获再完整评审)、rebuild(保真度整体失败,立即重导区域与资产并全新评审)、fix(批量应用实质修复、重建、重捕获、再评审一轮)、ship(无欠账,报告后进入 documenter)。最后派生impeccable-documenter写 DESIGN.md 与.impeccable/design.json(新世界与已批准的系统变更要求 token 承载,仅散文不够)。
Live 模式:浏览器内的视觉变体迭代
reference/live.md 定义了交互式变体模式:在浏览器中选择元素、选设计动作、得到经 HMR 热替换的 AI 生成 HTML+CSS 变体。前提是运行中的 dev server(Vite、Next.js、Bun 等)或浏览器中打开的静态 HTML 文件;live 编辑要求本地 checkout,禁止注入线上生产站点(含 HTTPS),也不要为启用 live 而禁用浏览器安全或削弱生产 CSP——线上检查用impeccable detect <url>或浏览器扩展。
会话契约按序执行:impeccable live启动(输出serverPort/serverToken/pageFiles/roots/hasProduct/hasDesign/...)→ 打开服务pageFile的 URL → 长超时(600000ms)轮询impeccable live-poll→ 按事件类型(generate/steer/accept/discard/prefetch/manual_edit_apply/variant_mount_failed/exit)分派 → 每个_instructions字段都是该情境的权威下一步。恢复命令包括live-status、live-resume --id SESSION_ID、live-complete --id EVENT_ID;live-server stop执行退出清理并移除注入脚本。
生成阶段的四相协议值得注意:Phase A以 DESIGN.md → CSS 自定义属性 → 元素/父级计算样式 → 兄弟组件视觉修辞的顺序提取身份,写一句身份锁定(identity lock),所有变体必须读起来是同一个品牌;Phase B默认模式保留身份仅变体表达(约 90% 会话),departure 模式只在用户显式要求"重设计/重建/完全不同的东西"时触发;Phase C默认模式三变体各承诺不同主轴(Hierarchy / Layout topology / Typographic system / Color strategy / Density / Structural decomposition),departure 模式从品牌人格词汇派生三个彼此且与现界面都不同的方向;Phase D眯眼测试——默认模式做身份回归检查,departure 模式做"家族"与"句子"两轮(共用或可互换标签、两句押韵即返工)。
参数系统按元素视觉权重预算 0–4 个粗粒度旋钮(leaf/tiny 0 个、small 0-1、medium 目标 2、large 目标 2-3 最多 4),三种 kind:range(驱动--p-<id>)、steps(驱动data-p-<id>)、toggle(两者皆驱动);accept 后 carbonize 流程把临时缝合的变体重写为永久形式(CSS 移入真实样式表、烘焙参数值、展开包裹层、删除标记)。
init、doctor 与 hooks:项目的上下文治理
init:捕获产品真相
init.md 规定init只在 PRODUCT.md 捕获持久产品事实,不发明视觉世界、不写 DESIGN.md。流程为:加载当前状态(五分支处理)→ 探索项目(产出平台假设web/ios/android/adaptive)→ 访谈产品真相(至多三轮聚焦问题,先问最改变未来决策的未知项:主要用户是谁/产品使什么成为可能/必须保留哪些持久约束;不询问美学方向)→ 写 PRODUCT.md(必须逐字复制<!-- impeccable:product-schema 1 -->注释,文件含 Platform、Stack、Users、Product Purpose、Positioning、Operating Context、Capabilities and Constraints、Brand Commitments、Evidence on Hand、Product Principles、Accessibility & Inclusion 节)→ 记录工作流默认(buildPath: "comp"或"code"写入.impeccable/config.json)→ 收尾或恢复(按实际项目状态推荐下一步)。完成门槛:PRODUCT.md 存在于解析路径且包含已确认产品记录,否则 init 不完整。
doctor:漂移报告与修复
doctor.md 区分三种"过时":工具版本(UPDATE_AVAILABLE,交给npx impeccable update)、schema 漂移(旧版本写入的产物,本命令可机械修复多数)、真相漂移(代码走了文档没跟上,由 document/init 各自拥有)。运行impeccable doctor --json(monorepo 加--target <path>),输出findings(id/artifact/path/severity/summary/fix)与可选workspaces表,按严重度行动:auto直接--fix应用、mention一句说明、route点名命令只等用户要求才运行。关键判例:design-md-drift的提交计数不是矛盾证据,不得断言 DESIGN.md 已过时;workspace-context-inherited是设计行为而非缺陷。impeccable context在会话启动时报告其廉价子集(每项目每周节流一次),可用.impeccable/config.json的"stalenessCheck": false或IMPECCABLE_NO_STALENESS_CHECK=1关闭。
hooks:设计检测器钩子
hooks.md 说明impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset>按项目管理设计检测器钩子(默认动作是status)。钩子在设计相关文件(.tsx/.jsx/.html/.vue/.svelte/.astro/.css/.scss/.sass/.less/.ts/.js)的编辑后自动运行检测器:Claude Code、Codex、GitHub Copilot 用 post-tool-use 推送短系统提醒,Cursor 用preToolUse在坏写入落地前拒绝,Grok Build 在 Stop 上跑深度扫描。规则分两层:每编辑钩子只跑即时层(机械、明确的问题:破图、溢出/裁剪、对比度、渐变文字、glow 阴影、设计系统漂移),其余(文案节奏、调色板/排版品味、布局韵律)推迟到 Stop 深扫,跨会话去重后一次呈现。
配置集中在.impeccable/config.json(hook.enabled、hook.quiet、hook.auditLog、hook.perEditRules: "all"恢复全量规则、detector.extensions声明服务端模板扩展如{ "ext": ".blade.php", "engine": "html" }、detector.ignoreRules/ignoreFiles/ignoreValues、detector.designSystem.enabled);每开发者覆盖(含hook.consent安装同意)在 gitignored 的.impeccable/config.local.json。旧环境变量IMPECCABLE_HOOK_DISABLED、IMPECCABLE_HOOK_QUIET、IMPECCABLE_HOOK_LOG仍被尊重。三分类分诊:真实设计问题→修复;自信误报/已批准例外→用--reason "<who decided: evidence>"写入最窄的 ignore 并披露;不确定→一行问题问用户。impeccable-disable <rule>/impeccable-disable-line/impeccable-disable-next-line行内注释是文件需要随单文件离开仓库时才使用的例外。
支撑实现:仓库中的引擎证据
这套技能的操作协议背后是仓库内完整的引擎实现与测试保障,阅读源码可以印证其底层原理:
- Launcher 搜索链与握手:scripts/impeccable 的完整候选顺序、
probe_ok握手与 fail-closed 下载校验(见上文"Launcher 是什么");同一目录还维护VERSION、command-metadata.json与 Windows 版impeccable.cmd。 - 浏览器端与检测资产:scripts/live-browser.js、
live-browser-dom.js、live-browser-ignores.js、live-browser-session.js支撑 live 模式的浏览器注入,modern-screenshot.umd.js提供截图能力。 - 字体索引数据:scripts/data/font-index.json 与
font-index-failures.json是font-match按指纹匹配 Google Fonts 目录的离线索引。 - 检测器引擎:
crates/detect/src下的 lib.rs、design_system.rs、detect_text.rs 等实现静态文件检测;对应测试见 crates/detect/tests/rule_pack.rs。 - hook 实现:
crates/hook/src的 hook.rs、before_edit.rs、stop_baseline.rs、admin.rs 承载钩子管理,测试在 crates/hook/tests/hook_tests.rs 与cache_root_tests.rs。 - live 服务端:
crates/live/src下 live_server.rs、live_poll.rs、live_wrap.rs、live_accept.rs 等 40+ 模块实现 live 会话的服务器、轮询、包裹、接受与清理;端到端测试见 tests/live-e2e.test.mjs 与 tests/live-e2e-steer-agent.test.mjs。 - comp-led 状态机:
crates/comp-verbs/src的 build_phase.rs、comp_diff.rs、comp_spec.rs、font_match.rs 实现构建阶段门控、comp 差异度量与字体匹配。 - 项目级示例:仓库根部的 PRODUCT.md 与 DESIGN.md 是该技能产物格式的现实样例;cursor-plugin/hooks/hooks.json 展示 Cursor 侧钩子清单,
demos/landing-demo/下的 DESIGN.json/DESIGN.md 可对照理解文档化的视觉系统。
适用前提与边界
几点需要如实说明的限制(均来自仓库证据):live 模式要求本地 checkout 与可运行 dev server,且仅适用于 web(routing.md 明确live与detect是 web-only,ios/android/adaptive平台不适用);detect/钩子读取 HTML/CSS,对原生代码无结论;检测器规则分两层,即时层以外的问题延迟到 Stop 深扫;技能文档明确禁止把漂移修复当作设计任务的副作用(CONTEXT_STALE只报告不处理,标记为auto的除外)。这些都定义了这套协议在哪些场景成立、在哪些场景应该转向原生参考文档(ios.md、android.md)。
结语
Impeccable 技能的独特之处在于它把"好设计"从模型的主观品味判断转化为可执行的编排协议:用 brief 与视觉权威锁定方向,用 Mode 定义每类界面的成功形态,用 craft-floor 兜住机械底线,用 21 个动词覆盖从规划到发布的完整生命周期,用 comp-led 状态机与 finish reviewer 把"保真"变成可测量的关卡,再用 hooks 与 doctor 保证项目上下文永不漂移。对任何希望 AI 前端产出从"安全平庸"走向"出圈工艺"的团队,SKILL.md 与其 reference 目录是一份值得逐行阅读的操作蓝本。
【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考