Pencil: Agent-Driven Design Tool for Developers
In modern product development, design and engineering are no longer separate conversations. AI has already transformed how we write code, but its role in visual design is still being defined. Can a model meaningfully interpret layout, hierarchy, spacing, and aesthetic direction? This article explores that question through a tool built precisely at this intersection: Pencil.
Pencil is an agent-driven design platform that transforms simple text prompts into polished, fully editable visual designs in real time. It blends the intuitive control of tools like Figma with the generative strength of advanced AI models such as Claude. The result is a workflow that allows you to move from idea to visual prototype in minutes, then refine and perfect the output with full creative control.
Rather than replacing designers, Pencil reshapes how early-stage design work happens. It accelerates exploration, reduces repetitive layout work, and helps translate abstract ideas into concrete interfaces. You can quickly generate dashboards, landing pages, or complete multi-page websites, then iterate visually without losing flexibility.
This guide walks through Pencil from first principles to advanced use cases. You will learn what problems it solves, how to set up your environment, and how to generate your first AI-powered dashboard. From there, you will create a detailed multi-page website from a single prompt and even convert that design into a functional live site. By the end, you will understand how to integrate Pencil into your workflow to significantly accelerate both design and development.
What is Pencil and why should you use it?
At its core, Pencil is a design canvas that an AI agent can control. It acts as the visual bridge between a developer's prompt and a tangible user interface. Instead of an AI just outputting code that you have to run to see the result, it can now build the design visually, component by component, on an infinite canvas, giving you instant feedback.
Bridging the gap between AI and design
It's no secret that while large language models are incredibly proficient at writing code, they often lack a nuanced understanding of visual design principles. The "AI slop" aesthetic (generic, uninspired layouts) is a common problem. Even with advanced prompting techniques and specialized "skills," getting a visually polished result directly from an AI can be challenging.
This is where the traditional design process comes in, typically involving tools like Figma or Sketch. A designer creates a mockup, which then gets handed off to a developer. This handoff can be a source of friction, with misinterpretations and inconsistencies.
Pencil aims to eliminate this friction entirely. It allows an AI to "design" in a way that is both visually immediate and programmatically sound. A developer can prompt an entire interface into existence, a designer can then immediately jump into the same file to adjust spacing, colors, and typography, and the whole team can get sign-off before committing to a final code implementation. It creates a fluid, iterative loop between ideation, design, and development.
Key features at a glance
Pencil is packed with features that make it a uniquely powerful tool for the modern developer and designer:
Agent-Driven Design: Pencil is built around the Machine-Centered Protocol (MCP). This is essentially an API that allows AI agents (like Claude Code, OpenAI Codex, etc.) to programmatically interact with the design canvas. The AI can add frames, insert components, apply styles, and arrange layouts, all by sending commands to the Pencil MCP server.
Figma-like Experience: If you've ever used a modern design tool, Pencil's interface will feel instantly familiar. It features a toolbar on the left for creating basic shapes and text, a canvas in the center, a layers panel, and a detailed properties inspector on the right for fine-tuning every aspect of your design. This familiarity lowers the learning curve significantly.
Rich Design Systems and UI Kits: You're not starting from scratch. Pencil comes with built-in support for popular design systems and UI kits like Shadcn UI, Lunaris, Halo, and Nitro. This ensures your AI-generated designs are consistent, professional, and built with high-quality, reusable components.
Flexible Workflow: You can use Pencil as a standalone desktop application for focused design work or integrate it directly into your IDE (like VS Code or Cursor) to design right where you code.
Open and Readable File Format: A standout feature is that Pencil's .pen files are pure JSON. This means they are human-readable and, more importantly, machine-readable. An AI agent can easily parse the entire structure of your design, understand its components, and translate it into code with high fidelity.
Setting up your design environment
Before generating incredible designs, Pencil needs to be installed and configured to communicate with your AI agent of choice.
Downloading and installing Pencil
Getting Pencil is straightforward. It's currently free to use. Navigate to the official Pencil website, click on the "Download Pencil" button, choose the appropriate version for your operating system (macOS, Windows, or Linux), and once downloaded, open the installer and follow the on-screen instructions.
Understanding the Pencil interface
When you first launch Pencil, you'll be greeted with a welcome file that guides you through the basics. The interface is clean and intuitive.
The Toolbar (Left) contains your standard design tools for creating frames (artboards), shapes (rectangles, ellipses), text, and more. The Canvas (Center) is your infinite workspace where all the design magic happens. You can pan and zoom just like in other design applications. The Layers Panel (Left Sidebar) shows elements in a hierarchical list. You can select, group, and reorder layers from this panel. The Properties Inspector (Right) gives you granular control over the element's properties when you select an element on the canvas, including position, dimensions, alignment, colors (fill and stroke), effects (shadows), and export settings.
Configuring AI agents and MCP
To unlock Pencil's true power, you need to connect it to an AI agent. While Pencil has a built-in chat function, you get the best and most consistent results by using a powerful command-line interface (CLI) tool like Claude Code.
The communication between the AI agent and the Pencil canvas is handled by the Machine-Centered Protocol (MCP). Pencil automatically runs an MCP server in the background, which listens for commands from compatible CLI tools.
Here's how to set it up: Open Pencil and navigate to the settings or configuration menu. Look for an option labeled "Agents & MCP". In this menu, you will see a list of compatible AI agent CLIs.
Ensure the toggle for your desired CLI tool (e.g., "Claude Code CLI") is enabled. Pencil is smart enough to auto-detect if you have these tools installed and will automatically set up the connection. If you haven't installed an agent like Claude Code, Pencil provides a quickstart guide to help you get it installed and configured on your system.
With this setup complete, any commands you issue to Claude Code from your terminal can now directly manipulate your open Pencil design file.
Generating a dashboard with AI
Creating a first design demonstrates the fundamental workflow of prompting, generating, and refining a design in Pencil. This example replicates creating a rover management dashboard.
Crafting the prompt
The quality of your output is directly related to the quality of your input. A good prompt is specific and provides clear constraints.
In Pencil, create a new frame on the canvas using the Frame tool (or press F). In the Layers panel, select the frame and rename it to "Step 3 Frame". This is important because the prompt will target this specific frame by name.
Here's an effective prompt:
This prompt is effective because it clearly states where to build (in the "Step 3 Frame"), what to build (a dashboard for a rover management platform), what components to use (using the components), and specific layout requirements (add a sidebar and add rover stats and table).
Running the prompt with your AI agent
Now, send this prompt to your configured AI agent via the terminal. Open your system's terminal and paste the prompt text. Crucially, add the instruction for the AI to use Pencil at the end of the prompt: use the pencil mcp server.
Your full command in the terminal should look something like this:
Press Enter to execute the command.
Watching the magic happen
Switch back to your Pencil window. You will see your blank frame come to life. The AI agent breaks down the task into smaller steps and sends a stream of commands to Pencil. You'll see the sidebar appear, then the main content area, then the stat cards, and finally the table, all populated with relevant data and styled according to the Lunaris UI kit. This real-time generation provides an immediate feedback loop, allowing you to see if the AI is on the right track.
Reviewing and tweaking the result
Once the generation is complete, you'll have a fully realized dashboard design.
The AI has done an excellent job, but maybe you want to make a few small adjustments. This is where Pencil's manual editing capabilities shine. If the "Showing 10 records" text at the bottom of the table is a bit too close to the edge, click to select the footer container that holds the text and the pagination buttons. In the Properties Inspector on the right, find the Padding section, click on the padding values and increase the left padding to give the text more breathing room.
You've successfully combined AI generation with manual refinement. This powerful workflow allows you to maintain high velocity without sacrificing design quality or control.
From blank canvas to coded website
Now that you understand the basics, tackling a more ambitious project demonstrates Pencil's full capabilities. This example generates a complete, multi-page website for a fictional French bakery, and then has the AI write the code to turn it into a live webpage.
Leveraging style guides
A great design starts with a strong foundation. Pencil includes a gallery of beautiful, professionally designed style guides that you can use as a starting point.
In Pencil, click the "Kits" button or the "+" icon in the tab bar. This will open a modal showing the available Design System Components and Style Guides.
For this project, selecting the "Editorial Data" style guide provides an elegant, clean aesthetic perfect for a bakery. Clicking it will load its components, fonts, and color palette into your current context.
Crafting a detailed, multi-page prompt
For a complex project, a detailed prompt is essential. Create a new, blank file (File > New) and give your AI a rich set of instructions.
Here is an effective prompt:
After running this initial prompt, the AI agent (using a "brainstorming" skill) interactively asks for more details about the required pages. Specifying a Home page, an Our Story page, and a Menu page clarifies the requirements. This back-and-forth conversation with the AI is a key part of the agentic workflow, allowing you to refine the requirements on the fly.
Generating and refining the website design
With the requirements clarified, the AI will begin building the entire website within Pencil. It will create separate frames for each page, pulling images from Unsplash, generating plausible copy, and laying everything out according to the elegant "Editorial Data" style guide.
The result is a remarkably polished and cohesive website design. Once again, you can click into any element to make adjustments. If a line of text is wrapping awkwardly, simply select the text box and resize it. This level of control is what elevates Pencil beyond a simple "prompt-to-image" tool.
From visual design to live code
This is the final, most powerful step. You have a beautiful design, but it's still just a static mockup. Now, instruct your AI agent to turn this design into a real, functional website.
Ensure your website design file is saved (e.g., laboheme.pen). Go to your terminal and issue a new prompt to your AI agent, referencing the design file:
The AI will now parse the JSON structure of your .pen file, understand the layout, styles, text, and images for each page, and write the corresponding code.
The result is a live website that is a near-perfect, pixel-for-pixel replica of the design you created in Pencil. The AI has successfully bridged the entire gap from a simple idea to a fully-coded front-end.
Final thoughts
Pencil represents a paradigm shift in how we think about design and development. It's not just another design tool; it's a visual canvas for artificial intelligence. It democratizes design by allowing developers to rapidly prototype beautiful interfaces, and it empowers designers by integrating AI as a powerful assistant that can handle the heavy lifting of initial layouts and component assembly.
Starting with the basics, generating a dashboard from a simple prompt and making minor tweaks, then graduating to a complex, multi-page website, leveraging professional style guides and detailed prompts to create a stunning result that converts into a live, coded webpage demonstrates Pencil's power.
While the tool is still young and has a few rough edges, its potential is immense. The ability to go from a simple sentence to a fully editable, high-fidelity design—and then to code—in a matter of minutes is nothing short of magical. As AI agents become more sophisticated and tools like Pencil continue to mature, the future of creating for the web will be more collaborative, faster, and more creative than ever before.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.