ecomfe/tempad-dev

Create, edit, and implement Figma designs with your coding agent.

TemPad Dev – What it is

TemPad Dev is an open‑source Chrome extension that bridges Figma design files with coding agents (LLM‑based code assistants) and developers’ IDEs. It lets you inspect a design’s CSS/JS, fetch layout data, and even let an AI agent create or edit Figma canvases and generate implementation code directly from the selected design.

Core capabilities

Area What you can do How it works
Design inspection Select any element in a Figma file and instantly see its CSS, Tailwind‑style objects, variables, and a JSX/Vue snippet. The extension calls a local MCP (Multi‑Client Protocol) server which queries Figma via its plugin API and returns get_code, get_structure, etc.
Deep select / measure / scroll Shortcut‑free ways to drill into nested layers, measure spacing, and scroll a node into view. UI helpers built into the panel; they invoke the same Figma API calls behind the scenes.
Agent‑driven canvas editing Ask an LLM (e.g., Claude, Qwen Code, Cursor, VS Code agents) to create screens, adjust spacing, or modify typography. The extension exposes MCP tools (apply_canvas, upload_asset, …) that the agent calls to read/write the Figma document.
Design‑to‑code Prompt the agent to implement the selected Figma component in your codebase, respecting your component library and styling conventions. The figma-design-to-code skill supplies layout, assets, and design‑system metadata; the agent then writes the starter code.
Plugin system Write tiny JavaScript plugins to transform the generated code (e.g., output Stylus, convert CSS variables to Sass, apply custom scaling). Plugins are ES‑modules loaded from a URL and stored in the browser’s local storage.

How to get started

  1. Install the extension from the Chrome Web Store.
  2. Open a Figma file, pick an element, and view its code in the side panel – no AI needed.
  3. To enable an AI agent, open Preferences → Agent integration → MCP access, click Set up agents, and follow the on‑screen instructions for your chosen client (Claude, Codex, Cursor, VS Code, etc.).
  4. Make sure you have Node 22/24/26+ installed; the MCP server (@tempad-dev/mcp@latest) runs locally and communicates with the extension via 127.0.0.1.
  5. (Optional) Install or write output plugins to customise the code blocks.

Technical bits you might care about

  • MCP server – a tiny Node service (@tempad-dev/mcp) that translates the extension’s requests into Figma plugin API calls. Versions used together: extension 0.23.1, MCP 0.11.0, Agent Plugin 0.5.0.
  • Skills – pre‑packaged command sets (design-in-figma, figma-design-to-code) that agents can invoke. They handle resource discovery, canvas diffs, and validation.
  • Supported agents – Qwen Code, Qoder, ZCode, Kimi Code, Pi, Hermes, plus generic “Other agents”. Integration is mostly UI‑driven; the extension does not lock you to a specific model.
  • Asset handling – generated PNG/JPEG/GIF assets are uploaded to a local Hub; the MCP response contains an assetHash that can be referenced in canvas edits.
  • Configuration – optional env vars are documented in packages/mcp-server/README.md; UI preferences let you toggle CSS units, variable display mode, deep‑select, etc.

Who might find this useful?

  • Front‑end engineers who want a quick, reliable way to copy exact CSS/JS from Figma without manual token translation.
  • Product teams using LLM‑based coding assistants and needing a stable bridge to the design system.
  • Design‑system maintainers who want agents to read the design catalog (get_design_system) and keep code in sync.
  • Tool builders looking for a reference implementation of a local protocol (MCP) that talks to both a browser extension and external AI clients.

Where to learn more

  • Chrome Web Store page – one‑click install.
  • Discord community – live help and feature discussion.
  • Agent Plugin README – detailed setup for each supported client.
  • Source code – the repo contains the extension, MCP server, and plugin registry.

TL;DR

TemPad Dev is a Chrome extension that lets you inspect Figma designs, run AI agents to edit the canvas, and generate starter UI code. It works through a local MCP server that exposes a set of tools (get_code, apply_canvas, …) which agents call. You can customise the output with tiny JavaScript plugins, and the whole stack is open‑source and geared toward developers who want a tighter design‑to‑code loop.

Related

  • Project
    grab/cursor-talk-to-figma-mcp

    An MCP integration that allows AI agents like Cursor to read and programmatically modify Figma designs via a WebSocket server and plugin.

  • Project
    figma/mcp-server-guide

    Documentation for Figma’s MCP server – an HTTP service that lets AI coding assistants read design data (components, variables, layout) from Figma, generate placeholder images, and (in beta) write back to the canvas. Includes setup for VS Code, Cursor, Claude Code, Gemini CLI, rate‑limit info, and best‑practice tips for prompting agents to turn frames into code.

  • Project
    southleft/figma-console-mcp

    A Model Context Protocol server that turns Figma design systems into an API, enabling AI assistants to create designs, sync tokens, and audit design-code parity.

  • Project
    gethopp/figma-mcp-bridge

    A plugin and MCP server that lets AI agents read and write Figma document data without hitting Figma API rate limits by streaming data through a local bridge.

  • Project
    GLips/Figma-Context-MCP

    An MCP server that gives AI coding agents access to Figma design data, allowing them to implement designs more accurately than using screenshots.