One prompt. A finished website.

# Build and launch my website on 9d9

You're going to design, build and launch a website for me, then help me take ownership of it. Work like a senior designer and front-end engineer at a top independent studio: opinionated, specific, fast, and allergic to anything that looks like a template.

You'll do it in five phases. Phase 1 needs me, and so does one click at the end. After I answer, carry on all the way to a live site without stopping to ask permission.

---

## Before you start: check your tools

You need to be able to **run terminal commands** and **reach the internet** (for example, run `node -v` and `curl -sI https://api.9d9.dev/health`).

- **If you can:** go ahead.
- **If you can't** (some chat apps can't run commands), still do the interview and the design work, then use the **paste fallback**:
  - Build the whole site as **one self-contained `index.html`**: all CSS and JS inline, icons and illustrations as inline SVG, no other local files. Sections can be anchors on one long page.
  - Give it to me in **one** code block, then tell me: *"Open https://app.9d9.dev/paste, paste this code, name your site and click Publish. Then confirm with your email, and it goes live."*
  - Skip phases 3 and 4: the paste page walks me through publishing and claiming.
  - **For later changes,** give me the complete updated file again. I paste it at the same page while signed in and pick my site under **Publish to**.

---

## Phase 1: Interview me (one message, then wait)

Ask everything in **one** message: short, friendly, numbered, no jargon. Tell me I can answer in a few words, skip anything, or say "you decide". For each question, suggest the default you'd pick so I can just say "yes".

1. **The business:** name, what you do, and where (one or two sentences).
2. **The goal:** who the ideal customer is, and the **one** thing a visitor should do (call, book, buy, visit, email, sign up).
3. **What already exists:** a current website, Google Maps listing, Instagram or other links I can learn from. If I give you links, read them for facts, offerings and tone of voice.
4. **The facts:** address, hours, phone, email, services, menu or prices, team, real testimonials, anything else the site should say.
5. **The feel:** three words for how it should feel, or sites I admire. Any colors, fonts or logo I already have.
6. **Photos:** whether I have any. If so, I'll attach them or tell you where they are.
7. **Pages:** propose a sitemap for my kind of business (often a strong single page plus a few supporting pages) and ask if it's right.
8. **The address:** propose a short web address, `something.9d9.dev`. I can add my own domain later. Also ask whether I already have a 9d9 account; if so, I can give you a key and you'll deploy straight into it.

When I answer, reply with a short plan of 15 lines at most:
- the sitemap
- a section outline for each page
- the design direction: a type pairing, a palette with hex codes, the layout idea
- the motion concept, with **one signature moment**

Then start building in the same turn. Only stop again if something essential is truly missing, like the business name.

---

## Phase 2: Design and build

**First, reserve the site.** Run the `init` step from phase 3 (or step 1 of Option B) now. Then you know the `org_id` and the final address before you write a line of code.

### The quality bar
This must look like a custom site from a top studio, not an AI template. Specifically:

- **Typography leads.** Pair a distinctive display face with a highly legible text face (Google Fonts with `display=swap`, or self-hosted `.woff2`). Use fluid sizes with `clamp()`, tight headline tracking, comfortable 60–75 character line lengths, and a real type scale.
- **Layout with intent.** Use an editorial grid, generous whitespace, deliberate asymmetry and varied section rhythm. Avoid stacking identical centered blocks. Every section should have one idea and one focal point.
- **A real palette.** Build it from my brand, or derive one that suits the business: 1–2 neutrals, one confident accent, and WCAG AA contrast everywhere. No default purple-blue gradients, no glassmorphism for its own sake.
- **Imagery.** Use my photos when I have them: crop with intent, resize (max ~2000px), compress, serve modern formats where you can, and always set `width`/`height` and `loading="lazy"` below the fold. Without photos, make bespoke visuals: SVG illustration, typographic compositions, patterns, gradient meshes or CSS art, or generated images if you're able to make them. Only use stock photography whose license allows it (e.g. Unsplash, Pexels), and only specific, on-brief images. Download it into the site; never hotlink.
- **Icons:** one consistent SVG icon set, inlined. No emoji as icons.
- **Copy.** Write real, specific, confident copy in my voice. Lead with what's distinctive about the business. Never use "Welcome to our website", lorem ipsum or filler adjectives. **Never invent** reviews, awards, statistics, years in business or credentials. If a fact is missing, write a clearly bracketed placeholder like `[Phone number]` and list it for me at the end.

### Motion
Motion should make the site feel crafted and alive, not busy.

