I Designed a Full App in Pencil -- Then Claude Code Built It

Study Guide

Overview

Matt Maher demonstrates Pencil (pencil.dev), a free design tool purpose-built for AI workflows. Rather than designing in code or relying on a model's first guess, Pencil lets you iterate visually with multiple parallel agents, build design systems, and then hand everything to a coding agent (Claude Code) via MCP to produce a fully functional application. The video covers restyling existing apps and building a brand-new weather app from scratch.

Key Concepts

1. The Problem with AI-First Design Today

When building applications with AI, the model picks a design direction up front and that first idea becomes the design by default. Developers haven't had tools to orchestrate and explore multiple visual directions before committing to one.

2. What Pencil Is

  • Free tool at pencil.dev; bring your own AI subscription
  • Think of it as "Figma but built for AI workflows"
  • Designs in Pencil are communicated to coding agents through an MCP server
  • Supports multi-agent parallel design, where multiple agents build different concepts simultaneously

3. Restyling Existing Applications

  • Claude Code reads an existing app via the Pencil MCP and generates a component inventory (fonts, colors, sizes, components)
  • You can feed design inspiration from sources like Dribbble to create alternative design systems
  • A new theme can be generated and applied while using explicit values from the design system
  • Separating UI from business logic makes this process significantly easier

4. Building a New App from Scratch

Matt built a mobile weather app ("will it rain in the next 5 hours?") through progressive narrowing:

  1. Wide ideation with 6 parallel agents creating different design concepts
  2. Selection and refinement, choosing a preferred direction, removing unwanted elements
  3. Deeper exploration with 3 agents pushing variations of the chosen design
  4. Focused iteration with 6 agents refining a single concept across states (rain, snow, clear)
  5. Design system creation, building a complete style guide with named screen regions, color rules, and state-specific assets
  6. Handoff to Claude Code via MCP for the actual build

5. The Design-to-Code Handoff

  • Claude Code reads the Pencil file through MCP and builds a working Next.js application
  • The build took roughly 15 minutes
  • Claude Code used Chrome extension to debug and verify the running app
  • The result was a live weather app pulling real data from a weather API

6. Keeping Design and Code in Sync

  • When the builder found color conflicts (e.g., gray-on-gray in snow states), it fixed them in code and updated the Pencil design file
  • The design file acts as a living blueprint that stays current with the application
  • This is a key differentiator: designs are buildable artifacts, not just mockups

7. Design Panel Discipline

Matt found that each design panel should be laser-focused on one concept (colors only, icons only, layout only). When panels contain the entire app plus specific guidance, the model can get confused about what to prioritize. This mirrors best practices for writing PRDs and coding instructions.

Key Takeaways

  • Pencil fills a gap in the AI tooling ecosystem: coding tools have matured, but design tools for AI workflows are still wide open
  • Multi-agent parallel ideation creates a flow state that feels like meaningful collaboration rather than prompt-and-wait
  • The progressive narrowing pattern (wide ideation, selection, deeper exploration, focused refinement) is an effective way to explore design space
  • Separating UI from business logic makes AI-driven restyling dramatically easier
  • Design files that stay in sync with code create a single source of truth for how an application should look

Discussion Questions

  1. How does multi-agent parallel ideation change the designer's role compared to traditional design tools?
  2. What are the risks and benefits of letting a coding agent update the design file directly?
  3. How might the progressive narrowing pattern (wide to focused) apply to other creative or engineering workflows?
  4. What does the emergence of tools like Pencil suggest about the future relationship between design and development?
YouTube