How to Turn Figma References into a Website with Claude Code + Fable 5
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.
