Pencil

What is Pencil?

Pencil (now pen.dev) is a design canvas that uses AI agents like Claude and ChatGPT to build websites, apps, and presentations. It runs as a downloadable application or web version and supports headless use via CLI. Users can connect through an existing AI subscription, add API keys, or link external coding agents using MCP.

What are the features of Pencil?

• AI agent canvas

  Design with models such as Claude, ChatGPT, Grok, Qwen, Gemini, Kimi, Deepseek, and Minimax directly on the canvas, or refine manually.
• Website and app import

  Open any page in the built-in browser or use the Chrome extension to copy a webpage and paste it onto the canvas as editable layers.
• Figma file import

  Import .fig files containing layouts, styles, and images, or copy and paste content directly from Figma.
• Code export

  Export any frame as HTML and CSS/Tailwind in one click.
• External agent connection

  Connect tools like Claude Code, Codex, Hermes, Antigravity, or Cursor through MCP, WebMCP, or CLI for headless design.
• Vector editing

  Draw paths, edit curves, paste SVG code, vectorize bitmap images, and remove image backgrounds.

What are the use cases of Pencil?

• Converting live sites to editable designs

  Importing an existing website via the built-in browser or Chrome extension to modify its layout as editable layers.
• Migrating Figma projects

  Bringing .fig files into the canvas to continue work using AI agents instead of manual iteration.
• Handing off designs to developers

  Exporting completed frames as HTML and Tailwind CSS for immediate implementation.

Pencil Pricing Information:

• Web version

  Free to try.