How I built a 12-section Shopify page using only AI agents (and a Cowork audit)

#agents #ai #nocode #showdev

I'm a solo founder running a Shopify Basic store at ddsboston.com. Last week I shipped a 12-section hub page — the DDS Vibe Academy — without writing a single line of code, uploading a single file, or clicking "save" in the theme editor.

Here's how the pipeline works.

The architecture

The academy hub lives at /pages/dds-vibe-academy. It uses Shopify's OS 2.0 JSON template system: one page.dds-vibe-academy.json file that registers 13 sections in a specific order.

The page has a tab navigation pattern. A sticky nav bar controls 8 content tabs — What's New, Curriculum, Evolution, Archive, Blog Feed, Useful Links, Manifesto, and FAQ. Each tab is a separate Liquid section with its own CSS scope, its own JavaScript, and its own structured data.

The build chain

Claude Opus 4.7 (Anthropic) authored every section file. 12 Liquid sections + 1 JSON template. Approximately 6,400 lines of code across ~500 KB.

Each section follows a strict scoping pattern:

CSS namespace: dva-[section-abbreviation]__ (e.g., dva-cm__ for curriculum, dva-fq__ for FAQ)
All CSS is scoped under #{{ section_id }} using Liquid's section ID
All colors use oklch() — the perceptually uniform color space with baseline browser support since 2024
DDS palette tokens defined per-section as CSS custom properties

Google Antigravity deployed every file to Shopify through the Shopify MCP (Model Context Protocol). Antigravity runs Claude Opus 4.6 as its agent model inside Google's agentic IDE. The deploy flow:

Read the local .liquid file
Push to Shopify's theme asset API via MCP
Repeat for all 14 files (12 sections + 1 template + 1 OG image)

No CLI. No Shopify admin. No manual steps.

Cowork (Anthropic) ran an autonomous browser audit after the initial deploy. It navigated every tab, checked every link, resized viewports, and produced a findings report. Results: 30 broken URLs identified, a z-index collision on the sticky navigation, and 3 schema corrections needed. All fixes were applied in a second deploy cycle — again, by AI agents, not by hand.

What the page does

The curriculum tab renders a 38-node SVG constellation map with anchor-positioned popover tooltips. Each node is a class. Each ring is a curriculum stage (Foundation → Development → Application → Mastery). Below 960px, it collapses into <details> accordions with horizontal card scroll.

The FAQ tab has 14 entries with FAQPage JSON-LD schema, <details>/<summary> native accordion with interpolate-size: allow-keywords for smooth height animation, and a debounced search filter.

The Useful Links tab catalogs 93 verified external tools across 12 categories with multi-select filter chips, container queries for responsive grid, and View Transitions API on filter changes.

There's a Build Manifest section between the hero and tab nav that serves as a deployment receipt — it names every AI agent, what each one did, and includes CreativeWork structured data for AI search visibility.

The methodology

I call it DDS Vibe Coding. Five pillars:

Constraint-first design — define what the system should do; the model figures out how
Progressive disclosure — ship the simplest version, add complexity only when earned
Deterministic rails — CSS scoping, naming conventions, and schema rules that prevent drift
Context hygiene — keep the model's context window clean; one section per conversation
Sovereign fallback — every workflow must have a path that doesn't depend on someone else's uptime

What I learned

The biggest surprise: the audit step matters more than the authoring step. Claude 4.7 wrote clean code. But Cowork found things no human code review would catch — like 30 broken URLs that had accumulated across classes over months, and a z-index collision between the sticky nav and anchor-positioned popovers.

The second surprise: the deploy pipeline is the leverage point. Once you have Shopify MCP as a write channel, the bottleneck shifts entirely to design decisions. The agents can ship faster than I can decide what to ship.