CASE STUDY · 2026 · CSPIRE / AI MICROSITE

A blank canvas →
a production-ready
internal AI hub.

An end-to-end build of C Spire's internal AI Microsite — a Stories, Learn, Marketplace, Events, Governance, and Submit-for-Review hub for ~3,000 employees. Designed in Claude Design, built with Claude Code. This is the record of how it came together.

NEXT.JS 14 SANITY CMS DYNAMODB · S3 VERCEL CLOUDFLARE CLAUDE OPUS · CLAUDE CODE
Role
Lead designer + engineer
solo, AI-augmented
Surfaces
Home · Stories · Learn ·
Marketplace · Events · Gov
Status
● Design shipped
● Build in flight
Timeline
9 design days +
~6 weeks build
SNAPSHOT · TOPLINE METRICS
0days
Design canvas, end-to-end
From blank brief to handoff-ready, across nine phases.
0+
Artboards delivered
Desktop + mobile pairs for every public surface, plus role-gated Editor.
0
Production components
JSX modules lifted directly into the Next.js build — no rewrite tax.
0%
AI-collaborated ~est.
Of design + planning work shipped via Claude pairing.
01 · DESIGN

Built in Claude Design.

A single design canvas, every surface side-by-side, every variation co-located. Nine phases from discovery to handoff — design system, page-level artboards, mobile parity, role-gated authoring, and the architecture docs that made Claude Code's job nearly mechanical.

REV 01
DAYS 1 → 9
01 · BRIEF

Discovery & framing — what is this site for?

Aligned on audience, the six surfaces, and the one write path — Submit-for-Review. Tone set before pixels: internal, editorial, terminal accent, no marketing tropes.

PROJECT_MEMORY.mdSurface listRole-model sketch
02 · VISUAL

Design system — Onyx + Kinetic accent

Single visual contract for every downstream artboard. Hairline borders, mono labels for metadata, Work Sans + IBM Plex Mono + Georgia italic for editorial accent. No emoji.

design-tokens.jsxIcon library (1.5px stroke)Density scale
03 · PAGES

Component & page design — canvas of artboards

Each surface as a self-contained DCArtboard on one scroll. Home · Stories · Learn · Marketplace · Events · Governance. Variations live as siblings, not separate files.

Hero reel patternFilter rails + status pillsMono ID stamps
04 · MOBILE

Mobile parity — companion, not afterthought

Every desktop artboard paired with a 390-wide mobile sibling. Same vocabulary, different rhythm — tab bar instead of top nav, 9:16 hero reel, denser metadata.

mobile-pages.jsx44px min hit targetPortrait hero rotation
05 · SUBMIT

Submit-for-Review wizard — the one write path

Five-step wizard: Idea → Data → Risk → Review → Submitted. Risk tiers (Light · Standard · Elevated · High) decide which reviewers (CoE · InfoSec · Privacy · Legal) get tagged.

submit-wizard.jsxForm primitivesJSON schema sketch
06 · EDITOR

Editor / committee surface — back of house

Role-gated authoring for what the committee is the authority on: policies, Learn library, Story curation, vendor Marketplace entries. Demoted out of the wizard.

editor.jsx6 desktop · 2 mobile pagesStatus pill primitives
07 · ARCH v1

Tech architecture v1 — storage decision

Compared DynamoDB · S3 JSON · RDS Postgres for the one missing backend: submissions. Chose DynamoDB on-demand with S3 attachments. Adapter pattern keeps it swappable.

Tech Architecture.htmlRuntime flow (Fig 01)SubmissionRepo
08 · ARCH v2

Tech architecture v2 — Sanity added

Reworked around two clients (employee + committee editor), three Next.js surfaces, and two backends (Sanity + AWS). Added publish webhook so on-demand revalidate is explicit.

Tech Architecture v2.htmlComponent matrixOpen decisions panel
09 · HANDOFF

Claude Code handoff — canvas to repo

Bundled inputs, decisions, and the opening prompt. The artboards become a real Next.js codebase under Claude Code — design + architecture locked, build job begins.

Process-playbook.pdfPre-handoff checklistM1–M9 ladder
VISUAL SYSTEM · 02

One visual contract, then thirty artboards.

