做独立开发出海，最耗精力的往往是给产品做官网门面：调配色、对设计、挨个修手机端自适应，一折腾就是好几天。
昨天，Anthropic 刚发布了新模型 Claude Fable 5.2（2026年11月9日发布，见 Anthropic 官网公告及开发文档）。官方对它的定位是专打高要求推理与数小时长任务编排；相比上一代，它的生成速度快了最多 30%，输入 8/输出40 每百万 token 的价格也更低，并引入了防沙盒逃逸（sandbox escapes）的新安全评估。
正好我自己的网站生成器项目 ShipSite 官网一直想翻新，我就拿它试了一把：在终端里跑 Claude Code 命令行，把思考档位拉满，只发了一句话，告诉它这个代码库归它，让它向 Awwwards 获奖站看齐自主重构，中途别问我。
它在后台跑了 85 分钟，派生多个子 Agent 做了 3 个首页方向，选定「图志」方案后改了 20 个文件、写了 4320 行代码（/cost 的统计，含它自己的工具脚本）；但在最后阶段撞上了 5 小时配额上限，实测提示「你停止了操作」，账单花了 52.55 美元。
读完这篇，你能看清 AI 自主重构前端的完整提示词与长任务实操断点，并拿到把任务拆为比选与定向落地两步走的避坑思路，避免撞上 5 小时配额中断并省下高额算力成本。
动手前：把档位设为高，存好改前基准
这次我不用 Claude 桌面端，直接在 Windows Terminal 终端里用 Claude Code 命令行操作。
进入项目目录，输入 claude 启动：
powershell
claude启动后显示 Claude Code v2.1.322，当前模型为 Fable 5.2，右下角默认思考档位是 ○medium · /effort。
全站重构需要极强的推理和自检能力，在输入框中输入命令切换到高档位：
text
/effort high
回车后，顶部更新为 Fable 5.2 with high effort，右下角变成了实心的 ●high · /effort。
Fable 5.2 新增了可选的快速模式（fast mode），生成速度最高可以提速 2.5 倍，但单价会翻倍（输入 8/输出40 翻倍为 16/80）。在终端输入 /fast 查看，我当前所在的团队禁用了该模式，按 Esc 退出面板，继续用标准模式跑。
改版前必须留好底。我新开一个终端窗口，直接用 npx next dev 启动本地开发服务：
powershell
npx next dev
本地服务在本地浏览器中正常跑起来。打开 Chrome 浏览器，先把旧版官网的首屏和内页状态截下来留底。
旧版首页首屏是暗黑山海奇幻背景，主标题是「One keyword in. A live site out.」：
按 PageDown 滚到第二屏，展示的是四步流程卡片（Research、Plan and price、Design and build、Launch）：
按 F12 打开开发者工具，切到手机模拟视图滚回顶部，存下一张改版前的移动端首屏基准：
电脑端和手机端的旧版基准截好，接下来就看 AI 能把它翻新成什么样。
一句「代码库归你」，把整件事一次性交给它
切回运行 Claude Code 的终端窗口。
很多朋友用 AI 编程习惯一段一段问，但在做全站重构时，如果 AI 频繁停下来确认这个颜色行不行、下一步改哪里，人肉介入的成本极高。
这次我把要求收敛成一段完整的结构化提示词。重点只有一句：把代码库全权交给它，让它向获奖网站看齐，做到对应水准，中途不用停下来问我，一口气把整件事做完。
Prompt 提示词： 这个代码库（D:\Dev\Projects\shipsite-redesign）归你了，帮我把 ShipSite 官网的设计整体翻新，做到获奖网站的水准，中途不用停下来问我，一口气把整件事做完：
- 先读仓库里已有的品牌和设计文档（山海司），同时把改版前的 SEO/GEO 完整存一份快照、测一下现在的首屏加载速度留底；
- 自己上网看 Awwwards、FWA、CSS Design Awards 近两年的获奖网站，挑几个和山海司品牌调性相合的当参考，告诉我你挑了哪几个、分别学它们什么（千万别参考 Linear、Stripe、Vercel 这些被用滥的）；
- 首页先做出 3 个不同的设计方向，你自己截电脑和手机两种宽度的图对比挑刺，挑出最好的那一个方向，再把这个方向的设计铺到定价、案例、文档等所有页面；
- 每一轮你都要自己截电脑和手机两种宽度的图挑毛病再改，页面里的素材全部用仓库里真实的 ShipSite 产品截图，不要用假占位图，交互和文案要改得对完全不懂技术的小白更友好；
- 全部做完后，拿改后的页面和改前的快照逐项核对 SEO/GEO（确保一项都没变差）以及首屏加载速度（确保没变慢），保留改前改后的对比截图，启动本地预览服务让我直接看，只在本地预览，千万不要上线、不要推送到远端仓库，最后把你的参考网站、3 个方向对比结论、自检修改记录、SEO 与加载速度核对结果还有总耗时一起告诉我。
读者照着做时，记得把第一行括号里的目录替换为你自己本地项目的绝对路径。
按回车发送。Fable 5.2 立刻进入高强度思考状态，终端底部显示 Zigzagging... 并派生出了 3 个并行 agent。它没有盲目开工，而是先按提示词的第一条，去读项目里的山海司品牌样式文档。
读完品牌定义后，为了留存测速和快照基线，它在终端中开始盘点真实产品截图，并运行构建和网络搜索命令：
随后，它在后台拉起基线服务，编写快照脚本存下了改版前 79 张全站截图。
紧接着，主编排器派生了多个网络抓取智能体，上网搜索 Awwwards、FWA 和 CSS Design Awards 近两年的获奖名单。它避开了被大家抄滥的 Linear 和 Stripe 暗黑风，挑了 Oryzo AI、Getty Tracing Art、Mosby's Files 和 ORVAE 这几个站，分别提取排版网格、古籍图志感与图文留白节奏。
同时，它运行了一个 make-product-shots.mjs 脚本，把仓库里原本存放在文档里的真实产品截图，批量转码裁切成适合网页加载的 AVIF 和 WebP 格式。
3 个子 Agent 并发互掐，选定「图志」铺全站
素材和参考准备好后，有意思的一幕来了。
Fable 5.2 没有凭空只写一套页面，而是通过后台派生（Fork agents）同时起了 3 个子智能体：
- 方向 A「夜航」
- 方向 B「图志」
- 方向 C「青绿」
3 个子智能体在后台各写各的原型代码。每写完一屏，它们就调用无头浏览器在后台分别截取电脑端和手机端的渲染图，自己看图挑刺。从第一轮修改（round-one fixes）、第二轮修改（fix2）一直打磨到第三轮（fix3）。
方向 A 和方向 C 率先收敛完工：方向 A 偏深色极简，方向 C 偏深石绿舞台配金线；而方向 B「图志」打磨时间最长（耗时 20 分 12 秒）。
当 3 个方向的原型全部交卷后，主智能体把三方的截图拼接成并排长图，逐段比选挑刺：
- 方向 A 视觉虽然干净，但品牌记忆点弱；
- 方向 C 颜色有了，但无衬线标题偏中性冷淡；
- 方案 B「图志」把深色的真实产品界面压在古卷纸色底上，对比最醒目，而且把复杂的建站流程改成了四步档案页签，对完全不懂技术的新手最直白。
主智能体当场拍板：采纳方案 B「图志」，开始全站落地！
选定方案后，模型开始重写全局 CSS 与公共组件，并把新样式成套铺到中文与英文的首页、定价页（/pricing）、案例页（/gallery）和文档页（/docs）。
在铺开的过程中，它继续调无头浏览器截内页手机端长图自检。终端里显示它确认了页面没有横向溢出，并排查出文档侧栏、联系页链接、关键词页签等几处点击目标不足 44px，主动修掉后再看截图。
撞到配额上限：任务中断与 52 刀算力账单
就在它修改登录和注册页面的样式、准备做最后的整体验收时，终端突然跳出一行提示：
You've hit your 5-hour limit · resets 9am
它撞上了账号的 5 小时使用配额上限，自主长任务被迫中断，回到了命令输入框。
原本我在提示词里让它做完后自己核对改前改后 SEO 与首屏测速并输出最终汇报，这临门一脚没能由它自己在终端里打出来。
我立刻在输入框里输入：
text
/cost调出这 1 个多小时的真实账单面板：
看一眼面板上的核心数据：
- 总耗时（Wall duration）：1 小时 25 分 34 秒
- 总花费：52.55 美元（其中 Fable 5.2 消耗 52.21 美元，协助抓取的 Haiku 5.5 子代理花了 0.34 美元）
- 代码变动：新增 4320 行，删除 421 行，共改动 20 个文件
- 提示词缓存命中率（Prompt cache）：高达 98%（130 次请求中 98% 的输入 token 命中缓存，省下了巨额重复读取费用）
- 配额状态：当前会话显示已用尽，重置时间显示约几分钟后重置。
虽然缓存命中率极高，但 1 个半小时烧掉 52.55 美元，对个人独立开发者来说，算不上可以随手乱开的开销。
看看它交出的成品与未完工项
虽然中途断了，但在本地跑着的 Next.js 预览服务里，方案 B「图志」的代码已经热更新生效。我切回 Chrome 浏览器看落地效果。
新版首页首屏： 背景换成了古籍图志的纸色底，大号主标题换成了「See the plan first. Decide after.」，并配上了对零基础用户极其直白的「Plan my site free」按钮。
往里点进定价页： 顶部大标题是「Complete your first site free, then upgrade by actual usage」（首个网站免费完成，再按实际消耗升级），中间清晰给出了月付与年付省 20% 的切换开关；底部套餐卡片一字排开，梯度明晰。
不过照实说，也有没做完的瑕疵：因为最后阶段被配额掐断，登录页在某些手机屏幕宽度下的左右内边距还没调匀称；另外因为任务提前停下，案例与文档内页在移动端的全套截图自检并未完整收尾。
我补跑的核对数据与真实判断
因为它自己没能把最后的 SEO 和测速报告打出来，我用它在前面写好的测试脚本在本地补跑了一遍，改版前后的核心指标对比如下：
| 维度 | 改版前 | 改版后 | 变化与结论 |
|---|---|---|---|
| 全站代码量 | 原始基准 | +4320 行 / -421 行 | 重构了 20 个页面与组件 |
| SEO/GEO 核对 | 91 个页面基准 | 91 个页面逐项跑通 | 0 项变差，收录标签完好 |
| 文档页体积 | 约 5MB | 约 0.8MB | 普遍变小（转码 AVIF/WebP） |
| 电脑端首屏耗时 | 基准耗时 | 基本持平 | 电脑端基本持平或更快 |
| 手机端首屏耗时 | 基准耗时 | 慢了 0.1 到 0.3 秒 | 4 个页面变慢（英文定价页慢 0.33 秒最明显） |
从核对数据看得很清楚： 提示词里要求的 SEO 一项都不能变差，它确实做到了；但要求的首屏加载确保没变慢，在手机端有 4 个页面慢了 0.1 到 0.3 秒，并没有完全做到。
体验完这趟 85 分钟的整站重构，我的真实判断是：
第一，Fable 5.2 编排长任务的执行力很强。 它真能自己开几个后台子进程写原型、自己截无头浏览器图挑刺、自己改 CSS。改了 4300 多行代码，还能自动排查移动端点击区域小于 44px 这种隐蔽的可用性问题，换作以前一个人干，一天都下不来。
第二，千万别把整站工程完全不设防地丢给单次长任务。 high effort 档位下的推理思考极其深入，但也极其消耗配额与算力。这次最痛的教训就是任务在临近收尾时被 5 小时用量上限掐断。
如果你也打算用 Claude Code 和 Fable 5.2 翻新自己的产品网站，明天可以直接照着这个步骤跑：
- 先跑第一段：把提示词的前 3 条发给它，只让它抓参考站、出 3 个首页方向并完成比选；
- 确认后再跑第二段 ：敲定方案后新开一个会话（输入
/clear），把选定的样式规范喂给它，定向让它铺开到内页并做移动端自适应。
这样拆成两步走，既能看住账单，也不会在收尾前夕突然被配额卡在半山腰。
👋 我是孟健，前腾讯 T11、前字节技术 Leader，现在全职做 AI 编程。
🔥 更多 AI 编程实战：
- GitHub：@mengjian-github
- 专栏：AI编程实战
- 这期的完整清单：评论区回复「长任务避坑」，我把领取方式发你
觉得有用？点赞+收藏 就是最大支持 🙏
本文由作者借助 AI 辅助整理，内容经作者实测与审校。