How Waveform designs

Most AI site builders generate a page once and hope it looks right. Waveform treats design as a measurement problem: it renders what it builds, compares the result against a visual target, and refines until the difference is small. This page explains the pipeline in plain language.

1. Candidates

From your creative brief, Waveform generates multiple design directions — different palettes, typography, and layout languages — as visual mockups, not just text descriptions.

2. Judging

A vision model evaluates the candidates against your brief: does this direction fit the audience, the voice, the mood you asked for? The winner becomes your site's theme — committed as real design tokens (colors, fonts, spacing) that every page inherits.

3. Page references

For each planned page, Waveform produces a visual reference — what the finished page should look like — in the winning direction. These references are the targets the build is measured against.

4. Staged refinement

Each page is built through an iterative loop:

1. Draft — generate initial page code (several drafts; the closest one to the reference wins).
2. Render — compile and screenshot the actual page.
3. Compare — measure the difference against the reference, pixel-by-pixel and region-by-region.
4. Refine — propose targeted edits; keep a change only if the measured difference shrinks.

The loop runs in five coarse-to-fine passes — structure → layout → typography → color → detail — so big problems get fixed before small ones, within a bounded budget per page.

5. Editable code, not a flat export

The refined page is decomposed into a normal, editable Astro project: per-section components, a page model, shared theme CSS. Fidelity from the measuring loop is preserved, and everything stays editable through chat — sections, content, collections, all of it.

6. Quality gate

After major builds, an automatic review scores the site against your creative brief — content quality, design coherence, uniqueness ("does this look AI-made?") — and deterministic checks catch fabricated details like placeholder phone numbers or example.com emails before they can ship.

Imports use the same engine

When you import an existing site, the captured pages become the references and the same measuring loop reconstructs them as editable code. That's why imports come out faithful rather than approximate.

Honest expectations

The refinement loop optimizes within budgets — it stops when fidelity is high or the budget is spent, whichever comes first. Complex interactive widgets (embedded maps, custom animations) may need a follow-up request after the initial build. The measuring loop gets you very close; the chat gets you the rest of the way.