Claude Opus 5.5 Figmaクローンデモンストレーション

Claude Opus 5.5が3時間未満でFigmaクローンを構築

Claude Opus 5.5とManaプラットフォームを使用し、わずか8つのプロンプトで2時間53分かけて機能的なFigmaクローンが開発されました。完成したアプリケーションには、オートレイアウト、ベクター編集、ライブマルチプレイヤーコラボレーションといった主要なデザインツールの機能が含まれており、約20,000レイヤーのファイルをサポートしています。

開発タイムラインとプロンプトの順序

構築プロセスは10月9日の合計4時間19分のセッションにわたり、実際のコーディング時間は3時間未満でした。開発は以下の順序で行われました。

初期エディタ (1プロンプト、54分): フル機能のコラボレーション可能なFigmaクローンを作成するための単一のリクエストからベースエディタが作成されました。
機能の洗練 (5プロンプト、17分): 5つのフォローアッププロンプトにより、フルビュー、コーナー半径ハンドル、ブーリアン演算、Kスケールツール、その他の不足機能が追加されました。
レンダリングの最適化 (1プロンプト、89分): 短い計画フェーズの後、元のSVGレンダラーを置き換えるタイルベースのレンダラーが構築されました。
最終修正 (1プロンプト、10分): 同期を待たずにキャッシュされたファイルが即座に表示されるように修正が実装されました。

主要機能セット

生成されたエディタには、プロフェッショナルなデザインツールの幅広い機能が実装されています。

レイアウトとフレーム: フレーム、オートレイアウト、グループ、制約、「ハグ（hug）」および「フィル（fill）」設定、コンテンツのクリップ、レイアウトグリッドのサポート。
ベクターツール: ペンツール、鉛筆ツール、ポイント編集、ブーリアン演算（結合、減算、交差、除外）、マスク。
コンポーネント: メインコンポーネント、インスタンス、オーバーライドの実装。
スタイリング: Google Fonts、グラデーション、画像塗りつぶし、ストローク、シャドウ、ぼかし効果の統合。
プロトタイピング: トランジションを伴うインタラクショントリガー（クリック、ホバー、遅延）および専用のプレゼンテーションモード。
マルチプレイヤー: ライブカーソル、選択範囲の追跡、カーソルチャット、フォローモード、コメントスレッド。
エクスポート: 選択範囲をPNG、JPG、SVG、またはCSSコードとしてエクスポートする機能。

高性能レンダリングエンジン

数千レイヤーを超えると発生する元のSVGレンダラーのパフォーマンス低下を解決するため、ClaudeはそれをタイルベースのCanvas 2Dエンジンに置き換えました。このエンジンは5つの主要な技術戦略を活用しています。

インクリメンタルなシーン更新: 編集によって影響を受けるレイアウトのみが再計算されます。
512pxタイリング: エンジンはパン操作中にキャッシュされたタイルを再利用し、編集によって影響を受けるタイルのみを再描画します。
フレームビットマップ: 大きなフレームは、さまざまなズームレベルでビットマップとしてキャッシュされます。
空間インデックス: ファイル全体をスキャンすることなく、カーソル下のレイヤーを特定するために空間インデックスが使用されます。
統一されたテキスト測定: レイアウトと描画の両方で同じ測定値を使用し、一貫性を確保しています。

レンダラーのパフォーマンスベンチマーク

レイヤー数	アクション	SVGレンダラー	タイルエンジン	高速化
10,200	パン	133 ms	18 ms	7倍
10,200	ズーム	515 ms	29 ms	18倍
10,200	フレームドラッグ	292 ms	23 ms	13倍
51,000	パン	875 ms	21 ms	42倍
51,000	ズーム	2,959 ms	61 ms	40倍
51,000	フレームドラッグ	2,685 ms	67 ms	40倍

インフラストラクチャとAI統合

Claudeは、ヒットテストや取り消し機能を含むコアエディタロジックのために、約8,200行のReactコードを記述しました。このプロジェクトは、以下の目的でManaインフラストラクチャに依存しています。

バックエンドサービス: サインイン、ストレージ、ホスティング、ファイル共有、オフラインサポート。
AIアシスタント: 開いているファイルや選択されたレイヤーを読み取り、自然言語の説明に基づいてデザインを作成または修正できる統合アシスタント。

制限事項とコミュニティの批判

このクローンには現在、バリアント、コンポーネントプロパティ、スタイル、変数、単一テキストボックス内の混合フォーマットなど、上級ユーザー向けの高度な機能が欠けています。また、プロトタイプにおける「スマートアニメート」やスクロールフレームも不足しています。

業界の専門家からは、こうしたAI生成クローンの「バイブコーディング（vibe-coding）」という性質について懸念が示されています。元Figmaの従業員は、AIはカジュアルユーザー向けに視覚的な同等性を達成できるかもしれないが、プロフェッショナルグレードのツールに必要な複雑なエッジケースや条件付きロジックを見落とすことが多いと指摘しました。

私はFigmaで変数ワークストリームを主導しましたが、それは私の20年の技術キャリアの中で最も複雑な仕事でした。（パワーユーザーにとっての「シンプル」という定義に到達させるだけでも）そこに含まれるエッジケース、条件分岐、例外の数は驚異的です。 — @handle

他の批評家は、フルクローンに対する8,200行というコード行数の妥当性に疑問を呈し、この実装は本番環境ですぐに使えるツールというよりは、高精度のデモである可能性があると示唆しました。