The design system was locked in before any page-level work — so every downstream artboard could reuse the same tokens, the same icons, the same mono labels. The result is the dense editorial feel of internal tooling that actually respects its users.

DESIGN AXIOM

Type weight does the work. Hairline borders, generous whitespace, mono labels carry every ID, timestamp, and status code — never body copy.

PALETTE
Onyx (or paper) + Kinetic accent. Status palette never on CTAs.
TYPOGRAPHY
Work Sans
IBM PLEX MONO · 10–11PX
Georgia italic — accent
DESIGN-TOKENS.JSX · CANONICAL
REV 01
A · COLOR TOKENS BG · SURFACE · SURF.ALT · SURF.HI · KINETIC · OK · WARN · ERR B · TYPE SCALE Display 40 / -0.5 Heading 22 / Work Sans 500 Body 14 — paragraph color, 62% opacity on fg MONO 10 · LETTERSPACE 0.16EM · CAPS Georgia italic — accent words C · ICONS · 1.5PX STROKE SEARCH · MENU · CHECK · ARROW · CALENDAR · SHIELD · SPARKLE · BOLT DCARTBOARD · TOKENS · 720 × 480
FIG-01Design tokens — paired dark + light · 1.5px icons · mono metadata
CANVAS · HOME + STORIES

One scroll. Every surface.

The whole microsite lives on a single canvas. Home, Stories, Learn, Marketplace, Events, Governance, Submit wizard, Editor — comparable side-by-side. Filter rails, hero reels, status pills, and mono ID stamps repeat across every artboard, so the system reads as one piece of software.

HERO

Adaptive video reel — 16:9 on desktop, 9:16 on mobile. Autoplay muted with poster fallback for mobile data.

STATS

Live counters above the fold — stories shipped, weekly views, active builders. Pulled from Sanity, not vanity.

WIRE

AI news strip — outside signal alongside internal stories. Source filter chips, time-window tabs.

EVENTS

Calendar + recordings. Town halls, training sessions, partner demos. Recording submission stays public.

FIG-02 · 1 / 5
/SUBMIT · STEP 03 · RISK
DCARTBOARD-019
SUBMIT FOR REVIEW · DRAFT SUB-2026-0142 STEP 03 OF 05 — RISK TIER What's the risk profile of this project? ● LIGHT Internal pilots No customer data · single team · low blast radius. REVIEW · COE ● STANDARD Cross-team tools Employee data · multi-team · standard review path. COE · INFOSEC · PRIVACY ● ELEVATED Customer-facing PII · revenue impact · legal touch points. + LEGAL · + EXEC ● HIGH Autonomous Agentic action on customer accounts. Full review. ALL TRACKS · CISO CONTROLS & MITIGATIONS Human-in-the-loop on every customer-facing action. Read-only Salesforce scope. 30-day retention on transcripts. CONTINUE → ← BACK · STEP 02 · DATA
FIG-03Submit wizard · step 03 · risk tier — decides which reviewers get tagged

One write path. Four risk tiers.

The Submit-for-Review wizard is the only write path on the public site. Five steps — Idea → Data → Risk → Review → Submitted. The risk tier you pick decides which reviewers (CoE · InfoSec · Privacy · Legal) get auto-tagged. Form primitives factor out so the Editor surface reuses them.

DECISION LOGGED

Submissions go to DynamoDB, not Sanity. Editorial content stays in Sanity. The two pipelines meet — visually — in the Marketplace.

STEP 01IDEA
STEP 02DATA
STEP 03RISK ← YOU ARE HERE
STEP 04REVIEW
STEP 05SUBMITTED
MOBILE PARITY · 04

Companion,
not afterthought.

Every desktop artboard has a 390-wide mobile sibling sitting next to it in the same DCSection. Tab bar instead of top nav. 9:16 hero reel. Denser metadata. 44px minimum hit target. Same components, different rhythm.

RULE

Editor authoring stays desktop-first. Mobile is for triage, not authoring.

