はじめに
近年、AIツールの進化により、アプリケーション開発の効率は大きく向上しています。
バックエンドの実装においては、AIツールを使うことでかなり実用的なレベルまで効率化できることを実感していました。
一方で、フロントエンドの実装については、これまであまりAIを活用したことがありませんでした。
特にUIの構造やレイアウトはテキストだけで伝えるのが難しく、
実装まで任せるのはまだ難しいのではないかと感じていたためです。
そこで今回は、Claude CodeとMiro MCPを組み合わせて、
フロントエンドの実装にどこまで活用できるのかを試してみることにしました。
本記事では、特に「どこまで実装を任せられるのか」「どの部分は人手が必要なのか」という観点でまとめています。
検証の概要
今回はClaude CodeとMiro MCPを組み合わせて、フロントエンドの実装を行いました。
具体的にはMiro上で簡単な画面構成を作成し、その情報をもとにClaude Codeでコードを生成する、という流れで開発を進めています。
今回は特にMiroの情報からどこまでUIを実装できるのかという点に注目して検証を行いました。
環境構築（Miro MCPのセットアップ）
Miro MCPのセットアップについては、公式の手順に沿って環境構築を行いました。
Claude Codeにmiroのmcpを追加するには以下のコマンドを実行します。
claude mcp add --transport http miro https://mcp.miro.com/
Miro側で必要な設定やClaude Codeの設定などは以下の公式サイトなど、情報が多く出ているのでそちらをご覧ください。
Claude CodeのMCPについての公式ドキュメント
miroのMCPサーバについての公式ドキュメント
Claude CodeからMiro MCP Serverを使ってボードを操作してみた
実装してみた結果
今回は以下の流れでフロントエンドの実装を行いました。
1. Miroで画面構成を作成
まずはMiro上で実装したい画面のデザインを作成しました。
今回はMiroのサイドキック機能を使用しました。(Miroのサイドキックについてはこちら)
出来上がったものが以下です。
2. Claude Codeでコードを生成
次に、MCPを通じてMiroの情報を参照しながら、Claude Codeにフロントエンドの実装を指示しました。
実際には、以下のような形で指示を出しています。
3. 生成結果と比較
Claude Codeによって生成されたコードをもとに画面を表示すると、以下のようなUIになりました。
4. 実際の所感
実際に試してみたところ、全体としては7割程度は自動で再現できているという印象でした。
想定していたよりもUIの構造はしっかり再現されており、ベースとしては十分に使えるレベルだと感じています。
一方で、フォントや余白といった細かいスタイリングについては、そのままでは意図通りにならない部分もあり、調整が必要でした。
そのため、完全に任せるというよりは、土台となるUIを生成させた上で仕上げを行うような使い方が現実的だと感じました。
5. 画像アップロードとの違い
今回はMiro MCPを使用して実装を行いましたが、Claude Codeでは画像をアップロードしてUIを生成する方法も利用できます。
実際に試してみたところ、画像アップロードでも想定以上に再現度の高いUIを生成することができました。
見た目の再現という観点では、十分実用的なレベルに達していると感じています。
一方で、Miro MCPを利用する場合は、フォントやテキスト情報なども含めて参照できるため、
より正確にUIを再現できる可能性があると感じました。
そのため、画像アップロードでも十分に実装は可能ですが、
より細かい情報をもとに再現性を高めたい場合には、Miro MCPの活用も有効だと考えています。
まとめ
今回、Claude CodeとMiro MCPを組み合わせてフロントエンドの実装を試してみましたが、
想定以上にUIを再現できることが分かりました。
実務で活用できるレベルのコードを生成できており、
フロントエンドの実装工数は大きく削減できる可能性があると感じています。
一方で、フォントや余白といった細かいスタイリングについては調整が必要な場面もあり、
現時点では完全に任せるというよりもベース生成 + 仕上げという使い方が現実的だと感じています。
また今回はラフな構成での検証でしたが、
Miro側のデザインをより整理・詳細化することで、さらに再現度を高められる可能性もあると感じました。
P.S.
今回の検証で使用した画面は、Claude Codeの学習用で作成している簡易的なSNSアプリのログイン画面です。
Miro MCPを使いながらフロントエンドの実装を進めています。
全体のコードはGitHubで公開しているので、良ければ見てみてください。
https://github.com/yusaku86/sns
