How to Use Pencil’s AI to Design Prototypes and Export Front‑End Code Instantly

Introduction

Pencil is an AI‑driven design assistant similar to Figma’s Make, allowing users to create UI prototypes using natural language. Its files are stored in the .pen JSON format, making them version‑controlled in Git, and the designs can be directly imported into Figma or exported as front‑end code.

Installation and Configuration

After downloading Pencil, register an account via email. Then configure a large‑model agent either by logging in or by providing an API key. Once installed, Pencil automatically registers the corresponding MCP (Model‑Control‑Protocol) in Claude.

Using Pencil with Claude CLI

In Claude Code CLI, create a new file ( File → New File) and describe the desired UI in natural language. The agent generates the prototype, and you can export the design to code via File → Export Design to Code Guide. The workflow includes:

Design the interface in Pencil (or let AI generate it).

Export the design to code using the MCP.

Run the generated project to view the result.

If changes are needed, adjust visually in Pencil or modify via Claude’s natural‑language commands.

Re‑export for rapid iteration.

Manage .pen files with Git for version control.

Pencil MCP API Overview

Pencil MCP provides 14 APIs grouped into five categories:

Query APIs – retrieve current state, e.g., get_editor_state (gets selected element) and get_screenshot (captures design).

Read APIs – understand the design, e.g., batch_get (batch node search) and get_variables (fetch design variables).

Modify APIs – change the design, e.g., batch_design (add/delete/modify nodes) and set_variables (set design variables).

Batch Operation APIs – global modifications, e.g., replace_all_matching_properties (bulk property replacement such as theming).

Assistive APIs – provide design inspiration, e.g., get_guidelines and get_style_guide.

Installing and Using find‑skills

The find‑skills tool helps discover and install skills for the Pencil ecosystem.

npx skills add https://github.com/vercel-labs/skills --skill find-skills

Typical commands:

npx skills find [query]    # search for a skill
npx skills add            # install a skill
npx skills check         # check for updates
npx skills update         # update all installed skills

Practical Skills

Two useful skills are highlighted:

pencil-design – generates design prompts and calls the MCP to create design files.

ui-skills – exports a design to React code following Tailwind + shadcn/ui conventions.

These skills streamline the creation of aesthetically pleasing pages and accelerate front‑end development.