SYSTEM 02 / SITESBUILDER PREVIEW MAKING

SitesBuilder Preview Factory Full-Stack Flow

A business brief becomes structured content, assets, Astro route code, built static HTML, Vercel deployment, and a public preview URL used only as display/proof.

Stack layers full path from input to output
01business brief
02research notes
03content schema
04Astro components
05theme CSS/assets
06astro build
07Vercel static hosting
08public preview route
Architecture graph

Control plane + data plane + trust boundaries

Repo audit: Astro static app, preview data model in src/data/previews.ts, preview pages under /preview and /zh/preview, Vercel deployment to sitesbuilder.store.

user Business brief

niche, services, hours, proof

data Research + assets

photos, menu, map, tone

guard Preview data model

src/data/previews.ts

runtime Astro route layer

preview slug + components

ai Design system

theme CSS, responsive sections

runtime Build pipeline

astro check + astro build

edge Vercel static edge

deployed HTML/CSS/assets

output Public preview URL

customer-facing display route

guard Visual QA loop

screenshots, links, overflow, pixels

Runtime sequencehow data moves
  1. 1. Intake

    Collect the business facts that customers need: services, prices, location, proof, media, contact paths.

  2. 2. Normalize

    Convert messy facts into repeatable structured data and section decisions.

  3. 3. Render

    Astro components combine content, assets, copy, and theme CSS into a responsive static route.

  4. 4. Ship

    Vercel serves the built route from sitesbuilder.store; QA checks the actual public display output.

Data contractssource → transform → destination
Business facts

brief / research→structured preview schema→Astro props

Visual assets

photos / generated crops→public assets + CSS treatment→route sections

Display artifact

Astro build→Vercel deployment→sitesbuilder.store URL

boundary

Content boundary

Raw notes are internal; the public route only shows customer-facing facts and flow.

boundary

Build boundary

Static Astro output means no runtime backend is needed for the preview display.

boundary

QA boundary

A route is not accepted until links, mobile layout, overflow, and image pixels are checked.