【Shopify × AIエージェント（ストア構築編）】
無料配布しているHorizon用のFigmaデザインキット「Horizon UI Kit」を使い、ストアの要件定義から構築までをAIエージェント（Claude）を使って一気通貫で進めたサンプル事例です。
題材は架空のアパレルストアです。まず要件定義シートで、ストアのコンセプト・画面一覧・掲載内容を決めました。そこから先はClaude Codeの担当です。要件定義シートをもとに、Figma上に代表画面19種類（PC・モバイル合わせて38枚）を作成。さらにFigmaのレイアウト構成や余白・文字サイズまで読み取り、テーマファイルへの反映まで進めてくれます。要件定義が済んでから約2時間で、ストアが形になりました。
実際のストア構築では、標準のセクションやブロックだけでは表現しきれず、独自のセクションやブロックを追加する場面も出てくるため、工程はもっと複雑になります。
そのため、AIエージェントにいきなりテーマファイルを触らせるより、間にFigmaを挟んで先に全体を設計しておくほうが進めやすいと感じています。
Figmaを挟むことで
・必要な画面を漏れなく洗い出せる
・全体のバランスを見ながら、デザインやトーンを調整できる
・作る前に、関係者と完成イメージをすり合わせられる
・AIへの指示と、仕上がり確認の基準にできる
・運用開始後に新しいページを作るときも、既存ページを参照しながらデザインできる
といった様々なメリットが得られます。
使用した要件定義シート・Figmaファイル・完成ストアも公開しています。UI Kitの使い方の一例として、ご覧ください。
※詳細はスレッドに掲載
Horizon UI Kit の使い方 ― 要件定義からFigmaデザイン、ストア構築まで
https://store-dojo.com/blogs/tips/horizon-ui-kit-store-build-example
