Pencil

Pencil.dev is a next-generation design tool that bridges the gap between design and development by embedding a Figma-like infinite design canvas directly within your IDE. With AI-assisted generation and integration with tools like Claude Code and Cursor, you can visually craft user interfaces, iterate on layouts, and have design elements translated into HTML, CSS, or React code in real time — eliminating the traditional handoff between design files and implementation.