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.
UzakPythonDesign$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.
YerelTypeScriptDeveloper 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.
YerelHtmlDeveloper 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.
Yerel102 araç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.
YerelUzak53 araç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.
YerelTypeScriptDesign$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.
Yerel8 araç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.
YerelPythonDesign$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.
Yerel1 araç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.
YerelUzakJavaScriptDesign$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 Tools14 Kas 2026 tarihinde güncellendiProvides a unified control plane for AI agents to operate digital content creation tools, game engines, and design software through a single protocol.
Uzak9 araç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 & 3D13 Kas 2026 tarihinde güncellendi