SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI designPencil

Pencil

Pencil is a design tool built by pen.dev, focused on a workflow of "design with agents, refine every detail on the canvas, then push back to code." It supports importing any part of any app or webpage onto the canvas as editable layers, with no need to start from scratch; you can collaborate directly with AI agents on the canvas to design, or manually fine-tune, and it supports connecting to any model via ChatGPT or Claude subscriptions, API Key, MCP, WebMCP, or CLI. The tool has a built-in browser, so you can open webpages directly and import them to the canvas; it offers Vibe Shaders real-time shader visual effects, a Chrome extension (draw paths, edit curves, paste SVG code), and AI Pen for drawing icons and illustrations; it uses a custom WebGL pipeline and claims that thousands of layers remain smooth during panning, zooming, and editing, can handle 10,000 images and 10GB of content while maintaining 60fps. The canvas supports linear, radial, angular, and grid gradient editing, has built-in industry-standard design skills, and can export any artboard to HTML and CSS/Tailwind with one click; it also supports PDF, PNG, JPEG, WEBP, and 1x/2x/3x export; it supports .fig file import, Figma copy-paste, pasting copied webpages as editable layers, reusable symbols and overrides, color/spacing/font variables, component slots, constraint scaling, layer spacing measurement, blur and shadow stacking, alignment snapping, and pixel-level drawing; it provides slides and presentation mode; and it uses the open .pen design format (JSON), making it easy for agents to process natively.

Open website

About this tool

Pencil is a design tool from pen.dev built for the agent era, with the core proposition of "design with agents, refine every detail on the canvas, then ship it back to code." It seeks to integrate AI generation, hands-on polishing, and code output into a single canvas workflow, and emphasizes that you should "never have to start from scratch."

In terms of use, Pencil is positioned for collaboration scenarios between design and development: it can serve as a UI/web design tool, as a productivity tool for exporting design results to HTML and CSS/Tailwind code, and it also supports creating slides and presentations.

Main capabilities:

  • Agent-assisted design: you can design directly with agents on the canvas, or manually refine or invoke an agent to handle things; it supports connecting any model to the canvas, including via a ChatGPT or Claude subscription, an API key, or through MCP, WebMCP, or CLI.
  • Import and reuse: you can import any part of any app onto the canvas; the built-in browser can open any webpage and import it directly as editable layers; after copying any webpage in Chrome, you can paste it as editable layers; it supports importing .fig files (including layout, styles, and images), or copying and pasting directly from Figma.
  • Performance: based on a self-developed WebGL pipeline, the official claim is that thousands of layers remain smooth during panning, zooming, and editing, and it can handle 10,000 photos and 10GB of content while maintaining 60fps.
  • Visual effects: Vibe Shaders provides real-time shader-based gradient and texture effects; it supports editing linear, radial, angular, and mesh gradients on the canvas.
  • Chrome extension and AI Pen: the extension supports drawing paths, editing curves, and pasting SVG code directly into designs; AI Pen can use agents to draw icons and illustrations.
  • Design fundamentals: it preserves the familiar shortcuts of Figma and Sketch; it supports reusable symbols and overrides, component slots, color/spacing/font variables, constraint scaling (text, strokes, corner radii, and effects scale together when resizing a group), hovering to measure the spacing between any two layers, fill container/fit content/absolute positioning/align to edges, arbitrary stacking of background blur/shadows/layer blur, snapping to edge centers and equal spacing while dragging, pixel and half-pixel snapping, and layer reordering, hiding, grouping, renaming, and selection.
  • Export and sharing: you can export any artboard to HTML and CSS/Tailwind in one click, and also export PDF, PNG, JPEG, WEBP at on-demand sizes, as well as 1x, 2x, 3x and other scale factors; after sending a link, anyone can open the latest version in a browser.
  • Teams and files: it supports sharing component sets across files and keeping projects in sync; it provides a slide view and presentation mode.
  • Open format: the .pen design format is essentially a JSON file, making it easy for agents to process natively, and the schema is fully open with documentation.

How to use it: you can design in the app using the built-in browser and canvas, connect Claude Code, Codex, Hermes, Antigravity, Cursor, or any agent via MCP, and you can also use the pen.dev CLI for headless design. The export, sharing, import, and other operations mentioned above are all provided as described officially.

Use cases: suitable for teams that need to collaborate with AI agents on interface design, those who want to quickly turn webpages or existing apps into editable design files, those who need to produce HTML/CSS/Tailwind code directly from designs, and users who need to create presentation decks.

Limitations and information not provided: the official materials do not state specific pricing, free quotas, supported operating systems and browser ranges, account system, collaboration member limits, data storage and privacy policies, or the specific configuration steps for connecting each agent; this content is not yet provided.

Related tools

Browse category