Auto-Generating Shopify Template JSON from the Horizon UI Design Kit
The recently released Horizon theme UI design kit has another purpose beyond design validation. By mapping Figma component names 1:1 with the section and block names available in the theme editor, AI can correctly identify each element and output them as template JSON.
By arranging the section and block parts in the kit, you can use Figma MCP's get_design_context to retrieve structural data and convert it to Shopify template files based on naming conventions.
About Template JSON and Liquid Code
Shopify themes have two layers: "Template JSON" and "Liquid Code."
- テンプレートJSON（
templates/*.json）：Which sections to place in what order and how to configure each setting. The part edited via the theme editor - Liquidコード（
sections/*.liquid）：Code that defines the appearance and behavior of sections themselves. The part written by developers
What we're automating here is the template JSON side. Since we don't touch the theme code at all, it doesn't interfere with theme updates.
Why We Stick to Template Settings Without Code Modification
Horizon has a significantly different structure from traditional Shopify themes. Logic files and rendering files are distributed in complex ways, with loosely coupled event handling via CSS and JavaScript used throughout. Due to this specialized design, casually modifying the code risks causing unexpected side effects.
More importantly, Horizon is a theme that improves performance and UI with each update, so directly modifying the code means losing those benefits. Theme updates would cause conflicts, forcing you to either skip updates indefinitely or manually merge differences—an ongoing operational burden.
With that in mind, I believe keeping customization within the range configurable through the theme editor leads to healthier long-term operations. The approach of automating only template JSON (section composition and setting values) is based on this philosophy.
Overall Flow
- Compose templates on the Figma design kit
- Retrieve design structure data via Figma MCP
- Convert to template JSON based on naming conventions
- Upload images to Shopify Files
- Assign products, collections, and blogs
- Apply to theme
This is defined as a Claude Code skill and can be executed via command.
Naming Conventions Determine Everything
What determines the accuracy of this system is the component names in Figma. get_design_context returns layer names and component names for each element as structured data.
If component names match the Shopify theme structure, conversion is a simple mapping. If not, AI needs to guess, reducing accuracy.
The following naming conventions were adopted from the design kit's planning stage.
| Figma Component Name | Shopify Template JSON |
|---|---|
section:{type}:{variant} |
Section type + settings |
block/{category}/{type} |
Block type |
For example, if you place a "carousel 4-column" section in Figma, the :carousel-4col part of the name automatically generates "layout_type": "carousel", "columns": 4. Simply switching variants changes the JSON settings as well.
This naming convention is like a "contract" established during the kit's design phase. AI simply converts mechanically according to this contract. Since it doesn't rely on guessing, results are stable.
Testing with a 12-Section Homepage
I composed a 12-section homepage template on the design kit and converted it using a Claude Code skill.
| # | Figma Frame Name | Section |
|---|---|---|
| 1 | section:hero | hero |
| 2 | section:product-list:carousel-4col | product-list（Carousel 4-col） |
| 3 | section:media-with-content:editorial | media-with-content（Editorial） |
| 4 | section:collection-list:bento | collection-list（Bento） |
| 5 | section:section:pull-quote | 汎用Section（引用） |
| 6 | section:product-list:grid-4col | product-list（Grid 4-col） |
| 7 | section:featured-product | featured-product |
| 8 | section:section:image-with-text | 汎用Section（画像+テキスト） |
| 9 | section:featured-blog-posts:carousel-3col | featured-blog-posts（3-col） |
| 10 | section:section:email-signup | 汎用Section（メール登録） |
| 11 | section:section:faq | 汎用Section（FAQ） |
| 12 | section:section:icons-with-text | 汎用Section（アイコン+テキスト） |
With approximately 15 get_design_context呼び出しで12Section・約60ブロックのテンプレートJSONが生成され、11枚の画像もShopify Filesに自動アップロードされました。
Sectionの基本構成だけでなく、意図的に追加したデフォルトには存在しないブロックもしっかり拾ってくれます。たとえばヒーローSectionにaccordionブロックを追加したり、テキスト付きメディアにproduct-recommendationsブロックを追加した場合でも、Figma上のコンポーネント名からそれを判別して、テンプレートJSON上に正しく反映されます。
About Block Structure Reproduction Level
However, at this point, Horizon's nested block structure is not fully reproduced as Figma parts. Further developing the design kit to componentize the entire block hierarchy might enable more precise conversion, but for now, some ambiguous areas remain and are left to Claude Code's judgment.
Prerequisites and Constraints
- A design kit conforming to naming conventions is required：任意のFigmaファイルからは変換できない。Horizonの場合、38種のSectiontypeと92種のブロックtypeのマッピングテーブルを用意。初期構築には工数がかかるが、一度作れば繰り返し使える
- Handling static blocks：
_product-cardや_collection-cardand similar static blocks must not be included inblock_orderand have other constraints, requiring theme-specific handling - Figma MCP rate limits：Starter/View/Collab: 6/month (practically unusable), Organization (Dev/Full): 200/day, Enterprise (Dev/Full): 600/day. This run used about 15 calls, so Organization is sufficient