UI Design Editor

产品简介

UI Design Editor 是一款完全免费的在线 UI 设计工具，100% 在浏览器本地运行，打开网页就能画原型，不需要注册账号，也不需要下载客户端。它的定位很明确：让设计师和 AI 助手在同一个设计稿上协作——人可以拖拽编辑文字、图形、图标和图片，AI 也能读懂并修改同一份稿子。项目以 MIT 协议在 GitHub 开源，源码仓库就是官网页面本身。

核心功能

1. 画布与元素：支持文本、文本框、矩形、箭头、分割线、按钮、Box/div 等多种元素，可拖拽移动、缩放、调整层级（置顶/置后一步）、复制粘贴与删除。
2. 图标库：内置 Ionicons 图标集，提供 Outline、Filled、Sharp 三种风格，自定义尺寸从 1 到 16000 像素任选。
3. 截图与图片处理：支持导入图片与整屏截图（以 base64 data URL 传入），可以移动图片局部区域、擦除指定区域（按周边颜色回填页面底色，并把擦除处图片还原为透明），还能把拆散的图片块合并回页面背景。
4. GIF 动画保留：GIF 加入画布、保存到共享空间或导出为 HTML 后，动画依然保留；用 edit_design 整体移动或缩放 GIF 时不会破坏它。
5. 共享空间（Space）协作：每个 Space 就是一个可分享的协作空间，工作时自动保存，任何拿到链接的人都能读取并编辑；其他打开的页面会实时拉取改动，新版本出现时提示保留未保存内容或另存副本。
6. AI 站点工具（WebMCP）：浏览器启用站点工具后，AI 可直接调用 read_design 读取设计、edit_design 与 create_design 增删改元素、select_project 与 rename_project 管理项目、arrange_items 调整层级、fit_items_to_content 让文本框贴合内容、import_image 导入图片、export_design 导出可编辑 HTML、import_html 导入已有 HTML 布局。
7. 导出与交付：可导出 PNG 图片、可编辑 HTML（内含初始布局 JSON）、复制布局 JSON、复制分享链接。
8. 视图控制：框选、拖拽选择、空格加拖拽平移、Ctrl/⌘ 加滚轮缩放，缩放档位覆盖 25% 到 800% 并支持自定义，另有 Fit page 与 Fit all 一键取景。

特色优势

最值得说的是它把"AI 参与设计"做成了可落地的工作流，而不是一个聊天框：官方提供一份 instructions.txt 说明书和一段可复制的提示词（"帮我设计这个项目……"），用户把它贴进 Codex、Claude 等工具，AI 就能顺着 Space 链接直接读写画布——读项目、先问清需求再动手、每次改动都用最新版本号、保留用户的编辑与撤销历史。同时它是纯前端本地运行，"100% local in your browser"，无需注册、免费、无需付费墙，AI 助手只是可选搭档而非付费门槛。

应用场景

1. 快速出原型：临时想验证一个页面结构，直接拖出文本框、按钮、图标拼一版给团队看。
2. AI 辅助设计：把截图或 HTML 交给 AI，让它按需求生成设计稿，人再接手微调。
3. 界面走查与标注：导入产品截图，用箭头、文本框标出问题点。
4. 组件样式预览：调整按钮、卡片的尺寸与层级，快速比配色和留白。
5. 对外分享可交互稿：导出 HTML 或分享 Space 链接，对方打开就能看，拿到链接的人也能直接改。

适用人群

需要快速做低保真界面草图的产品经理与设计师；想验证想法而不愿被设计工具订阅费拦住的小团队与独立开发者；以及需要把"截图改稿"这类活交给 AI 助手完成的前端工程师与独立开发者。

出品方

UI Design Editor 由独立开发者 janpmz 维护，GitHub 仓库为 janpmz/uidesigneditor（HTML 为主），采用 MIT 开源协议，仓库主页即官网 uidesigneditor.com，社交账号为 X 上的 @janxpm。仓库创建于 2026 年 10 月 17 日，最近一次推送在 2026 年 10 月 19 日，仍处在非常早期的迭代阶段。

更新动态

这是一个刚起步的开源项目：仓库创建还不到一周，已迭代两次推送，功能已覆盖画布编辑、图片处理、共享空间协作与 WebMCP 站点工具。项目采用滚动发布，没有独立的版本标签。官网页面底部常驻"Free design editor · No signup · Open source on GitHub"三项说明，免费与免注册是长期定位。

官网链接

官网：https://uidesigneditor.com 源代码：https://github.com/janpmz/uidesigneditor AI 协作说明书：https://uidesigneditor.com/instructions.txt