How to Build a Premium Shopify Store 2.0 Theme Using AI Agents & Custom Skill Files (The Antigravity Method)

Quick Answer: You can build a fully production-ready, premium Shopify Online Store 2.0 theme — complete with custom sections, design systems, and interactive components — without writing a single line of code from scratch. The method: use Google's Antigravity AI coding assistant with a custom SKILL.md file that teaches the AI how Shopify themes work, then orchestrate AI sub-agents to handle research, design extraction, and code generation in parallel. I built a complete fitness e-commerce theme called PulseFit in under two days using this exact workflow.

---

Why I Wrote This (And Why You Should Care) #

I've been building Shopify themes for clients, and every time, the same pain points hit: wiring up Liquid templates, fighting with Dawn's CSS grid conflicts, making sure every text element is customizable from the admin panel, and testing across breakpoints. It's tedious, repetitive, and brutally time-consuming.

Last week, I decided to try something different. Instead of treating AI as a glorified autocomplete, I turned it into my entire development team. I used Antigravity — Google DeepMind's agentic AI coding assistant — and fed it a custom SKILL.md file that contained every guardrail, pattern, and standard a Shopify theme developer needs to follow. Then I let the AI agents handle everything: initializing the theme, parsing design mockups, generating Liquid sections with full {% schema %} blocks, building a design system document, and even redesigning pages to match a premium aesthetic.

The result? A complete, premium, fully merchant-customizable Shopify theme called PulseFit — with glassmorphism effects, infinite marquee carousels, floating label forms, and bronze-accented product cards — built in a fraction of the time it would normally take.

Here's exactly how I did it, step by step.

---

Tech Stack & Prerequisites #

Before you begin, make sure you have the following ready:

[!NOTE] You don't need Shopify CLI installed globally. Antigravity can use npx @shopify/cli to run theme commands on the fly — it figures this out automatically.

---

Step 1: Create the SKILL.md — Your AI's Shopify Brain #

This is the most important step, and the one most people skip. A SKILL.md file is a structured instruction document that lives in your project root. When Antigravity reads it, the AI agent internalizes every rule, pattern, and constraint inside — essentially becoming a Shopify theme expert.

Here's the key structure of the SKILL.md I used:

# Agent Skill: End-to-End Shopify Online Store 2.0 Theme Developer

## 1. Role & Objective
You are an expert Shopify Theme Engineer. Your core capability is
parsing static design layouts and converting them into a fully semantic,
production-ready Shopify Online Store 2.0 theme.

## 2. Technical Guardrails & Directory Constraints
├── assets/        # CSS, JS, icons (flat, no subfolders)
├── config/        # settings_schema.json
├── layout/        # theme.liquid ({{ content_for_layout }})
├── locales/       # en.default.json
├── sections/      # Modular rows with {% schema %}
├── snippets/      # Micro UI primitives via {% render %}
└── templates/     # JSON structural mapping files

## 3. Environment & CLI Tooling
- Initialize: shopify theme init
- Dev server: npx shopify theme dev
- Auth: shopify theme auth login --store <store>.myshopify.com

## 4. Section Writing Protocol
Every section must be self-contained: markup + scoped CSS + JS + schema.

## 5. Implementation Rules
- Template JSON Architecture (no hardcoded markup in templates/)
- Dynamic Schema Generation (every visual → a setting)
- AJAX API patterns (GET /cart.js, POST /cart/add.js)
- Native Performance (image_url + image_tag filters, never raw URLs)

Why This Works So Well #

The SKILL.md does three critical things:

1. Enforces Shopify OS 2.0 architecture — The AI won't accidentally nest folders, hardcode markup in templates, or skip schema definitions.
2. Teaches the section blueprint — Every section the AI generates comes with {% schema %}, {% style %}, and {% javascript %} blocks. Merchants can customize everything from the admin.
3. Handles edge cases — Metafield access syntax, AJAX cart endpoints, responsive image filters — all documented so the AI doesn't hallucinate wrong patterns.

[!TIP] Think of SKILL.md as a senior developer's brain dump that you hand to a junior developer on day one. Except this junior developer has perfect memory and never forgets a rule.

How to Evaluate Your SKILL.md #

