Lunagraph

Lunagraphとは？

Lunagraphは、実HTML、CSS、Reactコードを使ってユーザーインターフェースを作成するためのデザインキャンバスです。主な目的は、チームがUIをデザイン・実装する際にデザインと実際のコードを一致させ、「ハンドオフ」のギャップを減らすことです。

デザインを別途の成果物として扱い、誰かがコンポーネントに翻訳する必要があるのではなく、Lunagraphは成果物をコードそのものとし、Claude CodeによるAI支援を提供します。

実コード（HTML、CSS、React）に直接デザイン： キャンバスの作業が実際のマークアップやコンポーネントに反映され、出力が実行されるものと一致します。
UIチーム向けゼロハンドオフワークフロー： デザイナー、プロダクト、開発者、エージェント間で一貫性を保ち、デザインから実装への翻訳ステップを不要にします。
Claude Code搭載のコンテキスト認識支援： AIパートナーはキャンバスと既存コードベース全体を把握して作業します。
キャンバス＋チャット＋ローカルリポジトリの往復： チャットがキャンバスとローカルコードベースにアクセスし、リポジトリに直接変更を実装して結果をプレビューします。
ライブプレビューとスクリーンショット比較： ライブiframeでプレビューし、デザインと出力のスクリーンショットで比較します。
デザイン変更からのリポジトリ内コンポーネント更新： PricingCardなどのコンポーネント生成や機能比較テーブルの更新例が示されています。

デザイナーから実装へのUI作成： デザイナーがキャンバスでUIレイアウトを作成し、結果のコードが実HTML/CSS/Reactを使用することを保証します。
ハンドオフ摩擦のないチームワークフロー： デザイナー、プロダクト、開発、エージェントの混合チームが同一ワークフローで作業し、役割間の翻訳ステップを減らします。
AI支援での複雑コンポーネントリファクタ： コンポーネントが複雑化（例：サイドバー）したら、チャットで小さいコンポーネントに再構築し、折りたたみトグルなどの動作を追加します。
デザイン意図からの既存ページ更新： スクリーンショットやパレット参照を使ってUIセクションを更新し、期待レイアウトとスタイルに一致させます。
キャンバスデザインからの価格/機能UI構築： 価格カードや機能テーブルのコンポーネントを生成し、ページレイアウトに組み込み、既存テーブルマークアップを更新します。

Lunagraphはどのようなコードを生成・扱いますか？ 実HTML、CSS、Reactコードを生成・扱います。
Lunagraphは別途デザイン文件のハンドオフに依存しますか？ ウェブサイトは「ゼロハンドオフ」ワークフローを強調し、成果物を翻訳が必要なデザイン文件ではなくコードそのものとします。
このワークフローで「Claude Code搭載」とは？ Claude Codeはキャンバスとローカルコードベースを考慮したクリエイティブデザインPartnerとして、チャット経由で実装タスクを支援します。
ユーザーはデザインと出力の一致をどう検証しますか？ ライブiframeでプレビューし、キャンバスとレンダリング結果をスクリーンショットで比較します。
AIはローカルリポジトリの読み書きができますか？ ページに「AI File Access」の例があり、プロジェクト外のファイルシステムパスで読み書きを示唆し、ローカルリポジトリ統合を思わせますが、詳細は記載されていません。

汎用デザインツール（Figmaスタイル）+ 別途開発実装： デザインとコードを異なるツール・ワークフローで管理し、デザインファイルをコンポーネントに翻訳する必要がある。
コードファーストUIビルダー（Reactコンポーネントエディタ）でデザインキャンバスなし： UIコードで直接構築に焦点を当てるが、デザイン意図を捉え伝えるためのキャンバスを提供しない場合がある。
IDEに統合されたAIコーディングアシスタント： コード生成やリファクタリングを支援するが、通常デザインキャンバス、ライブiframeプレビュー比較、「キャンバス+チャット+リポジトリ」ループを組み合わせていない。
コンポーネントやスタイルをエクスポートするUIプロトタイピングツール： デザインと実装を橋渡しするが、エクスポートや変換を伴い、コードを主な成果物として生成しない場合がある。