Cindy Zhu.
← all free guides
Building & apps No-code build

Build a $10,000 website with Claude + Kombai

Hey, it's Cindy ๐ŸŒฑ This is the full setup from the reel: how I build a website with real animations, the kind an agency charges thousands for, without touching a line of code. Claude writes the plan, Kombai designs it AND writes the real code behind it.
the outcome

What you're making ๐ŸŒ

A genuinely high-end website with real motion, and the production code underneath it, not a flat template. The move is two steps: Claude plans it, Kombai designs and ships it. Kombai is an AI design engineer, so unlike most AI site tools it hands you a designed page AND real, editable code in the stack you choose.


step 1

Get Claude to write your website plan ๐Ÿ“

Don't start from a blank page. Tell Claude what you do and let it write the detailed plan you'll hand to Kombai. Copy this into Claude:

๐Ÿ“ the website plan prompt
You're my web designer. Here's what I do: [describe your business or what you do in 2 to 3 sentences]. Write me one detailed website plan I can hand to a design tool to build a one-page site. Specify: the sections in order (hero, what I do, proof or highlights, about, contact), the exact copy for each section (a headline plus a short line or two), the visual style (colours, fonts, mood), the layout, and a clear call to action. Give me just the finished plan, clean and ready to paste, nothing else.

Claude hands you back a full, structured plan. That's your blueprint.


step 2

Build it in Kombai ๐ŸŽจ

  1. ๐Ÿ’ป Get Kombai. Grab the Kombai app, or add it straight to your code editor. It runs on Mac, Windows and Linux.
  2. โœจ Pick a design and remix. Open the inspiration library, pick a design you love, and hit remix. Then paste in your plan from Claude.
  3. ๐Ÿช„ Let it build. Kombai keeps the layout and the animations from your pick, but reimagines the whole thing for you: new copy, new images, your theme.
  4. ๐ŸŽจ Tweak on the canvas. It builds the full page on a canvas, so you can keep going. Ask for another version, or just edit the text and colours by describing what you want.

step 3

Turn it into real code ๐Ÿง‘โ€๐Ÿ’ป

This is the part most AI site tools can't do. When you're happy with the design, switch to code mode and Kombai writes production code in whatever tech stack you want, so you get a page you can actually ship, not just a pretty mockup.

The two-tool combo is the whole trick: Claude is the planner (it decides what the site says and how it's structured), Kombai is the design engineer (it makes it look good and writes the code). Plan first, build second, and you skip the blank-page problem entirely.

The links ๐Ÿ”—

๐Ÿ’ป Kombai: kombai.com (app or IDE plugin, Mac, Windows, Linux)
๐Ÿค– Claude: claude.com (use it to write your website plan first)

Follow @cindiezhu for more AI tips every single day ๐ŸŒฑ