Google Stitchで作成したデザインをShopifyページに一気に実装するskillを試してみました

GoogleのAIデザインツール「Stitch」が3月に大型アップデートを発表しました。AIネイティブキャンバス、プロジェクト全体を記憶するデザインエージェント、音声操作、即席プロトタイプ、そしてデザインルールをMarkdownで持ち運べるDESIGN.md。Figma株が8%下落するほどのインパクトです。

デザインの思考過程をたどりながら文脈を維持してブラッシュアップしていける「AIネイティブなデザインプラットフォーム」としての進化、キャンバスに置いた素材すべてがAIへの文脈情報になり、指示を重ねるほど精度が上がっていく。多くの方が述べられているように今回のアップデートによる価値はここにあると感じています。

今回はそのうちの実装との接続面、Stitch MCPサーバーとTypeScript SDKの公開、React/Tailwindコードの直接生成への対応といった部分を活用して、Shopifyのテーマ実装まで一気通貫で完了するClaude Codeのskillを作って試してみました。

試してみたこと

StitchでデザインしたECサイト用の特集ページを、Shopifyのテーマエディタで編集可能なLiquidテンプレートに変換しページ公開まで、Claude Codeのskillを使って一気通貫で完了させる仕組みです。（すでにFigmaで実装済みなのですが、同じdesign to codeが可能なツールとして同じことができるかどうかを試してみました）

目指したのは、デザインが確定したら一気にShopifyページまで生成する状態です。Stitch上で生成される画像はすべてイメージ画像となっていますが、商品画像やあらかじめ用意しておいたイメージ画像への差し替えなどを含めて、実際に公開可能な状態のページとして一気に実装します。

ポイントは「情報ソースの判断」

Stitchで生成されたデザインにはダミーの画像や商品データが含まれているため、公開にあたっては本番用のデータへの差し替えが必要です。このとき、assets/にハードコーディングしてしまう方法もありますが、それだとコンテンツを変更するたびにコードを触ることになります。

AIにShopifyテーマのschema設計を正しく理解させ、デザイン上の各要素を適切なリソースタイプに紐づけて実装すれば、テーマエディタからの編集が可能になります。つまり、デザインHTMLの各要素が「何のデータを表示しているか」を正確に判断させることが、Shopifyらしい運用可能なページになるかどうかの分かれ目です。

例えば同じ画像でも：

• ブランドのイメージ写真 → image_picker（テーマエディタでアップロード差し替え）
• 商品画像 → product picker から自動取得（商品を変えれば画像も変わる）
• コレクションのカバー画像 → collection picker から取得

同じテキストでも：

• キャッチコピー → text / textarea（テーマエディタで直接編集）
• 商品名 → product picker から自動取得
• 記事タイトル → article picker から自動取得

この6つの情報ソース（画像・商品・コレクション・ブログ記事・テキスト・リンク）への振り分け指示が、重要なポイントとなります。

5ステップの実装フロー

Step 1: デザイン分析

Stitch MCPでPC/SPのHTML構造を取得し、セクション構成・ブロック型を特定します。カラーやフォントはCSS変数にマッピング。使用されている画像URLも一覧として抽出します。

Step 2: Liquid実装

Tailwindで書かれたCSSをVanilla CSS（BEMスコープ）に変換し、1セクション＋ブロック構成の.liquidファイルとして出力します。

ここで重要なのが自己完結の原則です：

• Vanilla CSS/JSのみ（Tailwind・jQuery不使用）
• フォントは自己読み込み（@import）
• 独自のクラス名でテーマのスタイルに干渉しない
• 単一 .liquid ファイルで完結

画像は3段階フォールバック（アップロード画像 → 外部URL → リソース画像）で、どの方法でも差し替え可能にしています。

Step 3: テンプレートJSON生成

全プリセット値（商品handle、コレクション、テキスト初期値）をテンプレートJSONに設定します。画像はStep 4でCDN URLが確定してから追記します。

Step 4: 画像デプロイ

デザインで使用されているモック画像をダウンロードし、Shopify Files APIでアップロード。取得したCDN URLをテンプレートJSONに追記します。

Step 5: Shopifyデプロイ

Shopify Admin APIでsections/*.liquid、templates/page.*.json、pages.jsonを順番にPUT/POST。これでページが公開されます。

結果

Stitchでデザインを作成した時点で、テーマエディタで全要素を自由に編集できるShopifyページが、数分で立ち上がります。画像もテキストも商品もコレクションも、すべてテーマエディタのUIから差し替え可能です。

Shopifyテーマにおけるschemaの設計ルールやLiquidの作法をClaude Codeに的確に伝えることで、デザインデータから「テーマエディタで編集可能なコード」への変換が、かなり本格的に実用レベルで動くようになってきました。デザインと実装の距離が、また一段縮まったと感じています。