Hey, it's Cindy ๐ฑ This is the full setup from the reel: how I build a landing page that would cost thousands from an agency, in a few minutes, just by describing it. Claude writes the plan, Replit Design builds the real, live page. No designer, no code.
the outcome
What you're making ๐
A real, publishable one-page website (a portfolio, a landing page, a link-in-bio site) with its own domain. Not a picture of a website, not a template you fight with: an actual working page you can edit just by talking to it. The trick is doing it in two moves: Claude plans it, Replit Design designs and ships it.
this part matters most
First, tell Claude about your business ๐ฃ๏ธ
Your website is only as good as the description you give. A sentence or two on each of these is all Claude needs, and messy bullet points are completely fine, polishing them is Claude's job.
๐ท๏ธ The basics Your name or business, what you do or sell, and roughly what it costs.
๐ฅ Who it's for Your ideal person and the problem you solve. "Busy salon owners who lose bookings after hours" beats "everyone".
๐ฌ The pitch Your one-line hook, your 2 or 3 biggest benefits, and the tone you want: warm, premium, playful, expert.
๐จ The look Your colours and fonts. No brand yet? Name a website whose style you love and say "like this".
๐ Proof + contact Testimonials, results, follower counts, and the email, socials, or booking link people reach you on.
๐ฏ The one action The single thing a visitor should do: book, buy, join, or sign up. Build the whole page around that.
step 1
Get Claude to write your website plan ๐
Don't describe a website from a blank page. Paste this into Claude, fill in the bracket with what you just gathered, and it writes the detailed plan you'll drop into Replit.
๐ the website plan prompt
You are my website strategist. Here is my business: [paste your description: what you do, who it's for, your one-line pitch and 2 to 3 benefits, the tone you want, your colours and fonts or a site whose style you love, your proof, your contact details, and the one action you want visitors to take].
Turn this into a complete, build-ready website plan I can paste straight into Replit Design as my first prompt. Write it so it produces a site that looks like it cost $10,000, not $100. Include:
- Every section stacked in order down the page (hero, what I do, proof or highlights, about, offer, contact)
- Real headline and body copy for every section in my brand voice, no lorem ipsum and no [placeholder] text
- One primary call to action, worded the same way and repeated naturally down the page, ending in an email signup
- A simple design system: one accent colour with its hex code, a heading and body font pairing, generous white space, and consistent rounded buttons
- Where real photos should go, with a note to use my own images over stock
- A clear instruction that the site must look and work perfectly on mobile first
Ask me up to 3 short questions first only if something important is missing, then wait for my answers. Otherwise write the plan now, and put the final plan in a single code block with nothing before or after it so I can copy it in one click.
Claude hands you back a full, structured plan. That is your blueprint.
step 2
Build it in Replit Design ๐จ
- ๐ง Open Replit and pick Design. On the home screen, choose Design mode.
- ๐ Paste in your plan from Claude. Hit generate and watch it build live in the preview, section by section.
- ๐ Publish it. When you're happy, publish and it goes live with its own domain. A real working page, not a mockup.
๐ผ๏ธ Prefer to start from a look you love? Drop in a screenshot of a site whose style you like and ask Replit to recreate that feel for your brand, so you're art directing, not guessing from scratch.
make it look expensive
What makes a site look like $10k, not $10 ๐
๐ฌ๏ธ Room to breathe Generous white space is the single biggest thing that reads as expensive. If a page feels cramped, ask for more spacing.
๐ฏ One accent colour Use a single accent for every button and link. Rainbow buttons are the fastest way to look cheap.
๐ธ Real photos, not stock Swap in your own headshot and real shots. A real face out-converts stock every time.
๐ One clear action Ask for one thing per page. If your homepage has five buttons, cut it to one.
the easy part
Fixing it is where it gets fun ๐ช
You never touch code or a design tool. You just say what you want in plain English and Replit redesigns on the spot. Here are the kinds of things you can change just by asking:
- ๐จ Colours and mood: "use a warmer beige and cream palette", "make it feel more premium and less busy".
- ๐ค Fonts: "use a bolder serif for the headings", "make the body text bigger".
- ๐งฑ Layout: "make the hero full-screen", "move the email signup higher up the page".
- โ๏ธ Copy: "rewrite the headline to sound more confident", "shorten the about section".
- โ Add or remove sections: "add a section with three things I help people with", "drop the pricing table".
- ๐ผ๏ธ Images: "use my headshot in the hero instead of the stock photo".
- ๐ Buttons and calls to action: "make the signup button bigger and one accent colour".
- ๐ฑ Mobile: "tighten the spacing on mobile so nothing feels cramped".
๐ก Be specific about the feeling you want (warm, premium, playful, minimal) and the exact section you mean. The clearer the ask, the closer the redesign lands on the first try.
The links ๐
๐ง Replit Design: replit.com (open Design from the home screen)
๐ค Claude: claude.com (use it to write your website plan first)
Follow
@cindiezhu for more AI tips every single day ๐ฑ