Building a Skill to Implement Google Stitch Designs as Shopify Pages End-to-End

Google's AI design tool "Stitch" announced a major update in March. AI-native canvas, a design agent that remembers the entire project, voice control, instant prototyping, and DESIGN.md for portable design rules in Markdown. The impact was significant enough to cause Figma stock to drop 8%.

The evolution as an "AI-native design platform" that follows the design thinking process while maintaining context for iterative refinement — every element on the canvas becomes contextual information for the AI, improving accuracy with each instruction. As many have noted, the true value of this update lies here.

This time, I focused on the implementation connection — the Stitch MCP server, TypeScript SDK release, and React/Tailwind code generation — to build and test a Claude Code skill that completes Shopify theme implementation end-to-end.

What I Tried

The system converts a featured EC page designed in Stitch into a Liquid template editable via Shopify's theme editor, completing through to page publication using a Claude Code skill. (I had already implemented this with Figma, but wanted to test the same design-to-code workflow with Stitch.)

The goal was to generate a Shopify page in one go once the design is finalized. While all Stitch-generated images are placeholders, the implementation includes replacing them with actual product images and pre-prepared imagery, producing a publication-ready page.

The Core: Judging Information Sources

Designs generated in Stitch contain dummy images and product data, requiring replacement with production data before publication. While hardcoding into assets/ is one approach, it means touching code every time content changes.

By having the AI correctly understand Shopify theme schema design and map each element to the appropriate resource type, theme editor editing becomes possible. In other words, accurately determining "what data each design HTML element displays" is what separates a truly Shopify-native, operationally viable page from a static one.

For example, even for the same image:

• Brand imagery → image_picker (upload and replace via theme editor)
• Product images → Auto-fetched from product picker (changing the product changes the image)
• Collection cover images → Fetched from collection picker

Even for the same text:

• Catchphrases → text / textarea (directly editable in theme editor)
• Product names → Auto-fetched from product picker
• Article titles → Auto-fetched from article picker

Allocating to these 6 information sources (images, products, collections, blog articles, text, and links) is the core of the design.

5-Step Implementation Flow

Step 1: Design Analysis

Retrieve PC/SP HTML structure via Stitch MCP to identify section composition and block types. Colors and fonts are mapped to CSS variables. Image URLs are also extracted as a list.

Step 2: Liquid Implementation

Convert Tailwind CSS to Vanilla CSS (BEM-scoped) and output as a .liquid file with single section + block structure.

The key principle here is self-containment:

• Vanilla CSS/JS only (no Tailwind or jQuery)
• Fonts are self-loaded (@import)
• BEM scoping prevents interference with theme styles
• Self-contained in a single .liquid file

Images use a 3-stage fallback (uploaded → external URL → resource image), replaceable via any method.

Step 3: Template JSON Generation

Set all preset values (product handles, collections, initial text) in the template JSON. Images are added after CDN URLs are confirmed in Step 4.

Step 4: Image Deployment

Download mock images from the design and upload via Shopify Files API. Add obtained CDN URLs to the template JSON.

Step 5: Shopify Deployment

PUT/POST sections/*.liquid, templates/page.*.json, and pages.json sequentially via Shopify Admin API. This publishes the page.

Results

Once a design is created in Stitch, a Shopify page with all elements freely editable via the theme editor is up and running in minutes. Images, text, products, and collections can all be replaced through the theme editor UI.

By accurately conveying Shopify theme schema design rules and Liquid conventions to Claude Code, the conversion from design data to "theme editor-editable code" has become practically viable. The distance between design and implementation has narrowed yet another step.