Best Design Tools MCP Servers for VS Code
Top 5 of 5 Design Tools MCP servers that work with VS Code, ranked by security score — every entry below is human-reviewed, not just scraped. Every row has a one-click config for VS Code — no need to open each page.
| # | Server | Security score | Stars | Language | Config |
|---|---|---|---|---|---|
| 1 | Miro AI MCP ServerOfficial Miro board data management including diagramming and task tracking for AI assistants. | 73 | 141 | TypeScript | |
| 2 | Excalidraw canvas access for AI agents to create, view, and save diagrams locally. | 53 | 2,174 | TypeScript | |
| 3 | Figma design data access for coding agents to implement UI components in one shot. | 50 | 15,433 | TypeScript | |
| 4 | Shadcn/ui v4 component metadata and source code access for AI development environments. | 50 | 2,872 | TypeScript | |
| 5 | Figma design data integration for AI-driven Flutter code generation and implementation. | 34 | 239 | TypeScript |
Design Tools + VS Code: frequently asked questions
›How do I add a Design Tools MCP server to VS Code?
Add an entry under "servers" in .vscode/mcp.json in your workspace, or run "MCP: Open User Configuration" from the command palette for a global config.
›Are Design Tools MCP servers safe to use with VS Code?
Check the security score on each server's page before installing — it's computed from real signals (permissions requested, authentication, maintenance activity), not a marketing claim. Every server ranked below has been human-reviewed, not just scraped.