Impeccable 新手教程

第七章 · /impeccable live 实时迭代

「说感受，不报参数」的终极形态：Agent 在本地起服务，你在浏览器里点选元素出变体，看中的那个会写回源码。

1live 是什么

官方叫 Visual variant mode：把「你描述 → Agent 猜 → 你再描述」的循环，压缩成「你直接在页面上比较」。

/impeccable live→ 本地起服务打开页面→ 浏览器里点选元素→ 同屏出多个变体→ 选中 → 写回源码

init 时若识别出可本地运行的项目（dev server 或纯静态 HTML），会自动接好 live 模式，接线配置记录在 .impeccable/live/config.json（这个文件要进 git，第八章有清单）。

2一次 live 会话

还是第四章那个落地页，这次不用文字形容「主页不够抓人」，直接动手比稿。

你：/impeccable live

Agent：live 已就绪：http://localhost:4173 （quickstart 页）
       打开页面后：悬停任意元素 → 出现选择框 → 点击，
       我会为它生成多个视觉变体并排展示。
       支持改字号 / 字重 / 颜色 / 间距 / 圆角，
       也可以直接说「这个按钮再醒目一点」。

（你在浏览器里点了首屏 H1，屏幕上并排出现 4 个变体：
  不同的字号节奏、一行强调色下划线、衬线混排……）

你：第 3 个变体的方向不错，字距再收一点点。

Agent：已应用：H1 字号 44→48px、字距 -0.02em、
       强调下划线 #0F766E。改动已写回
       src/pages/quickstart/QuickstartHero.tsx。
       退出时说一声，我跑一遍 detect 收尾。

关键体验差异：「变体」是真实的渲染结果，不是 Agent 口头描述；你拍板的是看到的成品，Agent 负责把选择翻译成代码改动。

3边界：为什么只能在本地用

live 的工作原理决定了它的适用范围——理解边界比记住操作更重要。

只编辑本地

live 编辑的是本地检出的代码（dev server 或本地静态 HTML），通过一个 localhost HTTP 辅助服务与浏览器通信。它天然不可能碰线上站点。

生产站禁令

官方明确：不支持把 live 的 localhost 辅助服务注入已部署的生产站点，也不要为了强行实现而关闭浏览器安全机制或削弱生产 CSP。给线上页面做检查，请用 npx impeccable detect https://your-site.com 或配套浏览器扩展——它们只读、不写。

脚本审查

应用拷贝的编辑时，live 会执行 package.json 里可选的 impeccable:manual-edit-validate 脚本（需你授权）。拿到陌生 checkout 先看一眼这个脚本再开 live。

下一步

单人爽完了，进入第八章：工程化与 FAQ——把 Impeccable 变成团队资产。

Impeccable 新手教程