Beschreibung
pen.dev ist eine agentische Design-Leinwand von High Agency Inc., dem Hersteller, der zuvor als Pencil (pencil.dev) bekannt war. Das Produkt beschreibt sich jetzt als für die Erstellung von Software konzipiert, nicht nur für statische Bildschirme: Designer und Entwickler arbeiten auf einer offenen Leinwand, auf der KI-Agenten neben ihnen gestalten, bestehende Arbeiten verfeinern oder neue Bildschirme aus einem Prompt erstellen können.
Weiterlesen
Die Leinwand speichert Designs in einem offenen Dateiformat namens .pen, einer einfachen JSON-Datei, die sowohl von Menschen als auch von Agenten gelesen und bearbeitet werden kann und im selben Code-Repository wie das Produkt gespeichert ist, das sie beschreibt. Die Arbeit erfolgt entweder manuell, unter Verwendung von Werkzeugen, die aus Figma und Sketch bekannt sind, wie dem Stiftwerkzeug, Verläufen, Komponenten und Flex-Layout, oder indem man einen Agenten anweist, einen Bildschirm zu entwerfen, zu verfeinern oder zu erweitern. Ein integrierter Browser und eine Chrome-Erweiterung ermöglichen es den Benutzern, jede Webseite, App oder jedes Design direkt auf die Leinwand als bearbeitbare Ebenen zu importieren, und Figma-Dateien, einschließlich Vektoren, Text und Stilen, werden direkt importiert.
Benutzer bringen ihr eigenes Modell zur Leinwand: pen.dev funktioniert mit Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek und Minimax, verbunden über ein bestehendes ChatGPT- oder Claude-Abonnement, einen API-Schlüssel oder MCP, WebMCP oder die Befehlszeile. Der gleiche MCP-Link ermöglicht es Tools wie Claude Code, Codex, Cursor oder Antigravity, kopflos über die CLI von pen.dev zu gestalten, ohne die Leinwand überhaupt zu öffnen.
Weitere Funktionen der Leinwand umfassen Echtzeit-Shader-Effekte namens Vibe Shaders, KI-unterstütztes Zeichnen von Symbolen und Illustrationen namens AI Pen, gemeinsame Komponentenbibliotheken über Dateien hinweg und eine benutzerdefinierte WebGL-Rendering-Pipeline, die dafür ausgelegt ist, bei Tausenden von Ebenen oder Dutzenden von Gigabyte an Inhalten flüssig zu bleiben. Fertige Arbeiten können als PNG, JPEG, WEBP oder PDF in beliebiger Größe exportiert werden, als HTML und CSS oder Tailwind mit einem Klick oder als teilbarer Link, der die neueste Version in jedem Browser öffnet. Ein Präsentationsmodus ist integriert, um die Arbeiten auf der Leinwand in ein Deck zu verwandeln.
pen.dev ist derzeit kostenlos; das Unternehmen sagt, dass es jeden kostenpflichtigen Plan klar beschreiben wird, bevor Gebühren erhoben werden. Es wird als herunterladbare Desktop-App sowie als Browser- und Editor-Erweiterungen für Chrome, VS Code, Cursor und OpenVSX angeboten und wird von a16z's Speedrun-Programm unterstützt. Es eignet sich für Produktdesigner und kleine Softwareteams, die zwischen visuellem Design und funktionierendem Code wechseln möchten, ohne die Werkzeuge zu wechseln, mehr als für Teams, die nach einem reinen Grafikdesign-Produkt suchen.
- KategorieKI-Tools für UI- & UX-Design
- PreismodellFreemium
- BereitstellungDesktop, IDE-Erweiterung, CLI
- PlattformenmacOS, Windows, Linux
pen.dev's Kernfunktionen
Offenes .pen-Dateiformat, das Agenten nativ lesen und bearbeiten können
Bring-your-own-model-Unterstützung für Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek und Minimax
MCP-, WebMCP- und CLI-Verbindungen für kopfloses Design von Claude Code, Cursor oder Codex
Integrierter Browser und Chrome-Erweiterung zum Importieren jeder Webseite als bearbeitbare Ebenen
Figma-Import, der Vektoren, Text und Stile beibehält
Benutzerdefinierte WebGL-Leinwand, die bei Tausenden von Ebenen flüssig bleibt
Vibe Shaders für Echtzeit-Visuelleffekte und Verläufe
AI Pen zum Generieren von Symbolen und Illustrationen mit Agenten
Ein-Klick-Export nach HTML/CSS/Tailwind oder PNG/JPEG/WEBP/PDF
Präsentationsmodus zum Umwandeln von Arbeiten auf der Leinwand in ein Deck
Wie verwendet man pen.dev?
Herunterladen: Holen Sie sich die pen.dev-Desktop-App oder fügen Sie die Chrome-, Cursor- oder VS Code-Erweiterung hinzu.
Leinwand starten: Öffnen Sie eine leere Leinwand oder importieren Sie ein Design aus Figma, einer Webseite oder Ihrem eigenen Code-Repository.
Modell verbinden: Melden Sie sich mit einem Claude- oder ChatGPT-Abonnement an, fügen Sie einen API-Schlüssel hinzu oder verlinken Sie einen Agenten über MCP.
Gestalten oder anfordern: Zeichnen Sie manuell mit dem Stiftwerkzeug und Komponenten oder bitten Sie einen Agenten, einen Bildschirm zu erstellen oder zu verfeinern.
Effekte hinzufügen: Wenden Sie Shader, Verläufe und KI-gezeichnete Symbole dort an, wo es nötig ist.
Exportieren oder teilen: Exportieren Sie nach HTML/CSS, Bildformaten oder PDF oder senden Sie einen Link zur neuesten Version.
pen.dev's Anwendungsfälle
- Agentisches UI-Design
- Design-zu-Code Übergabe
- Webseiten-Klonen
- Kopfloses Design über MCP
