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.
1. Fast dark/light theme swaps
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:
Duplicate the selected frame in Sketch and place it next to the original. In the duplicated frame, swap all symbols for their dark mode equivalents. Preserve any text overrides from the original frame. Also, update the frame's fill color to use the dark color variable. Use get_selection_as_image to validate the results.
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.
2. Adding realism to UI mockups
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:
For the selected frame in the Sketch document, replace the placeholder text in the "Album title", "Artist name" and "Song title" text layers with realistic but fictional content. Keep the artist name consistent throughout.
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.
3. Instant document organization
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:
Help me organize this Sketch document by doing the following in order:
1. Organize all the graphics into a grid with 24px spacing
2. Recolor the shape inside each graphic to #000
4. Rename each graphic with the format "icon/current-name"
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.
4. Finding the right colors
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:
Analyze the selected image in the Sketch document and create a color palette with 5-7 colors based on it. Create color variables for each color in the Sketch document, arrange them horizontally below the image, name each color variable with the format "palette-[color-name]" (e.g., "palette-ocean-blue", "palette-sunset-orange") and add their names as text layers below each color swatch.
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.
5. Recreating existing websites 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:
Look at the CSS files in this repository. Identify all the text styles (headings, body, captions, etc.) and recreate them as Text Styles in the open Sketch document. Name them based on their HTML tags and variants (e.g., "h1-hero", "body-large", "caption-small"). Create examples of each text style on the canvas. Verify that each text style is created and an example exists, remove any duplicates.
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.
Tips for making the most of the MCP server
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:
Be specific with your prompts
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.
Use get_selection_as_image for verification
Have Claude Code check its own work by capturing images and comparing them to your original or a reference. This catches errors early.
Break complex tasks into steps
Instead of one giant prompt, chain together smaller, focused requests as separate steps. This makes it easier to catch issues and iterate.
Start simple and build up
Get comfortable with basic tasks before trying complex multi-step workflows. You can always build up to more sophisticated prompts once you know what works.
Selection matters
If you’re working on a specific part of a design, along with mentioning layer/frame names, selecting those specific layers before prompting helps Claude Code focus on what matters.
Check the work
The MCP server is great for repetitive tasks like swapping dozens of Symbols and organizing documents, but you’ll still want to check things over before you hand files over to a colleague or share work with a client.
Adapt your prompts
We’ve shared some straightforward examples here, but your mileage may vary depending on the AI client you use and the complexity of your design documents. Try and prompt your AI client to correct mistakes, then ask it how your original prompt could have accounted for those errors.
If you want to get set up with our MCP server, we’ve got docs to get you started. There you’ll find instructions for setting up our MCP server with Claude Code, Cursor, Codex, and more.
Already using our MCP server to do fun stuff? We’d love to hear what you’re building with it.
