code-to-design

Claude Design access and UI workflows for coding agents, part of QualityLayer. Create and review designs in QualityLayer without a Claude subscription, or use the standalone Claude Design connection.

The missing piece of the AI + Figma loop. Create and edit designs directly on the Figma canvas from Claude, Cursor, VS Code, or any MCP app. One command. No API key. No plugin. Just npx tellfigma.

Bidirectional sync between Pencil.dev designs and frontend code via Claude Code

A Claude skill that exports your prototype into Figma using your own design system: real components, variables, text styles and auto layout. By Lior Eli™

Convert self-contained HTML — including Claude designs — into native, editable Figma layers. Frames or Slides, 100% local.

Claude Code plugin: turn code and live websites into editable Figma designs. Bundles the Figma MCP.

MCP server that lets an AI agent write real designs onto a Figma canvas

Local-first design-canvas agent harness — one MCP contract that renders AI-generated design into MasterGo / Penpot, and reads canvas design back to code.

Live two-way bridge between a running web app and Figma. Push screens as auto-layout frames; Figma edits go back into the code, code edits update Figma. A fork of Figma Console MCP.

Turn a live web page into editable Figma layers. Your own headless Chrome, no hosted renderer, no per-import quota.

Design system I build, version and publish