Claude Fable 5 刚刚填平了设计到代码的鸿沟

Fable 5 移动了终点线。曾经要耗掉设计师整整一周的那个步骤，把静态画面转化为可用的界面代码，现在几乎不费吹灰之力。这一个变化，彻底改变了你的交付物的意义，假装无事发生只会让你落后。

这是设计师对设计师的实话实说。真正改变了什么、哪里还是会出问题、当截图转代码不再是难点时你的工作变成什么。

所有人都在讨论的那个演示

在 figma.com 上查看实例

@chubby 的帖子病毒式传播（18.4k 次转发，340 多条设计师回复），视频里 Fable 5 拿到一张 Figma 截图，几乎不需要追加提示，一次就返回了可用界面。回复区里，设计师们把同样的事情用在自己的文件上，然后把结果发出来。这才是关键。不是厂商宣传片，是真实从业者在拿真实工作测试。

@bauyo 的第二条演示帖（12.1k 点赞）更进一步，贴出了从静态设计重建复杂营销网站的前后对比。两条帖子的核心是同一件事：你递给模型一张界面图，回来的不是草稿，而是你可以直接发布的东西。

时机很重要。Fable 5 在 6 月 24 日和 25 日重新出现在 Bedrock 和 Claude Code 模型选择器中，此前停用了 13 天。真正出色的首批公开演示在之后 48 小时内集中涌现。你现在看到的反应，不是炒作退潮后的泡沫，而是第一次真实的审视。

真正改变了什么

速度不是重点。快速但粗糙的代码生成，我们已经用了两年。真正改变的是视觉解读的准确度，现在的输出尊重你的设计，而不是大概那个意思。

去年的截图转代码工具给你的是一个"氛围导出"。布局大致对，间距是它自己发明的，到处都是硬编码的十六进制值，你的字体规范一点影子都没有。你省下来的时间全花在收拾烂摊子上。Fable 5 的飞跃体现在设计师真正能感受到的两个地方。

第一，它能正确读取设计。间距关系、层级、组件重复模式，卡片和区块的区别。

第二，它返回的代码倾向于贴近你的系统。帖子里的设计师报告说，输出是 token 感知的，会映射到已有变量和组件规范，而不是直接扔一堆原始值。这就是废稿和工程师愿意接手的起点之间的区别。

哪里还是会翻车

这是炒作帖里跳过的部分，也是让你保住饭碗的部分。一张截图是一个状态。你的产品不是一个状态。静态画面展示不了的所有东西，正是 Fable 5 失去魔力的地方。

给它一个界面，它还你那个界面。它不知道你的空状态、加载骨架屏、错误文案、验证规则，也不知道第 400 行会发生什么。它看不到你从来没画出来的交互。它对"这东西值不值得做"也没有任何看法。

这些不是下个版本会修复的 bug。它们是输入的局限。一张按钮的图片告诉不了模型网络断开时按钮该怎么办。你的判断填补这个空缺，而这个空缺才是实际工作的大头。

"完成"现在意味着什么

交付物的形态变了。多年来，"完成"意味着一个 47 个画面的 Figma 文件，带标注、有规范文档、开一个交接会议。这个产物之所以存在，是因为界面到代码的翻译又贵又有损，所以你过度标注来保护意图。

当翻译几乎免费又高度忠实，庞大的规范文件就成了累赘。能跑起来的产物赢了。一个渲染好的、可交互的版本，十秒传达的信息比一页标注更多，你的工程师能直接读它的代码，而不是解读一份文档。

流程文档输给一条 3 分钟的 Loom 视频。展示东西在跑，讲清楚那两个关键决策，比一份没人打开的书面规范更有用。交付物不再是界面的设计稿，而是关于界面应该是什么的决策，以及它出来后你判断它对了。

鸿沟填平后设计师的工作

鸿沟填平不会让设计师消失。它消灭的是那些伪装成工作的杂活。三件事变成了整个游戏。

第一，决定什么值得做。当产出一个界面只需要几分钟，约束就转移到了选择正确的界面上。知道该删什么、该排什么顺序、该不做什么，这是优势所在。模型没有克制的品味，你有。

第二，判断并修正模型返回的结果。Fable 5 给你一份自信的草稿，而自信的草稿是危险的。对照上面的局限表检查输出，捕捉缺失的错误状态、错误的焦点顺序、跑偏的品牌调性，这是新的核心技能。是筛选，不是生成。

第三，掌握系统和品味。模型依赖你的 token 和组件，所以你系统的质量决定它产出的一切质量。一个强大的 design system 让 Fable 5 如虎添翼，一个薄弱的系统让它大规模自信地出错。系统背后的品味，是任何模型都没有的东西。

这周怎么实际用起来

在 bolt.new 上查看实例

别把它当玩具，把它放进流程里。工作流程很简短，今天就能用。

从意图出发，而不是像素。在画任何东西之前，先决定这个界面是干什么的、有哪些状态。思考是模型做不到的部分，所以先做这件事。

按你平时的标准设计主状态，然后截图。在你真实系统中，带上你的 token，一个干净的画面能给出最好的解读。把它喂给 Fable 5，让它一次返回可运行产物。

然后对照局限表认真审查，不要走马观花。过一遍它看不到的空状态、加载状态和错误状态。检查焦点顺序、对比度、ARIA，以及数值是映射到你的 token 还是硬编码的。修正问题，发布产物，发一条 Loom 视频代替规范文档。

结论

这不是"设计师已过时"的故事，恰恰相反。Fable 5 吃掉了工作机械化的中间环节，也就是翻译这一步，留下了一直最重要的两端：决定做什么，以及判断它对不对。

今年赢的设计师，是那些不再执着于像素搬砖、开始磨砺判断力的人。模型填平了设计和代码之间的鸿沟，但它没有填平"好"和"对"之间的鸿沟，而那个鸿沟现在就是整份工作。

常见问题

Claude Fable 5 是什么？

Fable 5 是一个 Claude 模型，在停用 13 天后于 6 月 24 日和 25 日重新出现在 Bedrock 和 Claude Code 模型选择器中，由此进入设计师的视野。引发反应的核心是它的视觉转代码质量，能把一张界面截图一次变成可用的 UI。

Fable 5 真的能把截图变成生产代码吗？

对于静态画面能展示的内容来说，基本可以。@chubby 病毒帖（18.4k 转发）和 @bauyo 演示帖（12.1k 点赞）里的设计师，展示了只需少量追加提示、从静态设计忠实重建的 token 感知成果。它仍然无法生成它看不到的状态，比如空、加载、错误，所以输出是一个你需要审查的强力起点，不是成品。

这会取代设计师吗？

不会。它移除了设计到代码的机械翻译，留下了需要判断的部分：决定什么值得做、发现模型的遗漏、掌控它依赖的 design system。生成变便宜了，这让筛选和品味更有价值，而不是更少。

Figma 转生产代码会改变我的交接方式吗？

会。交付物从大型重规范的 Figma 文件，转变为一个可运行产物加一段简短的 Loom 视频。当翻译忠实且近乎免费，过度标注就是累赘，一个能跑起来的想法比标注更快传达意图。

这周我该如何使用 Fable 5？

把它放进你的流程，放在你的判断之后。先决定意图和状态，按你的标准设计主状态，截图，让 Fable 5 生成，然后在发布前严格对照它的已知局限审查。模型负责翻译，你掌控它看不到的一切。