← Index Case Study /04 — Civicaverse
/04 — Civicaverse · 2026

A consultancy site,
designed end-to-end and shipped with AI.

Role
Product Designer · End-to-end ownership
Company
Civicaverse
Releases
v1 shipped 2024, v2 shipped 2026
Stack
Next.js · Tailwind · Vercel · AI-built · Figma design system
Stakeholder
Civicaverse founder
§ 01 — Problem

A real consultancy, without a real site.

The problem

Civicaverse is a structural engineering consultancy serving architects, contractors, and owners — from single-family homes to mixed-use districts. Like many young technical firms, it operated on referrals and word-of-mouth without a digital presence that matched the rigor of the actual work.

What the firm needed wasn't a brochure. It was a working storefront — one that communicated technical depth, set expectations on scope, and surfaced the principal's craft to inbound prospects before the first email.

§ 02 — Context

Design the system, let AI build the site.

The context

Two paths existed: hand off design files to a developer, or ship the site myself. I chose the second — but with a twist. Instead of writing the production code by hand, I built the site using AI development tooling. My job was to make the design intent unambiguous; the AI's job was to translate that intent into working Next.js.

The unlock turned out to be the design system. AI tools execute well when the source of truth is well-structured — tokens, components, naming conventions, file architecture. Sloppy specs produce sloppy implementations. Civicaverse v2 was an experiment in pushing that further: how cleanly can a designer direct an AI build if the design system specification is rigorous, and how much hand-coding actually remains?

F. 01 — Hero · Engineering Future Civicaverse · 2026
Civicaverse v2 hero — Engineering Future
§ 03 — Process

Research, structure, specify, ship.

Approach

Four phases. The first three are mine. The fourth is a partnership.

P. 01
Research
Conversations with the firm's principal to map actual capabilities versus client misperceptions. Audited competitor sites across structural and civil engineering consultancies — most read as either overbuilt marketing or 1998-era brochureware. Identified the gap: technical credibility expressed with editorial restraint.
P. 02
Information architecture
Distilled the firm's offering into five sections — Mission, Capabilities, Services, Scope, About — each answering one prospect question before the next. Designed the navigation so a visitor could self-qualify in under a minute: does this firm do what I need, at the scale I need it?
P. 03
Design system specification
Built the design system as the source of truth — typography pairing, color tokens, section dividers, technical-drafting accents (FIG. labels, fraction numerators, monospace meta) drawn from engineering documentation conventions. Crucially: structured the Figma file and design tokens so an AI implementation tool could parse them without ambiguity. Naming conventions, file hierarchy, component descriptions, token references — all chosen to make the design intent legible to AI.
P. 04
AI build & small tweaks
Used AI development tooling to translate the design system into a deployed Next.js site. The clarity of the spec did most of the heavy lifting — components, responsive behavior, and design tokens came through faithfully. I handled small tweaks by hand where the AI's output drifted: spacing micro-adjustments, a few interaction states, edge cases the spec hadn't explicitly addressed. The partnership worked because the input was disciplined.
§ 04 — Design walkthrough

The shipped site, section by section.

F. 02 — Capabilities · What the firm does Technical depth
Civicaverse Capabilities section — what the firm does
F. 03 — Services · Engagement model Scope clarity
F. 04 — Scope · Project scale boundaries Self-qualification
Civicaverse Scope section — project scale boundaries
F. 05 — About · The principal Trust building
Civicaverse About section — the principal
§ 05 — What this represents

Design discipline scales with AI.

What this means

Civicaverse isn't a case study about coding. It's a case study about specification. AI development tools amplify whatever input you give them — a fuzzy design spec produces a fuzzy build; a rigorous design system produces a faithful one. The leverage is in the design discipline.

Owning the design system meant owning the production result, even though I didn't write most of the code. The bar for the shipped site was set in the Figma file — and held in production — through the structure of the spec itself. That's what 'design ownership' means to me now. Less about which tools I touch; more about whether the design intent survives the journey to production.

§ 06 — Lessons & next steps

What I'd carry forward.

Looking back

The biggest takeaway: AI tools don't replace design rigor — they reveal it. Every place my spec was fuzzy, the AI guessed. Every place my spec was clear, the AI built it. That's a clarifying feedback loop, and it raises the bar on what a 'design system' has to actually do to be useful.

The next version will introduce a small content management layer so the firm can update services and project lists without touching code. Same design principles, just less friction between content and craft.