What is Pencil and how does it work with Claude Code for UI design

Pencil is a design tool that integrates with Claude Code via MCP (Model Context Protocol). It allows you to create UI designs for your app screens before you start coding. You install the Pencil Desktop app, set up the MCP connection in Claude Code, and then use the "frontend-design" plugin to generate app designs through simple prompts — all without writing any frontend code first.

Why should I design my UI with AI before starting development?

There are three key reasons: First, it saves time — designing the UI upfront avoids costly refactoring after every screen is built. Second, it supports separation of concerns by keeping the design process in a separate context window, which keeps tasks small and manageable. Third, it follows the best practice of using expert agents a designer agent handles UI creation while a developer agent focuses on building components.

Can I use this AI UI design workflow with tools other than Claude Code?

Yes. While the step-by-step guide in this tutorial is specific to Claude Code and the Pencil MCP integration, the overall workflow can be adapted to work with your preferred AI coding tool. The core concept — generating UI designs through AI prompts before development — is flexible and not locked to a single platform.

How To Create UI Design With AI

If you've ever dreamed of a way to create a UI designer that builds your app screens before you even start developing, this is the blog post for you. In this post, you will see how to implement a designer using Claude Code and Pencil.

Why do we need it?

Great question! We could just tell Claude what our app is about and then have it modify the UI as we tweak the code. However, there are several reasons why that isn't a good idea:

Time: The most obvious reason is wasted time. The UI design process can be lengthy. If you have to refactor the code after every single screen creation, it takes much longer than just designing the UI first and developing it afterward.
Separation of Concerns: As we've mentioned on the blog many times, we need to keep the context window as small as possible. It's important to split processes into smaller tasks. This is why handling UI design in a separate context before developing it is a great approach.
Expert Domains: It's considered a best practice to create agents with specific expertise to handle single types of tasks. For example, a designer agent handles the UI design, while a frontend developer agent deals with component creation.

So, how do we do this magic?

Step 1: Installation

Go to https://www.pencil.dev/downloads
Download the Pencil Desktop app or Extension.

In Claude Code, the MCP installation happens automatically. However, if it doesn't work for you, add this to your MCP configuration:

📦JSON
1
2
3
4
5
6
7
8
9
    "pencil": {
      "command": "/path/to-your-pencil-desktop/mcp-server-windows-x64.exe",
      "transport": "stdio",
      "args": [
        "--app",
        "desktop"
      ],
      "env": {}
      }

Open pencil App
Create a new .pen file and save it in your project folder.

Step 2: Install the Frontend-Design Claude Code Plugin

Open Claude Code.
Run the /plugin command.
Search for frontend-design and install it.

Step 3: Create Your New Design

Before your main prompt, write something like: "I want to use frontend-design."
Ask it to generate your design. For example: "Create an app design for a todo app."
Review the output and fix it if needed.

Loading...

Vibki