UI 原型與線框圖 — 製作可點擊的原型
製作可點擊的原型。 UI/UX 線框圖、應用程式模擬以及完全互動的 HTML 原型 — 從草稿到可點擊的體驗，一個提示詞搞定。
其他 AI 設計工具只給你靜態圖片。CellCog 則建立可運作的原型 — 真實的 HTML、真實的互動、真實的用戶流程，你可以點擊瀏覽並與利害關係人分享。登陸頁面、手機應用畫面、SaaS 儀表板、設計系統 — 不只是好看，而是可以實際操作與體驗。
如何使用
在一個會話中首次使用 CellCog 任務時，請先閱讀 cellcog 技能以取得完整的 SDK 參考 — 包含檔案處理、聊天模式、逾時設定等。
OpenClaw（發射後不等待）：
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 生成 真實的 HTML/CSS/JS 原型，並託管在可存取的 URL 上。分享一個連結，讓大家根據實際體驗提供反饋 — 而不是根據別人對體驗的想像。
你可以製作的原型類型
登陸頁面
驗證你的訊息與設計：
- SaaS 登陸頁面：「為 AI 寫作助手建立一個登陸頁面 — 英雄區、功能、定價、見證、行動呼籲」
- 產品發布頁面：「建立一個新的健身應用發布頁面，包含倒數計時和電子郵件註冊」
- 活動頁面：「建立一個會議登陸頁面，包含議程、講者和報名」
- 作品集網站：「為 UX 設計師建立個人作品集登陸頁面」
範例提示詞：
「為『FlowState』建立一個互動式登陸頁面原型 — 這是一個專為開發者設計的生產力應用：
區段：
- 英雄區：『在狀態中編碼。保持在狀態中。』並附上應用截圖和行動呼籲
- 問題：分心破壞開發者心流（統計數據）
- 解決方案：FlowState 如何智慧地阻擋分心
- 功能：3-4 個關鍵功能附帶圖示
- 定價：免費、專業版（$12/月）、團隊版（$8/使用者/月）
- 見證：3 位開發者推薦語
- 最終行動呼籲
風格：深色主題、開發者友善、等寬字體強調 讓所有按鈕和導航都具備互動性。」
手機應用畫面
設計完整的應用體驗：
- 引導流程：「為冥想應用建立一個 5 畫面的引導流程」
- 核心功能：「製作健身追蹤應用的主儀表板和導航原型」
- 電子商務：「為時尚應用建立商品瀏覽 → 詳情 → 購物車 → 結帳流程」
- 社交功能：「製作個人資料頁面、動態消息和即時通訊介面的原型」
範例提示詞：
「製作一個手機外送應用原型（手機尺寸視口）：
畫面：
- 首頁 — 餐廳網格附帶搜尋和分類篩選
- 餐廳 — 菜單附帶品項、評分、外送時間
- 品項詳情 — 客製化選項、加入購物車
- 購物車 — 訂單摘要、外送地址、付款
- 訂單追蹤 — 即時狀態附帶地圖佔位
讓畫面之間的導航能夠運作，並帶有流暢的轉場動畫。 風格：簡潔、現代，靈感來自 Uber Eats / DoorDash。」
SaaS 儀表板
製作複雜的商業工具原型：
- 分析儀表板：「建立一個行銷分析儀表板，具備真實的圖表互動」
- 管理後台：「建立一個使用者管理面板，包含表格、篩選器和彈窗」
- CRM 介面：「製作一個銷售管道檢視原型，帶有拖放式看板」
- 設定頁面：「建立一個全面的設定頁面，包含分頁、表單和開關」
範例提示詞：
「製作一個 SaaS 專案管理儀表板原型：
左側邊欄：導航（專案、任務、團隊、報表、設定） 主要區域：
- 概覽：KPI 卡片（已完成的任務、逾期、進行中）
- 看板：待辦、進行中、審查、已完成各欄
- 任務卡片附帶負責人頭像、優先級標籤、截止日期
互動：
- 側邊欄導航切換檢視
- 點擊任務卡片開啟詳情彈窗
- 按專案/團隊成員篩選的下拉選單
風格：簡潔、專業，靈感來自 Notion / Linear。」
設計系統與元件
建立可重複使用的設計基礎：
- 元件庫：「建立一個 UI 元件庫：按鈕、輸入框、卡片、彈窗、導航」
- 樣式指南：「建立一個互動式樣式指南，展示字體、顏色、間距和各個元件」
- 表單模式：「製作常見的表單模式原型：登入、註冊、多步驟精靈、設定」
- 導航模式：「建立側邊欄導航、頂部導航、底部分頁欄和漢堡選單的範例」
線框圖
快速進行結構探索：
- 低保真線框圖：「為部落格平台建立灰階線框圖 — 首頁、文章、作者頁面」
- 用戶流程：「為專案管理工具繪製完整的註冊 → 引導 → 首次操作流程線框圖」
- 佈局探索：「為房地產列表頁面展示 3 種不同的佈局方法」
- 資訊架構：「為一個包含課程、課程單元和進度追蹤的線上學習平台繪製導航結構線框圖」
原型功能
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 整合、安全掃描 定價：入門版（免費）、專業版（$29/月）、企業版（客製化）
深色主題、開發者導向、綠色強調色。 所有導航和行動呼籲都應具備互動性。」
手機應用原型：
「製作一個習慣追蹤應用（手機視口）的原型：
底部分頁欄：今日、習慣、統計、個人資料
今日畫面：今日習慣列表，附帶核取方塊、連續天數計數和進度環 習慣畫面：所有習慣，附帶編輯/刪除、新增習慣按鈕 統計畫面：圖表顯示完成率、最長連續天數、週/月檢視 個人資料畫面：設定、通知偏好、匯出資料
分頁導航應該能運作。勾選習慣時應該有動畫。 風格：簡約、平靜，靈感來自 Streaks 應用。」
設計系統：
「為一家金融科技新創公司建立一個互動式設計系統：
顏色：主色（深藍）、次要色（青綠）、強調色（琥珀色）、語義色（成功/警告/錯誤） 字體：從 h1 到 body 再到 caption 的層級，具有清晰的層次感 元件：
- 按鈕（主要、次要、幽靈、破壞性 — 每個都具備懸停/啟用/禁用狀態）
- 輸入框（預設、聚焦、錯誤、禁用）
- 卡片（簡單、互動、統計卡片）
- 帶有可排序標題的表格
- 模態對話框
- 吐司通知
以互動狀態展示每個元件。專業、銀行級的美學風格。」
線框圖探索：
「為一個 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。請參閱 cellcog 技能以取得 SDK 參考。