I actually asked Antigravity to evaluate the SKILL.md itself — "Is this a good skill file for any AI agent building Shopify themes?" The AI analyzed it and confirmed it covers the essentials but suggested adding sections for:

• Static Analysis & Linting (Theme Check integration)
• Advanced Styling Pipelines (Tailwind CSS / PostCSS considerations)
• Global Config Patterns (settings_schema.json deep-dive)
• Locales & Translations

I then asked Antigravity to merge those additions into an expanded version. The result was a comprehensive SHOPIFY.md — a single-file Shopify theme development bible for AI agents.

---

Step 2: Initialize the Theme with Dawn #

With the SKILL.md in place, I told Antigravity:

"Set up a new Shopify theme project."

Here's what the AI agent did automatically:

1. Checked environment — Ran node -v (v22.17.0) and git --version (2.44.0)
2. Searched the web — Looked up the correct Dawn clone URL
3. Initialized the theme — Ran:

   npx @shopify/cli theme init my-theme --clone-url https://github.com/Shopify/dawn.git
   

4. Restructured the directory — Moved all files from the my-theme/ subdirectory to the workspace root and cleaned up

The entire Dawn v15.4.1 boilerplate was scaffolded in under 60 seconds. All standard OS 2.0 directories (assets/, config/, layout/, locales/, sections/, snippets/, templates/) were in place.

[!IMPORTANT] The AI used npx @shopify/cli instead of a global install because Shopify CLI wasn't installed on the machine. This is a smart fallback — and one reason why documenting CLI commands in your SKILL.md matters. The AI knew the correct command because it was specified in the skill file.

---

Step 3: Build Custom Sections (The AI Does the Heavy Lifting) #

This is where the magic happens. I provided a React + Framer Motion mockup file (demo.tsx) as a design reference for the hero section. Then I told the AI to build it.

The Hero Section (pulse-fit-hero.liquid) #

The AI generated a 687-line fully self-contained Liquid section with:

