【ITニュース解説】あるべき場所に帰ろう！ReActに立ち返りClaude Code + Playwright MCP + Figma MCPでデザインを反映

Webサイトを開発する際、まずFigmaのようなツールを使ってデザインを作成する。その次に、作成したデザインを実際にブラウザで表示できるWebサイトのコード（HTML、CSS、JavaScriptなど）に変換する作業が必要となる。このデザインからコードへの変換作業は、通常、プログラマーが手作業で行うため、多くの時間と労力がかかるだけでなく、デザインの細かな意図がコードに正確に反映されないという課題も生じることがある。

この記事では、Figmaのデザインを効率的かつ正確にWebサイトのコードに変換するための新しいアプローチが提案されている。Figmaには「MCPサーバー」という機能があり、プログラムからデザイン情報を取得できる仕組みが存在する。しかし、この機能を使って直接コードを生成しても、実用的な品質のコードにならなかったり、デザインの細かい部分が再現できなかったりといった問題があり、一時的に注目された後も、利用を諦めてしまった人が少なくなかった。

この問題に対して、記事は「エージェント」という概念を導入し、AIの力を活用した解決策を示す。エージェントとは、人間が行っていた職人的な、あるいは繰り返し行われる作業をAIが自律的に代行する機能のことだ。これにより、より効率的に、そして高品質な成果物を生み出すことを目指す。

特に重要なのが「ReAct」というAIエージェントのフレームワークである。ReActとは「Reasoning（思考）」と「Acting（行動）」を組み合わせた言葉で、AIが人間の思考プロセスに似た形で動作する仕組みを指す。具体的には、まず状況を分析し、目標達成のための計画を立て（思考）、その計画に基づいて具体的な行動を実行する（行動）。そして、その行動の結果を評価し、必要であれば計画を見直したり、次の行動を決定したりするというサイクルを繰り返す。このReActの考え方を中心に据えることで、単にコードを生成するだけでなく、デザインの意意図を理解し、その通りに実装されるまで自律的に調整を行うことが可能になる。

このReActフレームワークを基盤として、Figma MCP、Claude Code、Playwright MCPという三つの主要な技術が連携する。それぞれの技術が果たす役割は以下の通りだ。

1. Figma MCP: これは、Figmaで作成されたデザインを常に監視し、そのデザイン情報を取得する役割を持つ。デザインに変更が加えられたり、新しい要素が追加されたりした際に、その最新のデザイン情報をReActエージェントに伝える「目」のような存在である。これにより、システムは常に最新のデザインに基づいて作業を進めることができる。

2. Claude Code: これは、AIによってコードを自動生成する「脳」の役割を担う。Figma MCPから提供されたデザイン情報と、ReActエージェントからの具体的な指示に基づいて、HTML、CSS、JavaScriptといったWebサイトの構成に必要なコードを生成する。ただ生成するだけでなく、エージェントからの修正指示を受けて、よりデザインに忠実なコードを目指して調整を行う。

3. Playwright MCP: これは、生成されたコードが実際にデザイン通りに表示されているかを確認する「目」であり「手」のような役割を持つ。Claude Codeが生成したWebサイトのコードを実際のWebブラウザで実行し、その表示結果を検証する。具体的には、Webページのスクリーンショットを撮ったり、Webページ内の各要素がどのような状態になっているか（色、サイズ、配置など）を示すDOM情報を取得したりする。これらの情報をReActエージェントにフィードバックすることで、コードの品質を評価するための客観的なデータを提供する。

これらの技術はReActエージェントによって統合され、次のような自動化されたサイクルでWebサイトのコードを生成・調整する。 まず、ReActエージェントはFigma MCPを通じて、現在の最新デザイン情報を取得する。このデザイン情報を基に、エージェントは「このデザインをコードで再現するにはどうすれば良いか」を思考し、Claude Codeに対して具体的なコード生成の指示を出す。

Claude Codeは、この指示に従ってWebサイトの初期コードを生成する。生成されたコードは次にPlaywright MCPへと送られる。Playwright MCPは、そのコードをWebブラウザ上で実行し、表示されたWebページの状態を詳細に確認する。例えば、デザインのレイアウトが正しいか、色やフォントがFigmaのデザインと一致しているかなどを、スクリーンショットやDOM情報と比較してチェックする。

Playwright MCPから得られた検証結果は、再びReActエージェントに戻される。エージェントは、この検証結果と元のFigmaデザイン情報を照らし合わせ、生成されたコードがデザインの意図を正確に反映しているかどうかを評価する。もし、デザインとコードの間に不一致や問題点が見つかった場合、エージェントはその問題を特定し、どのように修正すべきかを思考する。

そして、エージェントは再びClaude Codeに対して、具体的な修正指示を出す。例えば、「この要素の間の余白がデザインよりも狭いから、もう少し広げてほしい」といった詳細な指示だ。Claude Codeはその指示を受けて、修正されたコードを再生成する。この修正されたコードは、再びPlaywright MCPによって検証され、ReActエージェントが評価するというサイクルが繰り返される。

この「思考（デザインの解釈と指示）→行動（コード生成）→評価（コードの検証）→思考（問題点の特定と修正指示）→行動（コード修正）」というプロセスは、生成されたコードがFigmaのデザインと完全に一致し、エージェントが最終的に「これで良い」と判断するまで自動で繰り返される。これは、人間がデザインとコードを見比べながら手作業で修正を繰り返す作業を、AIが自律的に、かつ高速に行うことに他ならない。

このシステムが目指すのは、Webサイト開発におけるデザインから実装までのプロセスを大幅に効率化することである。プログラマーは、デザインの細かい調整やコードの修正といった繰り返し作業から解放され、より創造的な開発や、複雑なロジックの実装といった高度なタスクに集中できるようになる。また、デザインの変更にも迅速に対応できるようになり、最終的には高品質なWebサイトをより早く市場に投入することが可能となる。

このように、この記事で提案されているアプローチは、Figmaで作成されたデザインの意図を、AIエージェントと複数の技術を連携させることで、正確かつ効率的にWebサイトのコードとして実現するための先進的な手法を示しており、システムエンジニアを目指す初心者にとっても、AIが開発プロセスをどのように変革していくかを知る上で非常に示唆に富む内容である。