Skills
.Work. You
Rest

sketch-draw

Community

Render precise UI code from Sketch layers.

Design & Creative#component generation#UI styling#MCP tools#design-to-code#sketch#rect scoped rendering#layer parsing
AuthorYamadaAoi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • Rect-scoped drawing: Generates code only within a required rect region to support component-by-component rendering.
  • Layer-accurate foundation: Forces a prior analyze step and uses the returned artboard data as the only source for code generation.
  • Workflow-safe automation: In sketch-workflow mode, runs silently and ends with DRAW_SUCCESS to enable unattended batch generation, avoiding iterative confirmation loops.

Quick Start

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: sketch-draw
Download link: https://github.com/YamadaAoi/mcp-sketch/archive/main.zip#sketch-draw

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.