Overview
Pencil is an agent-driven MCP canvas that brings design directly into your IDE. Design UI on a visual canvas and watch as AI generates matching code in real-time. With bi-directional sync between design and code, Pencil eliminates context-switching between design tools and your editor. Sketch prototypes, mark interactions, and code all in one place. Features component-based design kits, integration with your own design system, and the ability to pull data from APIs, databases, and other agents.
Pricing: Free tier available
Architecture: Apple Silicon
Key Features
- Agent-driven MCP canvas for visual design in your IDE
- Bi-directional sync between design and code
- Real-time code generation from canvas sketches
- Component-based design kits included
- Integration with custom design systems
- Pull data from APIs, databases, and other agents
- Seamless Cursor IDE integration via MCP
- Design and code just one tab apart
Tags
Similar Apps
Paper
Connected design canvas for teams shipping with AI agents
OpenPencil
Open-source design editor that opens Figma files natively
Zed
Lightning-fast code editor with AI at 120fps
Devin Desktop
Windsurf, renamed — an AI IDE that doubles as a command center for your agents