Every time someone types a business description into NoDevZone and hits generate, something quite complex happens in the background — in about 90 seconds. This post explains exactly what that is.

The problem with templates

Most AI website builders work like this: they pick a template, swap in your text, and call it "AI-generated." The result looks like every other site built on that platform.

NoDevZone works differently. There are no templates. Every site starts from a blank Gutenberg canvas and is built algorithmically from a set of design rules we call the Design Mandate.

What is the Design Mandate?

The Design Mandate is a structured prompt — roughly 8,000 tokens — that describes every visual and structural decision for a specific site. It's built in Python before any AI call is made, based on your input.

It contains six parts:

Part A — Brand Identity: industry, business name, tone (e.g. "professional" vs "playful"), target audience.

Part B — Color System: a 4-color palette (ink, bg1, bg2, accent) generated algorithmically and validated against WCAG AA contrast rules. Every palette is checked with real luminance math — not guesses.

Part C — Typography: a font trio (heading / body / accent) chosen from 80+ Google Fonts, filtered by industry archetype and verified to include latin-ext character support.

Part D — Layout Blueprint: the page structure — which sections appear, in what order, and with what variant (e.g. hero with full-width image vs hero with split layout).

Part E — Design Constraints: border radius style (sharp / soft / rounded), section divider shapes, image treatment, spacing system.

Part F — Content Rules: what text goes where, how headlines are structured, what CTAs appear.

How palettes are generated

Color is where most AI tools fail. Asking an LLM to pick colors gives you random hex codes that may look fine in isolation but fail accessibility tests — or just look generic.

We take a different approach. Our palette system works like this:

  1. Based on your industry and archetype (e.g. "luxury", "bold", "earthy"), we select from 20 pre-audited palette groups
  2. Within each group, we pick a palette where ink has ≥4.5:1 contrast against all backgrounds
  3. We verify accent has ≥3.0:1 contrast against bg1 and bg2
  4. We ensure the two background colors have contrasting color temperatures (one warm, one cool) so sections feel distinct

If a palette fails any check, it's replaced automatically. No LLM involvement in this step — it's pure math.

How Gutenberg blocks are assembled

Once the Design Mandate is ready, it goes to Gemini Flash with a strict prompt that specifies:

  • Which blocks are allowed (a whitelist of ~40 Gutenberg block types)
  • Required attributes for each block type
  • Exact JSON format for the output

The AI returns raw Gutenberg block JSON — not HTML, not React, actual WP block markup. That JSON then goes through several validation passes:

  1. Schema validation — required attributes present, no unknown block types
  2. CSS class sanitization — invented class names are stripped, replaced with our design system classes
  3. Healer passes — spacing attributes synced, cover block gradients normalized, shape dividers injected

The result is uploaded directly to WordPress via WP REST API and activated as the site's homepage.

What makes each site unique

Several things vary between every generation, even for the same industry:

  • Palette: 20+ groups, each with multiple palettes
  • Font trio: 6+ combinations per archetype
  • Section order and variants: hero layout, stats style, feature card arrangement
  • Shape dividers: organic vs geometric, amplitude/frequency variations
  • Blob shapes: for organic industries, image and card blobs are randomized from 12 variants

The result is that two pizza restaurants generated on the same day will have different colors, different fonts, different layouts — and both will be WCAG AA compliant.

What's next

We're currently working on:

  • Multi-page generation — generating /about, /services, and /contact pages from the same mandate
  • Live preview — seeing the site before it's deployed to WordPress
  • Style transfer — uploading a screenshot of a site you like and extracting its design DNA

If you want to see the system in action, the generator is free to try — no account required for the first site.