TemPad Dev plugin
tempad-dev
Connects Figma, developers and agents: a design inspector in the browser, JSX/Vue code with Tailwind and tokens, MCP and skills. Node.js 22+ needed
- 510 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Node.js 22 or newer is needed
- The agent reads the design and writes code into the project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/tempad-devDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Node.js 22 or newer is needed
- The agent reads the design and writes code into the project
This is third-party code. Review the repository files before installing.
What it does
TemPad Dev is an open link between Figma, developers and their agents. In the browser it is a design inspector with customizable code output (JSX or Vue with Tailwind and tokens), and an agent with MCP and skills reads the design, creates and edits native Figma objects and implements the interface in the project. It works with Codex, Claude Code, Cursor and VS Code. Node.js 22+ is needed and editing needs edit rights to the file. The Chrome extension installs from the store, the code plugins: `npm install -D @tempad-dev/plugins`. MIT license.
Who it is for. For developers and designers who move Figma layouts into code and want an agent to do it in their project with tokens and Tailwind.
Good fit when
- You need to move Figma layouts into JSX or Vue with Tailwind
- You need a design inspector with customizable code
- You need an agent to read and edit Figma files
Not a fit when
- You have no Node.js 22 or newer
- You have no edit rights to the Figma file and need editing
Example request
Implement the screen selected in Figma as a React and Tailwind component with the project's tokensLimitations
Node.js 22 or newer is needed. To edit layouts the agent needs edit rights to the Figma file. The agent reads your design and writes code into the project, so access is extended.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What does TemPad Dev do?
It shows code from a Figma layout in the browser and lets agents read and edit design and write the interface in the project.
Which agents are supported?
Codex, Claude Code, Cursor and VS Code.
What is needed to run it?
Node.js 22 or newer and edit rights to the Figma file for edits.
Discussion
No questions or reviews yet.
Related
PluginsA free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
Figma Console MCP
figma-console-mcp
A two-way Figma MCP server for design systems: reads and writes variables, components and styles and syncs tokens with code
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| TemPad Dev (this entry) | no | 510 | ||
| Figma MCP Bridge | no | not required | 741 | reading Figma through a plugin without REST API limits |
| figma-use | no | 609 | writing to Figma from a CLI and JSX, an unofficial route |
README in short
The README describes a link between Figma, developers and agents with an inspector, MCP and skills. MIT license.