• Fluid typography using clamp(36px, 6vw, 72px) for responsive scaling
• Infinite marquee carousel with duplicated DOM nodes for seamless looping
• Social proof avatars with overlapping negative margins
• Gradient background: linear-gradient(180deg, #E8F0FF 0%, #F5F9FF 50%, #FFFFFF 100%)
• Full schema with settings for every text, image, button, and color

<!-- What the AI generated (simplified) -->
<div class="custom-section-{{ section.id }}" data-section-id="{{ section.id }}">
  <h2 class="section-title">{{ section.settings.section_heading }}</h2>
  <div class="section-content">
    {%- for block in section.blocks -%}
      <div class="block-item" {{ block.shopify_attributes }}>
        {{ block.settings.text }}
      </div>
    {%- endfor -%}
  </div>
</div>

{% style %}
  .custom-section-{{ section.id }} {
    padding-top: {{ section.settings.padding }}px;
  }
{% endstyle %}

{% schema %}
{
  "name": "PulseFit Hero",
  "settings": [
    {
      "type": "text",
      "id": "section_heading",
      "label": "Heading Text",
      "default": "Transform Your Fitness Journey"
    }
  ],
  "presets": [{ "name": "PulseFit Hero" }]
}
{% endschema %}

The Custom Header (pulse-fit-header.liquid) #

A 663-line sticky header with:

• Transparent overlay mode on the homepage (blends with the hero)
• Sticky scroll behavior with smooth slide-down animation
• Custom dropdown menus, language/country selectors
• Pill-shaped CTA button with hover scale effects

Product Cards (product-card-custom.liquid) #

A reusable snippet with:

• Bronze #92765A "New" badges and black "Sale" badges
• Slide-up quick-add panel on desktop hover
• Mobile-optimized fallback layout
• Star rating system with review counts

---

Step 4: Create the Design System Document (AI-for-AI Context) #

Here's the strategy that really unlocked the workflow: I asked the AI to document the design system it just built. The command was simple:

"Based on the home page design, create a DESIGN.md file so that if more pages are added later, the AI Agent has context of the design, colors, and palettes."

The AI agent:

1. Read 6+ files (hero, header, product card, settings, theme layout)
2. Extracted every color code, font weight, spacing value, and animation curve
3. Generated a 134-line DESIGN.md covering:

## Color Palette

| Token | Hex | Usage |
|:---|:---|:---|
| Primary Accent (Bronze) | #92765A | Badges, Quick Shop CTA, focus rings |
| Accent Hover | #80664C | Button hover states |
| Dark Neutral | #1a1a1a | Titles, primary CTAs, backgrounds |
| Text Gray | #4a5568 | Subtitles, descriptions |
| Border Light | #e2e8f0 | Card borders, header dividers |

## Typography
- Font: Inter (400, 500, 600, 700)
- Hero Title: clamp(36px, 6vw, 72px), weight 700
- Body: 16px, weight 400, color #4a5568

## Animation Standards
- Hover Scale: transform: scale(1.05)
- Card Lift: translateY(-10px) + shadow increase
- Header Sticky: slideDown 0.4s ease

Why This is a Game-Changer #

When I later asked the AI to redesign the Contact page, I simply said:

"Follow the DESIGN.md file and update the Contact page accordingly."

The AI read DESIGN.md, understood the entire visual language, and generated a 433-line CSS file with glassmorphism cards, floating label animations, bronze focus rings, and responsive breakpoints — all perfectly matching the home page aesthetic. Zero manual style matching.

This is the AI-for-AI pattern: using AI to create context documents that make future AI work dramatically better.

---

Step 5: Build New Pages Using the Design Context #

The Contact page redesign was the most complex operation. Here's how Antigravity handled it:

Phase 1: Research #

The AI read DESIGN.md, STRUCTURE.md, the existing contact-form.liquid, and the CSS file. It also discovered and planned to reuse the existing social-icons.liquid snippet instead of rebuilding social links from scratch.

Phase 2: Implementation Plan #

Before writing any code, the AI created a detailed implementation plan as an artifact and waited for my approval:

## Proposed Changes

### Contact Form Section
- Two layout modes: Grid (info + form side-by-side) and Centered
- Gradient background option matching hero section
- Block types: text_item, info_item (with icon picker), social_links
- SVG icons for pin/phone/email/clock

### CSS Overhaul
- Glassmorphism card effects
- Floating label animations with bronze (#92765A) focus rings
- Pill-shaped submit button with hover → bronze transition
- Responsive breakpoints for mobile/tablet/desktop

I said "proceed," and the AI executed.

Phase 3: Code Generation #

Three files were completely rewritten:

1. sections/contact-form.liquid — New settings for layout_mode, show_gradient_background, heading, description. Block types for contact info items with SVG icon rendering.
2. assets/section-contact-form.css — From 40 lines to 433 lines of premium styling.
3. templates/page.contact.json — Rewired with default blocks (intro text, email, phone, social links).

Phase 4: Verification #

The AI reviewed all written code, caught missing styles, and appended fixes — all tracked via a live task checklist:

- [x] Rewrite contact-form.liquid with new schema and blocks
- [x] Overhaul section-contact-form.css with premium design
- [x] Update page.contact.json template with default blocks

---

What Everyone Else Misses (The Expert/Hidden Gem) #

The Tailwind × Dawn Grid Conflict #

Most tutorials that use Tailwind CSS with Shopify Dawn themes don't mention this: Dawn uses .grid as a class name for its flex-based layouts. When you load Tailwind via CDN, Tailwind's .grid class (which applies display: grid) overrides Dawn's flex behavior, breaking every collection grid, product page layout, and recommendation section.

The fix is a single CSS override in theme.liquid:

/* Prevent Tailwind from hijacking Dawn's .grid class */
.grid:not([class*="grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) {
  display: flex !important;
}

This rule says: "Only apply display: grid when explicit Tailwind column classes are present. Otherwise, fall back to Dawn's flex behavior." Antigravity discovered this conflict during development and applied the fix automatically because it was documented in the SKILL.md and DESIGN.md.

The Schema-Everything Rule #

Another thing ChatGPT and generic AI tools consistently miss: every single visual element in a Shopify section must be connected to a schema setting. If you hardcode a heading, a color, or a button label, the merchant can't change it from the admin panel — which defeats the entire purpose of OS 2.0.

My SKILL.md enforces this with the "Dynamic Schema Generation" rule:

• Text strings → "type": "text" or "type": "richtext"
• Images → "type": "image_picker"
• Colors → "type": "color" or "type": "color_scheme"
• URLs → "type": "url"

Because the AI reads this rule before generating any code, every section it produces is 100% customizable from the Shopify admin. No code edits needed by merchants.

---

Troubleshooting / Common Pitfalls #

---

The Full AI Workflow: A Visual Summary #

Here's the entire development process mapped out:

graph TD
    A["📝 Create SKILL.md"] --> B["🚀 Initialize Dawn Theme"]
    B --> C["🎨 Build Custom Sections"]
    C --> D["📄 Generate DESIGN.md"]
    D --> E["📂 Generate STRUCTURE.md"]
    E --> F["🏗️ Build New Pages Using Context"]
    F --> G["✅ Review & Ship"]
    
    A -->|"AI reads rules"| C
    D -->|"AI reads design tokens"| F
    E -->|"AI reads architecture"| F
    
    style A fill:#92765A,color:#fff
    style D fill:#92765A,color:#fff
    style E fill:#92765A,color:#fff

Key files created during the process:

---

FAQ (For Voice Search & Snippets) #

What is a SKILL.md file? #

A SKILL.md is a structured instruction document placed in your project root that teaches an AI coding assistant (like Antigravity) domain-specific rules and patterns. For Shopify, it includes OS 2.0 architecture constraints, section blueprint templates, CLI commands, and performance standards. The AI reads it before starting work, essentially becoming a specialized theme developer.

Can I use this method with other AI assistants? #

The SKILL.md concept works with any AI that reads project files for context. However, the agent orchestration — where the AI spawns sub-agents for parallel research, creates implementation plans, tracks tasks with checklists, and iterates on feedback — is specific to Antigravity's agentic capabilities.

Do I still need to know Shopify Liquid? #

Basic familiarity helps, especially for debugging. But the SKILL.md handles 90% of the Liquid patterns the AI needs. I'd recommend understanding template JSON structure, the {% schema %} tag format, and how {% render %} works for snippets.

Does this work with Shopify's free themes or only Dawn? #

The workflow is built on Dawn (Shopify's open-source OS 2.0 reference theme), but the SKILL.md rules apply to any OS 2.0 theme. You can adapt the skill file for other base themes by updating the directory structure section and adding theme-specific patterns.

How long does the full process take? #

From initialization to a production-ready, multi-page theme with custom sections: approximately 1–2 days of active interaction with the AI. The PulseFit theme (homepage hero, sticky header, product cards, contact page) was built across 6 conversation sessions totaling a few hours of prompting.

Is it safe to let AI write Shopify theme code? #

Yes, with guardrails. The SKILL.md prevents common mistakes (nested directories, hardcoded markup in templates, missing schemas). Always run shopify theme check for linting and test with shopify theme dev before deploying. The AI generates code that is compatible with Shopify's HMR dev server.

What if the AI generates code with Tailwind + Dawn grid conflicts? #

This is a known issue. Add the .grid:not() CSS override documented in the "Hidden Gem" section above. Better yet, include the override rule in your SKILL.md so the AI applies it automatically in every theme it builds.

---

Conclusion: The Meta-Strategy #

The real power here isn't just that AI can write Liquid code — that's table stakes. The breakthrough is the AI-for-AI feedback loop:

1. SKILL.md teaches the AI how to build Shopify themes
2. DESIGN.md teaches the AI what the theme looks like
3. STRUCTURE.md teaches the AI where everything lives

Each document makes the next AI interaction dramatically better. When I asked the AI to build the Contact page, it already knew the color palette (#92765A bronze), the typography system (Inter, weights 400–700), the animation standards (scale 1.05, translateY), and the component patterns (glassmorphism, pill buttons, floating labels). Zero manual style matching. Zero back-and-forth.

The future of Shopify development isn't AI replacing developers — it's developers who know how to teach AI becoming 10x more productive.

---

Built with Antigravity by Google DeepMind. Theme: PulseFit (Shopify OS 2.0, Dawn v15.4.1 base).