Composing pages with the exemplar system

Introduction

Generated frontend code is converging. Ask any assistant for a dashboard and you get the same three-card stat row over a faintly rounded card with a neutral gray border. The output is competent and completely homogenized — every product converges on the same mid-2020s SaaS aesthetic because that is where the training distribution sits.

Exemplars are the antidote. Each one is a wireframe plus a theme-agnostic Svelte file under src/components/app/exemplars/ that demonstrates the canonical shape for one page archetype — settings, dashboard, article, browse, detail, marketing, analytics, auth. Before composing a new page, the agent reads the matching exemplar and copies the shape; brand identity and content vary freely on top.

The three layers

The system stacks vertically. The bottom layer is framework agnostic — pure CSS variables and vanilla JavaScript that any consumer can adopt regardless of whether they ship React, Vue, or plain HTML. The middle layer is the full Svelte 5 design system, which enforces native-first composition through compiler-checked primitives. The top layer is the AI infrastructure itself.

1. L0 — Tailwind preset. Tokens, utility classes, and the participation contract. Framework agnostic. No Svelte.
2. L1 — Svelte 5 system. Primitives, actions, singletons. Constraints become enforceable because the compiler can see them.
3. L2 — AI infrastructure. Rule files, exemplars, component registry, skill bundles. The agent's working environment.

Tokens

Semantic CSS variables — colors, spacing, motion, radii. The source of truth for visual physics across all three layers.

Primitives

Native HTML elements wrapped thinly to add layout, labeling, and physics styling. Never reimplementations of browser behavior.

Exemplars

Canonical page archetypes — concrete shapes the agent pattern-matches against before composing.

Authoring a page

A consumer page is a thin composition of shipped primitives. The route file in src/pages/ stays thin — its job is to render a layout shell and mount one page-level Svelte component from src/components/app/. The page-level component owns interactions, form state, and async actions.

<script lang="ts">
  import Sidebar from '@components/ui/Sidebar.svelte';

  const sections = [{
    label: 'On this page',
    items: [
      { id: 'intro', label: 'Introduction' },
      { id: 'setup', label: 'Setup' },
    ],
  }];

  let activeId = $state('intro');
</script>

<div class="docs-layout-toc">
  <main class="docs-main">…</main>
  <Sidebar variant="toc" {sections} bind:activeId />
</div>

Anti-patterns

Most of the system's failure modes show up as well-intentioned shortcuts. Three recur often enough to call out.

Pattern-matching to an exemplar is not copying it verbatim. The shape is the anchor; content, density, and brand profile vary freely on top.

The exemplar is a default, not a law. When the brief diverges ("no sidebar", "full-bleed media") the agent deviates — using primitives correctly, because the exemplar has already established what "correctly" means in this codebase.