feat: wireframe designer, Satori rendering, and Copy to Figma#24
Open
trmquang93 wants to merge 2 commits intomainfrom
Open
feat: wireframe designer, Satori rendering, and Copy to Figma#24trmquang93 wants to merge 2 commits intomainfrom
trmquang93 wants to merge 2 commits intomainfrom
Conversation
Replace Puppeteer with Satori (Vercel) in the MCP server for HTML-to-PNG rendering. Satori produces clean native SVG alongside the PNG, eliminating the Chrome binary requirement and reducing render time from ~2s to ~50ms. Add a built-in wireframe designer that lets users sketch screens directly in Drawd using a drag-and-drop component palette (rect, button, input, nav-bar, tab-bar, and more). Wireframes render to PNG via the browser canvas and store their component schema for re-editing. Both MCP screens (via Satori) and wireframe screens export to Figma as editable SVG vector layers via right-click → Copy for Figma or Download SVG. Details: - mcp-server: SatoriRenderer replaces HtmlRenderer; returns svgString + pngBuffer; bundles Inter font; esbuild marks @resvg/resvg-js external - File version bumped 12 → 13; screens gain svgContent, sourceHtml, wireframe - useWireframeEditor hook: full undo/redo, grid snapping, component CRUD - WireframeEditor: SVG canvas with drag/resize, keyboard shortcuts, auto- hotspot generation from interactive components - copyToFigma utility: clipboard SVG copy + SVG file download - Backward compat: importFlow.js backfills new fields for v1–12 files - Docs: updated user guide with wireframe designer and Figma export sections
Satori requires every element with multiple children to have an explicit display property — default block/inline layout does not exist. Add injectMissingDisplay() to auto-inject display:flex;flex-direction:column on div/section/header/footer/main/nav elements whose style lacks a display declaration. Also improve create_screen and update_screen_image tool descriptions to clearly document Satori's rendering constraints for AI agent callers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
screen.svgContent.Wtoolbar button opens a full-screen SVG canvas editor. Drag components (rect, button, input, nav-bar, tab-bar, etc.) from a palette, edit properties in the right panel, and click Done to render a PNG. Interactive components auto-generate hotspots.Changes
mcp-server:SatoriRendererreplacesHtmlRenderer; bundles Inter font;@resvg/resvg-jsmarked external in esbuild config; font assets copied todist/assets/at build timesrc/constants.js:FILE_VERSION12 → 13; addsWIREFRAME_GRID_SIZE,WIREFRAME_VIEWPORT_WIDTH/HEIGHTsrc/hooks/useWireframeEditor.js: component CRUD, undo/redo (ref-based), grid snapsrc/components/wireframe/:WireframeEditor,ComponentPalette,PropertyPanelsrc/utils/wireframeToSvg.js,wireframeRenderer.js,wireframeDefaults.js: SVG generation and PNG renderingsrc/utils/copyToFigma.js: clipboard copy + SVG file downloadsrc/utils/importFlow.js: backfillssvgContent,sourceHtml,wireframefor v1–12 filessrc/pages/docs/userGuide.md: new Wireframe Designer and Copy to Figma sectionsTest plan
npm test— 358 tests passnpm run build— clean production buildcd mcp-server && node --input-type=moduletest withSatoriRendererrenders PNG + SVGnpm run buildinmcp-server/producesdist/index.js+dist/assets/fonts.drawdfile — loads without errors, new fields default tonullsvgContent→ Copy for Figma → paste in Figma shows editable vectors