Pencil.dev: Create vector UIs in your IDE! Infinite canvas, layers, design systems & Git-friendly .pen files. Sync design tokens & generate UIs with AI prompts.
Pencil.dev offers a vector design canvas directly within your IDE, streamlining UI layout creation alongside code development in VS Code and Cursor. This extension allows for seamless iteration, featuring infinite canvases, layers, and editing controls. It also includes reusable components, design system libraries, and variables that sync with CSS design tokens. Designs are stored as .pen files compatible with Git, ensuring version control and alignment between design and implementation. Furthermore, Pencil integrates with AI assistants like Claude Code and Codex for UI generation and refinement within the same workspace via MCP. The platform is currently free, with potential future paid plans or features.
