Impeccable 设计技能实战指南让 AI 编码 Agent 具备「出圈级」前端设计能力【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读本文以 .trae-cn/skills/impeccable/SKILL.md 为骨架完整讲解 Impeccablev4.3.0这一面向 AI 编码 Agent 的设计指令系统它如何通过一次 Setup 加载项目上下文、如何用四种访问模式与 23 条设计命令统一你与 Agent 之间的设计语言、如何路由命令与处理无参数场景以及设计检测 Hook 与 Drift 检查如何守护交付质量。读完本文你将掌握在 Claude Code、Codex、Cursor、GitHub Copilot 等任意 Agent 环境中安装、配置并驾驭 Impeccable 的完整方案以及它背后 Rust 引擎的实现脉络。Impeccable 的定位一句话可以概括The design language that makes your AI harness better at design让 AI 编码工具更懂设计的设计语言。它从 Anthropic 的 frontend-design 技能起步但把设计提示词扩展成了一整套工程化体系——一次上下文加载、23 条命令、四类访问模式、确定性检测规则与浏览器实时变体迭代最终目标是让 Agent 的产出脱离模板味达到值得被称作 out-of-distribution craft分布外工艺的程度。一、技能全景一个 Skill、两套入口、全平台落地1.1 一次安装全 Agent 平台生效从仓库 README.md 可以看到 Impeccable 的快速开始方式npx impeccable install然后在你的 AI 编码工具内执行/impeccable init即可。它安装为一个统一命令/impeccable command target仓库同时提供多套插件入口方便不同工具直接加载plugin/Cursor 插件形态plugin/hooks/hooks.json、plugin/skills/impeccable/SKILL.md、plugin/agents/下的 shipped agent 定义cursor-plugin/与plugin/同构的另一份拷贝extension/浏览器扩展含content/content-script.js、devtools/、popup/、background/service-worker.jsvscode/VS Code 扩展说明.trae-cn/skills/impeccable/本文主体的 skill 工作副本也是运行时脚本的默认回退目录。1.2 Skill 元数据与版本SKILL.md 的 YAML frontmatter 声明了本技能的关键契约字段值含义nameimpeccable技能唯一名version4.3.0技能版本launcher 二进制版本见 .trae-cn/skills/impeccable/scripts/VERSION为0.1.5user-invocabletrue用户可直接唤起licenseApache 2.0开源许可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]按类别提示可用子命令它的description划定了适用边界设计、重设计、塑造、评审、审计、打磨、澄清、蒸馏、加固、优化、适配、动效、配色、提取以及改进任何前端界面——网站、落地页、仪表盘、产品 UI、应用壳、组件、表单、设置、引导页、空状态同时覆盖 UX 评审、视觉层级、信息架构、认知负荷、可访问性、性能、响应式、主题化、反模式、排版、字体、间距、布局、对齐、色彩、动效、微交互、UX 文案、错误状态、边界情况、i18n、可复用设计系统与 token。明确不处理的是纯后端或非 UI 任务。二、Setup会话启动的一次性上下文加载SKILL.md 的 Setup 是整个工作流的起点规则非常明确每个会话运行一次skill-base-dir/scripts/impeccable contextskill-base-dir是包含 SKILL.md 的技能目录并保持 cwd 在用户项目根目录。这个 base 目录解析本技能内所有.trae-cn/skills/impeccable/scripts/impeccable verb命令scripts目录仅在运行时报告无 base 目录时作为回退。在无sh的 Windows shell 上调用.trae-cn/skills/impeccable/scripts/impeccable.cmd替代.trae-cn/skills/impeccable/scripts/impeccable.cmd。launcher 是一个自包含二进制随技能分发或首次运行时下载一次无需 Node 或其他运行时。可传命名源文件或路由作为--target path。context会加载PRODUCT.md、DESIGN.md、匹配的 surface brief 以及如适用原生平台指南加载后遵循其指令不要重复运行。从仓库结构看这一 CLI 逻辑的 Rust 实现位于 crates/context/src/context_cli.rs而命令解析与分发的底座在 crates/skills/src/commands.rscontext输出的三类关键指令包括NO_PRODUCT_MD项目尚未捕获产品上下文路由菜单时会以init为首选CONTEXT_STALE存在漂移的廉价子集报告按报告自身指令处理而非擅自运行 doctorMANUAL_DETECTOR_REQUIRED无自动 Hook 时要求会话末尾手动跑一次检测器。Launcher 不可用的降级路径若context拒绝或失败Agent 必须在下一次工具调用之前单独发一条消息声明 Context loading did not run; Ill read the existing project context directly.然后直接阅读现有PRODUCT.md与DESIGN.md不得虚构缺失上下文继续执行第 2、3 步与允许的工具。注意launcher 失败本身不阻塞规划与编辑。加载完上下文后Setup 第 2 步要求加载请求对应的 playbook显式/隐含子命令查 Commands 表参考文档新 surface 或替换视觉世界则读 .trae-cn/skills/impeccable/reference/new-work.md。第 3 步是硬性要求任何 UI 编辑包括小调整之前必须立即读 .trae-cn/skills/impeccable/reference/craft-floor.md——它承载质量底线quality floor、绝对禁令与任何检测器都抓不到的直觉。纯规划工作不需要加载它。三、设计方法论核心原则SKILL.md 用三条原则定义如何设计这是整个命令体系的价值观底座3.1 The brief winsBrief 优先尊重钉死的pinned美学、时代、材料、字体与调色板即使它们与饱和模式警告冲突。把明确的 brief 引向自己的口味是失败。视觉权威来自证据而非文件名缺失DESIGN.md并不自动等于绿地项目是否保留、扩展或替换既有视觉世界由 new-work 流程决定见 .trae-cn/skills/impeccable/reference/new-work.md。3.2 Refinement preserves; redesign replaces精修保留重设计替换精修refinement保留既有的身份、行为、文案与范围外的一切替换事实性文案或添加声明前必须征询。重设计redesign保留产品事实、内容、功能、原生 affordance 与约束但把旧外观当作证据与反参考在 new-work 中选一个替代世界并替换DESIGN.md绝不在废弃外观上做折中的打磨。3.3 有界验证而非无限循环Verify in bounded passesGo all out但验证要有上限完整构建 → 用一批次截图检查Web 上桌面 移动端同时原生平台按交付设备类别→ 一次性修复全部问题 →至多再确认一轮→ 停止打磨。无上限的自我 QA 是在烧用户的钱做 finish handoff 能做得更好的事。这个两轮上限纪律在 .trae-cn/skills/impeccable/reference/new-work.md 的 Inspect and finish 阶段被具体化为完整的评审-修复-再评审状态机。四、四种访问模式模式命名访问者的成功形态SKILL.md 强调模式Mode从被请求的 surface 推导而非从产品推导。工具的落地页仍是 Persuade时装屋的文档仍是 Read文档索引页是 Read 而非 Persuade。模式访问者的成功形态典型场景设计优先级Persuade访问者决策并行动设计即产品落地页、营销页、活动页、定价页赢得注意力与行动brief 需要时使用真实影像跟随已承诺的世界而非品类习惯Operate访问者完成任务应用 UI、仪表盘、编辑器、后台、设置、工具可扫描性、一致性、原生预期、真实使用场景优先于表达品牌活在精确细节里Read访问者理解某事文档、文章、指南、帮助、更新日志先为理解而组织结构再让阅读体验值得停留Experience访问者身处作品之中作品集、画廊、展览让作品从第一屏就领衔界面退居其次更深的 Operate/Read 指导见 .trae-cn/skills/impeccable/reference/operate.md。模式只持久化在该 surface 的 brief 中不会污染全局。五、命令体系23 条共享设计词汇这是 SKILL.md 的核心资产。全部命令通过.trae-cn/skills/impeccable/scripts/impeccable verb [target]调用分为六个类别每个命令都绑定一个参考文档5.1 完整命令表命令类别功能参考文档craft [feature]Build已废弃的普通 new-work 请求别名reference/craft.mdshape [feature]Build写代码前规划 UX/UIreference/shape.mdinitBuild在 PRODUCT.md 中捕获持久产品上下文reference/init.mddocumentBuild从现有项目代码生成 DESIGN.mdreference/document.mdextract [target]Build将可复用 token 与组件抽入设计系统reference/extract.mdcritique [target]Evaluate带启发式评分的 UX 设计评审reference/critique.mdaudit [target]Evaluate技术质量检查a11y、性能、响应式reference/audit.md · 原生reference/audit.native.mdpolish [target]Refine交付前的最终质量把关reference/polish.mdbolder [target]Refine放大安全或平淡的设计reference/bolder.mdquieter [target]Refine给激进或过度刺激的设计降温reference/quieter.mddistill [target]Refine剥离到本质移除复杂性reference/distill.mdharden [target]Refine生产就绪错误、i18n、边界情况reference/harden.mdonboard [target]Refine设计首次使用流程、空状态、激活路径reference/onboard.mdanimate [target]Enhance增加有目的的动画与动效reference/animate.mdcolorize [target]Enhance为单色 UI 增加战略性色彩reference/colorize.mdtypeset [target]Enhance改善排版层级与字体reference/typeset.mdlayout [target]Enhance修复间距、节奏与视觉层级reference/layout.mddelight [target]Enhance增加个性与难忘时刻reference/delight.mdoverdrive [target]Enhance突破常规极限reference/overdrive.mdclarify [target]Fix改进 UX 文案、标签与错误消息reference/clarify.mdadapt [target]Fix适配不同设备与屏幕尺寸reference/adapt.md · 原生reference/adapt.native.mdoptimize [target]Fix诊断并修复 UI 性能reference/optimize.mdliveIterate视觉变体模式浏览器中选元素、生成替代方案reference/live.md说明craft是new-work的废弃别名不增加任何设置、访谈、检查点、工具或质量行为自然语言请求build this featuremake a landing pageredesign this screen直接走同一流程即可。5.2 用法示例来自 README.md/impeccable audit blog # 审计博客 hub 文章页 /impeccable critique landing # UX 设计评审 /impeccable polish settings # 交付前终检 /impeccable harden checkout # 增加错误处理 边界情况也可以用描述性指令直接驱动/impeccable redo this hero section5.3 深入两条 Build 主干init捕获产品事实而非视觉世界。它把持久产品真相写进PRODUCT.md含impeccable:product-schema 1版本标记注释通过四步完成加载当前状态无 PRODUCT.md 则探索访谈编写已存在则只问缺失项→ 探索项目形成平台假设web/ios/android/adaptive→ 访谈产品真相最多三轮聚焦问题用结构化提问工具→ 按固定模板写PRODUCT.mdPlatform / Stack / Users / Product Purpose / Positioning / Operating Context / Capabilities and Constraints / Brand Commitments / Evidence on Hand / Product Principles / Accessibility Inclusion只写已确认事实与明确标注的未决项。关键红线init 不发明视觉世界、不写 DESIGN.md、不询问美学方向调色板/字体/风格都不问绝不静默覆盖已有文件。完整流程见 .trae-cn/skills/impeccable/reference/init.md。teach是init的别名。document从代码反向生成 DESIGN.md。它遵循官方 DESIGN.md 格式规范可选 YAML frontmatter 承载机器可读设计 tokencolors/typography/rounded/spacing/componentstoken 引用用{path.to.token}语法正文固定八个 canonical 小节Overview → Colors → Typography → Layout → Elevation Depth → Shapes → Components → Dos and Donts。有两条路径Scan mode默认按优先级搜索设计资产——CSS 自定义属性--color-、--font-、--spacing-等→ Tailwind config → CSS-in-JS theme → token 文件 → 组件库 → 全局样式表 → 浏览器实测 computed style自动抽取后与用户确认定性语言Creative North Star、色彩性格、层级哲学等最后写出 DESIGN.md 与.impeccable/design.jsonsidecar。Seed mode项目尚未实现时使用先走 new-work 的视觉世界工作坊写出带!-- SEED: ... --标记的方向性 DESIGN.md 种子真实 token 等有代码后再补。Sidecar.impeccable/design.json承载 schema 装不下的扩展色调渐变tonal ramp、阴影/动效 token、断点、可注入 shadow DOM 的自包含组件 HTML/CSS 片段ds-前缀类名、Tailwind 必须展开为字面 CSS、图标内联 SVG。完整规范见 .trae-cn/skills/impeccable/reference/document.md。5.4 深入live浏览器实时变体模式live是 Impeccable 最独特的迭代能力在浏览器中选中元素 → 选择设计动作 → AI 生成 HTMLCSS 变体 → 经 dev server 的 HMR 热替换。其前提是运行中的 HMR dev serverVite、Next.js、Bun 等或浏览器中打开的一个静态 HTML 文件live 编辑要求本地 checkout不支持注入生产部署站点含 HTTPS生产检查请用detect url或浏览器扩展。完整协议见 .trae-cn/skills/impeccable/reference/live.md其核心契约包括impeccable live启动解析 app root 并持久化到.impeccable/live/roots.json每个 helper 启动时重新锚定到该 manifest错误 cwd 不会分裂会话状态打开服务pageFile的 URL绝不使用serverPort——那是 helper 的端口不是 app 的轮询循环impeccable live-poll默认长超时 600000ms禁用--timeout收到generate事件 → 复用event.scaffold→ 读截图仅当用户标注过→ 加载动作参考 → 交付变体 →--reply done→ 继续轮询收accept/discard→ poll 脚本自动执行live-accept并确认交付carbonize 型 accept 需live-complete --id EVENT_ID完成清理中断恢复live-status/live-resume/live-completejournal 位于.impeccable/live/sessions/追加式权威状态非项目源码exit→ 执行清理live-server stopstrip 注入脚本stop --keep-inject可快速重启。生成变体的纪律live 参考文档的核心章节身份先行Phase A不可跳过按优先级从 DESIGN.md 视觉系统字段 → CSS 自定义属性 → 选中元素及父级的 computed style → 兄弟组件的视觉修辞提取一条身份锁定句真实色值、字体配对、布局拓扑、表面处理、语气所有变体必须读起来是同一个品牌。默认 vs 背离Phase B默认约 90% 会话保留身份、在其内部变化表达背离Departure只在用户当次请求中明确要求redesign thisrebuild from scratch时触发过期评审或旧笔记不构成授权不确定即默认。三变体三主轴Phase C六个主轴——Hierarchy层级、Layout topology布局拓扑、Typographic system排版系统、Color strategy色彩策略、Density密度、Structural decomposition结构分解。三个变体必须是三个不同主轴新字体、新色相、新美学家族信号只属于背离模式。参数旋钮0-4 个/变体硬上限 4range滑杆驱动--p-idCSS 变量、steps分段单选驱动data-p-id、toggle同时驱动变量与属性存在。预算随元素视觉权重缩放按钮/图标等叶节点 0 个小构图 0-1中等构图section、nav cluster目标 2大构图hero、整区域目标 2-3 至多 4。交付格式每个变体一个data-impeccable-variantN包裹 div内含单个顶层元素首个可见、其余display: none预览 CSS 以style contenteditable="false">【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable 设计技能实战指南：让 AI 编码 Agent 具备「出圈级」前端设计能力
Impeccable 设计技能实战指南让 AI 编码 Agent 具备「出圈级」前端设计能力【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读本文以 .trae-cn/skills/impeccable/SKILL.md 为骨架完整讲解 Impeccablev4.3.0这一面向 AI 编码 Agent 的设计指令系统它如何通过一次 Setup 加载项目上下文、如何用四种访问模式与 23 条设计命令统一你与 Agent 之间的设计语言、如何路由命令与处理无参数场景以及设计检测 Hook 与 Drift 检查如何守护交付质量。读完本文你将掌握在 Claude Code、Codex、Cursor、GitHub Copilot 等任意 Agent 环境中安装、配置并驾驭 Impeccable 的完整方案以及它背后 Rust 引擎的实现脉络。Impeccable 的定位一句话可以概括The design language that makes your AI harness better at design让 AI 编码工具更懂设计的设计语言。它从 Anthropic 的 frontend-design 技能起步但把设计提示词扩展成了一整套工程化体系——一次上下文加载、23 条命令、四类访问模式、确定性检测规则与浏览器实时变体迭代最终目标是让 Agent 的产出脱离模板味达到值得被称作 out-of-distribution craft分布外工艺的程度。一、技能全景一个 Skill、两套入口、全平台落地1.1 一次安装全 Agent 平台生效从仓库 README.md 可以看到 Impeccable 的快速开始方式npx impeccable install然后在你的 AI 编码工具内执行/impeccable init即可。它安装为一个统一命令/impeccable command target仓库同时提供多套插件入口方便不同工具直接加载plugin/Cursor 插件形态plugin/hooks/hooks.json、plugin/skills/impeccable/SKILL.md、plugin/agents/下的 shipped agent 定义cursor-plugin/与plugin/同构的另一份拷贝extension/浏览器扩展含content/content-script.js、devtools/、popup/、background/service-worker.jsvscode/VS Code 扩展说明.trae-cn/skills/impeccable/本文主体的 skill 工作副本也是运行时脚本的默认回退目录。1.2 Skill 元数据与版本SKILL.md 的 YAML frontmatter 声明了本技能的关键契约字段值含义nameimpeccable技能唯一名version4.3.0技能版本launcher 二进制版本见 .trae-cn/skills/impeccable/scripts/VERSION为0.1.5user-invocabletrue用户可直接唤起licenseApache 2.0开源许可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]按类别提示可用子命令它的description划定了适用边界设计、重设计、塑造、评审、审计、打磨、澄清、蒸馏、加固、优化、适配、动效、配色、提取以及改进任何前端界面——网站、落地页、仪表盘、产品 UI、应用壳、组件、表单、设置、引导页、空状态同时覆盖 UX 评审、视觉层级、信息架构、认知负荷、可访问性、性能、响应式、主题化、反模式、排版、字体、间距、布局、对齐、色彩、动效、微交互、UX 文案、错误状态、边界情况、i18n、可复用设计系统与 token。明确不处理的是纯后端或非 UI 任务。二、Setup会话启动的一次性上下文加载SKILL.md 的 Setup 是整个工作流的起点规则非常明确每个会话运行一次skill-base-dir/scripts/impeccable contextskill-base-dir是包含 SKILL.md 的技能目录并保持 cwd 在用户项目根目录。这个 base 目录解析本技能内所有.trae-cn/skills/impeccable/scripts/impeccable verb命令scripts目录仅在运行时报告无 base 目录时作为回退。在无sh的 Windows shell 上调用.trae-cn/skills/impeccable/scripts/impeccable.cmd替代.trae-cn/skills/impeccable/scripts/impeccable.cmd。launcher 是一个自包含二进制随技能分发或首次运行时下载一次无需 Node 或其他运行时。可传命名源文件或路由作为--target path。context会加载PRODUCT.md、DESIGN.md、匹配的 surface brief 以及如适用原生平台指南加载后遵循其指令不要重复运行。从仓库结构看这一 CLI 逻辑的 Rust 实现位于 crates/context/src/context_cli.rs而命令解析与分发的底座在 crates/skills/src/commands.rscontext输出的三类关键指令包括NO_PRODUCT_MD项目尚未捕获产品上下文路由菜单时会以init为首选CONTEXT_STALE存在漂移的廉价子集报告按报告自身指令处理而非擅自运行 doctorMANUAL_DETECTOR_REQUIRED无自动 Hook 时要求会话末尾手动跑一次检测器。Launcher 不可用的降级路径若context拒绝或失败Agent 必须在下一次工具调用之前单独发一条消息声明 Context loading did not run; Ill read the existing project context directly.然后直接阅读现有PRODUCT.md与DESIGN.md不得虚构缺失上下文继续执行第 2、3 步与允许的工具。注意launcher 失败本身不阻塞规划与编辑。加载完上下文后Setup 第 2 步要求加载请求对应的 playbook显式/隐含子命令查 Commands 表参考文档新 surface 或替换视觉世界则读 .trae-cn/skills/impeccable/reference/new-work.md。第 3 步是硬性要求任何 UI 编辑包括小调整之前必须立即读 .trae-cn/skills/impeccable/reference/craft-floor.md——它承载质量底线quality floor、绝对禁令与任何检测器都抓不到的直觉。纯规划工作不需要加载它。三、设计方法论核心原则SKILL.md 用三条原则定义如何设计这是整个命令体系的价值观底座3.1 The brief winsBrief 优先尊重钉死的pinned美学、时代、材料、字体与调色板即使它们与饱和模式警告冲突。把明确的 brief 引向自己的口味是失败。视觉权威来自证据而非文件名缺失DESIGN.md并不自动等于绿地项目是否保留、扩展或替换既有视觉世界由 new-work 流程决定见 .trae-cn/skills/impeccable/reference/new-work.md。3.2 Refinement preserves; redesign replaces精修保留重设计替换精修refinement保留既有的身份、行为、文案与范围外的一切替换事实性文案或添加声明前必须征询。重设计redesign保留产品事实、内容、功能、原生 affordance 与约束但把旧外观当作证据与反参考在 new-work 中选一个替代世界并替换DESIGN.md绝不在废弃外观上做折中的打磨。3.3 有界验证而非无限循环Verify in bounded passesGo all out但验证要有上限完整构建 → 用一批次截图检查Web 上桌面 移动端同时原生平台按交付设备类别→ 一次性修复全部问题 →至多再确认一轮→ 停止打磨。无上限的自我 QA 是在烧用户的钱做 finish handoff 能做得更好的事。这个两轮上限纪律在 .trae-cn/skills/impeccable/reference/new-work.md 的 Inspect and finish 阶段被具体化为完整的评审-修复-再评审状态机。四、四种访问模式模式命名访问者的成功形态SKILL.md 强调模式Mode从被请求的 surface 推导而非从产品推导。工具的落地页仍是 Persuade时装屋的文档仍是 Read文档索引页是 Read 而非 Persuade。模式访问者的成功形态典型场景设计优先级Persuade访问者决策并行动设计即产品落地页、营销页、活动页、定价页赢得注意力与行动brief 需要时使用真实影像跟随已承诺的世界而非品类习惯Operate访问者完成任务应用 UI、仪表盘、编辑器、后台、设置、工具可扫描性、一致性、原生预期、真实使用场景优先于表达品牌活在精确细节里Read访问者理解某事文档、文章、指南、帮助、更新日志先为理解而组织结构再让阅读体验值得停留Experience访问者身处作品之中作品集、画廊、展览让作品从第一屏就领衔界面退居其次更深的 Operate/Read 指导见 .trae-cn/skills/impeccable/reference/operate.md。模式只持久化在该 surface 的 brief 中不会污染全局。五、命令体系23 条共享设计词汇这是 SKILL.md 的核心资产。全部命令通过.trae-cn/skills/impeccable/scripts/impeccable verb [target]调用分为六个类别每个命令都绑定一个参考文档5.1 完整命令表命令类别功能参考文档craft [feature]Build已废弃的普通 new-work 请求别名reference/craft.mdshape [feature]Build写代码前规划 UX/UIreference/shape.mdinitBuild在 PRODUCT.md 中捕获持久产品上下文reference/init.mddocumentBuild从现有项目代码生成 DESIGN.mdreference/document.mdextract [target]Build将可复用 token 与组件抽入设计系统reference/extract.mdcritique [target]Evaluate带启发式评分的 UX 设计评审reference/critique.mdaudit [target]Evaluate技术质量检查a11y、性能、响应式reference/audit.md · 原生reference/audit.native.mdpolish [target]Refine交付前的最终质量把关reference/polish.mdbolder [target]Refine放大安全或平淡的设计reference/bolder.mdquieter [target]Refine给激进或过度刺激的设计降温reference/quieter.mddistill [target]Refine剥离到本质移除复杂性reference/distill.mdharden [target]Refine生产就绪错误、i18n、边界情况reference/harden.mdonboard [target]Refine设计首次使用流程、空状态、激活路径reference/onboard.mdanimate [target]Enhance增加有目的的动画与动效reference/animate.mdcolorize [target]Enhance为单色 UI 增加战略性色彩reference/colorize.mdtypeset [target]Enhance改善排版层级与字体reference/typeset.mdlayout [target]Enhance修复间距、节奏与视觉层级reference/layout.mddelight [target]Enhance增加个性与难忘时刻reference/delight.mdoverdrive [target]Enhance突破常规极限reference/overdrive.mdclarify [target]Fix改进 UX 文案、标签与错误消息reference/clarify.mdadapt [target]Fix适配不同设备与屏幕尺寸reference/adapt.md · 原生reference/adapt.native.mdoptimize [target]Fix诊断并修复 UI 性能reference/optimize.mdliveIterate视觉变体模式浏览器中选元素、生成替代方案reference/live.md说明craft是new-work的废弃别名不增加任何设置、访谈、检查点、工具或质量行为自然语言请求build this featuremake a landing pageredesign this screen直接走同一流程即可。5.2 用法示例来自 README.md/impeccable audit blog # 审计博客 hub 文章页 /impeccable critique landing # UX 设计评审 /impeccable polish settings # 交付前终检 /impeccable harden checkout # 增加错误处理 边界情况也可以用描述性指令直接驱动/impeccable redo this hero section5.3 深入两条 Build 主干init捕获产品事实而非视觉世界。它把持久产品真相写进PRODUCT.md含impeccable:product-schema 1版本标记注释通过四步完成加载当前状态无 PRODUCT.md 则探索访谈编写已存在则只问缺失项→ 探索项目形成平台假设web/ios/android/adaptive→ 访谈产品真相最多三轮聚焦问题用结构化提问工具→ 按固定模板写PRODUCT.mdPlatform / Stack / Users / Product Purpose / Positioning / Operating Context / Capabilities and Constraints / Brand Commitments / Evidence on Hand / Product Principles / Accessibility Inclusion只写已确认事实与明确标注的未决项。关键红线init 不发明视觉世界、不写 DESIGN.md、不询问美学方向调色板/字体/风格都不问绝不静默覆盖已有文件。完整流程见 .trae-cn/skills/impeccable/reference/init.md。teach是init的别名。document从代码反向生成 DESIGN.md。它遵循官方 DESIGN.md 格式规范可选 YAML frontmatter 承载机器可读设计 tokencolors/typography/rounded/spacing/componentstoken 引用用{path.to.token}语法正文固定八个 canonical 小节Overview → Colors → Typography → Layout → Elevation Depth → Shapes → Components → Dos and Donts。有两条路径Scan mode默认按优先级搜索设计资产——CSS 自定义属性--color-、--font-、--spacing-等→ Tailwind config → CSS-in-JS theme → token 文件 → 组件库 → 全局样式表 → 浏览器实测 computed style自动抽取后与用户确认定性语言Creative North Star、色彩性格、层级哲学等最后写出 DESIGN.md 与.impeccable/design.jsonsidecar。Seed mode项目尚未实现时使用先走 new-work 的视觉世界工作坊写出带!-- SEED: ... --标记的方向性 DESIGN.md 种子真实 token 等有代码后再补。Sidecar.impeccable/design.json承载 schema 装不下的扩展色调渐变tonal ramp、阴影/动效 token、断点、可注入 shadow DOM 的自包含组件 HTML/CSS 片段ds-前缀类名、Tailwind 必须展开为字面 CSS、图标内联 SVG。完整规范见 .trae-cn/skills/impeccable/reference/document.md。5.4 深入live浏览器实时变体模式live是 Impeccable 最独特的迭代能力在浏览器中选中元素 → 选择设计动作 → AI 生成 HTMLCSS 变体 → 经 dev server 的 HMR 热替换。其前提是运行中的 HMR dev serverVite、Next.js、Bun 等或浏览器中打开的一个静态 HTML 文件live 编辑要求本地 checkout不支持注入生产部署站点含 HTTPS生产检查请用detect url或浏览器扩展。完整协议见 .trae-cn/skills/impeccable/reference/live.md其核心契约包括impeccable live启动解析 app root 并持久化到.impeccable/live/roots.json每个 helper 启动时重新锚定到该 manifest错误 cwd 不会分裂会话状态打开服务pageFile的 URL绝不使用serverPort——那是 helper 的端口不是 app 的轮询循环impeccable live-poll默认长超时 600000ms禁用--timeout收到generate事件 → 复用event.scaffold→ 读截图仅当用户标注过→ 加载动作参考 → 交付变体 →--reply done→ 继续轮询收accept/discard→ poll 脚本自动执行live-accept并确认交付carbonize 型 accept 需live-complete --id EVENT_ID完成清理中断恢复live-status/live-resume/live-completejournal 位于.impeccable/live/sessions/追加式权威状态非项目源码exit→ 执行清理live-server stopstrip 注入脚本stop --keep-inject可快速重启。生成变体的纪律live 参考文档的核心章节身份先行Phase A不可跳过按优先级从 DESIGN.md 视觉系统字段 → CSS 自定义属性 → 选中元素及父级的 computed style → 兄弟组件的视觉修辞提取一条身份锁定句真实色值、字体配对、布局拓扑、表面处理、语气所有变体必须读起来是同一个品牌。默认 vs 背离Phase B默认约 90% 会话保留身份、在其内部变化表达背离Departure只在用户当次请求中明确要求redesign thisrebuild from scratch时触发过期评审或旧笔记不构成授权不确定即默认。三变体三主轴Phase C六个主轴——Hierarchy层级、Layout topology布局拓扑、Typographic system排版系统、Color strategy色彩策略、Density密度、Structural decomposition结构分解。三个变体必须是三个不同主轴新字体、新色相、新美学家族信号只属于背离模式。参数旋钮0-4 个/变体硬上限 4range滑杆驱动--p-idCSS 变量、steps分段单选驱动data-p-id、toggle同时驱动变量与属性存在。预算随元素视觉权重缩放按钮/图标等叶节点 0 个小构图 0-1中等构图section、nav cluster目标 2大构图hero、整区域目标 2-3 至多 4。交付格式每个变体一个data-impeccable-variantN包裹 div内含单个顶层元素首个可见、其余display: none预览 CSS 以style contenteditable="false">【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考