Sign In

Sign In

S

Sketch Context

Bridges Sketch design files with development workflows through dual-component architecture, enabling...

4 views

0 installs

Updated Oct 31, 2025

Not audited

Developer Tools Design Tools

Bridges Sketch design files with development workflows through dual-component architecture, enabling file parsing, component extraction, layer management, and real-time design element creation directly from natural language commands.

Authenticate with Sketch Cloud
- Use your Sketch Cloud credentials (email and password) to generate an API access token.
- Run the following command in your terminal, replacing YOUR_EMAIL and YOUR_PASSWORD with your Sketch Cloud account credentials:
```
curl -X "POST" "https://auth.sketch.cloud/oauth/token" \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "YOUR_EMAIL",
    "password": "YOUR_PASSWORD",
    "grant_type": "password"
  }'
```
Retrieve the Access Token
- After running the command, the response will include an access_token. This is your Sketch API key.
Fill in the FastMCP Connection Interface
- Go to the FastMCP interface where environment variables are requested.
- Locate the entry for SKETCH_API_KEY.
- Copy and paste your access_token value into the SKETCH_API_KEY field.
(Optional) Store for Local Development
- If developing locally, you can also place your access token in a .env file as follows:
```
SKETCH_API_KEY=<your-access-token>
```
- Make sure your .env file is added to .gitignore to prevent accidental exposure.
If Your Token Expires
- Use the refresh_token from the authentication response to get a new access token, following the Sketch API documentation.

Note: Always keep your API key secure and do not share it in public places. If you believe your token has been compromised, revoke it and generate a new one.

Quick Start

More for Developer Tools

R

ReactBits

Provides access to 135+ animated React components from ReactBits.dev with intelligent caching, quality scoring, and dependency detection for building modern UI applications with animations, backgrounds, text effects, and interactive elements.

Developer Tools Design Tools

1.3k

88

GitHub

Official

Remote

Extend your developer tools with the GitHub MCP Server—a powerful Model Context Protocol server enhancing automation and AI interactions with GitHub APIs. It supports diverse functionalities like managing workflows, issues, pull requests, repositories, and security alerts. Customize available toolsets to fit your needs, enable dynamic tool discovery to streamline tool usage, and run the server locally or remotely. With read-only mode and support for GitHub Enterprise, this server integrates deeply into your GitHub ecosystem, empowering data extraction and intelligent operations for developers and AI applications. Licensed under MIT, it fosters flexible and advanced GitHub automation.

Developer Tools Project Management

811

78

Desktop Commander

Desktop Commander

Official

Desktop Commander MCP transforms Claude Desktop into a powerful AI assistant for managing files, running terminal commands, and editing code with precision across your entire system. It supports in-memory code execution, interactive process control, advanced search and replace, plus comprehensive filesystem operations including reading from URLs and negative offset file reads. With detailed audit and fuzzy search logging, it enables efficient automation, data analysis, and multi-project workflows—all without extra API costs. Designed for developers seeking smarter automation, it enhances productivity by integrating all essential development tools into a single, intelligent chat interface.

File Systems Developer Tools

979

37

P

Playwright

Control browsers to perform sophisticated web interactions and visual tasks.

Browser Automation Developer Tools

906

27

M

MCP Installer

Install and configure additional MCP servers dynamically.

Automation Developer Tools

513

35

F

Figma Context

Unlock seamless design-to-code with Framelink Figma MCP Server, letting AI coding tools access your Figma files directly. It simplifies Figma API data to supply only relevant design layouts and styles, boosting AI accuracy in implementing designs across frameworks. Specifically built for use with tools like Cursor, it transforms design metadata into precise code in one step. This server streamlines the workflow by providing clean, focused context, enabling faster and more reliable design-driven development. Enjoy a powerful bridge between design and coding that enhances productivity and code quality with minimal fuss.

Developer Tools Design Tools

410

39

P

Package Docs

Provides efficient access to NPM/Go/Python package documentation through smart parsing and caching, enabling quick retrieval of up-to-date library information.

Developer Tools

894

10

Chrome DevTools