C SPIRE / ai ≡ 0247 · CUSTOMER OPS Agent Foundry cut churn-call time 41% STATS 247 STORIES 86 BUILDERS 14 PROD HOME STORIES LEARN EVENTS
+ SUBMIT ✕ STEP 03 OF 05 · RISK Risk profile? ● LIGHT Internal pilots, no PII ● STANDARD ← SELECTED Cross-team tools, employee data ● ELEVATED Customer-facing, PII ● HIGH Autonomous customer action CONTINUE → 3 OF 5 · DRAFT SAVED
ARCHITECTURE · 08

Two clients. Three surfaces. Two backends.

Tech architecture v2 added Sanity as the CMS for editorial content alongside the existing AWS submissions store. Reworked around two clients (employee + committee editor), three Next.js surfaces (/ · /studio · /api/*), and two backends. Publish webhooks make on-demand revalidate explicit.

FIG-04 · RUNTIME · READ + WRITE
REV 02 · SANITY ADDED
CLIENT EDGE / CDN NEXT.JS · VERCEL DATA EXT EMPLOYEE Browser · Mobile 3K SEATS EDITOR · COMMITTEE Sanity Studio ~10 USERS CLOUDFLARE ai.cspire.com DNS · WAF · PROXY / · Public surfaces SSR + ISR 60S /studio · Sanity embed CATCH-ALL ROUTE /api/* · Routes SUBMIT · AUTH · REVALIDATE Sanity CMS EDITORIAL · 8 SCHEMAS DynamoDB SUBMISSIONS · ON-DEMAND S3 ATTACHMENTS · VERSIONED Resend MAGIC LINK CONTENT READ EDITORIAL WRITE WEBHOOK · REVALIDATE
Forcing committee-authored content through the Submit wizard was the wrong shape — there was no review gate to run. Two pipelines, kept separate. — Decision logged · Phase 01 · Brief
02 · DEVELOPMENT

Handed to Claude Code.

The artboards become a real Next.js codebase. The implementation plan locks in every architectural decision before the first commit — stack, schemas, milestone ladder, env vars, risk register. Claude Code's job is to build, not to redesign.

STATUS
● IN FLIGHT
M1 IN PROGRESS
0.0
Next.js App Router
RSC where possible. Inline-style theme system preserved from the canvas.
0
Sanity schemas
Story · Policy · LearnEntry · MarketplaceItem · Event · NewsItem · SiteSettings · Person.
0
Build milestones (M1–M9)
Each milestone is its own commit and PR — first usable thing lands fast.
0
Risks logged · pre-mitigated
From accent-color disagreement to CSP-breaks-Studio. Each with an explicit mitigation.

The opening prompt names the constraints.

The first message into Claude Code is the entire reason this build doesn't drift. It pins the stack, lists the constraints, and names what Claude Code is not allowed to reinvent: tokens, icon set, state lib, marketplace CTA copy. M1 ships in a day because nothing is up for debate.

PHILOSOPHY

Lift, don't reinvent. The 22 design-canvas JSX files become ES module exports — inline-style theme system preserved.

CLAUDE-CODE · FIRST SESSION · M1
PASTED 
// First message to Claude Code

We are implementing the AI Microsite for C Spire's
internal AI Center of Excellence. Design and architecture
are already done — your job is to build, not redesign.

Read first, in order:
  1. IMPLEMENTATION_PLAN.md
  2. Tech Architecture v2.html
  3. PROJECT_MEMORY.md
  4. design-tokens.jsx
  5. extracted/_inline_app.jsx

Stack (locked):
  · Next.js 14 App Router on Vercel
  · Sanity Growth · production + staging
  · DynamoDB on-demand + S3
  · Cloudflare DNS · ai.cspire.com
  · Magic-link via Resend

Honor these:
  · Visual tokens come from design-tokens.jsx
  · Marketplace CTA is "+ SUBMIT"
  · No SSO on public site (v1)
  · Wizard schema is the API contract

Do not add filler content. Do not invent
new colors. Do not introduce a new state lib, icon set,
or UI kit.

First milestone: scaffold + tokens + nav.
FIG-05Recommended opening prompt — from Process-playbook.pdf §9
MILESTONE LADDER · M1 → M9

Ordered so the first usable thing lands fast. Each milestone is its own commit and PR. Public Home reads from Sanity by M3 — three milestones in. Submit wizard ships by M5. Mobile + Editor at M7. Production cutover at M8.

M1
~1 DAY

Scaffold

Next.js 14 App Router on Vercel. Tokens lifted from design-tokens.jsx. Self-hosted fonts. Layout + nav rendering Onyx + Work Sans + IBM Plex Mono.

M2
~2 DAYS

Sanity Studio + 8 schemas + seed

Studio embedded at /studio. Story · Policy · LearnEntry · MarketplaceItem · Event · NewsItem · SiteSettings · Person. Seed script drains inline canvas data into staging.

M3
~2 DAYS

Home + Stories (read path)

Public Home renders from Sanity. Stories library + detail. ISR 60s. First milestone where it starts to feel real.

M4
½ DAY

Webhook + on-demand revalidate

Studio publish → page update in <10s, granular per-document tagging.

M5
~3 DAYS

Submit wizard write path

Magic-link via Resend. 5-step wizard. Zod validation. POST → DynamoDB + pre-signed S3. SUB-2026-NNNN display IDs.

M6
~3–4 DAYS

Remaining surfaces

Learn · Marketplace · Events · Governance · AI Wire archive. Marketplace shows both Sanity vendor items and approved DynamoDB submissions.

M7
~2–3 DAYS

Mobile + overlays + Editor

Mobile compositions wired with responsive switch. Search + Menu overlays. Editor role-gated, committee writes to Sanity.

M8
~1–2 DAYS

Hardening + observability + DNS

Sentry. Structured logs. CSP + HSTS + referrer policy. Pen-test the magic-link flow. Cloudflare DNS cutover.

M9
½ DAY

Hand-off + maintenance

README · RUNBOOK · PROJECT_MEMORY refresh · Playbook Phase 09 next-rev capture.

PRE-HANDOFF CHECKLIST

Inputs & artifacts

☑Design canvas HTML + 22 JSX files
☑Standalone HTML — offline preview
☑Tech Architecture v2.html
☑PROJECT_MEMORY.md — surface map
☑Process-playbook.pdf — decision log
☐C Spire brand assets (logo PNG + SVG)
☐Sample submission JSON

Decisions to honor

☑Next.js 14 · App Router · RSC where possible
☑Sanity for editorial · prod + staging
☑DynamoDB on-demand · S3 attachments
☑Cloudflare DNS → Vercel
☑No SSO on public v1 · corp-email verify on submit
☑Marketplace CTA copy is + SUBMIT
☑Storage swap-friendly via SubmissionRepo
Anything missing from the checklist becomes a question in the first ten minutes of the session. Better to log it now than thread it later. — Process-playbook · §pre-handoff
03 · OUTCOME

What came out of it.

A complete design system, 30+ artboards across desktop and mobile, a Tech Architecture v2 doc that survived security review, and an implementation plan dense enough that the first M1 commit was almost mechanical.

0×
Faster than baseline ~est.
Solo + Claude vs. solo without AI pairing. Larger lift on visual iteration than on code.
0
Tailwind rewrites
Inline-style theme system from the canvas survived the lift unchanged.
0
Architecture revisions
v1 storage decision · v2 Sanity added · pre-M1 plan with risk register.
0%
Decisions logged
Every accept/reject captured in PROJECT_MEMORY + playbook before code.

What worked.

  • +01

    One canvas, every surface co-located. Trivial to spot inconsistency.

  • +02

    Design tokens locked Day 2 — every later artboard reused them.

  • +03

    Decisions logged inline (PROJECT_MEMORY) — no orphan choices.

  • +04

    22 JSX files lifted into Next.js with no rewrite. Inline styles held.

  • +05

    Implementation plan included the opening prompt — Claude Code didn't drift.

What I'd tighten next time.

  • ~01

    Accent color drifted between memory and tokens — single canonical source first.

  • ~02

    Brand assets blocked M1 by a beat. Lock logo + SPF/DKIM before discovery ends.

  • ~03

    Editor mobile parity creep — write the cut into the plan, not discover it mid-M7.

REUSABLE PATTERN

Design canvas → implementation plan → opening prompt → milestone ladder. Four artifacts, in that order, before the first commit. The plan absorbs the open questions so the build doesn't have to.

This site was built using Claude Code AI, Figma and Figma MCP Server.