How to use Claude Code / Cursor with Pencil.dev and Tom Krcha

A vibe check with CEO of Pencil.Dev TIMESTAMPS 00:00–03:34 Intro, concept, and basic drawing tools; “vibe designing” explained. 03:34–07:36 Coffee shop website example in Barcelona, multi‑agent, multi‑page setup. 05:09–07:06 Switching models (Claude outage → GPT/Codex), MCP, and connecting Gemini / other models. 06:59–09:11 Libraries, shared design systems, and watching the live build vs Figma comparisons. 09:11–11:06 Design kits, style guides, and AI choosing visual styles (terminal, Swiss, etc.). 11:06–12:20 Generating responsive mobile versions and using paired frames for responsiveness in code. 12:20–16:05 Human‑in‑the‑loop editing while agents run, live tweaks, and turning off the “generating” overlay. 15:05–16:34 Creating style variations (Brutalist, Swiss, terminal), using the canvas for side‑by‑side exploration. 16:34–19:12 Cursor / IDE workflow: installing the Pencil extension, opening .pen files, using the IDE’s own models. 19:12–20:15 Upgrading an existing project: Figma → Pencil, or codebase + screenshots → Pencil visualization. 20:15–24:54 Design kits, variables, theming (accent, mode), and restyling components via images and “vibe” references. 25:02–27:05 Using Pencil directly in VS Code / Cursor without an existing file (creating new .pen files). 27:05–30:41 Who Pencil is for: engineers → better taste, designers → closer to code, marketers building whole sites. 31:41–33:21 Image generation inside Pencil (nano banana, etc.), custom image “skills,” and style rules. 33:23–34:57 Site‑map / navigation logic without connectors; agents inferring links between pages. 35:01–37:11 Components vs Figma, exporting working code from Pencil, and where they want to go. 37:11–39:09 Slots for tables and cards, and why slots help AI assemble UI correctly. 39:11–40:53 Wrap‑up, who should try it, and community / Discord mention. Tom on LinkedIn:   / tomkrcha   Pencil: https://www.pencil.dev/ Happy Operators: https://happyoperators.com