皆さん、こんにちは。Ｓｋｙ株式会社Ｓｋｙスタイル部では、社内の情報共有システムや各部署向けの業務システム開発、運用を行っています。今回はデザインチームが行っているAIを活用した効率的で高品質なデザイン作成に向けた取り組みや検証結果についてご紹介します。
はじめに
Ｓｋｙスタイル部は社内DXを推進する専門部署で、社内システムの開発を行っています。私たちの部署では開発効率の向上を重要視しており、デザインチームではFigma社からリリースされた「Dev Mode MCP Server」とAI搭載コードエディタ「GitHub Copilot」を組み合わせ、社内システム開発で活用できないか検証を始めました。
MCPで目指すゴール
今回は、Figma社の「Dev Mode MCP Server」に焦点を当てた検証についてご紹介します。 最終的には「Dev Mode MCP Server」と「デザインシステムMCP」を利用して、Figmaのデザインからコードを生成し開発効率を向上させることを目指しています。現在はデザインシステムを運用しており、今後このデザインシステムもMCP化する予定です。
Ｓｋｙスタイル部のデザインシステムは、以下のように構成されています。
- Figmaでデザインとガイドラインを管理
- Storybookで各コンポーネントの使用方法や実装サンプルを提供
- コンポーネントライブラリを各プロジェクトに提供
デザインシステムのMCPではコンポーネントライブラリの情報に加え、Storybookの実装サンプルの情報も提供。デザインシステムの文脈と推奨実装方法を理解させ、より使えるコードの生成を目指しています。
課題とMCPに期待する効果
課題
デザインチームには現在、以下の課題があります。
-
Figmaと実装画面で差分が多く発生
工数がかかるデザインは修正できないことがあり、品質低下につながってしまいます。 -
実装する際、デザイン指示をFigmaに細かく記載する必要がある
デザイン仕様の記載や整備で工数がかかってしまいます。
期待する効果
課題解決に向けてMCPを利用しFigmaからコード生成することで、以下が期待できます。
- 実装工数の削減
- デザイン品質の向上
- デザインの細かな指示書を記載する工数の削減
Dev Mode MCP Serverの検証結果
プロンプトや指示書次第で、一回で質の高いアウトプットを行うことができました。細かいデザインの違いは発生しましたが、修正できるレベルの結果となりました。
Figmaのデザイン
Dev Mode MCP Serverで生成した画面
精度向上のための工夫
検証結果を基にプロンプトや指示書の再検討を行いました。「既存実装を参考にして実装する」という指示の効果は大きく、「一覧画面の実装はこのコード」「詳細画面の実装はこのコード」とコード生成時に参照できるサンプルコードを充実させておくことで、さらなる精度向上が見込めると感じました。
プロンプトや指示書（copilot-instructions.md）の工夫
- デザインシステムのコンポーネント、トークン、アイコンを使って実装する
- 既存実装を参考にして実装する
- コンポーネントの分割ルール
Figmaのデザイン構造に注意する
デザインデータの構造によって出力の精度が大きく変わりました。 ただし、生成がうまくいかなかったときは、デザインデータの構造が一般的に適切とされるかたちになっているか見直しは必要です。
うまくいったデザイン
うまくいかなかったデザイン
今後の展望
実際のプロジェクトで使えるよう、検証サイクルを回してプロンプトやFigmaの改善を行ったり、デザインシステムMCPを作成しAIにデザインシステムのコンテキストを与える取り組みを検討しています。
これからもＳｋｙスタイル部デザインチームでは、AIを活用した効率的で高品質なデザインを目指していきます。今後の進展にご期待ください！