Hosting, SSL and DDoS protection
Your website is online, secure and fast. We handle the setup.
What business do you want online?
Describe your business. Build a useful first version. Go live free on our address, or pick a plan for your own domain.
BuildMyAIWebsite AIStart building →
No code required · Free to build and publish · Roll back safely
baan-coffee.buildmyaiweb.site
Made with BuildMyAIWebsite
Baan Coffee
Good coffee, made for slow mornings.
Everything a small business needs. Already connected.
Your own database and email
Collect customer messages and send emails from your own website.
Private preview before every release
See every change privately before anyone else does.
Free to go live
Publish on our address for free. Add your own domain whenever you are ready.
AI edits with safe rollback
Change your mind? Go back to an earlier version in one click.
Bring your own workflow
Use your own AI. Unlimited edits.
BuildMyAIWebsite gives your AI a safe staging area. Keep the files, preview changes, and choose exactly what goes live.
See how it worksbuildmyaiwebsite · mcp
site.preview()
version.deploy()
rollback.safe()Start small. Grow when you’re ready.
Free
Build free and go live on our address, with a small link back to us.
30 AI edits a monthLive on our address · 1 form, 50 messages a month
Get startedOne Page
One simple page, online with your own address.
20 AI edits a monthPublish online
Get startedStarter
A small business website that collects customers.
200 AI edits a monthCustomer list up to 2,000
Get startedPro
PopularMore edits and a bigger customer list for a growing business.
1,000 AI edits a monthCustomer list up to 10,000
Get startedStore
Everything in Pro, plus an online shop: up to 5,000 products (add 5,000 more for $3 a month), imported from Excel in one go, with sizes and colours.
30-day free trial1,000 AI edits a monthCustomer list up to 25,000
Get startedScale
For busy businesses with lots of customers and a big shop (up to 50,000 products, with extra 5,000-product packs at $3 a month).
1,000 AI edits a monthCustomer list up to 100,000
Get startedExtras on paid plans: +10,000 customers $3 a month, +5,000 products $3 a month (Store and Scale), and video hosting of 100 minutes $5 a month. YouTube and Vimeo videos are always free to add.
Websites made with one prompt
Open a live site, read the prompt that made it, and copy it into the AI builder or your own AI.
RestaurantBuilt with the AI builder
Neon ramen bar
Build a one-page website for "Midnight Noodle", a late-night ramen bar. Direction: Bold, dark and electric, like a neon sign in the rain. Palette: near-black #0B0B12, hot pink #FF2E88, electric cyan #22E6F2, warm cream text #FFF4E0. Fonts: Space Grotesk for headings, DM Sans for body. Sections: a full-screen hero with a huge glowing headline "Open when the city sleeps" (CSS text-shadow glow that gently flickers), opening hours as a live "Open now / Closed" badge, a menu in three tabs (Ramen, Sides, Drinks) with dish names, short descriptions and spice level icons drawn in inline SVG, a "Our broth takes 18 hours" story strip with a counter that animates on scroll, location with a stylised CSS map card, and a reservation form (name, phone, date, guests). Motion: smooth scroll-reveal for each section, steam made from soft CSS gradients rising behind the headline, buttons that pulse on hover. Respect prefers-reduced-motion. No photos needed: use CSS shapes and inline SVG for bowls and chopsticks. Write realistic placeholder copy. Mobile first, accessible, contrast at least 4.5:1.
Beauty and salonBuilt with Claude over MCP
Luxury salon
Build a one-page website for "Maison Aurelle", a high-end hair and beauty salon. Direction: Luxury editorial, quiet and expensive. Palette: ivory #F7F3EC, charcoal #1C1B1A, champagne gold #B8975A, soft blush #E9D8D0. Fonts: Cormorant Garamond for headings (very large, light weight), Manrope for body. Sections: a hero with an oversized serif headline "Hair, considered." and a thin gold line that draws itself on load; a services list styled like a fine-dining menu (Cut, Colour, Treatments, Bridal) with prices left as "from" placeholders; a team section with initials in elegant circles instead of photos; a split "Our philosophy" section with a large pull quote; client words in a slow fading carousel; a booking form (name, service, preferred day) and opening hours. Motion: slow fade-and-rise reveals, a custom soft cursor glow on desktop only, link underlines that grow from the left. No photos needed: use gradients and thin line ornaments in inline SVG. Mobile first, accessible.
WellnessBuilt with Claude over MCP
Yoga studio with booking
Build a 4-page website for "Still Point Yoga", a boutique yoga studio. Pages: Home, Classes, Teachers, Contact. Shared header (logo wordmark, links, a "Book a class" button) and footer (hours, address, social links as text) on every page. Direction: Calm, earthy and airy, lots of breathing room. Palette: oat #F3EEE6, clay #C58B6B, moss #5E6B52, charcoal #2B2B28. Fonts: Fraunces for headings, Work Sans for body. Home: hero with headline "Slow down. Show up." and a soft CSS sun that drifts; three "Find your practice" cards (Vinyasa, Yin, Prenatal); a next-7-days timetable strip; a first-class-free banner; testimonials. Classes: a bookable service list (Vinyasa 60 min, Yin 75 min, Prenatal 60 min, Private 60 min) with duration, level tags and a Book button for each. Set weekly opening hours (Mon-Fri 7am-8pm, Sat-Sun 8am-1pm) and a blackout for public holidays. Bookings use the platform booking form (name and email). Teachers: four teacher cards using initials in circles, a short bio each, and their styles as tags. Contact: studio details and a map-style CSS card. Also set a loyalty programme: collect a stamp per class, reward the 10th class free. Motion: gentle reveals, no auto-playing carousels. Respect prefers-reduced-motion. No photos. Mobile first, accessible, contrast at least 4.5:1, unique title and description on every page.
FitnessBuilt with the AI builder
Brutalist gym
Build a one-page website for "IRONWORKS", a strength and conditioning gym. Direction: Bold and brutalist, loud and unapologetic. Palette: pure black #0A0A0A, white #FFFFFF, safety yellow #FFE500, concrete grey #2B2B2B. Fonts: Space Grotesk in huge uppercase for headings, DM Sans for body. Sections: a hero with a giant stacked headline "NO EXCUSES. JUST WORK." that fills the screen, a marquee strip of repeating words (STRENGTH / SPEED / GRIT) scrolling sideways; three membership cards with thick borders and offset shadows (Drop-in, Monthly, Annual; leave prices as placeholders); a weekly class timetable as a bold grid; a "meet the coaches" section with big numbers and names; a free first-session form (name, phone, goal). Motion: the marquee, headline words sliding in one by one, cards that lift and shift their hard shadow on hover. Respect prefers-reduced-motion. No photos needed: use big type, borders and CSS patterns such as diagonal hazard stripes. Mobile first, accessible, tap targets at least 44px.
PortfolioBuilt with Claude over MCP
Designer portfolio
Build a one-page portfolio for "Nara Studio", an independent brand designer. Direction: Editorial, giant type and lots of space. Palette: off-white #F4F1EA, ink #111111, one vivid accent #FF4B1F. Fonts: Playfair Display for huge headings, Source Sans 3 for body. Sections: a hero that is only a massive headline "I make brands people remember." with a small availability badge ("Booking for next month"); a selected-work list where each project is a full-width row (number, name, year, discipline) that reveals a colour block preview following the pointer on hover; six case-study cards built from CSS shapes and gradients as placeholder artwork; an "About" with a short story and a skills list; a services strip with starting-from placeholders; a contact section with a big email-style call to action and a simple message form. Motion: text lines that slide up from a mask, a slow marquee of client names, page sections that reveal on scroll. Respect prefers-reduced-motion. No photos needed. Mobile first, accessible, unique title and description.
Health and clinicBuilt with Claude over MCP
Physio clinic with branches
Build a 5-page site for "Harmoni Physio", a physiotherapy clinic with three branches. Pages: Home, Services, Branches, Team, Book. Direction: Clean, warm and reassuring. Palette: white #FFFFFF, sage #DDE8DF, deep green #1E4D3B, peach #FFB48A. Fonts: Manrope for everything with strong weight contrast. Services: six services as cards (Sports injury, Back and neck, Post-surgery, Paediatric, Elderly mobility, Workplace ergonomics) each with who it helps, what a session involves and duration. No medical claims or promises of results. Branches: three branches with address, hours, parking note and a CSS map card; a branch picker that filters the team. Team: eight therapists with initials, speciality tags and branch. Book: appointment booking by service using the platform booking form (name and email), with weekly opening hours. Home: hero "Move well again", a three-step "How we work" timeline, an FAQ accordion with eight questions, and a sticky mobile "Book" bar. Mobile first, accessible, large readable text, contrast at least 4.5:1.
Cafe and shopBuilt with the AI builder
Coffee roastery
Build a one-page website for "Kopi Kampung Roasters", a small-batch coffee roastery with a cafe. Direction: Warm local, handmade and rich. Palette: espresso #2A1A12, crema #F2E3CE, terracotta #C8643B, leaf green #3F5B3A. Fonts: Lora for headings, Nunito for body. Sections: a hero with a large headline "Roasted this week, poured today" and a CSS-drawn coffee cup with animated rising steam; a "This month's beans" area with cards for origin, roast level (a 1 to 5 dot scale) and tasting notes; a brewing guide in four illustrated steps using inline SVG; the cafe story with opening hours; a "Wholesale for cafes" call-out; a contact form. Leave a clear spot where an online shop can be added later; do not write any product prices. Motion: gentle reveals, steam loop, cards that tilt slightly on hover. Respect prefers-reduced-motion. No photos needed: use CSS grain texture, shapes and inline SVG. Mobile first, accessible.
Health and clinicBuilt with Claude over MCP
Calm dental clinic
Build a one-page website for "Bright Smile Dental", a friendly family dental clinic. Direction: Minimal, calm and trustworthy, never clinical or scary. Palette: white #FFFFFF, soft mint #DFF5EE, deep teal #0F5E63, warm sand #F6EFE6, accent coral #FF7A59. Fonts: Inter for headings and body. Sections: a hero with the headline "Dentistry without the dread" and two buttons (Book a visit, Call us); a row of trust points (gentle care, clear prices, same-week appointments) with small inline SVG icons; treatments as soft rounded cards (Check-up, Whitening, Braces, Children); a "What to expect on your first visit" timeline in four steps; dentist profiles using initials in coloured circles; common questions in an accessible accordion; opening hours, address and an appointment request form. Motion: subtle fades only, a calm floating shape in the hero. Respect prefers-reduced-motion. No photos needed. Do not make medical claims or promises of results. Mobile first, accessible, large readable text.
EventsBuilt with Claude over MCP
Developer conference microsite
Build a conference microsite for "Nusantara Dev Day 2027", a one-day developer conference. Pages: Home, Schedule, Speakers, Venue, Register. Direction: Bold, techy and playful. Palette: midnight #0C1030, lime #C6FF3D, magenta #FF3D9A, white. Fonts: Space Grotesk and JetBrains Mono for details. Home: hero with live countdown to the event date, one-line pitch, two buttons (Register, See schedule), sponsor row as text logos. Schedule: 14 sample sessions (time, title, track A/B/C, speaker, room) written into the page. Show a day view with track filter chips and a "save to my agenda" toggle. Speakers: 12 sample speakers (initial-circle avatars, role, company, talk). Venue: address, how to get there by train/car/ride-hailing, nearby hotels list, accessibility notes. Register: attendee form (name, email, company, ticket type: Student, Standard, Team of 5; dietary needs). Show a friendly confirmation message (it is a design example, so nothing is sent). Motion: countdown tick, staggered reveals. Respect prefers-reduced-motion. Mobile first, accessible, contrast at least 4.5:1.
Travel and stayBuilt with the AI builder
Boutique homestay
Build a one-page website for "Rumah Sawah", a boutique rice-field homestay with six rooms. Direction: Luxury, serene and cinematic. Palette: deep forest #14261F, rice-field gold #D9B45C, mist #EDF1EA, warm white #FBFAF6. Fonts: Cormorant Garamond for headings (large, italic accents), Manrope for body. Sections: a full-height hero with a layered CSS landscape (gradient sky, rolling hills in inline SVG with slow parallax on scroll) and the headline "Wake up inside the view"; six room cards (name, sleeps, short poetic description, "from" placeholder); an experiences section (sunrise walks, cooking class, bicycle tours) as a horizontal scroll row; a day-in-the-life timeline; guest words; a booking enquiry form (dates, guests, room) and how to get here. Motion: parallax on the hills, slow fade-ins, a sticky header that turns solid after the hero. Respect prefers-reduced-motion. No photos needed: the landscape must be drawn with gradients and SVG. Mobile first, accessible.
Software and startupBuilt with Claude over MCP
AI startup landing
Build a one-page landing site for "Orbit", a fictional AI note-taking app. Direction: Bold, futuristic, glass and glow. Palette: deep space #07071A, violet #7C5CFF, aqua #29D7FF, soft white text #EDEBFF. Fonts: Space Grotesk for headings, DM Sans for body. You may load GSAP and its ScrollTrigger plugin from cdnjs.cloudflare.com. Sections: a hero with an aurora gradient background that slowly drifts, the headline "Your thoughts, organised by themselves", a CSS-built app window mockup showing notes with tags, and two buttons (Join the waitlist, Watch the demo); a logo-style row of fictional partners as text; a three-feature bento grid of frosted-glass cards; a "How it works" scroll-driven sequence in three steps; pricing as three tiers with placeholders; FAQ accordion; a waitlist email form. Motion: GSAP scroll reveals, the mockup floating gently, cards that glow along the border on hover. Respect prefers-reduced-motion. No photos needed. Do not collect payments or passwords. Mobile first, accessible, contrast at least 4.5:1.
MediaBuilt with Claude over MCP
Hiking magazine with collections
Build a content website for "Trail Notes", a hiking magazine for Southeast Asia. Pages: Home, Stories, Story detail, Trails, About. Direction: Editorial, outdoorsy, high-contrast. Palette: forest #12281E, bone #F2EFE6, moss #7A9A55, sunrise #FF7A2F. Fonts: Libre Caslon Display for headings, Inter for body. Write 8 realistic sample stories into the site, each with title, summary, body, category (Gear, Route, Culture, Safety), author, publish date and reading time. Stories page lists them with category filters and search; each story has its own detail page with a reading progress bar and related stories. Add 10 sample trails, each with name, country, distance km, elevation gain m, difficulty (Easy, Moderate, Hard) and best months, and show them in a sortable, filterable table that becomes cards on mobile. Home: lead story hero, latest 4 stories, a "trail of the week" card, newsletter signup form. Motion: smooth reveals, progress bar. Respect prefers-reduced-motion. Mobile first, accessible, unique title and description for every page.
EventsBuilt with the AI builder
Wedding planner
Build a one-page website for "Eternal Vows Weddings", a wedding planning studio. Direction: Editorial and romantic, soft and elegant. Palette: blush #F6E7E4, cream #FFFAF3, sage #8FA58B, deep plum #3B2331, gold #C9A24D. Fonts: Playfair Display for headings with a script-style accent word, Source Sans 3 for body. Sections: a hero with the headline "Your day, beautifully yours" and a hand-drawn inline SVG floral border that draws itself on load; three packages (Day-of coordination, Full planning, Destination) as tall elegant cards with placeholders instead of prices; a "How we plan with you" timeline from first call to the big day; a count-up strip (weddings planned, happy couples, years); testimonials as handwritten-style notes; a gallery grid made from soft gradient tiles as placeholders for photos; an enquiry form (names, date, guests, budget range). Motion: slow fade-and-float reveals, petals drifting in the hero made with CSS. Respect prefers-reduced-motion. No photos needed. Mobile first, accessible.
Bakery and dessertBuilt with Claude over MCP
Playful bakery
Build a one-page website for "Sugar & Crumb", a colourful neighbourhood bakery. Direction: Playful and sticker-like, joyful and bouncy. Palette: butter yellow #FFE58A, strawberry #FF5C7A, mint #7ADDB8, cocoa #3A2418, cream #FFF8EC. Fonts: Quicksand for headings (bold, rounded), Nunito for body. Sections: a hero with the headline "Baked fresh. Gone fast." and big sticker-style shapes (donut, croissant, cupcake) drawn in inline SVG that wobble on hover; a "Today's bakes" board with cards for each item (name, short mouth-watering line, a "sells out early" tag) with no prices written in; a "Custom cakes" section with a four-step order guide; opening hours with a live Open / Closed badge; a catering and birthdays call-out; a message form for cake enquiries. Motion: bouncy reveals, floating sprinkles in CSS, buttons that squish when pressed. Respect prefers-reduced-motion. No photos needed: build the artwork from SVG and CSS. Mobile first, accessible, tap targets at least 44px.
PetsBuilt with the AI builder
Playful pet groomer
Build a one-page website for "Waggle and Co", a friendly dog and cat grooming studio. Direction: Playful, bouncy and bright, rounded shapes everywhere. Palette: sky blue #DDF1FF, sunshine yellow #FFD84D, coral #FF6B6B, ink navy #14213D. Fonts: Fredoka for headings, Nunito for body. Sections: a hero with a big headline "Fresh paws, happy hearts" and a bouncing paw-print animation, a services grid with prices (bath, trim, full groom, nail clip), a before-and-after style card row drawn with inline SVG pets, a "How a visit works" three-step strip, opening hours with a live Open now badge, and a booking form (owner name, phone, pet type, preferred day). Motion: gentle bounce on scroll-reveal, wiggle on button hover. Respect prefers-reduced-motion. No photos needed: draw the pets with CSS shapes and inline SVG. Mobile first, accessible, contrast at least 4.5:1.
Professional servicesBuilt with the AI builder
Architecture studio
Build a one-page website for "Halden Office", a small architecture studio. Direction: Minimal and monumental, huge type, lots of white space, almost no colour. Palette: paper white #F6F5F2, graphite #1A1A1A, one accent of signal orange #FF5A1F used sparingly. Fonts: Archivo for headings, Inter for body. Sections: a hero with a very large headline "We draw quiet buildings" and a thin animated line drawing of a house in inline SVG, a numbered project list of six projects with year, place and type that reveals an outline sketch on hover, a short studio philosophy with three principles, a team row of initials in circles, and a contact block with a simple enquiry form (name, email, project type, message). Motion: slow fade-up on scroll, the line drawing draws itself once. Respect prefers-reduced-motion. No photos needed: use inline SVG line drawings. Mobile first, accessible, contrast at least 4.5:1.
Retail and techBuilt with Claude over MCP
Calm tech store (Apple-style)
Build a 5-page website for “Aluna”, a fictional store for calm, everyday technology. Pages: Home, Products, Aluna Air, About, Support. Direction: Apple-style, minimal and premium, with huge headlines, generous white space and alternating black and light grey sections. Palette: white #FFFFFF, light grey #F5F5F7, near-black #1D1D1F, black #000000, link blue #0066CC with a soft purple-to-orange gradient used only on headline highlights. Font: Inter (or the system font stack) for everything. Shared translucent dark top nav and a light grey footer on every page. Home: a black hero with the headline “Technology that disappears into your day”, a floating CSS phone, then a 2×2 grid of product tiles (Air, Band, Slate, Dock) alternating light and dark, then three feature cards. Products: four product cards with CSS-built device art, “From $—” price placeholders, and a comparison table. Aluna Air: a dark hero with “Hear more. Feel less.”, three feature cards and a sample details table. About: the story, three principles and a closing call-to-action. Support: an accessible FAQ accordion and placeholder contact cards. Device art must be original shapes built from CSS, with no photos and no real brand marks. Motion: gentle fade-and-rise reveals and one slowly floating device, all off under prefers-reduced-motion. Make clear on the page that the store is fictional and prices are placeholders. Mobile first, accessible, contrast at least 4.5:1, tap targets at least 44px, and a unique title and description on every page. Publish on the free plan.
Affiliate and dealsBuilt with Claude over MCP
Shopee affiliate deals site
Build a 2-page affiliate website for “Deal Nest”, an independent site that shares hand-picked Shopee finds. Pages: Home and Affiliate Disclosure. Direction: Friendly, bold and trustworthy, like a playful deals magazine. Palette: navy #14213D, sunshine yellow #FFC845, cream #FFF9EC, mint #BFEBDD, coral #FF6B5B. Fonts: Poppins for headings, Nunito for body. Shared navy header (logo, links, “See picks” button) and footer (affiliate notice) on every page. Home: a yellow hero with the headline “Good finds, found for you.” and CSS shopping-bag artwork that bobs gently; a “Top picks” grid of 8 product cards (category tag, name, one-line description, simple SVG icon on a coloured block, no prices) with accessible category filter buttons (All, Home, Gadgets, Beauty, Fitness); a “How Deal Nest works” three-step strip (We pick, You check, You decide); and a short honest note about affiliate links. Every product’s buy button must come from one LINKS object at the top of script.js, keyed p1 to p8. Where a link is set, show a “View on Shopee” button with rel="sponsored nofollow noopener noreferrer" that opens in a new tab. Where it isn’t, show a disabled-looking “Link coming soon” button. Disclosure page: how we earn (commission at no extra cost), our promise, prices and availability are set by Shopee sellers, and no affiliation with Shopee. Do not use Shopee’s logo, name styling or colours, do not invent prices, reviews or discounts, and show the affiliate notice on every page. Motion: gentle reveals only, off under prefers-reduced-motion. Mobile first, accessible, contrast at least 4.5:1, tap targets at least 44px, and a unique title and description on every page. Publish on the free plan.
Questions
Good to know.
Can I start for free?
Yes. Build and preview your first website before choosing a paid plan.
Can I use my own domain?
Yes. Bring your domain when you are ready to publish.
What happens when I edit my site?
Every edit is saved as a new version. You can preview it first and go back to an earlier one any time.
Can I use my own AI?
Yes. You can connect your own AI assistant and it can only work in a private preview until you say publish. Setup is on the Use your own AI page.