Assembling...
Pencil.dev is a visual design tool built for developers that bridges the gap between design and code through its MCP (Model Context Protocol) integration. Design files use the .pen format and live directly in your Git repository, enabling version-controlled design alongside code. It integrates with Claude Code, Cursor, and other AI-powered IDEs to generate production-ready components from visual designs, with support for design token sync, Figma import, and real-time collaborative canvas editing.
Design React components visually within your IDE using the Pencil.dev canvas, then export production-ready code with proper styling, layout, and responsive behavior.
Keep design files in sync with your codebase using .pen files stored in Git. Changes to design tokens automatically propagate to CSS variables and Tailwind config.
Use MCP integration with Claude Code or Cursor to describe layouts in natural language and have Pencil.dev generate visual designs that export to clean React components.
Define reusable components, color tokens, and typography scales in Pencil.dev and sync them across your design system and codebase.
// Working with .pen files in your project// designs/components/hero-section.pen — stored in Git alongside code// Read a .pen design file and extract component structureimport { readFileSync } from "fs";interface PenNode {id: string;type: "frame" | "text" | "rectangle" | "ref";name?: string;children?: PenNode[];layout?: "horizontal" | "vertical";width?: number | string;height?: number | string;fill?: string;content?: string;}export function parsePenFile(filePath: string): PenNode {const raw = readFileSync(filePath, "utf-8");return JSON.parse(raw) as PenNode;}// Example: Generate a React component from .pen design tokensexport function generateComponentProps(node: PenNode) {return {className: `flex ${node.layout === "horizontal" ? "flex-row" : "flex-col"}`,style: {width: node.width,height: node.height,backgroundColor: node.fill,},};}
Seamless integration, great documentation. Set up in under 10 minutes.
2 days ago
Works well for our use case. Would love to see more webhook event types.
1 week ago
Excellent compliance coverage. HIPAA audit trail works perfectly.
2 weeks ago
| Key | Description | Example |
|---|---|---|
| PENCIL_PROJECT_ID | Project identifier for Pencil.dev cloud sync | proj_xxxxxxxxxxxxxxxx |
Pencil.dev is a visual design tool that integrates directly with developer workflows through .pen files stored in Git and MCP protocol support for AI IDEs. It bridges the design-code gap by enabling visual component design that exports to production-ready React and Tailwind code. The MCP integration makes it uniquely powerful for AI-assisted design workflows in Claude Code and Cursor.