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 外的所有 Agent（阻塞直至完成）：

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 上 — 可与任何人分享
静态图片	用于文档或比对的截图
PDF	用于交接的线框图文档

交互式 HTML 是默认格式。 这正是关键所在 — 你可点击的原型。

选择模式与层级

UI 原型和线框请使用 chat_mode="creative" — 专为设计品味、视觉精致度和表达风格调整的手艺优先模式。

场景	推荐
原型、线框图、设计系统	`chat_mode="creative"`（默认层级 `"core"`）
高优先级项目的最优工艺	`chat_mode="creative", chat_tier="max"`
快速一次性草稿	`chat_mode="agent", chat_tier="flash"`

注意：Agent 团队（chat_mode="team"）保留用于深度研究。

示例提示

SaaS 落地页：

"为 'CodeReview.ai' 创建一个落地页 — 一款 AI 代码审查工具：

英雄区：'写出更好的代码。更快地交付。' 带有演示视频占位社会认同：'受到 500+ 个工程团队的信任' 特性：AI 驱动的审查、集成 GitHub/GitLab、安全扫描定价：入门版（免费）、专业版 ($29/月)、企业版（定制）

深色主题、开发者优先、绿色强调色。所有导航和行动号召都应可交互。"

移动应用原型：

"原型化一个习惯跟踪应用（移动端视口）：

标签栏：今日、习惯、统计、个人资料

今日界面：今日习惯列表，带有复选框、连续天数和进度环习惯界面：所有习惯，可编辑/删除，添加新习惯按钮统计界面：图表显示完成率、最长连续天数、周/月视图个人资料界面：设置、通知偏好、导出数据

标签导航应可工作。勾选习惯应有动画。风格：简约、舒缓，灵感来自 Streaks 应用。"

设计系统：

"为一家金融科技初创公司构建一个交互式设计系统：

色彩：主色（深蓝）、辅助色（青绿）、强调色（琥珀色）、语义色（成功/警告/错误）排版：从 h1 到正文到说明的字体比例，清晰层次组件：

按钮（主按钮、次按钮、幽灵按钮、破坏性按钮 — 每个都包含悬停/激活/禁用状态）

输入框（默认、聚焦、错误、禁用）

卡片（简单、交互式、统计卡片）

带可排序表头的表格

模态对话框

Toast 通知

展示每个组件的交互状态。专业、银行级审美。"

线框图探索：

"为一个 AI 聊天机器人界面创建 3 种不同的布局方案：

方案 A：全屏聊天（类似于 ChatGPT）方案 B：侧边栏聊天 + 主内容区域方案 C：浮动聊天小部件

每种方案都应包含：消息输入、对话历史、建议提示和设置入口。灰度线框图，专注于布局和信息层次。"

制作更好原型的技巧

描述交互行为："按钮打开模态框" 或 "标签切换内容" — 告诉 CellCog 应该发生什么，而不仅仅是显示什么。
参考现有产品："像 Notion 的侧边栏" 或 "Stripe 的定价页" — 这比数段文字描述更有效。
指定视口："手机视口" vs "完整桌面" — 这会彻底改变设计方法。
包含真实内容：真实的文本、真实的数字、真实的标签 — 不要使用 "Lorem ipsum"。包含真实内容的原型能获得更好的反馈。
说明目的："用于用户测试"、"用于投资者演示"、"用于开发者交接" — 上下文决定了保真度。
按流程思考，而非页面："注册 → 引导 → 仪表盘" 比 3 个互不关联的页面请求更有用。

如果 CellCog 未安装

Claude Code、Cursor、Codex 及超过 70 种 Agent： 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 参考。

CellCog UI 原型与线框生成