第四章 · /impeccable craft 实战
craft 是 Impeccable 的主力命令：先「塑形」（shape）再「构建」（build），全程带可视化迭代。本章用一个落地页从头走到尾。
1craft 的节奏
它把「AI 直接糊一版页面」拆成了有闸门的流水线，每一步你都有否决权。
/impeccable craft 需求→
shape 出 UX/UI 方案→
你确认方向→
build 写实现→
截图自查 + 引擎体检→
polish 收尾
如果第三章选了 buildPath=comp，中间会多一道「先看组件草图再写码」的闸门。下面按时间顺序拆开讲。
2第一步：shape，先谈方向不谈代码
把需求说清楚就交给它——注意需求里带上「给谁用、要什么感觉」，Agent 会自动读 PRODUCT.md 对齐。
你：/impeccable craft 落地页：给记账 App 的「快速上手」页，
受众是自由职业者。想传达「三分钟记完今天的账」，
希望页面安静、利落，别做成营销长页。
Agent：读了 PRODUCT.md（受众 / 语气）与 DESIGN.md（视觉系统）。
shape 阶段，方案如下——
结构：单屏为主，三段式——
① 首屏：一句价值主张 + 实时演示块（不是截图，是可交互小组件）
② 中段：「记一笔要几步」3 步流程，用真实控件示意
③ 尾屏：直接开记 CTA，附「无需注册，本地保存」安心话术
视觉：延续 DESIGN.md 主色 #0F766E；
标题用 Manrope 加字重对比，正文系统 UI；
不用渐变横幅，靠留白与字号层级撑首屏。
确认后我进 build；要调整吗？这一步就是「shape-then-build」里的 shape：结构、层次、视觉方向都摊开在桌面上，你只需要回复「确认」或改两笔。返工成本最低的时刻就是现在。
3第二步：build 与自动体检
方向确认后 Agent 开始写码；写完它会自己截图检查，并顺手跑引擎的确定性检测。
你：确认，开始吧。
Agent：已实现 src/pages/quickstart/（7 个文件）：
· QuickstartHero：演示块用受控组件模拟真实记账流
· ThreeSteps：步骤条 + 真实输入框示意
· StartNow：CTA + 本地存储话术
自查：dev server 截图 1280/768/390 三档视口过一遍，
修正了 390px 下步骤条换行挤压的问题。
引擎体检：61 条规则 0 major。
你可以 npm run dev 看看，或者直接说感受。注意「自查」不是模型自嗨——视口截图是引擎在本地起服务渲染后拍的，体检规则也是确定性跑出来的。你在 Cursor CLI 里随时可以自己复核：
# 不经 AI，直接对目录跑一遍确定性检测
npx impeccable detect src/pages/quickstart/4第三步：迭代，用「力度」说话
看完第一版，你大概率不会说「把字号改成 17px」，而是「太素了」「有点吵」——这正是另外几个命令存在的意义。
| 你的感受 | 输入 | Agent 会做什么 |
|---|---|---|
| 「太素了，没有记忆点」 | /impeccable bolder | 放大对比、强化视觉锚点，把平庸的设计推出去 |
| 「有点吵，信息过载」 | /impeccable quieter | 降噪：减色彩、减装饰、收紧层次 |
| 「花里胡哨，只要骨架」 | /impeccable distill | 剥离到本质，去掉一切可去的元素 |
| 「字看着难受」 | /impeccable typeset | 只动字体选择、层级与字号，不碰其他 |
| 「间距和节奏不对」 | /impeccable layout | 只动布局、间距、视觉节奏 |
| 「加点让人会心一笑的东西」 | /impeccable delight | 添加克制的愉悦时刻（微交互、彩蛋级细节） |
这些命令也可以靶向执行，比如只调某个区块：/impeccable bolder QuickstartHero。改完随时可以再跑 /impeccable critique 听一轮结构性意见。