{"slug": "show-hn-free-design-canvas-for-your-ai-open-source", "title": "Show HN: Free design canvas for your AI (open source)", "summary": "An open-source shared design canvas has been released that lets people and AI assistants read and edit the same project's text, shapes, icons and pictures, with edits made through the page's WebMCP site tools. The canvas exposes tools including read_design, edit_design, create_design, select_project, rename_project, arrange_items, fit_items_to_content, import_image, move_image_region, erase_image_region, merge_image_items, import_html and export_design, and requires a browser with site tools enabled. Edits are versioned by projectId and revision, save to the server for anyone with the Space link, and support Undo and editable HTML export.", "body_md": "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.\n\nRead this guide before you edit. Follow the user's design request.\n\nOpen 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.\n\nUse 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.\n\nCreate 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.\n\nThe 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.\n\nUse 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.\n\nFor 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.\n\nGIFs 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.\n\nFor 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.\n\nCheck 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.", "url": "https://wpnews.pro/news/show-hn-free-design-canvas-for-your-ai-open-source", "canonical_source": "https://uidesigneditor.com/", "published_at": "2026-10-19 09:23:12+00:00", "updated_at": "2026-10-19 09:46:16.295491+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "agent-protocols"], "entities": ["WebMCP", "Show HN"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-free-design-canvas-for-your-ai-open-source", "markdown": "https://wpnews.pro/news/show-hn-free-design-canvas-for-your-ai-open-source.md", "text": "https://wpnews.pro/news/show-hn-free-design-canvas-for-your-ai-open-source.txt", "jsonld": "https://wpnews.pro/news/show-hn-free-design-canvas-for-your-ai-open-source.jsonld"}}