AI Tool Atlas

CodingDokumentierter ÜberblickZuletzt geprüft Sep 29, 2026

pen.dev (formerly pencil.dev): Preise, Funktionen & beste Einsatzzwecke

Agentic design canvas where AI agents and manual tools build interfaces; desktop app, IDE extensions and CLI.

pen.dev (formerly pencil.dev) Startseite, Screenshot, KI-Tool coding

Unsere Einschätzung: pen.dev (formerly pencil.dev) suits developers who design and teams using AI coding agents who want a WebGL design canvas with Figma and HTML import, MCP and CLI control, and HTML/Tailwind export, currently free.

Wichtigste Einschränkung: The vendor says paid plans may be introduced later, and AI features need your own model subscription or API key.

Von den Redakteuren des AI Tool Atlas. Auf Basis der offiziellen Dokumentation des Anbieters; wir haben dieses Produkt nicht selbst getestet. Was „dokumentierte Übersicht“ bedeutet

Für wen pen.dev (formerly pencil.dev) passt

pen.dev (formerly pencil.dev) suits developers who design and teams using AI coding agents who want a WebGL design canvas with Figma and HTML import, MCP and CLI control, and HTML/Tailwind export, currently free. Auf Basis der Dokumentation des Anbieters, nicht in einem praktischen Test.

Am besten für: Developers who design

Auch gut geeignet für

  • Teams using AI coding agents

Ein anderes Tool in Betracht ziehen, wenn pricing may change in the future

Oder wenn

  • Windows ARM64 build marked coming soon
  • Requires own model subscription or API key for AI

pen.dev (formerly pencil.dev) Preise und Nutzungslimits

Preise am Sep 29, 2026 auf der offiziellen US-Preisseite geprüft. Offizielle Preise ↗ Preise und Limits ändern sich häufig.

pen.dev (formerly pencil.dev) Preisseite mit Tarifen und Preisen – Screenshot des KI-Tools coding, Oct 1, 2026
Die offizielle pen.dev (formerly pencil.dev)-Preisseite, wie wir sie gesehen haben. pen.dev, erfasst Oct 1, 2026

Kostenloser Zugang und Testbedingungen

pen.dev is currently free.

No trial; free currently.

Kostenpflichtige Tarife: was sich beim Upgrade ändert

Current free access desktop

Kostenlos Quelle (öffnet in neuem Tab)

Unbekannt

Site says paid features or plans may be introduced later with terms described beforehand

Für: Developers who design and agent-assisted teams

Limits

  • Bring your own model subscription or API key
  • Windows ARM64 build coming soon

Enthält

  • Agent design on canvas
  • Figma and HTML import
2 mehr
  • MCP, WebMCP and CLI
  • HTML/Tailwind export

API inklusive

Nutzungsobergrenzen, Guthaben und Zusatzkosten

Your own ChatGPT or Claude subscription or API keys for AI; image generation features route through third-party providers.

Not stated.

Was ist pen.dev (formerly pencil.dev) und wie funktioniert es?

pen.dev, formerly pencil.dev, is an agentic canvas for designing websites, mobile apps and social graphics. Users can design manually or with AI agents directly on the canvas, and import web pages, HTML or Figma content. It works with models via a ChatGPT or Claude subscription, API keys, or MCP, WebMCP and a CLI, and offers extensions for Cursor, VS Code, Windsurf and Antigravity.

pen.dev (formerly pencil.dev) Startseite – Screenshot des KI-Tools coding, Oct 1, 2026
Offizielle Website von pen.dev (formerly pencil.dev): So stellt sich das Produkt selbst dar. pen.dev, erfasst Oct 1, 2026

Was Sie liefern und was Sie erhalten

Wie pen.dev (formerly pencil.dev) funktioniert: was Sie liefern, wo es läuft und was Sie zurückbekommenSIE LIEFERNIhre EingabePrompts to on-canvas or MCP-conne…Web pages and HTML via built-in b…Figma .fig files or pasted Figma…Manual drawing with pen tool and…CODINGpen.dev (formerly pencil.dev)Desktopkostenloser Tarif, Preis des beza…kostenloser Tarif verfügbarKonto erforderlichgeprüft Sep 29, 2026SIE ERHALTEN ZURÜCKDas ErgebnisDesigns in the open .pen JSON for…HTML with CSS/TailwindPDF, PNG, JPEG, WEBP exportsShareable links and slide decksinput → pen.dev (formerly pencil.dev) → output · von den eigenen Seiten des Anbieters, kein praktischer Test, sofern nicht angegeben
Was Sie pen.dev (formerly pencil.dev) geben und was zurückkommt, laut Dokumentation

Sie liefern

  • Prompts to on-canvas or MCP-connected agents
  • Web pages and HTML via built-in browser or Chrome extension
  • Figma .fig files or pasted Figma content
  • Manual drawing with pen tool and layers

