How to Turn Figma References into a Website with Claude Code + Fable 5

YouTubeAI Mastery Lab

AI summary focused on the core points of the original article.

Read original

1. Design concept and reference gathering

Planning & image gathering : Search Pinterest and similar sources for references covering color, 3D graphic elements, and layouts, then collect them in Figma.
AI image compositing : Use generative AI tools such as Hixfield to remix the collected elements—including tree branches and dark gradient backgrounds—into a design style suited to a meditation app.

2. Separating assets for code generation

Separating backgrounds and text : Generate the background image and the UI/text layout separately so the code builder can reproduce the layout accurately.
Choosing fonts : Find popular Google Fonts, such as Instrumental Serif, and match them to the design.

3. Implementing the UI frontend with Claude Code and Fable 5

Building the Hero section : Provide prompts and reference images in a Claude Code session to automatically generate the Hero section, responsive layout, icons, and Hover effects.
Video background animation : Convert the generated image into a video using Kling 3.0 and apply it as a looping web background video.

4. Refining the full website layout and details

Expanding sections : Add a chessboard-style card layout, key feature sections, testimonials, and footer areas.
Dividers and mobile optimization : Position natural-looking 3D asset dividers between sections using Absolute positioning, then carefully adjust responsive font sizes and spacing for mobile.

XPLORED View

Rather than showing how to generate a finished screen in one attempt, this video demonstrates a production process that separates references and assets into units the code can understand and repeatedly reviews the result in the browser.

Good situations for watching

When you want to translate cinematic web design into working frontend code
When you want to connect image generation, video conversion, and coding agents in one workflow

Points to take away

The quality of generated code depends not only on the prompt, but also on how clearly reference images and assets are separated.
3D graphics and background video can quickly elevate the atmosphere, but mobile layout and spacing require a separate cycle of iterative QA.

Read original

Get the week's signal by email, every Saturday.

A short read on the tools and articles added that week.