Pencil Documentation

The infinite design canvas that lives in your IDE.

What is Pencil?

Pencil is a powerful vector design tool that integrates directly into your development environment. Unlike traditional design tools that run in separate applications or browser tabs, Pencil lives right inside your IDE alongside your code.

Key Features

• Infinite Canvas - Vector-based design with unlimited workspace
• IDE Integration - Works in VS Code, Cursor, and as a standalone desktop app
• AI-Powered - Deep integration with Claude Code, Codex, and other AI assistants via MCP
• Design Systems - Pre-built component libraries (Shadcn UI, Halo, Lunaris, Nitro)
• Code Sync - Two-way synchronization between design and code
• Version Control - .pen files work seamlessly with Git
• Variables & Themes - Design tokens that sync with your CSS

Why Pencil?

Pencil bridges the gap between design and development by putting both in the same environment. Design components, sync them with your code, and let AI assistants help you maintain consistency between design and implementation.

Quick Links

• Getting Started - Your first steps with Pencil
• Installation - Install on your platform
• Core Concepts - Understanding .pen files and components
• Design to Code - Syncing design with your codebase
• AI Integration - Using Claude Code and MCP
• Keyboard Shortcuts - Speed up your workflow
• Troubleshooting - Common issues and solutions
• FAQ - Frequently asked questions

Platform Support

• macOS - Desktop app + VS Code/Cursor extension
• Windows - VS Code/Cursor extension only
• Linux - Desktop app + VS Code/Cursor extension (some Wayland/Hyprland UI issues may occur)

Next Steps

1. Install Pencil on your platform
2. Follow the Getting Started guide
3. Explore Core Concepts to understand how Pencil works