- **Entrance choreography** on the hero: staggered reveals of headline, subhead and call to action, roughly 600–900ms with expressive ease-out curves.
- **Scroll reveals** for sections and cards using `IntersectionObserver`, done once and subtly (fade plus 12–24px of travel).
- **One signature moment** that people remember. Choose what fits the brand: a scroll-driven parallax or sticky "scrollytelling" section, a kinetic headline with split-text reveal, an infinite marquee, an animated SVG line drawing, counters that tick up, a hover-reactive gallery, a cursor-following spotlight.
- **Micro-interactions:** button and link hovers, focus states, a nav that condenses on scroll, smooth anchor scrolling.
- **Multi-page sites:** enable cross-document view transitions (`@view-transition { navigation: auto; }`) so page changes glide.
- **Rules:**
  - Animate only `transform` and `opacity`, and keep everything at 60fps with zero layout shift.
  - Content must be fully visible without JavaScript: only hide-then-reveal when a `js` class is present on `<html>`.
  - Honor `prefers-reduced-motion: reduce` by turning non-essential motion off.
  - Prefer CSS and a little vanilla JS. A small library (e.g. GSAP or Motion) is fine if the signature moment needs it: bundle it, or load a pinned version from a reputable CDN.

### Technical spec
- **Static output only.** 9d9 serves static files from the edge: no server code, no backend, no environment variables at runtime. Hand-written HTML/CSS/JS is ideal. A static site generator (e.g. Astro with static output) is fine if you prefer it. Either way, end with a single folder (e.g. `dist/`) with `index.html` at its root.
- **Routes:** `about/index.html` serves at `/about`. Include a designed `404.html` that matches the site.
- **Every page:**
  - unique `<title>` and meta description
  - Open Graph and Twitter tags
  - `lang` attribute and `theme-color`
  - an SVG favicon
- **Site-wide:**
  - `robots.txt` and `sitemap.xml` using the site's address
  - for a local business, `LocalBusiness` JSON-LD with the real address, hours and phone
  - if you can render images, a 1200×630 `og.png`
- **Accessibility:**
  - semantic landmarks, one `h1` per page, logical heading order
  - meaningful alt text, labelled form fields
  - visible `:focus-visible` styles and a skip link
  - keyboard-operable menus
- **Performance** (aim for Lighthouse 95+ on mobile):
  - preload the hero font
  - no render-blocking bloat; keep total JS small
  - optimize images
  - design mobile-first (check 375px) and make it sing on large screens too
- **Contact form:** post to 9d9's built-in endpoint, so submissions land in my dashboard. Replace `ORG_ID` and `SITE_URL` with the values from the reservation step:
  ```html
  <form action="https://api.9d9.dev/contacts/ORG_ID/submit" method="POST">
    <!-- your fields: name, email, phone, message… -->
    <input type="hidden" name="_source" value="contact-form">
    <input type="hidden" name="_redirect" value="SITE_URL/thanks/">
    <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px">
  </form>
  ```
  - Progressively enhance it: intercept submit, `fetch()` the same URL with a JSON body (the endpoint allows any origin), and show an inline success state.
  - Keep the redirect and a designed `/thanks/` page as the no-JS fallback.
  - Leave `_honeypot` empty; it's the bot trap.
- **Analytics:** add 9d9's first-party analytics to every page's `<head>`. No Google Analytics or other trackers unless I ask.
  ```html
  <script src="https://api.9d9.dev/beacon" data-org="ORG_ID" async></script>
  ```

### Review your own work before deploying
1. Serve the folder locally (e.g. `npx -y serve dist` or `python3 -m http.server -d dist`). If you have a headless browser, look at it at 375px, 768px and 1440px and fix what you see.
2. Check:
   - no console errors
   - no broken links or images
   - no leftover lorem
   - contrast holds
   - reduced motion works
   - the page reads well with JavaScript off
3. Ask yourself honestly: *would a top studio ship this?* If a section is generic, redesign it before moving on.

---

## Phase 3: Deploy to 9d9

9d9 hosts the site on a global edge network. **No account is needed to deploy.** Until I claim the site with my email, it's private: its address shows "Not published yet", and it goes live the moment I claim it.

**If I gave you a key** from my 9d9 dashboard, run the `set-key` command it came with (`npx -y @9d9dev/cli@latest set-key ak_… --org=org_…`) and skip straight to `deploy`. You won't need `init` or a claim step.

### Option A: the 9d9 CLI (needs Node 18+)

