Figma Dev Mode MCP
Figma's Dev Mode MCP server bridges design and code by connecting Figma directly to AI coding tools through the Model Context Protocol, enabling seamless translation of designs into production-ready code with full access to design tokens, components, and semantic design intent.
Onlook
Enter "Cursor for designers". Onlook is an open-source AI-powered visual editor for React and Next.js apps, letting users instantly design and generate real code—all in a drag-and-drop interface.
Paper (paper.design)
Paper is a design tool where everything runs on real HTML/CSS, so what you design is what ships. Agents like Claude Code and Cursor can read and write directly to your canvas via MCP, creating a true two-way loop between design and code. Currently in open alpha.
Pencil (pencil.dev)
Pencil is a vector design tool that lives inside your IDE. Design files (.pen) sit in your repo, version-controlled with Git, and AI agents like Claude Code and Cursor can read them via MCP to generate pixel-perfect code directly from your canvas. Currently free in early access.
The Shape of AI
A database of UX patterns for designing artificial intelligence
v0 by Vercel
An AI-powered, chat-based web development tool that generates production-ready code and user interfaces from natural language prompts.