Ui Prototype Wireframe Cellcog
AI驱动的UI原型与线框图生成工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Ui Prototype Wireframe Cellcog。 它的用途是：AI驱动的UI原型与线框图生成工具 完整的 Skill 内容见：https://321skill.com/skills/ui-prototype-wireframe-cellcog-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我生成一个手机端的登录页面原型，包含手机号输入框、密码输入框、登录按钮和忘记密码链接，使用蓝色主色调。' 它会自动生成一个可交互的HTML页面，输入框可输入，点击登录按钮有弹窗提示，底部有忘记密码链接。你可以继续要求添加注册入口或切换深色主题。
介绍
在UI设计初期，快速产出高保真原型和交互式线框图往往需要大量手动作业，尤其是跨屏适配和交互逻辑梳理。本Skill基于CellCog引擎，能够将自然语言描述或简单草图直接转化为可交互的HTML原型，覆盖落地页、移动屏幕、SaaS仪表板等常见场景，大幅缩短从构思到可视化的周期。
使用时，只需在对话中描述你的界面需求（如“一个电商APP的首页，包含搜索栏、商品卡片和底部导航”），Skill会自动解析并生成对应HTML代码，并附带基础交互（如点击跳转、表单输入）。你还可以要求调整配色、布局或添加新组件，支持实时迭代修改。
适合UI设计师、产品经理、前端开发者在快速验证概念、制作演示Demo、向客户展示设计方向时使用。对于需要频繁产出多版本原型、进行A/B测试的团队，此工具能显著提升效率。
建议优先用于早期原型阶段，复杂动画或后端数据联动仍需手动补充。生成的原型基于标准HTML/CSS/JS，可直接在浏览器中运行，也方便导出与开发对接。注意保持描述简洁具体，避免模糊要求导致生成结果偏离预期。
核心特点
不同于静态截图类工具，本Skill输出可直接交互的HTML原型，并支持实时修改和迭代，同时内置常见UI组件库，减少重复编写代码的工作量。
注意事项
不适合需要复杂后端逻辑、实时数据联动或精细动画的场景，原型仅提供前端视觉与基础交互。
常见问题
这个Skill能生成多屏交互的原型吗？
可以，你描述多个页面并定义跳转关系，Skill会自动生成可点击跳转的HTML原型。
生成的代码能在Figma或Sketch里编辑吗？
不能直接编辑，但你可以将HTML复制到浏览器或导出为图片后再导入设计工具。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-prototype-wireframe-cellcog-x-2/raw/index.md 读取 Ui Prototype Wireframe Cellcog 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-prototype-wireframe-cellcog-x-2/raw/index.md（查看排版版本）