Design to code
Design servers give the model the actual frames, layers and tokens instead of a screenshot, which is what makes generated front-end code match the design. The list starts with Figma, then covers the wider design category and 3D tools.
Figma
Frames, components and variables from your files.
Gives AI coding agents Figma design context so they can generate code, extract variables and components, and write to the canvas.
원격PythonDesign$claude mcp add --transport http mcp-server-guide https://mcp.figma.com/mcpProvides AI coding agents with access to Figma design metadata to enable accurate one-shot UI implementation.
로컬TypeScriptDeveloper Tools$claude mcp add figma-context-mcp -- npx -y figma-developer-mcpExtracts design systems from any URL into tokens for Tailwind, Figma, and AI editors, while scoring UI consistency and brand alignment.
로컬HtmlDeveloper Tools$claude mcp add design-extract -- npx -y designlangConnects AI clients to Figma to extract design tokens, create components and frames, sync variables, and audit accessibility and design-code parity.
로컬102개 도구TypeScriptDesign$claude mcp add figma-console-mcp -- npx -y figma-console-mcp
Design tools
Diagrams, icons, images and UI kits.
Lets an AI client create, inspect, validate, and save editable 3D building scenes, including walls, rooms, doors, and furnishings.
로컬원격53개 도구TypeScriptDesign$claude mcp add editor -- npx -y @pascal-app/mcpAllows an AI client to control Adobe Photoshop through natural language commands to perform edits, retouching, and batch processing.
로컬TypeScriptDesign$claude mcp add photoshop-mcp -- npx -y @alisaitteke/photoshop-mcpLets an AI agent draw and edit draw.io diagrams on a live browser canvas that you can also edit by hand.
로컬8개 도구TypeScriptDesign$claude mcp add next-ai-drawio -- npx -y @next-ai-drawio/mcp-serverEnables AI clients to create and edit 3D models, execute Python scripts, and perform FEM analyses within FreeCAD.
로컬PythonDesign$claude mcp add freecad-mcp -- uvx freecad-mcpEnables AI clients to search thousands of React and Tailwind components and generate new UI directly within your code editor.
로컬1개 도구TypeScriptDeveloper Tools$claude mcp add magic-mcp -- npx -y @21st-dev/magicEnables AI clients to create, search, and render interactive diagrams using Mermaid or XML directly in chat or the draw.io editor.
로컬원격JavaScriptDesign$claude mcp add --transport http drawio-mcp https://mcp.draw.io/mcp
3D
Blender and Unity scenes.
Enables AI-driven generation of images, video, 3D meshes, PBR materials, and audio directly within the Blender viewport via a local MCP server.
PythonAI & LLM Tools2026년 11월 14일 업데이트Provides a unified control plane for AI agents to operate digital content creation tools, game engines, and design software through a single protocol.
원격9개 도구RustWorkflow Automation$claude mcp add dcc-mcp-core -- uvx dcc-mcp-serverLets AI clients control Blender to create and modify 3D objects, materials, scenes, and generate assets.
PythonGames & 3D2026년 11월 13일 업데이트