Free Claude Code + Pencil: Auto‑Generate UI and Seamlessly Convert Between Design and Code

1. Introduction

1.1 What is Pencil

Pencil is a powerful vector design tool that can be integrated directly into the development environment. Unlike traditional design tools that run in separate applications or browser tabs, Pencil runs inside the IDE where you write code, keeping design and code in the same workspace.

1.2 Why Choose Pencil

Pencil bridges the gap between design and development by allowing you to create components within the IDE, automatically sync design files with code, and use an AI assistant to keep design and implementation consistent, eliminating design‑to‑implementation drift.

2. Practical Example

2.1 Installation

Install Pencil via the VS Code marketplace:

https://www.pencil.dev/downloads

After installation, activate the extension through the email link and configure the MCP (Model‑Code‑Prompt) settings as shown in the screenshots.

Open the Claude Code command line window to view the MCP status:

2.2 Designing the Interface

Use Claude Code with a prompt to generate a design:

Use Pencil MCP to design a beautiful enterprise‑level login interface with Chinese/English toggle.

The resulting design appears in VS Code as shown:

2.3 Generating Vue Code

Prompt Claude Code to generate Vue code from the design file:

@login.pen generate Vue code from this file, requiring Vue 3 + ElementPlus, using JavaScript

The generated Vue page is displayed as:

The output closely matches the original design.

2.4 Core Concepts

.pen file is Pencil’s proprietary design file format:

Built on JSON for structured, readable data.

Version‑control friendly, can be managed with Git like source code.

Highly portable across teams and platforms.

2.5 Design ↔ Code Bidirectional Conversion

Design → Code workflow:

Complete the design on the canvas.

Save the .pen file in the project directory.

Open the AI dialog (Cmd/Ctrl + K).

Ask Pencil to generate the corresponding code.

Prompt examples (translated):

1. Generate Vue page code based on this design</code><code>2. Create page code using ElementPlus</code><code>3. Export this dashboard as a Vue component

Code → Design workflow:

The .pen design file and source code must reside in the same workspace.

The AI reads both files simultaneously.

Prompt examples (translated):

1. Recreate visual design from the button component at src/components/Button.tsx</code><code>2. Import the LoginForm component from the codebase into the current design</code><code>3. Include the header component from src/layouts/Header.tsx

2.6 Code‑to‑Design Example

A Vue 3 component is shown below:

The restored design in Pencil appears as:

3. Summary

The article demonstrates a complete end‑to‑end workflow for UI creation using Claude Code and Pencil within a Spring Boot 3.5.0 environment. It covers installing the Pencil VS Code extension, configuring MCP, designing a bilingual login page via AI prompts, exporting the design as a .pen file, and automatically generating Vue 3 + ElementPlus code. It also explains the .pen file format, provides shortcut keys for canvas navigation, and details both design‑to‑code and code‑to‑design conversion processes with concrete prompt examples.