Draft Figma layouts with a command-line agent

A custom agent used figma-use to generate Figma design elements and reusable UI pieces from a terminal.

Done with Custom agent· Intermediate

What they did
A custom-built agent ran figma-use commands to control Figma through the Plugin API, with communication handled via Chrome DevTools Protocol. It could either send individual instructions or stream JSX into a render step, and it came with a SKILL.md file plus an MCP server that exposed 90+ tools. Using that setup, the agent produced structure, labels, icons, layout grids, and reusable parts with variants.
How it went
The examples included a button set and a Tailwind UI calendar. There were no benchmark figures in the README, and JSX fed through stdin could not express logic, which meant components and variants had to be defined in .figma.tsx files.
Tips
Figma 126+ turns off remote debugging, so use `figma-use daemon start --pipe` or the OpenPencil alternative mentioned by the project. For safety, tell the agent to stop and wait before any action that would replace, remove, or submit work in an existing file.

Try it yourself with Claude Code

Using figma-use, make a [page/component] in my Figma file [file link]. Create [frames, labels, icons, grids, reusable components] for [buttons/cards/etc.] and match [colors, fonts, spacing]. Before any step that would overwrite, delete, or submit content, pause and ask for my approval. When you’re done, report what you added and where it lives in the file.

Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.

Read the original on github.com ↗

Get 3 agent uses like this every morning

With the day's top AI news. Free, and one click to unsubscribe.