はじめに
みなさま、はじめましてエアークローゼットエンジニアの 三井 です。
私は最近、新規プロジェクトにリードエンジニアとして参画しており、AIフレンドリーなレポづくりを意識して開発を進めております。
開発期間が限られているプロジェクトを進めるなかで、日々どうしたらなるべく早く正確にプロジェクトを完遂できるか試行錯誤した結果、Claude と Figma MCP を組み合わせることで個人的に最短でフロントエンドUI(React Components)を作成する方法を編み出したので、共有します！
フロントエンドのテクスタック
- Next.js
- shadcn/ui: UIライブラリ
- Tailwind CSS
- Figma: デザインツール
- Storybook: フロントエンドのテスト及びドキュメントツールライブラリ
今回の開発ではTailwind CSSでカスタムが簡単できるUIライブラリであるshadcn/uiを使用しております。"Don't reinvent the wheel."をモットーにしている私にとってはもってこいのライブラリであります:)
開発ステップ/コマンド
コマンド1: Shadcn/UIのコンポーネントをインストールする
まず、一番初めに作りたいベースとなるコンポーネントをインストールします。
今回の例ではTabsをインストールしたいと思います。
pnpm dlx shadcn@latest add tabs
コマンド2: Storybookでコンポーネントを描画してみる
次に、Claudeを使用して前のステップでインストールしたコンポーネントに対してStorybookを作成させます。
当然、この段階ではShadcn/UIの原型に対して作成されるので実際に使用するデザインとは異なります。
このステップにより次のステップでカスタムされたコンポーネントとの違いがわかりやすくなります。
CLAUDEに何度もやらせる指示はCLAUDE.mdに書くよりもコマンドしてしまう方が再現性高く仕事をこなしてくれるので私はgenerate-storybook.mdというファイルをroot/.claude/frontend下に用意しました。
./claude/
├── frontend/
│ ├── generate-storybook.md
├── adjust-component-design.md （次に出てきます）
実際のコマンドは大まかにいうと引数にファイル名をとり、そのファイル名に対してStorybookを作成してくださいというものです（コマンドの詳細はリンク参照してください）。
mdファイルの中身はこんな感じです。
実行するコマンド
/frontend:generate-storybook ${ファイル名}
e.g.,今回の例はTabs
/frontend:generate-storybook apps/web/components/ui/tabs.tsx
実際の作成の様子
するとあら不思議？？こんなに具体的なStorybookを作成してくれます。
コマンド3: FigmaのデザインにShadcn/UIコンポーネントを調整する
前提条件として予めローカルにFigma MCPをインストールしておきます。
前ステップにて、Shadcn/UIのTabsそのもののデザインと使用例が確認できたので、プロジェクトで実際に使用するコンポーネントにデザインを調整したいと思います。
実際のFigmaのTabsデザインはこんな感じです。
実行するのは用意しておいたadjust-designというコマンドです。
ざっくり言うと、選択したコンポーネントをFigma URLのデザインをもとにしてデザインを調整するコマンドです(コマンドの詳細はリンク参照してください)。
mdファイルの中身はこんな感じです。
実行するコマンド
/frontend:adjust-component-design ${調整したいコンポーネントのPath} ${Figmaの選択されたコンポーネントのURL}
e.g.,今回の例はTabs
/frontend:adjust-component-design apps/web/components/ui/tabs.tsx ${Figmaの選択されたコンポーネントのURL}
ちなみに、Figmaデスクトップアプリを使うと簡単に選択した範囲のURLがコピーできます。
このコマンドを実行するとデザインを調整したあとに再度、Storybookを上書きすることができます。
デザイン調整後のStorybookがこちら!!!
Figmaデザイン通りの色を使っているのとコンポーネントが丸くなったのが一目瞭然かと思います。
これでFigmaのデザイン通りのコンポーネントができました。
終わりに
補足としていくつか今回のセットアップが上手くいくようにやっておいた方が良いことを軽くご紹介してこの記事を終えます。
まず、globals.cssにてTailwind CSSを設定する際にセマンティックカラーシステムなどを利用して、できるだけ配色等に役割を与えてデザイナーにも同じセマンティックカラー名を使用してもらうとClaudeは意図をより読み取ってくれます。
また、皆さんお気づきかもしれませんがデザイン調整後にStorybookの例が日本語になっています。これにはトリックがあって、明示的にlayout.tsxの情報を参照させました。layout.tsxにはMetadataが含まれるのでプロジェクト内容や言語の情報がのっています。するとClaudeはこの情報を加味してStorybookの例を自動作成してくれます。
例えば以下もClaudeがプロジェクトの意図を読み取り自動作成してくれた例です。
いかがでしたか？
AI進歩は目覚ましいですが、それを適切に運用することで開発スピードを格段に上げることができると思います。
参考になれば幸いです！
株式会社エアークローゼットは「発想とITで、人々の日常に新しいワクワクを創造する」をミッションに、ファッションレンタルプラットフォーム"airCloset"や、話題の商品のお試し利用が可能な家具家電レンタルサービス"airClosetMall"といった事業を展開しています。
Discussion