⚡
H5 原型与交互设计实验室
📁 项目与版本管理
📄 需求文档
🤖 AI 代码助手
🌙 暗黑模式
清空代码
导出 HTML
代码编辑区 (原生 HTML/CSS/JS)
页面
+ 新建页面
⚙ 页面管理
实时原型预览
💻 桌面视图
📱 手机视图
🖥️ 界面全屏
↩ 退出全屏 · Esc
页面
+ 新建页面
⚙ 页面管理
演示与导出工具栏
✂️ 区域标注截图
📸 视图截图
📜 滚动长截图
🎥 录制 MP4 视频
⏱️
3 秒
5 秒 (推荐)
8 秒
10 秒
🎬 录制 GIF
🤖
DeepSeek
Google Gemini
ChatGPT
Kimi 智能助手
🗖 独立打开
✕ 关闭
📁 项目与原型版本控制
✕ 关闭
+ 新增原型项目
项目列表
默认项目
保存代码版本记录,随时对比与一键恢复历史原型
➕ 将当前源码存为新版本
历史版本时间线
🎉 GIF 动图录制成功!
💾 保存 GIF 到本地
关闭
📄 需求文档
✕ 关闭
当前项目
+ 新建空白文档
🧩 套用 PRD 模板
文档列表
未选择文档
✏️ 重命名
H2
H3
正文
B
I
U
• 列表
1. 列表
❝ 引用
▦ 表格
📸 插入截图
📜 插入整页截图
💾 导出
🖨️ 打印 PDF
✨ 结构化 PRD 助手
先填关键事实,再自动组织成正式 PRD;产品经理负责判断,工具负责整理。
🎯 填入演示案例
✨ 生成 PRD
需求背景
产品目标
用户与角色
使用场景
功能列表
业务流程
业务规则
输出格式
HTML 文档
Markdown
⬇ 导出当前格式
🤖 复制 AI 优化提示词
🔗 锚定当前原型
保存链接
打开在线文档
PRD 交付物:
🧩 当前原型
📸 页面截图
📜 长截图
🔀 流程说明
🎥 录屏说明
🎞 GIF说明
✅ 验收信息
🖐️ 选择
↘ 锥形箭头
⚡ 折线
⚡ 箭头折线
矩形
圆形
① 图章
T 文字
🔍 放大镜
💡 聚光灯
删除
📋 复制
📄 插入文档
💾 保存
取消
页面管理
管理当前项目下的多页面原型,不改变原项目结构。
+ 新建页面
关闭
↩ 退出全屏 · Esc