Pencil
Design on canvas. Land in code.
Freemium Coding
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
