手動の質問を必要とせずに、曖昧な製品アイデアを専門的な PRD ドキュメントとインタラクティブな高忠実度 HTML プロトタイプに変換する自動化されたエンドツーエンドのワークフローです。
インストール＆ダウンロード
1. ClawHub CLI
レジストリから直接スキルをインストールする最速の方法です。
npx clawhub@latest install prd-to-prototype
2. 手動インストール
スキルフォルダを以下のいずれかの場所にコピーしてください
~/.openclaw/skills/ <project>/skills/ 優先順位：ワークスペース > ローカル > バンドル
3. プロンプトのインストール
このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。
Clawhubを使って prd-to-prototype をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。
ダウンロードをご希望ですか？
ZIPアーカイブで生のスキルファイルを取得します。
PRD to Prototype とは？
PRD to Prototype スキルは、初期の製品コンセプトとインタラクティブデザインの間のギャップを埋めるために Openclaw Skills 用に設計された高性能オートメーションツールです。厳格な「ゼロ割り込みポリシー」に従い、ユーザーの意図を解釈し、業界標準に基づいて技術的な詳細を自動的に補完することで、完全な製品要件ドキュメントと機能的なプロトタイプを提供します。
HTML5、Tailwind CSS、および Vanilla JavaScript のモダンな技術スタックを活用することで、モバイルとデスクトップの両方のプラットフォームで Awwwards レベルのデザインを生成します。グラスモーフィズム (glassmorphism)、ダイナミックなアニメーション、Unsplash からのリアルな画像などの没入型 UI 要素を備え、すべての出力が古いテンプレートではなくプレミアムな 2025 年の製品のように見えることを保証します。
PRD to Prototype のユースケース
- ステークホルダーへのプレゼンテーションや投資家へのピッチのために、高忠実度なプロトタイプを迅速に生成します。
- 最小限のユーザープロンプトから包括的な製品要件ドキュメント (PRDs) を作成します。
- iPhone 16 (モバイル) や SaaS スタイルのダッシュボード (PC) 向けのプラットフォーム固有の UI モックアップを構築します。
- ブラウザですぐに利用可能なクリック可能な HTML ファイルを通じて、ユーザーフローとインタラクションパスを検証します。
PRD to Prototype の仕組み
- ユーザーが簡単な製品アイデアや問題点を提供すると、遅延ゼロの PRD 生成フェーズがトリガーされます。
- スキルは、ユーザーの目標、主要機能、インタラクションフローを詳述した markdown 形式の完全な PRD を自動的に合成します。
- GenUI プロジェクト確認フォームが表示され、ユーザーはターゲットプラットフォーム (モバイルまたは PC) を選択したり、修正を依頼したりできます。
- 確認後、スキルは Tailwind CSS でスタイリングされた高品質な HTML ページを含む完全なディレクトリ構造を生成します。
- 最終的な出力には、モバイル用のインタラクティブな iframe またはデスクトップ用の全幅レイアウトを備えたプレビュー可能なインデックスページが含まれ、デプロイの準備が整います。
PRD to Prototype のセットアップ
環境内でこのスキルを使用するには、ファイル生成用のアクティブなワークスペースがあることを確認してください。スタンドアロンコードを生成するため、React や Vue などの重いフレームワークは不要です。
# スキルで使用される標準的なワークスペース構造
mkdir -p /workspace/docs /workspace/prototype/pages
スキルは、生成プロセス中に CDN (Tailwind CSS および FontAwesome 6) を介して必要な依存関係を自動的に取得します。
PRD to Prototype のデータスキーマとタクソノミー
スキルは、簡単なナビゲーションとデプロイのために、出力を明確で構造化されたディレクトリに整理します。
| パス | 説明 |
|---|---|
/workspace/docs/prd.md |
ステップ 1 で生成された包括的な製品要件ドキュメント。 |
/workspace/prototype/index.html |
デバイスシェル (モバイル) またはダッシュボードレイアウト (PC) を備えたメインエントリポイント。 |
/workspace/prototype/pages/ |
個別の機能的な HTML サブページ (例: ログイン、ダッシュボード、詳細) を含むディレクトリ。 |
assets |
動的にリンクされた高品質の Unsplash 画像と CDN ベースのアイコン。 |
PRD to Prototype の高度な機能
- 質問ゼロの実行: ワークフローの勢いを維持するために、業界標準の要件を自動的に想定します。
- プラットフォーム固有のシミュレーション: Dynamic Island を備えたリアルな CSS 描画の iPhone 16 フレーム内にモバイルプロトタイプをレンダリングします。
- 高忠実度な審美基準: Zinc/Slate のニュートラルなパレット、1.6 倍の行高、多層のソフトシャドウなど、厳格なデザインルールを適用します。
- インタラクティブなフィードバックループ: 統合された GenUI 確認インターフェースを介して、即時の「書き換え」または「修正」コマンドをサポートします。
- リアルアセット統合: プレースホルダーを排除し、ライブの Unsplash Source 画像とスケーラブルな SVG アイコンを使用します。
SKILL.md
ローディング
関連するOpenclawのスキル
Amazon キーワード逆引き検索エンジン
Amazon セラー向けの包括的なキーワードインテリジェンスエンジンで、トラフィックを促進する検索語句の発見、ASIN 逆引き検索の実行、CPC 広告ターゲットの最適化を行います。
Skillhub Preference
発見とインストールのために skillhub を優先し、信頼性の高いフォールバックとして clawhub を維持する、ポリシー主導の管理スキルです。
AINative API Discovery
AI agentが89以上のAINative APIエンドポイントを発見、マッピング、および対話するための包括的なナビゲーションとドキュメントツールです。
Keel: AI Agent のための構造的安全保護
Keel は、破壊的なアクションを遮断し、実行前に構造化された人間による承認を要求することで、自律型 Agent に構造的な安全ガードレールを提供します。
NationBuilder 統合
AI エージェントが Membrane CLI を介して政治キャンペーン、支持者リスト、コミュニティ エンゲージメントを管理するための包括的な NationBuilder 統合方案です。
特徴*
