{
  "slug": "turn-designs-into-code",
  "label": "turn designs into code",
  "blurb": "Give coding agents your Figma and Canva designs to build from.",
  "keywords": [
    "figma",
    "design to code",
    "ui design",
    "designs"
  ],
  "categories": [
    "code-devtools",
    "content-media"
  ],
  "access": [
    "mcp"
  ],
  "count": 7,
  "official": 2,
  "url": "https://agentswitchboard.dev/tasks/turn-designs-into-code",
  "browseUrl": "https://agentswitchboard.dev/browse?task=turn-designs-into-code",
  "agentsUrl": "https://agentswitchboard.dev/api/agents?task=turn-designs-into-code",
  "agents": [
    {
      "name": "Figma Context MCP",
      "slug": "figma-context-mcp",
      "url": "https://agentswitchboard.dev/agents/figma-context-mcp",
      "iconUrl": "https://agentswitchboard.dev/icons/figma-context-mcp.png?v=d07bbc66",
      "description": "MCP server exposing Figma designs to AI coding agents — read layout, styles, and component structure for one-shot design-to-code. Also known as Framelink. 15.5k GitHub stars.",
      "provider": "Framelink (GLips)",
      "categories": [
        "code-devtools",
        "content-media"
      ],
      "accessMethods": [
        "mcp"
      ],
      "verified": true,
      "official": false,
      "featured": false,
      "authType": "apiKey",
      "why": "Design-to-Code: Feed exact Figma dimensions, colors, and component structure to AI for pixel-accurate UI generation."
    },
    {
      "name": "Talk to Figma MCP",
      "slug": "talk-to-figma-mcp",
      "url": "https://agentswitchboard.dev/agents/talk-to-figma-mcp",
      "iconUrl": "https://agentswitchboard.dev/icons/talk-to-figma-mcp.png?v=ccb1fb91",
      "description": "Lets Cursor, Claude Code, and other MCP agents read Figma designs and create, edit, annotate, and export nodes through a local MCP server, WebSocket relay, and Figma plugin.",
      "provider": "Grab",
      "categories": [
        "code-devtools",
        "content-media"
      ],
      "accessMethods": [
        "mcp"
      ],
      "verified": true,
      "official": false,
      "featured": false,
      "authType": "none",
      "why": "Read Designs: Reads document info, the current selection, and node details from the open Figma file."
    },
    {
      "name": "Figma MCP Server",
      "slug": "figma-mcp-server",
      "url": "https://agentswitchboard.dev/agents/figma-mcp-server",
      "iconUrl": "https://agentswitchboard.dev/icons/figma-mcp-server.png?v=65696ce9",
      "description": "Gives coding agents Figma design context, variables, screenshots, and generated code from frames, and lets them write frames and components back to the canvas via remote or desktop MCP.",
      "provider": "Figma",
      "categories": [
        "code-devtools",
        "content-media"
      ],
      "accessMethods": [
        "mcp"
      ],
      "verified": true,
      "official": true,
      "featured": false,
      "authType": "oauth2",
      "why": "Get Design Context: Returns a structured React and Tailwind representation of a Figma frame or layer that agents adapt to any framework."
    },
    {
      "name": "Impeccable",
      "slug": "impeccable",
      "url": "https://agentswitchboard.dev/agents/impeccable",
      "iconUrl": "https://agentswitchboard.dev/icons/impeccable.png?v=e8df27f9",
      "description": "Gives coding agents a frontend design skill with 24 /impeccable commands, plus a CLI and Chrome extension that flag common AI-generated design patterns using 61 deterministic rules.",
      "provider": "Paul Bakaus",
      "categories": [
        "code-devtools"
      ],
      "accessMethods": [
        "cli",
        "browser-extension"
      ],
      "verified": true,
      "official": false,
      "featured": false,
      "authType": "none",
      "why": null
    },
    {
      "name": "Canva MCP",
      "slug": "canva-mcp",
      "url": "https://agentswitchboard.dev/agents/canva-mcp",
      "iconUrl": "https://agentswitchboard.dev/icons/canva-mcp.png?v=eabbf226",
      "description": "Creates and edits Canva designs from an agent over MCP, covering asset and brand management, library search, export, and commenting.",
      "provider": "Canva",
      "categories": [
        "content-media"
      ],
      "accessMethods": [
        "mcp"
      ],
      "verified": true,
      "official": true,
      "featured": false,
      "authType": "oauth2",
      "why": "Design Creation: Creates and edits Canva designs from an agent prompt, applying brand templates and layouts automatically."
    },
    {
      "name": "TerraVision",
      "slug": "terravision",
      "url": "https://agentswitchboard.dev/agents/terravision",
      "iconUrl": "https://agentswitchboard.dev/icons/terravision.png?v=b1ad9805",
      "description": "Generates official-style AWS, Azure, and Google Cloud architecture diagrams from plain-language descriptions or Terraform, and Terraform from designs, via MCP or CLI, for cloud engineers.",
      "provider": "Patrick Chugh",
      "categories": [
        "infrastructure",
        "code-devtools"
      ],
      "accessMethods": [
        "mcp",
        "cli"
      ],
      "verified": true,
      "official": false,
      "featured": false,
      "authType": "none",
      "why": null
    },
    {
      "name": "Unlayer MCP",
      "slug": "unlayer-mcp",
      "url": "https://agentswitchboard.dev/agents/unlayer-mcp",
      "iconUrl": "https://agentswitchboard.dev/icons/unlayer-mcp.png?v=091e45f5",
      "description": "Lets coding agents build email, landing page, and document templates as code with Unlayer, generate designs from prompts, import HTML, and export to HTML, PDF, or PNG.",
      "provider": "Unlayer",
      "categories": [
        "content-media",
        "code-devtools"
      ],
      "accessMethods": [
        "mcp"
      ],
      "verified": true,
      "official": false,
      "featured": false,
      "authType": "oauth2",
      "why": null
    }
  ],
  "relatedTasks": [
    "write-and-fix-code",
    "work-with-github",
    "generate-images",
    "make-videos"
  ],
  "stacks": []
}