易设原型设计工具
本地草稿
未命名原型 / 手机 · 竖屏
375 × 667
首页375 × 667
让想法,从这里开始从左侧拖拽组件到画布
也可以点击组件快速添加
拖拽 · 编辑 · 导出
滚轮 / 双指缩放 · 空白处 / 空格 / 中键拖动画布 · 方向键微调 ⇧ × 10 · Del 删除

添加组件后在这里快速选中。

MCP 接入

让 Codex、Cursor、Claude Code、OpenCode 和 Antigravity 读取工程、修改组件、创建页面与导出原型。修改支持撤销和版本回退。

先在本地运行 npm run dev,打开本地易设并连接当前标签页,再把下方配置合并到客户端配置文件,重新加载客户端。调用期间保持标签页打开。

尚未连接

新建工程

各工程独立保存页面、组件库、修改版本和 AI 对话。关联配色、组件库和安全区后,AI 修改页面、生成页面与组件都会自动使用这些信息。

关联配色

关联组件库

轻量清单自动同步名称、类型、默认宽高和分组等基础属性。AI 可按清单标识复用组件。

轻量组件清单

关联安全区

留白从设备系统栏内侧计算,自动适配画布尺寸。保存关联设置后,AI 修改和新页面生成会应用此安全区;可复用组件仍使用自身尺寸。现有页面在下次 AI 修改时应用。

AI 自动使用关联信息和内置规范;补充规范用于描述布局、文案等要求。

AI 生成预览

AI 接口设置

支持 OpenAI 兼容的 Chat Completions 接口。可填写基础地址或完整的对话接口地址。

使用 DeepSeek 时请填写自己的 DeepSeek API Key。快捷配置会清空当前表单中的 Key,保存后生效。

地址和模型保存在本地;默认 Key 仅用于当前页面。勾选后 Key 以明文保存在浏览器中,不会进入版本备份或 HTML 导出。HTTPS 页面会将 HTTP 接口地址自动改为 HTTPS,接口须支持 HTTPS。浏览器直接请求接口,服务需允许本站跨域访问,以及 POST 方法和 Content-Type / Authorization 请求头。

合并 AI 修改

互不冲突的字段已自动合并。冲突需要逐项选择;未选择时预览保留本地内容。

导入工程

支持工程 JSON 和 HTML。导入将替换当前画布,可撤销;建议先导出当前工程。工程 JSON 同时恢复自定义组件库。

普通 HTML 在此尺寸下计算布局并识别可见组件,保留内联和页面 CSS 样式。隐藏内容不导入,脚本不执行,外链样式、字体与图片不载入;请将资源内嵌。工程 JSON 和新版导出的 HTML 使用原工程尺寸。

新建 HTML 组件

将常用的界面片段保存到组件库,随时复用。

添加到画布后继承方向响应,可在组件属性中单独调整。

支持静态 HTML / SVG 和内联样式;图片可单独上传。

新建分组

管理组件

库中的更改用于后续添加,画布中已添加的组件保留当前设计。

管理当前页面 / 弹窗 / Toast

每页独立保存组件、尺寸与设备设置。弹窗和 Toast 可以像页面一样编辑,再通过组件点击动作打开;Toast 到时自动消失。删除后清除关联动作,可撤销恢复;至少保留一个普通页面。

删除确认

仅跳过此浏览器中的页面、弹窗和 Toast 删除确认。

原型预览 支持编辑文字、拖拽尺寸与点击交互

自定义 HTML 外框

HTML 绘制画布周围的外框装饰,画布会按以下留白嵌入。支持静态 HTML / SVG 和内联样式,宽高 100% 对应整个外框。