How it works

From conversation to live website

Here's exactly what happens when you ask Claude to build a website with Vibesites. Every step is transparent.

01

Connect Claude to Vibesites

Sign up at vibesites.dev (free) and copy your MCP URL from settings. In Claude Desktop, go to Settings → Connectors → Add custom connector and paste the URL. For Claude Code, create a .mcp.json file. Setup takes 30 seconds.

vibesites.dev/api/mcp?key=vibe_live_xxx
02

Describe your website

Tell Claude what you want in plain English. Be specific about your business — name, location, what you do, who your customers are. Claude asks 5 clarifying questions to nail the design: business details, audience, primary action, visual identity, and content.

"Create a landing page for my yoga studio in Santa Monica"
03

Claude creates the site

Claude calls vibesites_create_site to spin up a new site with the landing template. Then it reads the template, understands the structure, and customizes the CSS variables (colors, fonts) and HTML content for your business.

vibesites_create_site → vibesites_read_file
04

Claude finds and uploads images

Claude searches for relevant stock photos using vibesites_search_images — "yoga class", "meditation", "studio interior". Then it downloads each image and uploads it to your site's CDN with vibesites_upload_asset. Images are hosted on Cloudflare, not hotlinked.

vibesites_search_images → vibesites_upload_asset
05

Claude writes the code

Claude writes custom HTML and CSS using vibesites_write_files. It customizes the template with your content, images, brand colors, and responsive design. The result is production-quality code with semantic HTML, accessible structure, and real copy — not Lorem ipsum.

vibesites_write_files (index.html + styles.css)
06

Site goes live instantly

Files are automatically deployed to Cloudflare CDN. Your site is live at yoursite.vibesites.link in under 5 seconds. The build pipeline auto-generates sitemap.xml, robots.txt, and injects any missing SEO meta tags.

sunrise-yoga.vibesites.link — live!
07

Iterate with natural language

Keep talking to Claude to make changes. "Add a pricing section", "make the hero darker", "add a testimonials carousel." Every edit creates a Git commit. You can rollback to any previous version if needed.

"Add a class schedule section below the hero"

Ready to try it?

Connect Claude to Vibesites in 30 seconds. Free, no credit card.