Pen.dev

Pen.dev launched as a WebGL-based design canvas that lets users import any part of any app and design with AI agents directly on the canvas. The tool supports ChatGPT, Claude, Grok, Qwen, Gemini, Kimi, Deepseek and Minimax, and can be connected via API keys, MCP, WebMCP or CLI, with headless design available through the pen.dev CLI. Pen.dev also imports .fig files and webpages as editable layers and exports any frame as HTML and CSS/Tailwind in one click.

Buttery smooth performance Thousands of layers stay smooth as you pan, zoom, and edit powered by a custom WebGL pipeline. Import any part of any app onto the canvas. Claude Open AI Grok Qwen Gemini Kimi Deepseek Minimax Use with ChatGPT or Claude subscription, add API keys or connect via MCP, WebMCP or CLI. Design with agents directly on the canvas. Refine manually or fire up agents. Open any page inside the app and import it straight onto the canvas. Vibe Shaders. Create stunning visual effects with shaders. Vibe Shaders. Create stunning visual effects with shaders. Visual effects powered by real-time shaders gradients and textures at your fingertips. Draw paths, edit curves, and paste SVG code straight into your designs with ease. AI Pen. Draw icons and illustrations with agents. AI Pen. Draw icons and illustrations with agents. Share component sets across files and keep every project in sync. The shortcuts you know from Figma and Sketch work the same way here. Design via MCP in addition to the on-canvas agent. Connect Claude Code, Codex, Hermes, Antigravity, Cursor or any agent to pen.dev through MCP. You can also design headlessly with pen.dev CLI. Edit linear, radial, angular and mesh gradients right on the canvas. Elevate your work with built-in industry standard design skills. Directly export any frame as HTML and CSS/Tailwind in 1-click. Send a link and anyone can open the latest version in their browser. Feel like at home. Import .fig files with layouts, styles and images. Or just copy/paste from Figma directly. Copy any webpage in Chrome. Paste to the canvas as editable layers. Import any webpage as editable layers via built-in browser. Create reusable symbols with overrides and combine them in complex layouts. Edit linear, radial, angular and mesh gradients right on the canvas. Name your colors, spacing and type once and reuse them everywhere. Share component sets across files and keep every project in sync. Reserve space inside a component for content each instance fills in. Resize a group, its text, strokes, radii and effects all scale along with it. Hover to read exact distances between any two layers on the canvas. Fill container, hug content, position absolutely, align to edges. Background blur, drop shadow and layer blur, stacked in any order. Export any frame as PDF, PNG, JPEG or WEBP at the exact size you need. Layers snap to edges, centers and equal spacing while you drag them. Design your icons and logos precisely. Snap to pixels and half-pixels when drawing. Reorder, hide, group, rename, and select any layer with full control. Build great looking slidedecks, organize them in Slides view, and present like a pro. It's just a JSON file that allows agents to work with it natively. Schema fully opened. See docs. Design with agents, refine every detail on canvas,and ship it back to code.