Design Agent - Claude Bridge

What it does

Claude Code is a strong designer with one problem: it can't see your canvas. designagent fixes that. It opens a live, two-way bridge into Figma: Claude reads what's there, builds new frames and components, and edits existing ones in real time. The same bridge exports a design-system-faithful DESIGN.md you build production UI from.

Two halves of one loop:

• Canvas → code. Export tokens, components, and layout as DESIGN.md, then let the bundled design-to-code skill build UI that respects your tokens and component system, instead of hardcoding values Coco would immediately delete.
• Code → canvas. Have Claude read the open file, annotate issues, create shapes and text, restyle layers, and render HTML straight onto the canvas.

What you can do with it

• "Read the open Figma frame and build it as a React component using our tokens."
• "Create a pricing section on the canvas with three tiers and a featured plan."
• "Audit this screen for spacing and contrast issues and annotate them in place."
• "Turn this HTML into Figma frames."
• "Put my Claude Design export into Figma." — the claude-design-to-figma skill renders each artboard as an editable frame, bound to your file's variables and styles.
• "Drop a Lucide arrow-right icon into the button, then put my Simulator screen next to the design." One of them is lying; now you can see which.

How it works

The plugin bundles an MCP server that talks to a companion Figma plugin over a local WebSocket bridge. Install it through Claude Code and the server wires itself up. Claude gets a toolset for reading and mutating the canvas (get_design_md, create_frame, set_fill, instantiate_component, html_to_design, place_icon, capture_simulator — the full tool reference is at the bottom of this page). The design-to-code skill turns a DESIGN.md spec into framework-faithful UI code; claude-design-to-figma walks a Claude Design export or a /design canvas into Figma frames; figma-effects handles gradients, noise, and glass. No pixel-pushing by hand, which is exactly how Coco likes it.

Install

It's the flagship, its plugin name is simply designagent:

• Add the marketplace: /plugin marketplace add sherizan/designagent
• Install: /plugin install designagent@designagent

Release notes

v0.23.0

• New: place_svg, place_icon, place_lottie — any SVG (an exported SF Symbol, a brand mark) lands as native vectors; Lucide and Material Symbols icons are fetched by name, recolored, and sized; a Lottie file becomes one frame of native vectors. No more redrawing the arrow.
• New: capture_simulator (macOS) — screenshots the booted iOS Simulator into Figma as an image frame at point size. Flat pixels; for editable layers, use html_to_design.
• html_to_design fidelity: absolute/fixed children pin where the browser put them; radial-gradient → native radial; layered backgrounds → stacked fills; backdrop-filter: blur() → background blur; layer names come from data-name/id/aria-label/class, and the root frame takes the <title>.
• New nodes auto-place inside Sections (html_to_design, place_image, create_*).
• Renders went from 20s+ to under a second (the font list is cached now); take_screenshot waits for a paint in progress instead of catching it half-done.
• html_to_design { path } also reads HTML from the OS temp dir and the scratchpad.

v0.22.1

• html_to_design paints CSS background-image: url() as an image fill (FILL / FIT / TILE); <img> corner radius carries over.

v0.22.0

• New: claude-design-to-figma skill — Claude Design exports HTML but has no Figma export. This skill renders each artboard (a .zip/standalone export, or a /design canvas's .dc.html files) into editable Figma frames and verifies them by screenshot.
• html_to_design binds to your design system — solid colors and text that exactly match a local color variable, paint style, or text style come out bound to it. useDesignSystem: false keeps literal values.
• html_to_design { path } inlines relative assets — <img src> and CSS url() paths resolve against the HTML file's folder.
• list_variables_and_styles now returns each variable's default-mode value.
• Onboarding: the Figma panel's Setup card explains what's missing and has copy buttons for the two install commands; the session hook links the Community plugin.

v0.21.0

• html_to_design: CSS grid → native Figma grid, space-around/space-evenly, text-wrap: balance|pretty, variable-font axes; wrapped text keeps its container width.
• batch { screenshot } returns a PNG in the same call; get_spec { nodeId, depth }.
• New tools: rename, set_auto_layout, set_instance_property, create_component, list_variables_and_styles; set_text_style { wrap, variation }; native fills and effects (set_gradient, set_noise, set_pattern, set_effect) with the figma-effects skill.
• Removed set_shader, list_shaders, set_grid, apply_fix (near-zero usage).

v0.20.0

• New: export_asset — Claude exports icons, logos, images, and illustrations straight from the design into real SVG/PNG files in your project, including assets inside nested component instances. Vectors come out as clean SVG, images as PNG with transparency intact. No more screenshots-as-assets or rebuilt wordmarks.
• Lookups on nested-instance layers fail fast with a clear message instead of hanging for 20 seconds.
• Heavy exports are queued, so bursts of screenshots no longer drop the bridge.

v0.19.0

• New collapsible Update card in the panel with the exact update steps (/plugins → designagent → Update now, then /reload-plugins).
• The connected-project state got a proper card treatment.

v0.18.0

• Anonymous usage telemetry: the MCP server counts tool-call names (never design content or parameters) so we know which tools earn their keep. Opt out with DESIGNAGENT_TELEMETRY=0.