One Room, Four Seasons: Figma Weave and Claude Code Piece Together a New Workflow

Meng To posted a workflow record on X: Figma Weave first designed the entire page, using one canvas to create four seasons within the same frame, depth maps, and motion studies, then handed the folder to Claude Code to build the webpage.

The page is called Hanare, and its selling point is quiet: a guest room in the mountains, rotating through four seasons. In the key visual, a Japanese-style cottage, cherry blossoms, a stone-paved path, and lanterns are all in the same composition, with One quiet room. Four seasons. in the upper left. Pages like this can easily become scenic carousels, but Meng To's approach connects design references and code generation.

In his replies, he broke down the process. One Weave canvas, one brief gave three directions: ink wash, neon night, and four seasons. He ultimately chose four seasons. Text Iterator only changes the season; Depth Anything generates depth maps; Kling creates two motion studies. That is, the visual assets were not pieced together separately; they share the same framework, and depth and motion are defined in advance.

When it actually reached the coding stage, what he gave Claude Code was not one big prompt but a folder. The prompt asked to rebuild design-C-four-seasons.png into a single-HTML-file three.js landing page. The four-season images must share the same frame; the depth maps are used for mouse parallax, with the effect referencing motion-parallax-loop.mp4; when a season is clicked, use the depth map to wash the new season from the foreground into the background, with the effect referencing motion-season-wash.mp4; each season also needs petals, fireflies, fallen leaves, and snow. Finally, Claude Code is asked to take screenshots itself to verify until it matches the design.

Under the tweet, someone asked whether the motion studies were handed off smoothly and whether Claude Code went back and forth for many rounds. Meng To replied that it was fairly seamless because Claude Code could see all the references; he later also mentioned that only very little nudging was needed and that strong references helped a lot. Another commenter asked whether giving frames and depth maps to Claude Code, rather than stuffing in a giant prompt, really made the depth maps participate in parallax. This question is key; it points to the core of the process: reference files are not decoration; they are constraints.

Meng To also mentioned that the workflow stays in Weave; the next page can start from a new brief and new photos without going back to a blank canvas. Figma Weave's subscription has a limited-time discount code MENGTO20, and the link is https://app.weavy.ai/flow/6yKBise7YHoG20h7oJCHIE/ . Someone in the comments also said outright that Figma Weave is useful but too expensive. Cost remains the barrier for this kind of tool.

From the results, the inspiration of this workflow is not in any single tool. The design side first completes the four seasons, depth, and motion under the same framework, and then the code side reads the references in the folder to generate and verify the page. Prompts still matter, but the density and consistency of the references determine how many detours Claude Code can avoid. For people building browser interactions, game scenes, or product landing pages, this is more useful than simply discussing model capabilities.