{"slug": "pen-dev", "title": "Pen.dev", "summary": "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.", "body_md": "### Buttery smooth performance\n\nThousands of layers stay smooth as you pan, zoom, and edit powered by a custom WebGL pipeline.\n\nImport any part of any app onto \n\nthe canvas.\n\nClaude\n\nOpen AI\n\nGrok\n\nQwen\n\nGemini\n\nKimi\n\nDeepseek\n\nMinimax\n\nUse with ChatGPT or Claude subscription,\n\n add API keys or connect via MCP, WebMCP or CLI.\n\nDesign with agents directly on the canvas. Refine manually or fire up agents.\n\nOpen any page inside the app and import it straight onto the canvas.\n\nVibe Shaders. Create stunning visual effects with shaders.\n\nVibe Shaders.\n\nCreate stunning visual effects with shaders.\n\nVisual effects powered by real-time shaders gradients and textures at your fingertips.\n\nDraw paths, edit curves, and paste SVG code straight into your designs with ease.\n\nAI Pen. Draw icons and illustrations with agents.\n\nAI Pen.\n\nDraw icons and illustrations with agents.\n\nShare component sets across files and keep every project in sync.\n\nThe shortcuts you know from Figma and Sketch work the same way here.\n\nDesign via MCP in addition to the on-canvas agent. Connect Claude Code, Codex, Hermes, Antigravity, Cursor or any agent to pen.dev through MCP.\n\nYou can also design headlessly with pen.dev CLI.\n\nEdit linear, radial, angular and mesh gradients right on the canvas.\n\nElevate your work with built-in industry standard design skills.\n\nDirectly export any frame as HTML\n\nand CSS/Tailwind in 1-click.\n\nSend a link and anyone can open the latest version in their browser.\n\nFeel like at home.\n\nImport .fig files with layouts, styles and images.\n\nOr just copy/paste from Figma directly.\n\nCopy any webpage in Chrome.\n\nPaste to the canvas as editable layers.\n\nImport any webpage as editable layers\n\nvia built-in browser.\n\nCreate reusable symbols with overrides\n\nand combine them in complex layouts.\n\nEdit linear, radial, angular and mesh gradients\n\nright on the canvas.\n\nName your colors, spacing and type once\n\nand reuse them everywhere.\n\nShare component sets across files and keep\n\nevery project in sync.\n\nReserve space inside a component for content\n\neach instance fills in.\n\nResize a group, its text, strokes, radii and effects\n\nall scale along with it.\n\nHover to read exact distances between any two layers on the canvas.\n\nFill container, hug content, position absolutely,\n\nalign to edges.\n\nBackground blur, drop shadow and layer blur, stacked in any order.\n\nExport any frame as PDF, PNG, JPEG or WEBP\n\nat the exact size you need.\n\nLayers snap to edges, centers and equal spacing while you drag them.\n\nDesign your icons and logos precisely. Snap\n\nto pixels and half-pixels when drawing.\n\nReorder, hide, group, rename, and select any layer with full control.\n\nBuild great looking slidedecks, organize them\n\nin Slides view, and present like a pro.\n\nIt's just a JSON file that allows agents to work with\n\nit natively. Schema fully opened. See docs.\n\nDesign with agents, refine every detail on canvas,and ship it back to code.", "url": "https://wpnews.pro/news/pen-dev", "canonical_source": "https://www.pen.dev/", "published_at": "2026-09-17 14:08:30+00:00", "updated_at": "2026-09-17 14:26:52.287630+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "agent-protocols", "ai-products", "developer-tools"], "entities": ["Pen.dev", "ChatGPT", "Claude", "Grok", "Qwen", "Gemini", "Kimi", "Deepseek"], "alternates": {"html": "https://wpnews.pro/news/pen-dev", "markdown": "https://wpnews.pro/news/pen-dev.md", "text": "https://wpnews.pro/news/pen-dev.txt", "jsonld": "https://wpnews.pro/news/pen-dev.jsonld"}}