2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
This is a three-page website for a small estate agency that sells homes in one seaside town. The home page opens on a full-width harbour photograph with a compact search bar for type, bedrooms and maximum price. Below it come a row of new listings, a short guide to the town's four neighbourhoods, market figures that count up as they scroll into view, a strip of recently sold homes, agent cards and a valuation form. The listings page has a grid of ten homes photographed from real CC0 sources, with filter chips, selects, a sort menu and a show-sold toggle. Every filter writes to the URL, so a filtered view can be bookmarked or shared. Each home has its own detail page, chosen with a query parameter: a photo grid that opens a keyboard and swipe lightbox, a key-facts table, a floor plan and a neighbourhood map both drawn in SVG, a mortgage calculator that updates as you type, and a viewing-request form that validates in the browser and shows a confirmation without sending anything. The look is calm and editorial. The background is warm sand and the text is a deep sea-ink, with one weathered teal accent and a muted coral for status badges. Headings are set in Fraunces, body text in Instrument Sans, and small labels and figures in IBM Plex Mono. Agents get typographic monograms instead of portraits, so the site needs no photos of people. It suits independent agents, small brokerages, property developers selling a single scheme, and holiday-home specialists. To adapt it, change the brand, town, region and currency, then edit the single content file that holds every listing, price and line of copy. The photos, floor plans and map coordinates live in that file too.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Coastal Real Estate Agency Website
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A three-page static website for [BRAND], an independent estate agency that sells homes in one coastal town, [TOWN], on [REGION]. Pages: home (index.html), all listings with filters and sort (listings.html), and a listing detail page selected by query parameter (listing.html?id=<listing-id>). Ten invented homes with real CC0 exterior photographs, shared AI-generated interior photographs, SVG floor plans, an SVG neighbourhood map, a mortgage calculator, a client-side viewing-request form, agent cards with monograms, market stats, recently sold homes and a valuation call to action. All copy and all listing data live in one content file, src/content.ts. The copy below is written for the default variable values; if the variable values differ, rewrite every piece of copy, listing name, street and neighbourhood so it fits the new values, keeping the same structure, lengths and numbers of items.
- Audience: People buying or selling a home in [TOWN]: local families moving up or down, second-home buyers from the city, and owners who want a valuation before they decide to sell.
- Goal: Make visitors browse and filter homes, open a listing, request a viewing, or book a free valuation. Viewing requests and valuation requests are the two conversions.
- Tone: Calm, local and specific, like an agency that has worked the same streets for twenty years. Short sentences, concrete numbers, no hype words (no 'stunning', 'dream home', 'luxury living'). Prices and facts are always exact.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react 18 (MIT), react-dom 18 (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource/instrument-sans (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1), vite 5 + @vitejs/plugin-react (MIT), tailwindcss 3.4 + postcss + autoprefixer (MIT), typescript (Apache-2.0)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with npm create vite@latest (React + TypeScript template). package.json script build = tsc -b && vite build.
- Three HTML entry files at the project root: index.html, listings.html, listing.html. Each one loads its own entry: src/pages/home.tsx, src/pages/listings.tsx, src/pages/listing.tsx. Each sets <title>[BRAND] · Homes for sale in [TOWN]</title> (the listing page replaces it at runtime with '<street address> · [BRAND]') and links public/favicon.svg.
- vite.config.ts: base './', build.sourcemap false, build.rollupOptions.input = { index: 'index.html', listings: 'listings.html', listing: 'listing.html' }. No router library: each page is a separate React root.
- tailwind.config.ts: content ['./*.html', './src/**/*.{ts,tsx}']; extend colors with sand #F6F1E9, shell #FFFDF9, ink #13262F, drift #6B6359, line #E2D9CB, teal #2F6F6A, tealdark #245652, coral #D9694A, foam #DCE8E4, sea #BFD5D8; fontFamily display ['Fraunces Variable', 'Georgia', 'serif'], sans ['Instrument Sans', 'system-ui', 'sans-serif'], mono ['IBM Plex Mono', 'ui-monospace', 'monospace']; maxWidth container 1240px.
- src/main.css: @tailwind base/components/utilities, import the Fontsource CSS (fraunces variable; instrument-sans 400, 500, 600; ibm-plex-mono 400, 500) from src/fonts.ts, body bg-sand text-ink font-sans antialiased, keyframes for the hero zoom and lightbox fade, and a @media (prefers-reduced-motion: reduce) block that disables all animations and transitions.
- src/content.ts holds every string, the agency details, the four agents, the ten listings (with photo paths, gallery, plan id, map coordinates, description and features), the points of interest for the map, the market stats and the testimonials. Components never contain hard-coded copy.
- Shared components in src/components/: Header, Footer, ListingCard, StatusBadge, FactsRow, Reveal (IntersectionObserver wrapper), CountUp, Lightbox, FloorPlan, NeighbourhoodMap, MortgageCalculator, ViewingForm, ValuationBand, Monogram, FilterBar.
- src/lib/format.ts: formatPrice(n) uses Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }) prefixed with [CURRENCY] (e.g. $1,185,000); formatCompact(n) gives $1.19M or $705k for chart labels.
- src/lib/params.ts: read and write URLSearchParams with history.replaceState so filters survive reload and share; no page reloads on filter change.
- Saved homes: a heart button on each card toggles the listing id in localStorage key 'saved-homes'; the header shows a small count badge next to a heart icon when at least one home is saved.
- Download every image listed in Assets into public/images/ with curl before building, and create ASSETS.md at the project root listing each file's path, source URL, author and license.
## Variables
- [BRAND] — Agency name (default: "Hartwell & Rye"). Invented agency name; shown as a serif wordmark.
- [TOWN] — Town (default: "Port Ellery"). The one town the agency covers. Invent it; do not use a real town.
- [REGION] — Coast or region (default: "the Calder Coast"). Used in the hero subline and footer.
- [CURRENCY] — Currency symbol (default: "$"). Prefix for every price; areas stay in sq ft for $ and switch to m² for other currencies.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/coastal-real-estate-agency-website in the footer (default: yes; delete this line to remove it)
The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
Join Pro early access →DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Coastal Real Estate Agency Website"
colors:
sand: "#F6F1E9"
shell: "#FFFDF9"
sea_ink: "#13262F"
driftwood: "#6B6359"
hairline: "#E2D9CB"
tide_teal: "#2F6F6A"
tide_teal_dark: "#245652"
coral: "#D9694A"
sea_foam: "#DCE8E4"
sea: "#BFD5D8"
typography:
display_wordmark_h1_h3_prices_on_detail_page_big_stats_fraunces_variable_with_font_variation_settings_opsz_96_on_headings_40px_and_opsz_24_below_letter_spacing_0_02em_on_h1_h1_64_68_desktop_40_44_mobile_h2_44_50_desktop_32_38_mobile_h3_24_30: { family: "Fraunces", weights: [400, 500, 600] }
text_body_17_28_ui_15_22_buttons_15_weight_600_nav_15_weight_500: { family: "Instrument Sans", weights: [400, 500, 600] }
labels_and_figures_eyebrow_labels_12px_uppercase_letter_spacing_0_12em_facts_rows_plan_dimensions_map_labels_calculator_outputs_badge_text: { family: "IBM Plex Mono", weights: [400, 500] }
spacing: "8px base unit. Container max-width 1240px, side padding 20px mobile, 40px desktop. Sections are 112px apart on desktop and 72px on mobile. Card grid gap 28px desktop, 20px mobile. Card inner padding 20px. Header height 72px desktop, 64px mobile."
radius: "Cards and images 14px (photo inside a card is rounded only at the top); buttons and inputs 10px; chips and badges 999px; the hero search bar 16px; lightbox image 6px."
---
# Coastal Real Estate Agency Website — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Sand** `#F6F1E9` — Page background
- **Shell** `#FFFDF9` — Cards, filter bar, form fields, sidebar
- **Sea ink** `#13262F` — Body text, headings, dark bands (stats, valuation, footer), Sold badge, lightbox backdrop at 94% opacity
- **Driftwood** `#6B6359` — Secondary text, captions, fact labels
- **Hairline** `#E2D9CB` — 1px borders, table rules, dividers, floor-plan inner walls
- **Tide teal** `#2F6F6A` — Primary buttons, links, active chips, For sale badge, focus rings, principal bar, map streets highlight
- **Tide teal dark** `#245652` — Button hover and pressed states
- **Coral** `#D9694A` — Under offer badge, listing pin on the map, saved heart fill, interest bar in the calculator
- **Sea foam** `#DCE8E4` — Map land, neighbourhood chips, floor-plan room fill on hover, empty-state art
- **Sea** `#BFD5D8` — Map water, floor-plan outer glazing marks
## Typography
- **Display: wordmark, H1–H3, prices on detail page, big stats. Fraunces Variable with font-variation-settings 'opsz' 96 on headings ≥ 40px and 'opsz' 24 below; letter-spacing -0.02em on H1. H1 64/68 desktop, 40/44 mobile; H2 44/50 desktop, 32/38 mobile; H3 24/30.** — Fraunces (OFL), weights 400/500/600. Self-host the font files.
- **Text: body 17/28, UI 15/22, buttons 15 weight 600, nav 15 weight 500.** — Instrument Sans (OFL), weights 400/500/600. Self-host the font files.
- **Labels and figures: eyebrow labels 12px uppercase letter-spacing 0.12em, facts rows, plan dimensions, map labels, calculator outputs, badge text.** — IBM Plex Mono (OFL), weights 400/500. Self-host the font files.
## Spacing & shape
- Spacing: 8px base unit. Container max-width 1240px, side padding 20px mobile, 40px desktop. Sections are 112px apart on desktop and 72px on mobile. Card grid gap 28px desktop, 20px mobile. Card inner padding 20px. Header height 72px desktop, 64px mobile.
- Radius: Cards and images 14px (photo inside a card is rounded only at the top); buttons and inputs 10px; chips and badges 999px; the hero search bar 16px; lightbox image 6px.
## Motion
- Reveal on scroll: every section block fades from opacity 0 and translateY(16px) to 0 over 600ms cubic-bezier(0.2, 0.7, 0.2, 1) when 15% visible; children in grids stagger by 80ms; runs once.
- Hero: background image scales from 1.06 to 1 over 1600ms ease-out on load; headline and search bar fade up 200ms and 350ms after load.
- CountUp: market stat numbers count from 0 to their value over 1200ms easeOutCubic when first visible, using tabular numerals.
- Cards: on hover the photo scales to 1.04 over 500ms and the card gains shadow 0 12px 32px rgba(19,38,47,0.10) and translateY(-2px) over 250ms.
- Filtering: when results change the grid cards fade in from opacity 0 over 250ms with 40ms stagger; the result count updates instantly.
- Lightbox: backdrop fades in over 200ms, image fades and scales from 0.98 to 1 over 250ms; switching photos crossfades over 200ms.
- Floor-plan tab switch crossfades the SVG over 200ms; hovering a room fills it with Sea foam over 150ms.
- Calculator: the principal/interest bar segments animate their width over 300ms when values change.
- Form confirmation replaces the form with a 250ms fade and a check icon that draws its stroke over 400ms.
- prefers-reduced-motion: no transforms, no count-up (show final numbers), no hero zoom; only instant state changes.
## Imagery
Real photographs make the agency feel like a working business. Ten exterior photos of real but anonymous houses (CC0 / public domain, from Flickr and Wikimedia Commons), one CC0 bay photo for the town section, and six AI-generated photos hosted for this template: the harbour hero and five interiors (living room, kitchen, bedroom, bathroom, garden room) shared by every listing's gallery. Listing card photos are cropped 4:3 with object-fit cover and object-position center 60%. Everything else is drawn in code: floor plans, neighbourhood map, empty-state house outline, monograms, the price-by-area bar chart and the favicon (a teal rounded square with a white saltbox-roof house outline, 32×32 SVG). No people in any image, and no visible signs, house numbers or brand names.
## Tone
Calm, local and specific, like an agency that has worked the same streets for twenty years. Short sentences, concrete numbers, no hype words (no 'stunning', 'dream home', 'luxury living'). Prices and facts are always exact.
---
— Prompt by VibeFather · https://vibefather.ai/t/coastal-real-estate-agency-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown