Pencil

Overview

Pencil.dev is an AI-native design tool that runs inside your IDE or as a desktop app, letting you design interfaces on a canvas and then move those designs directly into code. Instead of treating design files and implementation as separate systems, Pencil centers both around .pen files that live in the same workspace as your application code.

The tool is built for developers, product engineers, and design-minded teams who already work in Cursor, VS Code, Claude Code, or terminal-first AI workflows. Pencil's core value is not just "generate UI from a prompt," but maintaining a two-way loop where you can design visually, export code, import existing components back into the canvas, and sync design tokens between Pencil and your codebase. If you are comparing modern AI UI design tools, that developer-native workflow is what makes Pencil stand out.

Pencil also exposes a local MCP server so assistants like Claude Code, Cursor, and Codex can read and modify .pen files while Pencil is running. That makes it part design canvas, part developer toolchain layer, and part bridge between visual editing and code generation. For teams already using Model Context Protocol in production workflows, Pencil fits naturally into the same stack.

Key Features

• IDE-native design canvas — Pencil installs as a VS Code or Cursor extension and also ships as a desktop app. You can open a .pen file directly in your project and work on screens, layouts, and components without leaving your development environment.

• Two-way design-to-code workflow — Pencil supports both design-to-code export and code-to-design import. You can create a component visually and ask Pencil to generate React, Next.js, Vue, Svelte, or plain HTML/CSS, then later import an existing component back into the canvas to keep design and implementation aligned.

• Local MCP server for AI assistants — When Pencil is running, its MCP server starts locally and exposes tools for reading and manipulating .pen files. That enables workflows with Claude Code, Cursor, Codex CLI, Claude Desktop, Windsurf, and other MCP-capable assistants without putting raw design operations behind a remote API.

• Design tokens and variable sync — Pencil variables map cleanly to CSS variables, making it practical to build or maintain a shared design token system. You can import variables from globals.css, update them visually in Pencil, and sync them back into the codebase.

• Pre-built UI kits and component guidance — Official docs include built-in design kits such as Shadcn UI, Halo, Lunaris, and Nitro. That gives teams a faster starting point for common interface patterns and helps Pencil fit naturally into modern React and Tailwind-oriented UI stacks.

• Figma-adjacent import workflow — Pencil supports bringing copied Figma elements and design tokens into Pencil, which makes it easier to bridge existing Figma workflows. For teams evaluating AI UX design tools, that makes Pencil a practical bridge rather than a greenfield-only tool.

How to Get Started

Pencil is straightforward to try, but the setup is multi-step because the design layer, the AI layer, and the MCP connection are separate pieces.

1. Install the Pencil extension in VS Code or Cursor, or download the desktop app.
2. Complete Pencil activation with your email.
3. Install and authenticate Claude Code with claude, because Pencil's AI features depend on Claude Code authentication.
4. Create or open a .pen file inside your project workspace.
5. Verify the Pencil MCP server is visible in your IDE's MCP settings or in Codex via /mcp.

Once that is working, the basic loop is simple: design on the canvas, press Cmd/Ctrl + K, and ask for either design changes or code generation. Pencil's docs recommend keeping the .pen file in the same repository as your application code so the AI assistant can access both sides of the workflow.

Integration Guide

Pencil is most useful when it is part of a broader developer workflow rather than a standalone design experiment.

• Cursor and VS Code — Pencil runs as an extension, so you can edit .pen files, call AI from the prompt panel, and keep your design file in the same workspace as your codebase.
• Claude Code — This is the required authentication layer for Pencil's AI features. If export or prompt actions fail, the first troubleshooting step is usually checking Claude Code login state.
• Codex CLI — Pencil's docs explicitly support Codex through MCP. Run Pencil first, then open Codex and verify Pencil appears in /mcp.
• Design systems and CSS tokens — Pencil can import tokens from CSS files and sync Pencil variables back out to code, which is useful for teams maintaining shared UI primitives across design and implementation.
• Code import/export — Pencil can recreate existing components visually, then let you make design adjustments and push those changes back into code. That makes it more workflow-oriented than many tools in the broader AI website design category.

Pricing & Plans

Pencil's official pricing page currently states that Pencil is free. The site does not list any paid self-serve tiers, annual billing, seat limits, or enterprise pricing.

If pricing transparency matters to your evaluation, note that Pencil already has a public pricing page showing the product is free, but it does not yet disclose any paid-tier or enterprise packaging details.

Best For

• Product engineers who want visual design and implementation inside one IDE-centric workflow
• Cursor and Claude Code users building internal tools, dashboards, SaaS interfaces, or app UIs
• Teams maintaining shared design tokens across design and code
• Developers who want a more code-adjacent alternative to general-purpose AI design tools
• Builders experimenting with MCP-native design automation in local-first environments

FAQ