Chrome DevTools

Official

Provides direct Chrome browser control through DevTools for web automation, debugging, and performance analysis using accessibility tree snapshots for reliable element targeting, automatic page event handling, and integrated performance tracing with actionable insights.

Browser Automation Developer Tools

422

25

O

Ollama

Integrates Ollama's local LLM models with MCP-compatible applications, enabling on-premise AI processing and custom model deployment while maintaining data control.

AI and Machine Learning Developer Tools

606

15

O

Ollama

Integrates with Ollama for local large language model inference, enabling text generation and model management without relying on cloud APIs.

AI and Machine Learning Developer Tools

555

16

More for Design Tools

R

ReactBits

Provides access to 135+ animated React components from ReactBits.dev with intelligent caching, quality scoring, and dependency detection for building modern UI applications with animations, backgrounds, text effects, and interactive elements.

Developer Tools Design Tools

1.3k

88

F

Figma Context

Unlock seamless design-to-code with Framelink Figma MCP Server, letting AI coding tools access your Figma files directly. It simplifies Figma API data to supply only relevant design layouts and styles, boosting AI accuracy in implementing designs across frameworks. Specifically built for use with tools like Cursor, it transforms design metadata into precise code in one step. This server streamlines the workflow by providing clean, focused context, enabling faster and more reliable design-driven development. Enjoy a powerful bridge between design and coding that enhances productivity and code quality with minimal fuss.

Developer Tools Design Tools

410

39

S

Shadcn UI

Provides tools for managing and installing shadcn/ui components directly through assistants, enabling efficient component discovery, documentation retrieval, and installation command generation with multiple package manager support.

Developer Tools Design Tools

217

28

Icons8

Official

Remote

Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects

Design Tools

223

17

Magic UI

Official

Provides structured access to Magic UI's component library for generating accurate code suggestions with proper installation instructions for implementing visually appealing UI elements in web applications.

Developer Tools Design Tools

256

14

Magic

Official

Create stunning UI components instantly with Magic AI Agent using natural language commands. This powerful tool supports popular IDEs like Cursor, Windsurf, and VSCode, generating modern, customizable React components inspired by 21st.dev’s library. Enjoy real-time previews, full TypeScript support, and access to professional brand assets via SVGL. Magic AI Agent seamlessly integrates generated components into your project, respecting your code style, and handles designs from simple buttons to complex interactive forms. Stay up to date with new community-published components and enhance your UI development workflow effortlessly.

Developer Tools Design Tools

216

13

S

shadcn/ui

Provides direct access to shadcn/ui v4 components, blocks, and demos through GitHub API integration with automatic framework detection for React, Svelte, and Vue, enabling rapid UI development with component source code, installation scripts, and complete block implementations.

Developer Tools Design Tools

259

7

Figma

Official

Remote

Bring Figma designs to life with AI-driven code generation and seamless design-to-code workflows. The Figma MCP server helps developers and product teams turn Figma frames into code, extract key design context like variables and components, and maintain consistency with existing codebases. Features like Code Connect, design system rule creation, and support for popular editors make it easy to generate high-quality code matched to your team's standards. Empower your agents to translate, extend, and reuse designs efficiently while ensuring fidelity to your design system.

Developer Tools Design Tools

133

11

F

FreeCAD

Enables AI-driven CAD modeling by providing a remote procedure call (RPC) server that allows programmatic control of FreeCAD, supporting operations like creating documents, inserting parts, editing objects, and executing Python code for generative design workflows.

Automation Developer Tools +1

219

1

MasterGo Design

MasterGo Design

Official

Extracts design file metadata from MasterGo files using a personal access token, enabling direct retrieval of design element details for analysis and code generation.

Developer Tools Design Tools

171

3

Similar MCP Servers

S

Sketch

Processes Sketch design files by extracting internal structure, analyzing design elements, and rendering visual components as SVG images for design-to-code workflows and automated design analysis.

AI and Machine Learning Developer Tools

67

1

Report Issue

Operating System

Client

Client Name

Issue

Please describe the issue

Thank you! Your issue report has been submitted successfully.