Fetching from the wire…
Public story · 2026-02-25 · source-backed
Pencil.dev is a free, local-first infinite design canvas that connects to Claude Code via MCP. Design UI visually, and your coding agent reads the canvas context to generate matching production code (HTML, CSS, React) with zero information loss. Designs save as editable .pen files directly in your git repo — no Figma exports, no handoff documents. Supports Figma import for pixel-perfect translation. Available for Mac, Linux, and as a Cursor extension. Going viral among engineers who want to eliminate the design-to-code gap. Action: Install Pencil.dev (free) and configure its MCP server in your Claude Code or Cursor setup. (Pencil.dev)
Each link below shares sources, entities, or timing with this story.
Figma supports MCP / Shared entities / Shared topic / What happened next
Linked by a graph relationship (Figma supports MCP); both cover Claude Code, CSS, Cursor, Figma; overlapping topics (agent, canva, code, coding, design).
Linked by a graph relationship (Figma supports MCP); both cover Claude Code, CSS, Cursor, Figma; overlapping topics (agent, canva, claude, code, cursor).
Linked by a graph relationship (Figma supports MCP); both cover Claude Code, Cursor, Figma, MCP; overlapping topics (agent, claude, code, context, design).
Claude Code uses MCP / Shared entities / Shared topic / What happened next / Tension
Linked by a graph relationship (Claude Code uses MCP); both cover Claude Code, CSS, Cursor, MCP; overlapping topics (agent, code, coding).
Google released MCP / Shared entities / Shared topic / What happened next
Linked by a graph relationship (Google released MCP); both cover Claude Code, CSS, Cursor, MCP; overlapping topics (agent, code, coding).
OpenAI supports MCP / Shared entities / Shared topic / What happened next
Linked by a graph relationship (OpenAI supports MCP); both cover Claude Code, Cursor, HTML, Linux; overlapping topics (agent, claude, code, coding, design).
Google released MCP / Shared entities / Shared topic / What happened next
Linked by a graph relationship (Google released MCP); both cover Claude Code, Cursor, Figma, MCP; overlapping topics (agent, code, coding, design, figma).
Claude Code uses MCP / Shared entities / Shared topic / What happened next
Linked by a graph relationship (Claude Code uses MCP); both cover Claude Code, Cursor, Figma, HTML; overlapping topics (agent, claude, code, coding, cursor).