コーディング不要！Figmaのデザインを Claude に読み込ませてShopifyのテーマに反映する方法

昨今話題になっているClaudeを使用して、デザイン作成〜Shopifyでのテーマ構築まで実際に検証してみました！
AI アシスタントClaudeと MCP（Model Context Protocol）を活用することで、コーディング不要でFigmaのデザインをShopifyテーマに直接反映できます。
本記事では、その具体的な手順をステップごとに解説します。

できること
・テキストで指示するだけでFigmaにデザインを作成
・FigmaのデザインをそのままShopifyテーマ（Liquid / CSS）に反映
・セクションの追加・カスタマイズ（ヒーロー、カード、サイドバーなど）
・カスタマイザーから設定できる項目（色・テキスト・画像など）の追加
・スクリーンショットを見せながらリアルタイムで修正

検証の対象外
・まったくゼロからのテーマ新規作成（ベーステーマは必要）
・Shopifyアプリ側の機能開発
・複雑な決済・会員機能のカスタマイズ

今回行ったことはあくまでもデザイン面での実装となります。
アプリを導入した機能追加などは対象外です。

必要なツール
・Claude Cowork（Proプラン以上の契約が必須）
・Figma
・Shopify

事前準備
・Claudeのデスクトップアプリをインストール
・ Figmaアカウントを用意する（無料可）
・Shopifyストアにテスト用テーマを複製しておく（本番テーマは直接編集しない）
・CoworkにFigma MCP・Shopify MCPプラグインをインストールする

まずはClaudeのデスクトップアプリをインストールし、アプリ画面を開きます。
Proプラン以上を使用している場合は、アプリを開くとCoworkに切り替えるタブが表示されています。

続いて、Coworkのコネクタ検索にて「Figma」と検索し、Figma MCPプラグインをインストールします。

同じく、Coworkのコネクタ検索から「Shopify」と検索し、Shopify MCPプラグインをインストールしてください。

先ほど接続したFigma MCPを使用します。
まずは、予めFigma上で作成しておいたチーム内のデザインファイルのリンクをコピーしてください。
使用したいページのページリンクをコピーして、プロンプトを送信すると、希望したページ上にデザインをおこすことが可能です。

Point💡プロンプトの書き方
使用するプロンプトもClaudeで作成できます。
使用したいトンマナ、セクション、参考サイトを渡せばそのプロジェクトに合ったデザインシステムを作成可能。
その内容をそのままCoworkに渡せば、初回でかなりイメージに近いデザインが生成されます。

Figmaで作成したデザインを反映したいストアを、Shopify MCPを使用して選択します。
その後、Figmaから抽出した画像と反映したいテーマを指定することで実際にカスタマイズまで実行してくれます。

出来上がったテーマのプレビューを見ながら細かい箇所の修正を実施します。
初回では、渡した画像を完璧に再現されることは少ない印象です。
そのため、ブロックごとに細かく希望を伝えて修正対応をする必要があります。

今回の検証で、Claude Cowork + Figma MCP + Shopify MCP の組み合わせで、デザインから実装まですべてをテキスト指示で完結できました！
ただし、作成されたデザインをそのまま使用して問題ないのか？実装されたカスタマイズがどのような仕組みになっているのか？など、人の目で確認する内容はまだまだありました。

現時点では、あくまでもエンジニアやデザイナー（作成されたものの良し悪しが判断できる）が使用し、時間コスト削減として活用していくと良さそうです。

導入自体は比較的簡単にできるため、気になる方はデスクトップアプリをインストールして試してみてください！