By sketch-hq
Bidirectional workflow between Sketch designs and code: recreate UI designs in Sketch from code, and generate production-ready code (React, Tailwind, SwiftUI, Kotlin) from Sketch documents with visual fidelity validation.
Recreates or builds UI designs in Sketch from a reference URL, screenshot, or source code with side-by-side screenshot fidelity validation using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_design_assets`, `get_symbol_overrides`, targeted `run_code`). Use when the user wants to design, mock up, or reproduce a page or screen in Sketch from the web, an image, or code.
Generates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
Multi-agent plugin bundle for Cursor, Codex, Claude Code, and GitHub Copilot. It includes the Claude MCPB connector package in mcpb/.
The Sketch plugin is coming soon to official agent marketplaces. If it is not listed below for your agent, follow the manual MCP and skills setup instructions instead.
Add the server to your agent after it is running in Sketch. Full client setup: Sketch MCP server documentation.
{
"mcpServers": {
"sketch": {
"type": "http",
"url": "http://localhost:31126/mcp"
}
}
}
Place it in the MCP config file your agent expects (for example Cursor Settings → Tools & MCP, or claude mcp add --transport http sketch http://localhost:31126/mcp for Claude Code).
Install the skills with the Skills CLI (skills.sh):
npx skills add sketch-hq/agents
List available skills before installing:
npx skills add sketch-hq/agents --list
See the Skills CLI for options, supported agents and install locations.
Clone this repository and copy the skill folders into your agent’s skills directory:
git clone https://github.com/sketch-hq/agents.git
Copy skills/<skill-name>/ folders from the cloned repo into your agent’s skills directory.
Sketch MCP server documentation — requires Sketch 2025.2.4 or later.
In Sketch: ⌘K → “Start MCP Server”, or Settings → General → MCP Server. Allow Local Network access if macOS prompts you. The server listens at http://localhost:31126/mcp by default.
You can find licenses for individual skills directly inside the skill’s directory inside the LICENSE.txt file.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub sketch-hq/agentsConnect to Sketch's local MCP server to explore your designs, organize your documents, generate code, export assets, and more.
Plugin that includes the Figma MCP server and Skills for common workflows
Design superpowers for Claude Code — 35 skills that teach your agent to ideate, research, generate, iterate, and ship beautiful UIs using Google Stitch MCP.
Local-first design app · 139 skills + 150 DESIGN.md systems · exposes projects/files/preview tools to your coding agent over stdio MCP. Requires the `od` daemon on PATH.
Plug-and-play MCP that gives your agent UI superpowers. One install: design skill + MCP server, zero config.
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.
Design skill for OpenPencil — op CLI, batch DSL, MCP tools, PenNode schema, and UI design best practices