---
chain-id: 9
name: Greenfield end-to-end (Path A · Quick)
path: A
status: live
prompts: [00, 01, 02, 03, 04, 05, 06, 07, 09, 08, 10]
inputs: 3 brand adjectives (+ optional brand colors / fonts / domain descriptions)
outputs: output/tokens.css + output/foundation.css + output/composite.css + output/patterns.css + output/chrome.css + output/domain.css + output/section-templates.css + output/design-system-spec.html
documented-in: Ch20 — Path A Pipeline
---

# Chain 9 — Greenfield End-to-End

The complete Path A pipeline: from three brand adjectives to a published design system spec page. No Figma file required. No existing precedent. You provide adjectives, optionally brand colors and fonts, and optionally domain component descriptions — the chain produces a full token system, component library, and published reference page.

**When to use:** Starting from zero. No Figma file. MVP validation. First-screen velocity matters more than artifact fidelity. You want to see a working design system in one session.

**Expected runtime:** 45–90 minutes for the full chain, depending on iteration at each checkpoint. Each step can be stopped and resumed.

**What you bring:**
- 3 brand adjectives (required) — the more specific, the better. See Prompt 00 for the elimination test on low-signal words.
- Primary brand hex (optional, BYOC) — your brand's primary color
- Accent hex (optional, BYOC) — secondary accent if distinct from primary
- Display and body font families (optional) — brand fonts with Google Fonts or CDN URLs
- Domain component descriptions (optional) — up to 5 product-specific components, 1–2 sentences each

---

## Step table

| Step | Prompt | What lands | Checkpoint |
|---|---|---|---|
| 1 | `00-archetype-from-adjectives.md` | Archetype recommendation + per-dimension reasoning | Confirm or override the archetype |
| 2 | `01-tokens-from-spec.md` | `output/tokens.css` — full color, spacing, radii, motion token layer | Review palette + WCAG table |
| 3 | `02-typography-scale.md` | `output/tokens.css` updated with type scale + brand fonts (if supplied) | Review type scale rendering |
| 4 | `03-foundation-components.md` | `output/foundation.css` — Button, Input, Badge, Card, Alert, Dialog, Table, Form | Visual + a11y review |
| 5 | `04-composite-components.md` | `output/composite.css` — Modal, Drawer, Popover, Tabs, Accordion, Combobox | Composition review |
| 6 | `05-pattern-components.md` | `output/patterns.css` — archetype-aware page patterns | Pattern review |
| 7 | `06-chrome.md` | `output/chrome.css` — Nav, Header, Footer, Sidebar, Command palette | Chrome review |
| 8 | `07-domain-components.md` | `output/domain.css` — your product-specific components | Domain review |
| 9 | `09-section-templates.md` | `output/section-templates.css` — full-page layout templates per archetype | Template review |
| 10 | `08-spec-page.md` | `output/design-system-spec.html` — self-contained published reference | Open in browser, verify all sections |
| 11 | (post-render) Append publishing footer in `<footer>` | Branded HTML | Confirm footer + commit |
| 12 (optional) | `10-layer-3-extraction.md` | `output/tokens-layer-3.css` — component-level tokens from repeated values | Run after components stabilise |

---

## Step-by-step walkthrough

### Step 1 — Choose your archetype (Prompt 00)

**What to paste:** Nothing. Prompt 00 runs from your inputs only.

**What to provide:** Three brand adjectives. Product type (optional). Use case notes (optional — e.g., "users sit for 4-hour sessions", "thumb-zone primary").

**The elimination test:** Prompt 00 flags low-signal adjectives ("modern", "clean", "intuitive") — words any competitor could claim. If two of three flag as low-signal, the prompt stops and asks for sharper words before proceeding.

**At the checkpoint:** Review the recommendation block. Pay attention to the "per-dimension inference" section — it shows which adjective drove each design dimension. If any inference feels wrong, override it and state the corrected archetype before proceeding.

**BYOC note:** You don't need to supply brand colors at this step. Answer the BYOC question in Step 2.

---

### Step 2 — Generate tokens (Prompt 01)

**What to paste:**
1. `specs/governance.spec.md`
2. `specs/[confirmed archetype].spec.md`

**BYOC branching (Q1):**
- No → palette derived from archetype spec + adjectives
- Yes → supply primary hex (required) + accent hex (optional)

**Font branching (Q2):**
- No → archetype defaults apply
- Yes → supply font names and CDN URLs (applied in Step 3)

**At the checkpoint:** WCAG table must show no FAIL rows. If BYOC primary fails contrast, accept the prompt's adjusted shade — do not override. Proceeding with a contrast failure will cause all downstream component audit failures.

---

### Steps 3–9 — See Chain 3 walkthrough

Steps 3–9 run the same prompts as Chain 3. For full checkpoint detail, common failures, and what to check at each step, refer to [chain-3-component-generation.md](chain-3-component-generation.md).

**Key decision at Step 8 (domain components):** If you have no domain components yet, skip Step 8 and proceed to Step 9. Domain components can be added later by re-running Prompt 07 and appending to `output/domain.css`.

**Key decision at Step 9 (section templates):** Section templates are page-level layout compositions. They are useful immediately for landing pages, dashboard shells, and marketing sections. Skip this step if your current scope is component-only.

---

### Step 10 — Publish the spec page (Prompt 08)

See [chain-7-spec-page-publish.md](chain-7-spec-page-publish.md) for the full walkthrough.

**In claude.ai:** Request an Artifact preview before saving. Review all sections in the Artifact panel before writing to `output/design-system-spec.html`.

---

### Step 11 — Post-render footer

Append the credit row inside the `<footer>` element before the closing tag. See Chain 7 Step 2 for the exact markup.

---

### Step 12 — Layer 3 extraction (optional, after components stabilise)

Run `10-layer-3-extraction.md` after at least 2–3 sprint cycles of working with the generated components. Before that, the patterns are too new to have meaningful repetition.

---

## Stopping and resuming

Chain 9 is designed to be stopped and resumed. At every checkpoint, the chain runner saves state to `output/chain-state.md`. When you restart:

1. Open Claude Code or claude.ai
2. Paste `chain.md`
3. The chain runner reads `output/chain-state.md` and resumes from where you stopped

All previously generated files (`output/tokens.css`, `output/foundation.css`, etc.) persist between sessions. You never re-run a completed step unless you explicitly want to regenerate.

---

## Scope control

You do not have to run all 12 steps in one session. Match the scope to your current need:

| Scope | Run steps | Output |
|---|---|---|
| Tokens only | 1–3 | `tokens.css` ready for engineering to consume |
| Tokens + foundation | 1–4 | Core component library |
| Full component set | 1–9 | Complete design system sans spec page |
| Full chain with publish | 1–11 | Publishable design system reference |

---

## Path A vs Path B/C

| | Path A (this chain) | Path B | Path C |
|---|---|---|---|
| Entry point | 3 brand adjectives | Existing Figma file | Existing work to audit |
| Token source | Archetype spec + adjectives | Figma variables via MCP | Figma variables via MCP |
| Replace step | — | Replace Step 2 with Chain 2 | Replace Steps 2–9 with Chain 2 + Chain 3 + Chain 4 |

For Path B: run Chain 2 first to extract tokens from Figma, then continue from Step 3 of this chain.
For Path C: run Chain 2 (tokens), then Chain 4 (drift audit) at each component milestone, then continue.

---

*Chain 9 · Greenfield End-to-End · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*