Pencil

Founded by Will Hanschell in 2022

Design user interfaces on an infinite canvas with autonomous coding agents

Pricing model

Free Tier, Paid

Rating

★ Mixed Reviews

Time to value

Quick Setup (< 1 hour)

You can use pen.dev to design user interfaces and export them directly to production code. The application provides an infinite canvas where you collaborate with AI agents to draw layouts, generate vector graphics, and build interactive components. You can import existing websites or Figma files, customize visual effects with custom shaders, and manage shared UI libraries. With Model Context Protocol integration, connected coding agents can inspect your designs headlessly and translate visual mockups into clean HTML and Tailwind CSS styles.

What Pencil does

Convert live web pages into editable vector canvas layersExport design frames into Tailwind CSS and HTML codeConnect external coding agents via Model Context ProtocolImport Figma files directly onto the visual design canvasDraw vector paths and icons using automated design agentsCreate reusable UI components with custom content slotsPresent interactive slide presentations from canvas artboardsConnect external coding agents directly through Model Context Protocol or terminal CLIRender complex canvas files at sixty frames per second using a custom WebGL pipelineExport canvas frames into clean HTML and Tailwind CSS in one clickImport live web pages as fully editable vector layers using an embedded browserImport native Figma files with layout structures, styles, and image assets preservedApply real-time shaders, textures, and complex mesh gradients directly on canvasSave files in an open JSON format that automated coding agents can read and write