Hello everyone, in this episode we take a look at Pencil, an AI agent driven MCP visual canvas that allows you to Vibe Design using Claude Code, tweak your designs manually then automate code generation. Let’s take it for a spin, generate some designs then convert them to code. It’s the paradigm shift in design I’ve been waiting for, and it’s finally here.

// Chapters
0:00 Intro
1:34 Download and login
2:24 Pencil interface tour
4:01 Starter file exercises
5:29 Prompt gallery and Rocket Launch site generation
8:43 VS Code setup
9:36 Vibe design AI Prompt Marketplace site
13:20 Covert to html/css code
16:22 Outro

// Links
Official Website: https://www.pencil.dev/
Downloads: https://www.pencil.dev/downloads
Documentation: https://docs.pencil.dev/
Discord Community: https://discord.gg/Azsk8cnnVp
VS Code: https://code.visualstudio.com/download
VS Code Extension: Search "Pencil" in VS Code Marketplace

// Download .pen file created in this tutorial
https://drive.google.com/file/d/1bgfRJjyEITdtvssP6_V6VL1nTc8Ty2uV/view?usp=sharing

// For updates
Twitter: https://twitter.com/deanemachine

#pencil #vibedesign #ai

YouTube

Pencil.dev is a new MCP-powered visual design canvas that uses Claude Code to generate UI designs from text prompts. The walkthrough covers installing the desktop app and VS Code extension, running built-in exercises, generating a full marketplace website from a single prompt, creating a responsive mobile version, and converting the design into a self-contained HTML/CSS file. The tool creates reusable components, uses design variables, and produces clean semantic HTML output, positioning itself as an AI-driven alternative to static design tools like Figma.

Pencil: 01 Vibe Design with Pencil and Claude Code