iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
✏️

Overview and Usage of Pencil: An AI Design Tool

に公開
AI
開発環境
デザイン
Claude
pencil
tech

Introduction

Pencil is an AI-driven design tool that can be used directly within your IDE. You can create UI designs on editors like VS Code or Cursor and convert them directly into React or Tailwind CSS code.

In this article, I will introduce the main features and basic usage of Pencil.

What is Pencil?

Pencil is a tool aimed at integrating design and code. It has the following features:

  • Direct design work within the editor
  • Version control via .pen files
  • AI-powered prompt-driven design generation
  • Instant conversion to code

Main Features

Integration with IDEs

It can be installed as an extension for editors such as VS Code and Cursor. Design files are saved in .pen format and can be managed with Git just like regular source code.

Design Generation via AI

When you enter a prompt in natural language, AI such as Claude Code generates the UI.

Example: "Create a login screen in dark mode"

The generated design can be manually adjusted or refined with additional prompts.

Conversion to Code

Created designs can be converted into code in formats such as React, Tailwind CSS, and Next.js. Bidirectional synchronization between design and code is also possible.

MCP Integration

It supports the Model Context Protocol (MCP), allowing integration with AI agents like Claude Code and Cursor.

Setup Method

Desktop App (Mac/Linux)

  1. Download the app from the official download page
  2. Run the installer to install the app

Editor Extensions (Including Windows)

It can be used as an extension for VS Code, Cursor, and Antigravity.

VS Code Example:

  1. Open the VS Code Extensions panel (Ctrl+Shift+X)
  2. Search for "Pencil"
  3. Install the official "Pencil" extension
  4. The pencil icon will appear in the sidebar

Integration with Claude Code

  1. Click the connect button in the Pencil app
  2. Enter the email address you registered with Claude Code on the screen that appears
  3. Follow the authentication steps to complete pairing
  4. Run the /mcp command in Claude Code and confirm pencil · ✔ connected

Basic Usage

Creating Design Files

For editor extensions:

  1. Create a new .pen file in your project directory
  2. A dedicated canvas will open

For the desktop app:

  1. Click "New .pen file" in the sidebar
  2. An infinite canvas will be displayed

Design Generation via AI Prompts

  1. Enter natural language in the AI chat field or at the top of the canvas
  2. Click the generate button
  3. The AI generates the layout and color scheme
  4. Adjust manually as needed

Exporting Code

  1. Select the code export function from the top right of the canvas or the menu
  2. Select the format, such as React, Tailwind, or Next.js
  3. Incorporate the generated code into your project

File Management

Design files are written in an open JSON-based format, making them suitable for version control with Git. Partial support for importing Figma files is also available.

Summary

Pencil is a tool that combines design-code integration, AI-driven generation, and version control. Since it allows design work directly within the editor, it makes handling design much easier within the development workflow.

Discussion