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

#agents #ai #showdev #vibecoding

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]__
All CSS is scoped under #{{ section_id }} using Liquid's section ID
All colors use oklch()

Google Antigravity deployed every file to Shopify through the Shopify MCP (Model Context Protocol). 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.

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