Cerebras
本記事では、CodexとFigma MCPを使用してWebサイトのデザインをFigmaに自動的に複製する著者の経験を紹介します。マルチエージェントオーケストレーションにより、コンテキスト制限や実行時間の長さなどの問題を克服し、5分未満で5ページの完全な複製を実現しました。
2026年4月16日、CerebrasブログはFigmaマルチエージェントに関する記事を公開しました。著者のSherif Cherfaは、AIエージェントを使用してデザイン複製プロセスを自動化した経験を共有しています。
著者はエージェントオーケストレーションに興味を持ち、現在10〜20のAIエージェントを24時間稼働させています。AIエージェントは彼のアイデアを現実のものにできると述べています。多くの開発者と同様に、彼は「トークン不安」を感じており、これまで以上に多くのことが可能になり、少しでも時間ができると新しいエージェントセッションを開始したくなるとのことです。
著者は、支払いたくないクールな製品を見つけたらCodexが作ってくれる、ばかげたアイデアを実現したいときもCodexがやってくれる、同じことを繰り返すのにうんざりしたらCodexにお願いすると言います。無限に忍耐強く、知的で、役立つエージェントの軍団が待機しているなら、それを活用しない手はないと考えています。
著者のキャリアはWeb開発から始まり、その頃は洗練されたポートフォリオを構築するのに数週間かかりました。エージェント工学が普及し始めたとき、人々はかつてない速さでアプリケーションやWebサイトを構築できるようになりましたが、当時のツールは主にコーディングに焦点を当てていました。そのため、Figma MCPのアップデートを見たとき、著者は驚きと興奮を覚えました。Figmaデザインに基づいてフロントエンドを構築することは常に楽しく、フロントエンド開発者とデザイナーのコラボレーションが優れたアプリやサイトを生み出します。
著者はCodexがこのプロセスを支援できるかどうかをテストしました。Figma MCPの新機能を使用して、Codexにデザインパネルを作成させました。彼は、製品ディスカッションごとに進化するFigmaデザインボードがあり、関係者が要件を議論している間にエージェントがデザインをリアルタイムで進化させることを想像しました。デザイナーと開発者は、機能の設計から開発への移行も容易になります。
著者は成功基準を設定しました：Codexに任意のWebサイトのリンクを与え、サイトを取り込んでFigmaに正確なレプリカを作成し、適切なデザイン標準に従い、コンポーネント分割、変数（背景色、テキスト階層）の使用、Figmaから直接実装可能なデザインを30分以内に、手動操作なしで実現することです。
CodexとFigmaの設定には、Figma MCPスキル、Codex + Figmaプラグイン（Codexアプリ推奨）、Figma MCPガイドの読了が必要です。著者は20回以上のセッションで3つの一般的な問題に遭遇しました。
- Figmaデザインが大量のコンテキストを消費する：単一のビューポートで64K〜128Kトークンを消費し、思考トレース、ツール呼び出し、モデルの修正などを含めると、エージェントは半ページを複製した時点でコンテキストウィンドウを圧縮する必要があり、目標から逸脱します。
- デザインの複製に時間がかかる：1回の実行が2時間以上続き、2ページしか完了せず、その後ループに陥りました。
- エージェントが最新のMCPを訓練されていない：エージェントが標準のMCPの使用を拒否し、独自のHTMLインポーターを作成しようとし、Figmaがサポートしないワークフローを試みました。
- エラーの処理：著者は最新バージョンのCodex、プラグイン/MCP、およびFigmaのプリパッケージスキルを使用することを推奨しています。主な問題は、Figmaデザインのコンテキスト過多、エージェントが更新されたツールの使用方法を知らない、実行時間の長さでした。
解決策として、サブエージェントを使用して単一エージェントの過負荷を防ぎ、FigmaのGitHubでスキルとガイドを調べ、作業を並列化しました。
Codexは過去のセッションから学習できます。著者はCodexにすべての過去セッションをレビューさせ、失敗点を特定させ、Web検索で適切なガイドラインを見つけさせました。Codexはセッション履歴を検索し、間違ったツールを使用していると判断し、Web検索でFigma書き込みスキルを見つけ、調整可能なプロンプトを返しました。これにより大幅に改善されましたが、速度は依然として遅かったです。
最後に解決すべきは出力速度でした。すべてが順次実行されていたため、5ページをコピーするには1ページずつ慎重にコピーする必要があり、非常に時間がかかりました。主な問題は、トークンの量が膨大であることと、すべてが順次実行されていることでした。著者はマルチエージェントオーケストレーションがコンテキスト管理に非常に役立つことを発見しました。彼は完全並列化のガイドに従い、メインのオーケストレーターエージェントがサブエージェントを生成するだけにし、各サブエージェントが1ページのみを処理し、オーケストレーターが出力をレビューして承認または修正用のサブエージェントを生成するように設定しました。
著者は最初にGPT-5.4-Mediumを使用してオーケストレーターの指示を最適化し、数回の反復後、GPT-5.3-Codex-Sparkでも処理可能な適切にスコープされたプロンプトを得ました。
結果：5分未満でWebサイトの5ページをほぼ完璧に複製できました。ワークフローは再利用可能で、著者は関心がある人のためにGitHubリポジトリを作成する可能性があると述べています。