Five Ways We’ve Been Using Sketch’s MCP Server · Sketch Blog

Back in October 2025, we shipped our MCP server and created a whole new way to use Sketch. Tedious tasks that previously took hours are now ones you can automate and run in the background, while you focus on creativity.
If you don’t already know, MCP (Model Context Protocol) servers let AI clients like Claude Code, Cursor, or Codex interact directly with your Sketch documents. You have full control over what documents you let your AI client access, and the MCP server itself runs locally on your Mac.
Here are five ways we’ve been using the MCP server internally at Sketch. We’ve included prompts we’ve tried for you to copy and adapt for your own use cases.
If you’ve built a set of dark and light Symbols, you can build out your UI using one set, then have Claude Code rebuild the same screen using the other set. This saves hours of manual Symbol swapping and means your designs stay consistent across theme variants.
Better still, with our MCP server’s get_selection_as_image tool, you can have Claude Code check its own work against your original UI. This means you get verification built right into the process, reducing errors and saving you from manually comparing every layer.
Here’s a prompt you can adapt:
If you’re working with Symbols that use light/dark theme overrides instead of separate variants, you can adjust the prompt to switch overrides rather than swapping entire Symbols.
If you’re mocking up a UI, you know how important it is to work with realistic data instead of Lorem Ipsum and generic placeholders. With the MCP server, you can have Claude Code swap placeholder text across your designs with something more realistic.
This works especially well if you’ve got Symbols with text overrides. Instead of manually typing “John Smith” and “john.smith@example.com” into dozens of layers, you can have Claude Code handle it.
If you’ve already got the text you need — whether that’s in a text-based format like JSON or Markdown, or even in a screenshot — Claude Code can use that in your designs. Or it can just generate content for you based on context.
Here’s a simple prompt to get started:
This makes mockups more convincing for clients and stakeholders, and it’s far faster than entering information manually. If you have repeating Symbols like cards or list items, bulk updating text overrides becomes trivial.
For specific use cases like e-commerce products, SaaS dashboards, or social media feeds, you can ask Claude Code to generate contextual content that fits your industry. You can also ask it to stress test your designs by generating text of different lengths.
Whether you’re building out an icon set or a particularly large Library, keeping things organized is tedious but necessary. With the MCP server, you can automate a lot of that organization and keep your documents tidy with minimal effort.
This goes way beyond just aligning things in a neat grid. You can have Claude Code order layers by name, rename them using consistent conventions, apply colors, and even create Symbols — all in one go.
Here’s an example prompt that handles multiple steps at once:
You can easily simplify this prompt to just handle grid alignment with custom spacing, or rename and sort without creating Symbols. You can also apply different color variables based on categories, or organize layers by grouping similar items together instead of alphabetically. If you’re working with UI layouts, you can also have Claude Code set up Stack layouts to make your designs more flexible and responsive.
So far we’ve been talking about existing projects, but if you’re starting something new and aren’t confident with color theory, you can throw Claude Code an image and ask it to create a complementary color palette based on it.
Once you’ve got your colors, you can have Claude Code turn them into color variables, or even expand on that palette to give you more flexibility with shades, tints, and accent colors.
Here’s a prompt that combines creating a color palette and turning it into variables:
You could also extract colors from your logo, or build a complete brand palette that includes semantic colors for success, warning, and error states. For existing websites, you can analyze them to recreate their color systems as variables in Sketch.
Or what about the opposite of a fresh project? Maybe you have an existing website but no up-to-date design files. Point Claude Code at the website’s repo and ask it to build out all the relevant styles, and even entire pages, in Sketch for you.
This is particularly useful for creating design documentation for legacy projects. You can extract colors, typography, and spacing systems directly from the codebase.
Let’s start with the foundation — text styles:
Once you’ve got your Text Styles set up, you can move onto creating color variables. From there, you can recreate elements like navigation bars, cards, or buttons as Symbols. You can even build entire page layouts as Frames with those extracted elements and styles.
Again, you can have Claude Code check its own work and use our MCP server’s get_selection_as_image tool to create images of what’s in Sketch and compare that against the live site. This helps quickly fix any spacing, sizing, or styling differences.
Like many frontier technologies, all of the examples above came from trial, error, and tweaking our prompts until we get things working as we expect them to.
Here are a few things we’ve learned along the way while using the MCP server that will help you get the best results:
Mention exact Symbol names, Library names, layer names, and file paths rather than saying “the button Symbol” or “that Library.” If you have multiple Sketch documents open, specify the document name you want to work with.
Have Claude Code check its own work by capturing images and comparing them to your original or a reference. This catches errors early.
Instead of one giant prompt, chain together smaller, focused requests as separate steps. This makes it easier to catch issues