UIプロトタイプ＆ワイヤーフレーム - クリックできるプロトタイプを構築
クリックできるプロトタイプを構築します。UI/UXワイヤーフレーム、アプリモックアップ、そして完全にインタラクティブなHTMLプロトタイプ — ナプキンスケッチからクリック可能な体験まで、1つのプロンプトで実現します。
他のAIデザインツールは静的画像しか生成しません。CellCogは実際に動作するプロトタイプ — 本物のHTML、実際のインタラクション、クリックスルーしてステークホルダーと共有できる現実のユーザーフローを構築します。ランディングページ、モバイルアプリ画面、SaaSダッシュボード、デザインシステム — 単なる美しい画像ではなく、プロトタイプとして再生可能です。
使い方
セッション内で初めてCellCogタスクを実行する場合は、完全なSDKリファレンス（ファイル操作、チャットモード、タイムアウトなど）についてcellcogスキルを参照してください。
OpenClaw（fire-and-forget方式）:
result = client.create_chat(
prompt="[タスクのプロンプト]",
notify_session_key="agent:main:main",
task_label="my-task",
chat_mode="creative",
)
OpenClaw以外のすべてのエージェント（完了までブロック）：
from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
prompt="[タスクのプロンプト]",
task_label="my-task",
chat_mode="creative",
)
print(result["message"])
インタラクティブプロトタイプが重要な理由
静的モックアップには根本的なギャップがあります。ステークホルダーは「絵」を見るのであって「体験」を見るのではありません。その違いは重要です：
| 静的モックアップ | インタラクティブプロトタイプ |
|---|---|
| 「このボタンをクリックすると…と想像してください」 | ボタンをクリックして、実際に何が起こるか見る |
| 「これは…にスクロールします」 | スクロールしてコンテンツが読み込まれるのを見る |
| 「ホバー状態はこんな感じです」 | ホバーしてアニメーションを見る |
| 「フローは理にかなっています、信じてください」 | 自分でフローを実際に体験する |
CellCogは、ライブURLでホストされる実際のHTML/CSS/JSプロトタイプを生成します。リンクを共有し、誰かの想像上の体験ではなく、実際の体験に対するフィードバックを得られます。
プロトタイプ作成可能なもの
ランディングページ
メッセージとデザインを検証：
- SaaSランディングページ: 「AIライティングアシスタントのランディングページを作成 — ヒーロー、機能、価格、お客様の声、CTA」
- 製品ローンチページ: 「カウントダウンとメールサインアップ付きのフィットネスアプリローンチページを構築」
- イベントページ: 「スケジュール、スピーカー、登録機能付きのカンファレンスランディングページを作成」
- ポートフォリオサイト: 「UXデザイナー向けの個人ポートフォリオランディングページを構築」
プロンプト例:
「'FlowState'のインタラクティブランディングページプロトタイプを作成 — 開発者向け生産性向上アプリ：
セクション：
- ヒーロー：'ゾーンでコードを書け。ゾーンにい続けろ。' アプリのスクリーンショットとCTA
- 問題：開発者のフローを邪魔するもの（統計データ）
- 解決策：FlowStateがインテリジェントに邪魔をブロックする方法
- 機能：アイコン付きの3～4の主要機能
- 価格：Free、Pro（月額$12）、Team（月額$8/ユーザー）
- お客様の声：開発者の引用3件
- 最終CTA
スタイル：ダークテーマ、開発者向け、等幅フォントのアクセント すべてのボタンとナビゲーションをインタラクティブに。」
モバイルアプリ画面
完全なアプリ体験をデザイン：
- オンボーディングフロー: 「瞑想アプリの5画面オンボーディングフローを作成」
- コア機能: 「フィットネストラッキングアプリのメインダッシュボードとナビゲーションをプロトタイプ」
- Eコマース: 「ファッションアプリの商品一覧→詳細→カート→チェックアウトフローを構築」
- ソーシャル機能: 「プロフィールページ、フィード、メッセージングインターフェースをプロトタイプ」
プロンプト例:
「モバイルフードデリバリーアプリ（スマートフォンサイズのビューポート）をプロトタイプ：
画面：
- ホーム — レストラングリッド、検索、カテゴリフィルター
- レストラン — メニューと商品、評価、配達時間
- 商品詳細 — カスタマイズオプション、カートに追加
- カート — 注文サマリー、配達先住所、支払い
- 注文追跡 — ライブステータスと地図プレースホルダー
画面間のナビゲーションをスムーズなトランジションで動作させる。 スタイル：クリーンでモダン、Uber Eats / DoorDash風。」
SaaSダッシュボード
複雑なビジネスツールをプロトタイプ：
- 分析ダッシュボード: 「実際のチャートインタラクションを持つマーケティング分析ダッシュボードを作成」
- 管理パネル: 「テーブル、フィルター、モーダルを備えたユーザー管理パネルを構築」
- CRMインターフェース: 「ドラッグ＆ドロップのカンバンボード付きセールスパイプライン表示をプロトタイプ」
- 設定ページ: 「タブ、フォーム、トグルを備えた包括的な設定ページを作成」
プロンプト例:
「SaaSプロジェクト管理ダッシュボードをプロトタイプ：
左サイドバー：ナビゲーション（プロジェクト、タスク、チーム、レポート、設定） メインエリア：
- 概要：KPIカード（完了タスク、期限超過、進行中）
- カンバンボード：To Do、進行中、レビュー、完了の列
- 担当者のアバター、優先度タグ、期日が表示されたタスクカード
インタラクション：
- サイドバーナビゲーションでビューを切り替え
- タスクカードをクリックすると詳細モーダルが開く
- プロジェクト/チームメンバー用のフィルタードロップダウン
スタイル：クリーンでプロフェッショナル、Notion/Linear風。」
デザインシステム＆コンポーネント
再利用可能なデザイン基盤を構築：
- コンポーネントライブラリ: 「UIコンポーネントライブラリを作成：ボタン、入力、カード、モーダル、ナビゲーション」
- スタイルガイド: 「タイポグラフィ、カラー、スペーシング、コンポーネントを表示するインタラクティブスタイルガイドを構築」
- フォームパターン: 「ログイン、サインアップ、マルチステップウィザード、設定など一般的なフォームパターンをプロトタイプ」
- ナビゲーションパターン: 「サイドバーナビゲーション、トップナビゲーション、ボトムタブバー、ハンバーガーメニューの例を作成」
ワイヤーフレーム
構造を素早く探求：
- 低忠実度ワイヤーフレーム: 「ブログプラットフォームのグレースケールワイヤーフレームを作成 — ホーム、記事、著者ページ」
- ユーザーフロー: 「プロジェクト管理ツールのサインアップ→オンボーディング→最初のアクションまでの完全フローをワイヤーフレーム化」
- レイアウト探索: 「不動産物件一覧ページの3つの異なるレイアウトアプローチを表示」
- 情報アーキテクチャ: 「コース、レッスン、進捗トラッキングを備えたeラーニングプラットフォームのナビゲーション構造をワイヤーフレーム化」
プロトタイプの機能
CellCogプロトタイプには以下を含めることができます：
| 機能 | 説明 |
|---|---|
| ナビゲーション | 動作するリンク、ページ遷移、タブ切り替え |
| インタラクション | ホバー状態、クリックアクション、トグル、アコーディオン |
| フォーム | 入力フィールド、バリデーション状態、ドロップダウン、チェックボックス |
| モーダル＆オーバーレイ | ポップアップダイアログ、スライドアウトパネル、ツールチップ |
| レスポンシブデザイン | デスクトップ、タブレット、モバイルのビューポートに適応 |
| アニメーション | スムーズなトランジション、ローディング状態、マイクロインタラクション |
| データ表示 | 実際のサンプルデータを含むチャート、テーブル、カード |
| ダーク/ライトテーマ | テーマ切り替えサポート |
出力形式
| 形式 | 最適な用途 |
|---|---|
| インタラクティブHTML（デフォルト） | ライブURLでホストされるクリック可能なプロトタイプ — 誰とでも共有可能 |
| 静的画像 | ドキュメントや比較用のスクリーンショット |
| 引き継ぎ用のワイヤーフレームドキュメント |
インタラクティブHTMLがデフォルトです。 それが重要なポイントです — クリックできるプロトタイプです。
モードとティアの選択
UIプロトタイプとワイヤーフレームにはchat_mode="creative"を使用 — デザインセンス、視覚的な仕上がり、声に最適化されたクラフトファーストモードです。
| シナリオ | 推奨設定 |
|---|---|
| プロトタイプ、ワイヤーフレーム、デザインシステム | chat_mode="creative"（デフォルトティア"core"） |
| 重要な作品に最大限のクラフトを | chat_mode="creative", chat_tier="max" |
| 迅速な使い捨てドラフト | chat_mode="agent", chat_tier="flash" |
注意：エージェントチーム（chat_mode="team"）は深いリサーチ用に予約されています。
プロンプト例
SaaSランディングページ:
「'CodeReview.ai'のランディングページを作成 — AIコードレビューツール：
ヒーロー：'より良いコードを出荷せよ。より速く出荷せよ。' デモビデオのプレースホルダー付き 社会的証明：'500以上のエンジニアチームに信頼されています' 機能：AI搭載レビュー、GitHub/GitLab統合、セキュリティスキャン 価格：Starter（無料）、Pro（月額$29）、Enterprise（カスタム）
ダークテーマ、開発者向け、緑のアクセントカラー。 すべてのナビゲーションとCTAをインタラクティブに。」
モバイルアプリプロトタイプ:
「習慣トラッキングアプリ（モバイルビューポート）をプロトタイプ：
タブバー：今日、習慣、統計、プロフィール
今日の画面：今日の習慣リスト、チェックボックス、連続記録、進捗リング 習慣画面：すべての習慣、編集/削除、新しい習慣を追加ボタン 統計画面：完了率、最長連続記録、週次/月次表示のチャート プロフィール画面：設定、通知設定、データエクスポート
タブナビゲーションが動作する。習慣をチェックするとアニメーションする。 スタイル：ミニマルで落ち着いた、Streaksアプリ風。」
デザインシステム:
「フィンテックスタートアップ向けのインタラクティブデザインシステムを構築：
カラー：プライマリ（ディープブルー）、セカンダリ（ティール）、アクセント（アンバー）、セマンティック（成功/警告/エラー） タイポグラフィ：h1から本文、キャプションまでの明確な階層 コンポーネント：
- ボタン（プライマリ、セカンダリ、ゴースト、デストラクティブ — 各々にホバー/アクティブ/無効状態）
- 入力フィールド（デフォルト、フォーカス、エラー、無効）
- カード（シンプル、インタラクティブ、統計カード）
- ソート可能なヘッダーを持つテーブル
- モーダルダイアログ
- トースト通知
各コンポーネントをインタラクティブ状態で表示。プロフェッショナルでバンキンググレードの美観。」
ワイヤーフレーム探索:
「AIチャットボットインターフェースの3つの異なるレイアウトアプローチを作成：
オプションA：全画面チャット（ChatGPT風） オプションB：メインコンテンツエリアとサイドパネルチャット オプションC：フローティングチャットウィジェット
それぞれに含めるもの：メッセージ入力、会話履歴、候補プロンプト、設定へのアクセス。 グレースケールワイヤーフレーム、レイアウトと情報階層に焦点。」
より良いプロトタイプを作るためのヒント
-
インタラクションを説明する: 「ボタンをクリックするとモーダルが開く」や「タブでコンテンツを切り替える」 — 何が表示されるかだけでなく、何が起こるべきかをCellCogに教えてください。
-
既存の製品を参照する: 「Notionのサイドバーのように」や「Stripeの価格ページのように」と言う方が、何段落もの説明よりも伝わります。
-
ビューポートを指定する: 「スマートフォンのビューポート」と「フルデスクトップ」では、デザインアプローチ全体が変わります。
-
現実的なコンテンツを含める: 実際のテキスト、実際の数値、実際のラベル — 「Lorem ipsum」ではありません。実際のコンテンツを含むプロトタイプは、より良いフィードバックを得られます。
-
目的を明記する: 「ユーザーテスト用」、「投資家向けデモ用」、「開発者への引き継ぎ用」 — コンテキストによって忠実度が決まります。
-
ページではなくフローで考える: 「サインアップ→オンボーディング→ダッシュボード」は、3つの独立したページリクエストよりもはるかに有用です。
CellCogがインストールされていない場合
Claude Code、Cursor、Codex + その他70以上のエージェント: npx skills add cellcog/skills --skill cellcog
OpenClaw: openclaw skills install @cellcog/cellcog
CellCogプラグインユーザー: /cellcog-setup（またはツールに応じて/cellcog:cellcog-setup）を実行
手動セットアップ: pip install -U cellcog と CELLCOG_API_KEYの設定。SDKリファレンスについてはcellcogスキルを参照してください。