Pencil: The Design Tool That Lives Right in Your IDE
Product Introduction
Ever felt like you're constantly switching hats—and apps—between designing and coding? Pencil eliminates that frustrating back-and-forth by bringing design tools right into your development environment.
It's like having Figma's superpowers injected into VS Code, but with tighter version control and less context switching.
Key Features
Code-Friendly Design Canvas
- Vector playground: The MCP canvas gives you full control to manipulate designs programmatically
- Git integration: Version your UI components alongside their implementation code
- Figma fluency: Copy-paste designs directly without losing fidelity
Developer-Centric Workflow
- Precision tools: Pixel-perfect adjustments without leaving your IDE
- Brand kits: Drag-and-drop your design system components
- API ready: Connect designs to live data sources
Team Collaboration Boosters
- Single source of truth: Designs live in your codebase
- Merge conflict resolution: Handle UI changes like code changes
- Plugin ecosystem: Extend functionality as your stack evolves
Product Data
| Aspect | Details |
|---|
Product Link
Ready to try? Get Pencil and kiss design-dev handoffs goodbye.





