Pencil.dev: Design right in the IDE. Now code and design live in the same repository
Next step
Open the bot or continue inside this section.
Article -> plan in AI
Paste this article URL into any AI and get an implementation plan for your project.
Read this article: https://vibecode.morecil.ru/en/interfeis-i-sayty/pencil-dev-dizain-v-ide/
Work in my current project context.
Create an implementation plan for this stack:
1) what to change
2) which files to edit
3) risks and typical mistakes
4) how to verify everything works
If there are options, provide "quick" and "production-ready". How to use
- Copy this prompt and send it to your AI chat.
- Attach your project or open the repository folder in the AI tool.
- Ask for file-level changes, risks, and a quick verification checklist.
If you’re a Vibkodist in Cursor or Claude Code, you’ve probably faced this eternal pain: threw a beautiful design in Figma → exported → transferred to the designer or rewrote into code → something broke during adaptation → again in Figma. Round after round, lost hours and nerves.
I hated it. So when I saw Pencil.dev, a tool that allows you to design right inside the IDE, and design files live in your repository next to the code, I immediately requested access.
What is Pencil.dev Actually
Pencil is a agent-driven MCP vector canvas built around an open file format that lives right in your codebase.
In simple words:
- You open the
.penfile directly in VS Code / Cursor - See the infinite canvas as in Figma
- Design by hand or ask AI to generate screens
- Everything is turned into clean, production-ready code (HTML + Tailwind, React, etc.)
- Design files are shared in Git along with the code
No exports, no imports. Design and code are one thing.
Key features that I am delighted with
Endless canvas right in the IDE Switch between code and design with a click. No separate windows.
AI Multiplayer As you draw one screen, Claude generates a second and a third. The time savings are enormous.
Vibe-designing with pixel accuracy You write a prompt directly in canvas: "Make a modern hero with a gradient and three cards." Or use curated actions (ready action buttons).
Imports from Figma 1:1** Copy any frame from Figma → paste in Pencil. Vectors, text, styles – everything remains.
** Open format .pen** It's not a black box. The file is read, debugged, you can write your tools. Total freedom.
Bi-directional link to code You change the design, the code is updated. You change the code of the component, the design tightens.
Integration with any agents It works with Cursor, Claude Code, OpenCode, VS Code + any MCP server (Playwright, databases, APIs, etc.).
How to install and run in 10 minutes
- https://www.pencil.dev/ → Request Access (now, early access is completely free).
- You get a link to download (there are versions for Mac (Apple Silicon + Intel), Windows, Linux AppImage / Tarball).
- You install the Pencil extension in Cursor or VS Code.
- Create a
mcp.jsonfile in the project (instruction in docs, 5 minutes). - Create a
design.penfile and canvas is ready.
Okay. No complicated settings.
A real example from my practice
Made landing for the AI tool:
- Created
landing.pen - Hand-drawn hero section (5 minutes)
- Wrote a prompt: "Add a glassmorphism testimonials section, 4 cards"
- AI generated in 30 seconds
- Imported pricing table from old Figma
- One click turned everything into React + Tailwind components
Bottom line: full landing (hero + features + testimonials + pricing + footer) in ~25 minutes. Previously, it took 2-3 hours + edits.
Pros and Cons (after a week of use)
** Plus:**
- Completely removes design handoffs
- Design in Git = branches, PRs, revision along with code
- Save a bunch of Claude credits (because you don’t have to regenerate 50 times in chat)
- Ideal for solo developers and small teams
- Quality of code at senior-fronten level d d
Minus (bye):
- Early stage: sometimes small bugs with rendering complex vectors
- No collaboration (only one user per project)
- Desktop application should be kept open
- It works best with Claude Code (other models are weaker)
Who should definitely try it right now
- You're Vibcoding in Cursor/Claude Code
- Do pet projects, landings, internal tools
- Tired of switching between Figma and code
- You want design to be part of codebase, not a separate artifact
If you’re in this category, Pencil.dev will be one of the most useful tools of 2026.
Outcome
Pencil.dev is not just a new design tool. This is the next step after Cursor: now design is part of AI-native workflow.
Link to the official website: https://www.pencil.dev/