Sie erhalten zurück

  • Designs in the open .pen JSON format
  • HTML with CSS/Tailwind
  • PDF, PNG, JPEG, WEBP exports
  • Shareable links and slide decks

Wo Sie es nutzen können

Plattformen
Desktop
Konto
Erforderlich
Platforms
macOS, Windows x64, Linux (ARM64 Windows soon)
Import
Figma .fig, HTML, web pages, Chrome extension
Export
PDF, PNG, JPEG, WEBP, HTML/CSS/Tailwind
Agent access
MCP, WebMCP, CLI
File format
.pen JSON

Wofür pen.dev (formerly pencil.dev) genutzt wird

Die Szenarien erarbeiten unsere Redakteure anhand der Dokumentation; das tatsächliche Ergebnis hängt von Ihrer Eingabe und Ihrem Tarif ab.

Designing websites and apps

Wer
Developers who design
Sie liefern
Prompt or manual layout on the canvas
Erwartetes Ergebnis
Website, mobile app or social graphic designs with components and variables
Benötigter Tarif
Free
Einschränkung
AI needs your own model access Quelle (öffnet in neuem Tab)

Importing existing pages onto a canvas

Wer
Designers reworking live sites
Sie liefern
Web page via built-in browser or Chrome extension, or a Figma file
Erwartetes Ergebnis
Editable layers instead of screenshots
Benötigter Tarif
Free
Einschränkung
Web-app import loads the page through vendor servers Quelle (öffnet in neuem Tab)

Agent-driven design in the terminal

Wer
Teams using Claude Code, Codex or Cursor
Sie liefern
MCP connection or pen.dev CLI commands
Erwartetes Ergebnis
Headless design edits by coding agents
Benötigter Tarif
Free
Einschränkung
Needs an MCP-capable agent Quelle (öffnet in neuem Tab)

Exporting designs back to code

Wer
Front-end developers
Sie liefern
A finished frame
Erwartetes Ergebnis
HTML and CSS/Tailwind in one click
Benötigter Tarif
Free
Einschränkung
Generated code still needs review Quelle (öffnet in neuem Tab)

Wichtige Funktionen und ihre praktischen Grenzen

pen.dev (formerly pencil.dev) Startseite – Screenshot des KI-Tools coding, Oct 1, 2026
Funktionsüberblick auf der offiziellen Website. pen.dev, erfasst Oct 1, 2026

Agent design on canvas

Lets AI agents draw and edit layers directly on the canvas with models from Claude, OpenAI, Gemini and others. Faster first drafts.

Zugriff: FreeLimit: Requires your own subscription or API key Quelle (öffnet in neuem Tab)

WebGL canvas

Renders thousands of layers with a custom WebGL pipeline. Smooth pan, zoom and edit on large files.

Zugriff: FreeLimit: Performance claims (10,000 photos at 60fps) are vendor figures Quelle (öffnet in neuem Tab)

HTML and Figma import

Brings web pages, HTML and .fig files onto the canvas as editable layers. Never start from scratch.

Zugriff: FreeLimit: Fidelity of complex imports is not documented Quelle (öffnet in neuem Tab)

Components, variables and slots

Provides reusable components with overrides, named variables and content slots. Build design systems.

Zugriff: FreeLimit: UI libraries sync across files only within your setup Quelle (öffnet in neuem Tab)

Open .pen format with MCP and CLI

Stores designs as JSON agents can read and exposes control through MCP, WebMCP and CLI. Design as code.

Zugriff: FreeLimit: Schema and tools are described in docs only Quelle (öffnet in neuem Tab)

pen.dev (formerly pencil.dev): Stärken und Grenzen

Wo pen.dev (formerly pencil.dev) stark ist

Einschränkungen, die Sie vor dem Bezahlen prüfen sollten

So nutzen Sie pen.dev (formerly pencil.dev) für designing a landing page with an AI agent

pen.dev (formerly pencil.dev) Dokumentation – Screenshot des KI-Tools coding, Oct 1, 2026
pen.dev (formerly pencil.dev) Dokumentation: Quellen der folgenden Schritte. docs.pen.dev, erfasst Oct 1, 2026

pen.dev (formerly pencil.dev) einrichten

  1. Download pen.dev for macOS, Windows x64 or Linux from the downloads page.
  2. Sign in with your account.
  3. Connect a model through your ChatGPT or Claude subscription, an API key, or MCP.
  4. Create a new .pen file and choose the Website template or a blank canvas.

Beispiel: designing a landing page with an AI agent

  1. Ask the on-canvas agent to draft a hero section for your product.
  2. Import your current homepage through the built-in browser to reuse its layers.
  3. Refine spacing with flex layout and variables.
  4. Export the frame as HTML with Tailwind.

Ergebnis prüfen und exportieren

  1. Open the exported HTML in a browser and compare it with the canvas.
  2. Share a link and confirm it opens the latest version.
Von unserer Redaktion vorgeschlagener Beispiel-Prompt (keine aufgezeichnete Ausgabe des Produkts)
Design a landing page hero for a budgeting app with a headline, subhead, two buttons and a phone mockup, using a dark blue palette.

