Show HN：专为 AI 设计的免费开源协同设计画布

UI 设计编辑器：AI 助手操作指南

这是一个共享设计画布。人类用户与 AI 助手可以在同一个项目中共同读取和编辑文本、形状、图标与图片。如果用户仅发送了一个项目或 Space 链接，请先读取该项目，并在执行修改前询问用户的具体需求。

在开始编辑前请仔细阅读本指南，并严格遵循用户的设计需求。

在受控浏览器中打开用户的项目或 Space 链接；如果页面已处于打开状态，可直接复用该页面。「连接 AI（Connect AI）」提示词中将此称为「My Space URL」。请在 URL 中保留完整的 #space 和 &project 参数值，以确保打开正确的 Space 和项目。任务完成后，请保持该标签页处于可见和打开状态，以便用户直接查看和使用结果。

使用当前页面的 WebMCP 站点工具执行编辑操作。在当前标签页中查找这些工具，并首先调用 read_design。阅读每个工具的说明及输入字段以了解所需参数。read_design 还会返回一份简短的使用指南。如果站点工具不可用，请向用户说明需要使用已启用站点工具的受支持浏览器。

除非用户明确要求编辑现有项目，否则请将工作成果创建为一个新的具名项目。在每次修改时，必须使用工具返回的最新的 projectId 和 revision。如果设计在你操作期间发生变动，请先重新读取后再重试。请务必保留用户的编辑内容及正常的撤销（Undo）历史记录。

主编辑器会打开一个 Space 并在各浏览器中记忆该空间。若要在多个浏览器间共享项目，只需在各个浏览器中打开相同的 Space 链接即可。任何拥有链接的人均可查看和编辑。Space 内的修改会自动保存至服务器，其他已打开的页面会拉取变更后的项目。如果存在更新的已保存版本，请保留未保存的内容，并允许用户重新加载或另存为副本。导出的 HTML 会保留各自的副本。如果请求的项目丢失，请向用户索取其 Space 链接、已保存的 HTML 或截图。

• 使用 edit_design 添加、移动、调整大小、修改样式、隐藏或删除元素项。
• 使用 create_design 在新项目中创建完整设计。
• 保持文本、形状、图标和按钮为独立的可编辑元素项，方便用户后续调整。
• 使用 select_project 打开由 read_design 列出的项目。
• 使用 rename_project 重命名当前打开的项目。
• 使用 arrange_items 并传入 itemIds 与方向参数 "forward" 或 "backward"，将元素项在图层层级中向前或向后移动一级。
• 使用 fit_items_to_content 使容器框自适应匹配其内部的文本或图标。
• 复制元素项时，只需添加其字段并指定新 id 或省略 id 即可，无需经过剪贴板步骤。

对于附加的屏幕截图，调用 import_image 并传入其作为 Base64 图片 Data URL 的字节数据。使用模式 "new" 以图片原始尺寸打开，或使用模式 "add" 将其置入当前设计中。使用 move_image_region 移动截图的局部区域，并使用 edit_design 在其上方添加或修改元素项。使用 erase_image_region 以画布像素为单位擦除矩形区域：该操作会使用邻近色彩填充页面背景，并将新增图片对应区域清空为透明。使用 merge_image_items 配合已移动的图片碎片 id，可将这些碎片重新合并为页面背景的一部分。两项操作均支持撤销（Undo）。

GIF 动图在被添加、保存至 Space 或导出为 HTML 时均会保持动画播放效果。可以通过 edit_design 对整个 GIF 进行移动或缩放。图片局部区域编辑会自动跳过 GIF，且导出为 PNG 时将转为静态图片。

对于通过本编辑器保存的 HTML，提取其 initial-layout JSON，并向 import_html 发送仅包含该 application/json 脚本的小型 HTML 文档。对于其他常规 HTML，请使用 create_design 或 edit_design 将其可见设计重建为画布元素项。

完成操作后，通过 read_design 以及由 export_design 导出的 PNG 检查设计结果。如果浏览器报告工具失效，请刷新站点的工具列表。使用 export_design 保存可编辑的 HTML。最后，向用户告知具体做出了哪些修改。

UI Design Editor: instructions for AI assistants

This is a shared design canvas. People and AI assistants can read and edit text, shapes, icons and pictures in the same project. If the user sends only a project or Space link, read the project, then ask what they want to do before making changes.

Read this guide before you edit. Follow the user's design request.

Open the user's project or Space link in a browser you can control, or reuse that page if it is already open. The Connect AI prompt calls this "My Space URL". Keep the full #space and &project values in the URL so the same Space and project open. Keep the tab visible and open when you finish so the user can use the result.

Use this page's WebMCP site tools to make edits. Find the tools in this tab, then start with read_design. Read each tool's description and input fields for the required values. read_design also returns a short usage guide. If site tools are unavailable, explain that a supported browser with site tools enabled is required.

Create the work as a new named project unless the user asks you to edit an existing project. For every change, use the latest projectId and revision returned by the tools. If the design changes while you work, read it again before retrying. Keep the user's edits and the normal Undo history.

The main editor opens a Space and remembers it in each browser. To share projects across browsers, open the same Space link in each browser. Anyone with the link can read and edit. Space edits save to the server and other open pages fetch the changed project. If a newer saved version exists, keep unsaved work and let the user reload or save it as a copy. HTML exports keep their own copy. If a requested project is missing, ask the user for its Space link, saved HTML or screenshot.

Use edit_design to add, move, resize, restyle, hide or remove items. Use create_design for a full design in a new project. Keep text, shapes, icons and buttons as separate items the user can edit. Use select_project to open a project listed by read_design. Use rename_project to rename the open project. Use arrange_items with itemIds and direction "forward" or "backward" to move items one step in the item order. Use fit_items_to_content to fit boxes to their text or icons. Copy items by adding their fields with a new or omitted id; no clipboard step is needed.

For an attached screenshot, call import_image with its bytes as a base64 image data URL. Use mode "new" to open it at its own size, or "add" to place it in the current design. Use move_image_region to move part of a screenshot, and edit_design to add or change items over it. Use erase_image_region to erase a box in canvas pixels: it fills page backgrounds from nearby colors and clears added pictures to transparent. Use merge_image_items with moved picture piece ids to make those pieces part of the page background again. Both actions support Undo.

GIFs keep their animation when added, saved to a Space, or saved as HTML. Move or resize the whole GIF with edit_design. Picture area edits skip GIFs, and PNG exports are still pictures.

For HTML saved by this editor, extract its initial-layout JSON and send import_html a small HTML document containing only that application/json script. For other HTML, rebuild its visible design as items with create_design or edit_design.

Check the result with read_design and a PNG from export_design. Refresh the site's tool list if the browser reports a stale tool. Use export_design to save the editable HTML. Tell the user what changed.