How I Turned Claude Into a Design Tool with Pencil.dev

The speaker introduces Pencil as a "vibe design" tool that transforms AI prompts into visually appealing, editable designs. While AI is traditionally mediocre at high-end design, Pencil aims to fix this by offering a bridge between raw LLM output and professional tools like Figma. The platform supports essential features such as CSS variables, UI kits, and components while remaining completely free for users. This section establishes the problem of needing client-ready visuals before jumping straight into the coding phase. It sets the stage for how Pencil competes with newer tools from Sketch and Figma's own MCP integrations.

The video demonstrates how to use Pencil as an agent-driven tool that works locally in an IDE or as a standalone application. The speaker shows a live demo using Claude Code in the terminal to trigger the Pencil MCP server for a dashboard design. By using the Lunaris UI kit, the AI populates a rover management platform dashboard in real-time right before the viewer's eyes. This integration is significant because it allows the design tool to benefit from all the custom skills and servers already set up in the user's Claude environment. The process highlights the "batch design" tool capabilities where Claude structures the layout and navigation programmatically.

Once the initial design is generated, the speaker explores the granular editing capabilities that make Pencil feel like a familiar design environment. Users can click on specific elements like buttons or record tables to adjust padding and alignment manually. The tool offers a variety of UI kits, including Shadcn, Halo, and Nitro, which can be swapped to change the entire aesthetic instantly. Theming options allow for quick transitions to dark mode or changing primary button colors to specific hues like yellow. This flexibility ensures that the designer isn't strictly bound to a single AI-generated style and can iterate rapidly.

The speaker moves from a template-based approach to creating a Bohemian-style French bakery website from a completely blank canvas. By providing a detailed prompt and using Unsplash for imagery, Claude generates a three-page website layout including a logo and custom images. The resulting design is surprisingly professional, featuring cohesive layouts that the speaker claims wouldn't immediately look like AI-generated content. Small imperfections are easily corrected by double-clicking text or dragging elements into better positions. This section emphasizes the tool's ability to handle creative, non-technical prompts to produce high-fidelity marketing visuals.

After finalizing the visual design, the speaker asks Claude to code the design into a fully functioning website. The transition is remarkably accurate, matching the visual elements, typography, and spacing nearly one-for-one in the live browser. Because the design files are stored as pure JSON, they are natively "legible" to AI agents, facilitating a smooth handoff from design to development. This allows the final site to be connected to real databases or enhanced with other MCP tools for dynamic functionality. The speaker notes that users can also import existing designs from Figma, making it a versatile addition to an existing stack.

The video concludes with a candid look at the tool's current shortcomings, including occasional bugs with the build chat and lingering UI overlays. Performance can sometimes feel slow when performing complex actions, but the speaker views these as minor growing pains for a venture-backed free tool. Despite these issues, Pencil is praised for being significantly easier to set up than the MCP tools for Sketch or Figma. The creator encourages users to take advantage of the free access before the business model inevitably shifts. Finally, the speaker points viewers toward additional resources for designing terminal UIs using Claude Canvas.