Pencil: 01 Vibe Design with Pencil and Claude Code

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