はじめに

昨年こちらの記事を公開しました。

Figma, Reactを連携して優れたUIUXを体系的・効率的に提供するDigeonのデザインシステム

この記事では、積み木として汎用化できるデザインコンポーネントをFigmaで作成し、VSCodeの拡張機能などを利用してReactコンポーネントとして実装するフローによって、デザインの安定性の確保と早く実装できるという内容をお伝えしました。

今回は、生成AIを駆使してさらに積み木UI実装を「爆速」にするアンサー記事になります。前の記事をまだ読んでいない方はぜひご覧ください。

これからのエンジニアリングはAI駆動開発が必須

デザインシステム記事を公開した当時とは価値観が変わるほど、ここ数ヶ月の生成AIとそれを用いたコーディングエージェントが進化しています。

UIに限らずあらゆる実装や設計にコーディングエージェントが使われるようになり、ソフトウェアエンジニアとしての仕事のあり方や働き方に大きな変化が生じてきています。

生成AIを利用した開発は今の時代において必須であり、好き嫌いの問題ではありません。AIを使わずに人力に頼った開発を続けていくといずれ他社や社会全体の成長の速さについていけず破綻してしまうでしょう。

ディジョンでは、あらゆるエンジニアの業務を「AI駆動」で行う体制に移行しつつあります。その他のAI駆動開発については後日別記事として紹介します。

Figma MCPとデザインシステムを活用した「爆速」デザイン実装

元記事で紹介したように、ディジョンではデザインシステムの運用を行っており、「積み木テンプレート」と私達が読んでいるWebアプリのスケルトンコードにはFigmaのデザインシステムと一致する形でUIコンポーネント(以下積み木コンポーネント)が実装されています。

これまでは、プロジェクトごとに作成されるアプリのデザイン、レイヤーを見て積み木コンポーネントを組み立てる形で実装を行っていました。

その後の AI／ツール周りの進化が著しく、GitHub Copilot Agent の安定版対応（VSCode v1.99 以降）や、Figma MCP（Model Context Protocol）サーバーの v2 化により、デザイン→コード変換からライブラリ反映までのサイクルが一段と短縮できるようになりました（※本稿では元記事のステップを「従来フロー」、新フローを「爆速フロー」と呼びます）。

Figma MCP + Github Copilot Agent

Figma MCPの設定はFigmaのアカウントさえあればものの数分で設定することができます。設定がまだの方はこちらの記事を参考にセットアップを行ってみてください。

// settings.json の一部
"mcp": {
    "servers": {
      "figma-mcp-v2": {
        "command": "npx",
        "args": [
          "-y",
          "figma-developer-mcp@2.0.0",
          "--figma-token=YOUR_TOKEN",
          "--stdio"
        ]
      }
    }
}

Project as Codeとして、コンテキスト情報をリポジトリに配置

Github Copilot Agentはユーザが渡すプロンプトを元に、関連するソースコードやドキュメントを検索し、実装のヒントやルールを確認します。

コンテキストや設計書、さらには要件定義書をもリポジトリに配置するという考え方はProject as Code（PaC）と呼ばれています。

以下の記事でも紹介されているように、プロジェクトに関わるあらゆるドキュメントをソースコードとともにgit管理することでエージェントがそれらの情報も使って実装を生成してくれるようになります。人間と違いAIは経験からではなくプロンプトにわたすコンテキストからのみ実装の設計を行います。私たち人間が日々議論して結論付けた方向性や仕様、要件などをエージェントに上手に渡してあげることで実装内容の精度を向上させることができます。

• https://qiita.com/kumai_yu/items/0aa2fc294f8e1347e36c
• https://speakerdeck.com/atty303/software-architecture-in-an-ai-driven-world

ディジョンのリポジトリにはPaCとして以下を格納するようにしております（他にもあります）。

• 積み木コンポーネントの実装
• 要件定義書のマークダウン
• 画面設計書のマークダウン
• ADR（Architecture Decision Record）のマークダウン

Github Copilot Agentへの生成指示

Figma MCPとPaCの設定ができている状態でGithub Copilot Agentへ例えば以下のような指示を行います。

https://www.figma.com/design/xxxxxxxxxxxxxxxxxxxxx/prj?node-id=1-111&t=yyyyyyyyyyy-1 のデザインを実装してください。

ルール
- docsディレクトリに配置しているマークダウンの内容を遵守してください。
- Figmaの各コンポーネントはsrc/components/ui配下に実装されています。実装時は原則これらのコンポーネントを利用して、src/features/user/components に実装してください。
- UI構築はFigma MCP と連携してFigma上のデザインをdocsディレクトリの内容と照合して実装してください。
- 指定された URL に対して取得に失敗し、何度も繰り返す場合は、中断してユーザに指示を仰いでください。

Figma MCPをつかってデザインを読み込む際は該当するFigmaのコンポーネントのURLをプロンプトに貼るだけでCopilotが読み込みをしてくれます。取得に時々失敗することがあるので、リトライについての指示も記載しています。

また、特筆すべきはルールの箇条書き一つ目にあるdocsディレクトリです。ここにフロントエンドのディレクトリの構成や役割、コーディングルール、要件定義書や画面設計書を記載しているため、「docsディレクトリの内容を遵守する」という指示を書くだけで実装者の意図しない実装方針で書かれることを避けることができます。

Copilotは、docsディレクトリに記載する内容やファイルの分け方などを工夫することでより協力になります。上にあるプロンプトの例に書いてある内容も、毎回プロンプトに書かずともdocsディレクトリ内のADRやコーディングルールに記載しておけば都度Copilotがその内容を踏まえて実装をしてくれます。

なお、Github Copilotを利用する場合はリポジトリのルートディレクトリに.github/copilot-instructions.md をおいておくことをおすすめします。Github Copilotはユーザの指示に対して必ず最初にこのファイルを見るようになっているので、docsを見る旨など毎回Copilotに把握してもらいたい内容をそこにマークダウン形式で記すことでより利便性が増します。

似た概念としてOpenAIが提供しているCodexはルートディレクトリにAGENTS.mdファイルを最初に見ます。Codexを利用する方はこちらのファイルも導入してみてください。

さいごに

本稿では、GitHub Copilot Agent と Figma MCP v2 の組み合わせによる爆速ワークフローを紹介しました。AI駆動開発を取り入れることで、実装からPR作成までの手順を自動化し、スピードと品質を両立できる未来が既に到来しています。

Digeonでは、AIを活用した開発を共に推進してくれるエンジニアを募集しています。CopilotやMCP v2だけでなく日々変化するAIの進化の流れをキャッチアップしつづけ、よりよいAI駆動開発の実現に挑戦したい方を歓迎します。

私達がMVVのバリューに掲げている「狂気」「複利」「爆速」に共感される方はぜひカジュアル面談してみませんか。

採用情報: https://digeon.co/jobs