pen.dev (formerly pencil.dev) Integrationen und API

pen.dev (formerly pencil.dev) Dokumentation – Screenshot des KI-Tools coding, Oct 1, 2026
pen.dev (formerly pencil.dev) Dokumentation (Fortsetzung). docs.pen.dev, erfasst Oct 1, 2026

Native Integrationen und Exportformate

Export: HTML, CSS/Tailwind, PDF, PNG, JPEG, WEBP, .pen JSON

API-Zugang und separate Abrechnung

pen.dev (formerly pencil.dev) hat laut offizieller Dokumentation keine öffentliche API. CLI and MCP; no REST API listed API-Dokumentation ↗

Datenschutz, Datennutzung und kommerzielle Rechte

Zusammengefasst aus den aktuellen Richtlinien des Anbieters; dies ist keine Rechtsberatung, und das Badge eines Anbieters ersetzt kein unabhängiges Audit.

Wie Ihre Eingaben und Ausgaben verarbeitet werden

Text AI features with your own provider keys go directly from your device to the provider; image/SVG features pass through vendor servers to providers.

pen.dev Pro model content is not stored or used to train AI models.

Web-page imports are processed in real time and not stored on servers.

Steuerungsmöglichkeiten für Geschäftskunden

  • Organization and workspace roles

Richtlinien: pen.dev/privacy-policy

Die besten pen.dev (formerly pencil.dev)-Alternativen für unterschiedliche Anforderungen

„Besser geeignet“ beruht auf dokumentierten Funktionen und Preisen, nicht auf einem direkten Test.

Cursor: besser geeignet für

Lovable: besser geeignet für

Canva: besser geeignet für

Alternativen
AlternativeWann Sie es wählen solltenPreiseEinschränkung
Cursor——Vergleichen
Lovable——Vergleichen
Canva——

pen.dev (formerly pencil.dev) weiter erkunden

Die besten pen.dev (formerly pencil.dev)-AlternativenTools für dieselbe Aufgabe, nach Bedarf und Einstiegspreis.Best AI coding toolsUnsere Auswahl in dieser Kategorie, verglichen nach Preis und kostenlosen Stufen.Prompts für pen.dev (formerly pencil.dev)Kopierfertige Prompts mit Quellenangabe.

Verwandt mit pen.dev (formerly pencil.dev)

pen.dev (formerly pencil.dev) Nutzerbewertungen

Noch keine Nutzerbewertungen.

Verwendet pen.dev (formerly pencil.dev)? Teilen Sie als Erste oder Erster Ihre Erfahrung.

Bewertung schreiben

Bewertungen werden von einem Moderator geprüft, bevor sie erscheinen. Ihre E-Mail-Adresse wird nie veröffentlicht. Nur Klartext.

Ihre Bewertung (erforderlich)

Zeigen Sie, was Sie erstellt haben oder was schiefgelaufen ist. Bilder werden nur veröffentlicht, wenn die Bewertung freigegeben wird; Standortdaten werden entfernt.

    pen.dev (formerly pencil.dev) FAQ

    Is pen.dev free?

    Yes, pen.dev is currently free, though the vendor says it may introduce paid features or plans later and will describe terms before charging. Quelle (öffnet in neuem Tab)

    Which AI models does pen.dev support?

    You can bring Claude, OpenAI, Grok, Qwen, Gemini, Kimi, Deepseek, Minimax and others via a ChatGPT or Claude subscription, API keys, or MCP. Quelle (öffnet in neuem Tab)

    Can pen.dev import from Figma?

    Yes, it imports .fig files with layouts, styles and images, or you can copy and paste from Figma directly. Quelle (öffnet in neuem Tab)

    Which IDEs does pen.dev integrate with?

    Extensions are offered for Cursor, VS Code, Windsurf and Antigravity, and agents like Claude Code and Codex connect over MCP. Quelle (öffnet in neuem Tab)

    What format does pen.dev save designs in?

    The open .pen format, a JSON file with an open schema that agents can read natively. Quelle (öffnet in neuem Tab)

    Quellen und Bewertungsmethodik

    Offizielle Quellen und Prüfdaten

    Nicht verifiziert: Future pricing; US availability; Retention of account data.

    Wie wir diese Seite dokumentiert haben und pflegen

    Jede Angabe zu pen.dev (formerly pencil.dev) oben stammt aus den 6 hier aufgeführten offiziellen Seiten, zuletzt verglichen am Sep 29, 2026; wir haben pen.dev (formerly pencil.dev) nicht selbst getestet, daher gibt es keine redaktionelle Bewertung. Wie wir Seiten prüfen und erneut prüfen.

    Artikel aktualisiert Oct 10, 2026; Preise geprüft Sep 29, 2026. Ausgehende Links zu Anbietern sind einfache Links; wir erhalten keine Provisionen. So testen wir · Fehler melden