Generate frontend UI code from Sketch Measure export ZIPs within a rect region.
npx skills add https://github.com/YamadaAoi/mcp-sketch --skill sketch-draw
Please help me install this Agent Skill. Skill: sketch-draw Source: https://github.com/YamadaAoi/mcp-sketch/tree/main/skills/sketch-draw Command: npx skills add https://github.com/YamadaAoi/mcp-sketch --skill sketch-draw
Converts Sketch Meaxure export ZIPs into accurate frontend code by extracting real layer structure, cutout assets, and a scoped region definition so the AI can generate high-fidelity UI.
analyze step and uses the returned artboard data as the only source for code generation.sketch-workflow mode, runs silently and ends with DRAW_SUCCESS to enable unattended batch generation, avoiding iterative confirmation loops.Ask the AI to use sketch-draw with the Sketch export ZIP, provide the required page name, artboard name, and rect region, then generate the corresponding frontend code.
High-intent search queries and answers about installing and using this skill.
Converting Sketch Meaxure exports into frontend UI code requires providing the export ZIP, page name, artboard name, and a mandatory rect region to generate accurate components from the extracted layer structure.
Rect-scoped rendering generates frontend code only within a specific rectangular region of a Sketch artboard, enabling component-by-component rendering and optionally excluding child rects to prevent duplicate output.
Yes, you must invoke the analyze tool prior to generation. The returned artboard data serves as the exclusive layer-accurate foundation for the subsequent frontend code creation.
Yes, in sketch-workflow mode the process runs silently and ends with DRAW_SUCCESS, enabling unattended batch generation from Sketch layers while avoiding iterative confirmation loops.
You can exclude specific elements by defining child rects within the mandatory rect input, which prevents duplicate rendering of nested components during the frontend code generation.
Generation is limited to a strict rect scope and requires prior layer analysis, meaning it cannot render entire pages at once and relies entirely on the accuracy of the extracted Meaxure ZIP data.
a-ng-dTranslate Sketch layers into UI code with exported assets.
lobehubGuide React component creation and routing for Next.js and React Router.
therealityreportExtract structured ai2html artboard data from article HTML into Ai2htmlData JSON.
cowwocOrchestrate parallel architect, security, quality, tester, and performance reviews of implementation changes.