/impeccable live
Live
在浏览器里迭代 UI。选中元素、写下注释，得到三个变体。接受一个后直接回写源码。
Letters, occasionally.
一张来自编辑的明信片，大约每月一次。没有跟踪像素，也没有“只是来问候一下”。
这是 Live Mode 进行到一半的状态：picker 描出你选中的元素，context bar 显示当前变体编号，global bar 固定在底部。接受当前这个，就会把 Variant 2 回写进源码。
什么时候用
当你想像在设计工具里那样做视觉迭代，但最终产物仍然是生产代码时，就该用 /impeccable live。它提供的是一种接近 Figma 的画布式流程，但不需要再经历一次“从设计稿回到实现”的往返。
它适合：
- 在真实元素上探索方向。 Hero、newsletter card、pricing tier。三种真正不同的方案，会直接出现在真实页面和真实上下文里。
- 打磨一个已经差不多对了的 UI。 你知道哪里不顺，但说不太清。选中它，写一句 “更 playful 一点”，或者直接用笔划掉让你不舒服的部分，然后点 Go。
- 团队内部快速比较两个方向。 先生成变体，不一定要接受。重点是拿来对比，而不是立即落地。
它不适合从零做新功能（那是 /impeccable craft 的工作），也不适合整页重设计（那更适合 /impeccable 或某个 refine 类命令）。
工作方式
一条命令会在运行中的 dev server 上拉起 picker overlay。你选中任意元素，旁边会出现一条 context bar。你可以直接输入自由描述，也可以点 action chip：bolder、quieter、distill、polish、typeset、colorize、layout、animate、delight、overdrive。如果愿意，还可以先在元素上落评论 pin 或手绘笔触，技能会把这些都当成意图输入。
点击 Go 后，系统会生成三个 production-quality 变体。它们会锚定在真正不同的设计原型上，而不是“同一个方案换三种颜色”，并通过你当前框架的 HMR 直接热替换进页面。你可以用方向键切换。接受其中一个，它就回写源码；三个都不要，原版保持不变。
它支持 Vite、Next.js（包括 monorepo）、SvelteKit、Astro、Nuxt，以及纯静态 HTML。如果你的 dev server 带严格的 CSP，首次运行会先检测出来，并给出一次性、仅开发态的补丁建议，确保 picker 能加载。视觉决策以 DESIGN.md 为准，语气决策以 PRODUCT.md 为准；两者都在时，生成的变体会自动保持品牌一致，而不需要你再额外交代。
试试看
/impeccable live打开你的 dev server，选中 newsletter signup card，点一下 delight chip，再按 Go。你会拿到三个在“性格维度”上不同的方案：可能是邮票与明信片感、强调排版惊喜的版本，或者带插画点缀的版本，而不是同一套 treatment 的三次轻微变化。
或者你也可以选中 hero，输入 “more editorial, less SaaS”，再按 Go。那三个变体会分别锚定在不同的 editorial archetype 上，例如报头式 masthead、目录式规格行、超大字形海报感，而不是同一路子换三种深浅。
用完后，直接说 “stop live mode”、关掉浏览器标签，或点 picker bar 上的退出按钮都可以结束。
常见陷阱
- 页面本身还只写了一半就开始跑。 Live 变体生成需要上下文。如果元素还是 placeholder copy、Lorem ipsum，或者样式表都还没上齐，出来的变体也会继承这种半成品气质。先把内容补全。
- 指望它替你做宏观决策。 Live mode 只迭代一个被选中的元素。像“重做整张 pricing page”这种任务，应该去用
/impeccable或/impeccable craft。 - 忽略 fallback 提示。 如果元素来自生成文件（编译产物、构建输出），picker 会明确说出来，并引导你把接受结果写回真正的源码。不要硬把结果写进生成文件，下次构建会把它抹掉。
- 在你非常关心品牌贴合度时，却没有 PRODUCT.md 或 DESIGN.md。 Live 仍然能生成，但结果会更偏 generic default。真要贴近你的产品，先跑
/impeccable teach和/impeccable document。