同一间房，四季轮换：Figma Weave 和 Claude Code 拼出一条新工作流

Meng To 在 X 上发了一条工作流记录：Figma Weave 先设计完整个页面，一个画布做出同一框架的四季、深度图和运动研究，然后把文件夹交给 Claude Code 建成网页。

页面叫 Hanare，卖点很安静：山间一间客房，四季轮换。主视觉里，日式小屋、樱花、石板路和灯笼都在同一构图里，左上角写着 One quiet room. Four seasons.。这类页面容易做成风景轮播，但 Meng To 的做法把设计参考和代码生成接在了一起。

他在回复里拆了流程。一个 Weave 画布，一次 brief 给出三个方向：水墨、霓虹夜、四季。最后选了四季。Text Iterator 只改季节，Depth Anything 生成深度图，Kling 做两个运动研究。也就是说，视觉资产不是零散拼出来的，它们共享同一框架，深度和运动也提前定义好。

真正进入代码阶段时，他给 Claude Code 的不是一句大提示，而是一个文件夹。提示词要求把 design-C-four-seasons.png 重建成单 HTML 文件的 three.js landing page。四季图片必须共享同一框架；深度图用来做鼠标视差，效果参考 motion-parallax-loop.mp4；点击某个季节时，用深度图把新季节从前景洗到背景，效果参考 motion-season-wash.mp4；每个季节还要加花瓣、萤火虫、落叶和雪。最后让 Claude Code 自己截图验证，直到匹配设计。

这条推文下面，有人问运动研究是否顺利交接，Claude Code 有没有来回改很多轮。Meng To 的回复是相当无缝，因为 Claude Code 能看所有参考；后续也提到只需要很少的推动，强参考帮助很大。另一位网友问，把帧和深度图交给 Claude Code，而不是塞一个巨大提示，是否真的让深度图参与视差。这个问题很关键，它指向流程的核心：参考文件不是装饰，它们是约束条件。

Meng To 还提到，工作流留在 Weave 里，下一个页面可以从新 brief 和新照片开始，不必回到空白画布。Figma Weave 的订阅有一个限时折扣码 MENGTO20，链接是 https://app.weavy.ai/flow/6yKBise7YHoG20h7oJCHIE/ 。评论区也有人直说 Figma Weave 好用但太贵。成本仍然是这类工具的门槛。

从结果看，这套流程的启发不在某个单点工具。设计侧先把同一框架下的四季、深度和运动做齐，代码侧再读取文件夹里的参考，生成和验证页面。提示词依然重要，但参考的密度和一致性决定了 Claude Code 能少走多少弯路。对做浏览器交互、游戏场景或产品落地页的人来说，这比单纯讨论模型能力更有用。