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

I'm a solo founder running a Shopify Basic store at ddsboston.com. I recently 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:

1. Read the local .liquid file


2. Push to Shopify's theme asset API via MCP


3. 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 the DVA Atlas Grid—a scalable, 2-axis responsive CSS Grid with client-side filtering. Users can group the 49 nodes by Ring (Foundation → Development → Application → Mastery) or Lane (the 10-lane taxonomy including Claude, Gemini, Antigravity, etc.).

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:

1. 
   Constraint-first design — define what the system should do; the model figures out how


2. 
   Progressive disclosure — ship the simplest version, add complexity only when earned


3. 
   Deterministic rails — CSS scoping, naming conventions, and schema rules that prevent drift


4. 
   Context hygiene — keep the model's context window clean; one section per conversation


5. 
   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.

This Week's 12 New Masterclasses

To cap this off, we just expanded the academy to 49 classes by shipping 12 new masterclasses this week covering:

1. Vibe Coding Foundation (Classes 1-6)


2. Sovereign RAG (Class 27)


3. Homepage Upgrade Masterclass (Class 31)


4. MCP Server Forge (Class 38)


5. SEO Magnet V2 (Class 39)


6. Frontier Models (Classes 48 and 49: Gemini 3.5 Flash and Claude Opus 4.8)

The 7-principle manifesto is fully updated and documented on the hub as well.

Try it

The academy is free, no signup: https://ddsboston.com/pages/dds-vibe-academy?utm_source=devto&utm_medium=crosspost&utm_campaign=may_blitz

49 classes. 93 curated tool links. 16 FAQ entries. Updated Monday-Friday via a sister blog. All built by AI agents under architectural direction.