**Before you build**, reserve the site so you know its `org_id` (for the form and analytics) and its final address:
```bash
npx -y @9d9dev/cli@latest init --name "Business Name" --slug business-name
```
This prints the `org_id`, the `site_url`, and a **claim link** for me. It saves a deploy key to `.9d9.json` in the project folder, and the CLI adds that file to `.gitignore` when there is one.

**After you build**, deploy, and run this again after every change:
```bash
npx -y @9d9dev/cli@latest deploy ./dist
```
Each deploy is atomic and live in seconds.

### Option B: plain HTTP (if Node isn't available)

```bash
API=https://api.9d9.dev
# 1. Create the site once. Save the JSON response: it has org_id, site_url, api_key, claim_url.
curl -sS -X POST $API/v1/sites -H 'content-type: application/json' \
  -d '{"name":"Business Name","slug":"business-name"}'
# 2. Start a deploy (use the api_key and org_id from step 1). The response has deploy.id.
curl -sS -X POST $API/v1/sites/ORG_ID/deploys -H "authorization: Bearer API_KEY"
# 3. Upload every file, with its path relative to the site folder.
cd dist && find . -type f | while read -r f; do
  curl -sS -X PUT "$API/v1/sites/ORG_ID/deploys/DEPLOY_ID/files/${f#./}" \
    -H "authorization: Bearer API_KEY" --data-binary "@$f"; done
# 4. Seal the deploy (an empty body builds the file list from your uploads), then go live.
curl -sS -X POST $API/v1/sites/ORG_ID/deploys/DEPLOY_ID/manifest \
  -H "authorization: Bearer API_KEY" -H 'content-type: application/json' -d '{}'
curl -sS -X POST $API/v1/sites/ORG_ID/deploys/DEPLOY_ID/activate -H "authorization: Bearer API_KEY"
```
For later changes, repeat steps 2–4 with the same key.

### Deploy rules
- **One site per business.** Reuse `.9d9.json`, or the step 1 response. Never create a second site to push an update.
- **Treat the API key like a password.** Don't show it to me, don't commit it, don't put it in the site's files.
- **Limits:** each network can create one site a day without an account. If `init` or step 1 fails because of a limit, the error says what to do. Tell me plainly and ask me to:
  1. sign in at https://app.9d9.dev
  2. create a site (**New site**)
  3. open its **Settings**, click **New key**, and paste you the `set-key` command it shows

  Then run that command and deploy. Organizations that need more can request a higher limit at https://app.9d9.dev/limits.
- **Before I claim it,** confirm the deploy succeeded from the output. The CLI says "Uploaded", and the plain-HTTP `activate` step returns `"ok": true`. The address will show "Not published yet" until I claim it; that's expected.

---

## Phase 4: Tell me it's ready (keep it short and warm)

Send me:
1. **The address** it will live at, plus one sentence on the design idea and the signature moment.
2. **How to publish it:**
   > Your site is built and uploaded. It goes live the moment you claim it (it's free):
   > 1. Open **[claim link]**
   > 2. Enter your email
   > 3. Click the link in the email we send you. You'll land back on the claim page, signed in. Click **Claim and publish**.
   >
   > It takes about 30 seconds. Unclaimed sites are deleted after 7 days.
3. **What claiming unlocks:**
   - the site goes live at its address and search engines can find it
   - form submissions show up under **Contacts**
   - visitor stats show up under **Analytics**
   - I can connect my own domain under **Domains** (or ask you to)
4. **Any `[placeholders]`** still waiting on real information from me.
5. **An invitation:** "Want changes? Just tell me what to change. I'll update it and redeploy in seconds." There's no CMS to learn: you are how I edit my site.

---

## Phase 5: After I claim it

- When I say I've claimed it, confirm with `npx -y @9d9dev/cli@latest claim`. It reports whether the site has been claimed.
- **Then check it live.** Open the URL (`curl -sI` for a 200, or the browser if you have one), click through a couple of pages, and tell me it's up. If something's off, fix it and redeploy.
- From then on, handle my change requests the same way: edit, review, deploy, check live, reply in a sentence or two.
- Remind me once to keep this project folder (or at least `.9d9.json`). It's how any future AI session can keep updating the same site. If it's ever lost, I can make a new key in the 9d9 dashboard under **Settings** and hand it over with `npx @9d9dev/cli set-key ak_… --org=org_…`.
- **Custom domain:** tell me to open **Domains** in the dashboard and add it there. You can also attach it for me if you have the 9d9 MCP server. I'll get one DNS record to add at my registrar; it verifies on its own.

Now start with phase 1.

---

My notes (optional, anything you already know about the business):