Ui Prototype Wireframe Cellcog
AI驱动的交互式HTML原型与线框图生成工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Ui Prototype Wireframe Cellcog。 它的用途是：AI驱动的交互式HTML原型与线框图生成工具 完整的 Skill 内容见：https://321skill.com/skills/ui-prototype-wireframe-cellcog-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'为我的健身App生成一个运动记录页面的交互式HTML原型，包含今日运动概览、运动类型选择按钮和开始训练按钮'，它会调用CellCog引擎输出一个可直接运行的HTML文件，页面包含卡片布局、按钮交互和模拟数据，点击按钮可切换运动类型，适合快速演示产品概念。
介绍
Ui Prototype Wireframe Cellcog 是一款基于 CellCog 引擎的 AI 原型设计工具，专门解决产品设计初期快速验证界面布局和交互流程的痛点。传统原型设计需要手动拖拽组件或编写代码，耗时且难以迭代；该 Skill 只需输入自然语言描述，即可自动生成可直接运行的交互式 HTML 原型，覆盖 App 界面、移动端屏幕、登录页、SaaS 仪表盘等多种场景。
使用方式极为简单：在对话中描述你想要的界面类型、功能模块和交互逻辑，例如“生成一个电商 App 的商品详情页，包含轮播图、加购按钮和底部导航栏”，AI 即会调用 CellCog 引擎输出完整的 HTML 文件，支持点击跳转、表单输入等基础交互，无需额外安装设计软件或编写前端代码。生成结果可直接在浏览器中预览，也可导出为源码进行二次修改。
该 Skill 最适合 UI 设计师、产品经理和前端开发人员。设计师可以快速产出低保真线框图或高保真原型用于用户测试；产品经理能直观展示产品概念给干系人；前端开发者可将生成的 HTML 作为页面骨架，在此基础上补充业务逻辑。尤其适合需要频繁迭代、快速验证假设的敏捷团队或个人创业者。
使用时建议提供清晰的功能描述和页面结构，如“顶部导航栏+搜索框+商品卡片列表+底部Tab栏”。对于复杂交互（如拖拽排序、实时数据绑定），生成的 HTML 可能需额外编码完善。注意生成的代码为纯前端演示，不包含后端逻辑，适合演示概念而非生产环境。
核心特点
区别于仅输出静态图片或 Figma 链接的原型工具，该 Skill 直接生成可交互的 HTML 文件，支持点击、跳转等操作，效果更接近真实应用，且无需注册第三方平台。
注意事项
不适合需要复杂后端逻辑、实时数据同步或高度定制化动画的高保真原型。
常见问题
能生成哪些类型的原型？
支持 App 界面、移动端屏幕、登录页、SaaS 仪表盘、Landing Page 等常见类型，输入描述即可生成。
生成的 HTML 可以导出编辑吗？
可以，生成的 HTML 文件为完整源码，可直接保存或在浏览器中打开，也支持复制代码进行二次修改。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-prototype-wireframe-cellcog-x-6/raw/index.md 读取 Ui Prototype Wireframe Cellcog 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-prototype-wireframe-cellcog-x-6/raw/index.md（查看排版版本）