未加工のPRDをインタラクティブなデザインツールに変換する

概要

Computerは、単なる静的なモックアップにとどまらず、未加工のPRDを完全なインタラクティブ製品のデザイン環境へと変換します。要件を構造化された画面とフローに解析し、一貫性のあるHTML/CSS UIを生成し、単一のWebアプリ内でスコープ指定された編集、バージョン履歴、ブランチ機能を用いてチームが反復的にデザインをブラッシュアップできるようにします。

主な出力

Computerは、リッチテキストエディタからPRDを受け取り、それを構造化された要素に解析して、実際のナビゲーションで結び付けられた現実的なHTML/CSS画面のセットへと変換する、完全機能を備えたDesignFlow AI Webアプリを提供しました。

解析フローでは、画面、ユーザーロール、フロー、データモデル、エッジケースをサイドバーの編集可能なタグ型カードに抽出し、製品チームがデザイン生成前に構造を微調整できるようにします。生成を実行すると、DesignFlow AIは、一貫したテーマ設定、リアルなデータ、およびページ間を移動できる共有ナビゲーションバーを備えた複数のタスク管理スタイル画面（ダッシュボード、タスクボード、タスク詳細、チームメンバー、設定）を生成します。

このアプリは、3つのプリセットテーマに加えてカスタムの色とフォントを通じてデザインの一貫性を強制し、それらのトークンをタイポグラフィ、スペーシング、コンポーネント全体にワンクリックで適用します。スコープ指定された編集は必須のスコープセレクターとして実装されており、すべてのプロンプトが特定の画面とセクションをターゲットにします。内部的には、アプリはデータセクション属性を使用して選択された領域のみを分離して変更し、他のすべての画面はそのまま変更せずに残します。

各編集では、追加と削除がハイライトされた視覚的な差分が生成され、プロンプトと結果がバージョンタイムラインに記録され、タイムラインスライダーを介して任意の過去のバージョンからの元に戻す/やり直しおよびブランチングがサポートされます。サイトマップ/マップビュー、サムネイルグリッド、およびエクスポートユーティリティ（自己完結型HTML、PNGスクリーンショット、画面ごとのコードコピー）がワークフローを締めくくります。これらはすべてバニラJSで構築されているため、サンドボックス化されたiframe内でスムーズに動作します。

拡大

ヒント

• PRDの前提条件を絞り込む – Computerに入力により多くの形状を与えます。例：「デフォルトのドメインとしてSaaSの生産性向上アプリを想定し、PRDが曖昧な場合はダッシュボード＋詳細＋設定のパターンを優先する。」
• 編集のセマンティクスを制限する – 最も重要なスコープ指定された編集の種類を指定します。例：「明示的に要求されない限り、マイクロコピーの編集よりもレイアウトと階層の変更（セクション、カード、パネル）を優先する。」
• エクスポート先を定義する – 出力をどのように使用する予定かをComputerに伝えます。例：「大規模なリファクタリングなしで、デザインシステムのリポジトリやフロントエンドのコードベースに簡単にコピーできるように、エクスポートされたHTML/CSSを最適化する。」},{