Design ohne Lock‑in.

Öffne, was du schon hast

OpenPencil liest .fig-Dateien direkt: Seiten, Komponenten, Instanzen, Variablen und Auto-Layout kommen als bearbeitbare Ebenen an, und du kannst wieder als .fig speichern. Füge SVG ein oder öffne HTML und CSS, und auch daraus werden Ebenen, angeordnet wie im Browser.

Das ist die Tour der App selbst, eine echte .fig-Datei. Öffne ein Kapitel in den Ebenen und klick dich durch.

Gestalten mit echten Werkzeugen

Auto-Layout, Constraints, Füllungen, Konturen, Effekte und Typografie, mit den Reglern dort, wo du sie erwartest. Komponenten haben Slots: Eine Instanz behält das Design und bringt ihren eigenen Inhalt mit. Alles lässt sich rückgängig machen, und nichts wartet auf einen Server.

Fahre über das ausgewählte Cover und zieh an einer Ecke, um sie abzurunden. Die anderen Player bringen ihr eigenes Cover über den Artwork-Slot mit.

Komponenten, die funktionieren

Gib einer Komponente ein Verhalten, etwa Schalter, Checkbox, Schieberegler, Tabs oder Textfeld, und die Vorschau führt sie als echtes Reka-UI-Steuerelement aus. Varianten werden zu ihren Zuständen, und dieselben Komponenten lassen sich mit klickbaren Steuerelementen nach Storybook exportieren.

Diese Leinwand ist in der Vorschau: Drück auf Play, zieh den Fortschrittsbalken, schalte Zufallswiedergabe um. Verlasse die Vorschau zum Bearbeiten.

Variablen sind Design-Tokens

Farben, Abstände und Schrift liegen in Sammlungen mit Modi und werden als Tokens bearbeitet. Exportierter Code schreibt gebundene Werte als CSS-Custom-Properties, sodass der Code dieselben Namen verwendet wie das Design.

Jeder Player liest die Theme-Sammlung in seinem eigenen Modus. Ändere den Wert eines Tokens, und beide folgen.

Füllungen, die sich bewegen

Ein Shader ist eine Füllung wie jede andere: Wähle ihn in der Füllungsauswahl, stapel Effekte, stell ihre Regler ein oder füge ein Preset von shaders.com ein. Dateien behalten ein Standbild davon, damit sie überall öffnen, und die Vorschau spielt ihn ab.

Diese Leinwand ist in der Vorschau, deshalb bewegen sich die Shader. Verlasse die Vorschau, wähle ein Quadrat und öffne seine Füllung.

Linting

OpenPencil prüft das Design, während du arbeitest: Kontrast, zu kleine Schrift, Standardnamen, versteckte und leere Ebenen, überflüssige Gruppen. Probleme werden auf der Arbeitsfläche markiert, viele lassen sich mit einem Klick beheben, und dieselben Regeln laufen in der CLI und für Agenten.

Klicke auf eine Markierung auf der Arbeitsfläche oder wende eine Korrektur aus der Liste an.

Gestalten mit KI, mit deinen Schlüsseln

Beschreibe in normaler Sprache, was du willst: Der Agent bearbeitet das Dokument mit denselben Werkzeugen wie du und zeigt seine Arbeit schon während des Streamings auf der Arbeitsfläche. Verbinde einen beliebigen Anbieter mit deinem eigenen Schlüssel oder nutze den Coding-Agenten, den du ohnehin verwendest.

Ein aufgezeichneter Durchgang läuft durch die echte Agentenschleife. Sieh zu, wie die Arbeitsfläche beim Streamen entsteht.

Funktioniert mit

• Claude Code
• Cursor
• Windsurf
• Codex
• Gemini CLI
• und jedem MCP-Client

Gemeinsam arbeiten, mit Menschen und Agenten

Teile einen Link, und alle bearbeiten dasselbe Dokument, Peer-to-Peer, mit Live-Cursorn, Folgemodus, an Ebenen gehefteten Kommentaren und Sprachanrufen. KI-Agenten kommen genauso dazu: Alle im Raum sehen zu, wie sie bauen, während sie streamen.

Beide Bildschirme gehören dir. Zieh auf einem eine Ebene und sieh zu, wie sie sich auf dem anderen bewegt; dann frag den Agenten.

Vom Design zum Code

Jede Auswahl ist eine Vue- oder React-Komponente mit Varianten als Props und Reka UI oder Radix hinter den interaktiven, oder HTML, Tailwind und Design-JSX mit Variablen als Tokens. Komponenten werden als Storybook-Stories exportiert, und Design-JSX bleibt mit der Leinwand verbunden: Bearbeite es, und die Leinwand folgt.

Wechsle zu React, HTML oder Design-JSX oder wähle eine andere Ebene.

Alles per Skript

Die openpencil-CLI arbeitet mit einer Datei, ohne dass die App läuft, oder steuert die geöffnete App. Untersuche ein Dokument, frage es mit XPath ab, prüfe es mit dem Linter, exportiere es oder führe mit eval Figma-Plugin-Code darauf aus. Der MCP-Server gibt Agenten dieselben Möglichkeiten über stdio oder HTTP.

Führe einen Befehl aus und beobachte die Arbeitsfläche.

24 Befehle

• analyze
• convert
• diff
• documents
• eval
• export
• find
• fonts
• formats
• import
• info
• libraries
• lint
• node
• pages
• query
• redo
• selection
• settings
• tokens
• tool
• tree
• undo
• variables

122 MCP-Tools

Erstellen, gestalten, anordnen, untersuchen und exportieren. Jedes davon steht auch dem integrierten Agenten zur Verfügung.

Bau es in dein eigenes Produkt ein

OpenPencil ist ebenso Werkzeugkasten wie App: eine Framework-unabhängige Engine, ein Headless-Vue-SDK und eigene Pakete für Szenengraph und Dateiformate. Bette eine Arbeitsfläche in dein Produkt ein, rendere und prüfe Designs in der CI oder baue einen anderen Editor auf derselben Engine. Jede Arbeitsfläche auf dieser Seite ist dieses SDK, eingebettet in eine Dokumentationsseite.

Der Code neben der Arbeitsfläche ist alles, was man zum Einbinden braucht.

Deine Dateien bleiben deine

Lokal zuerst

Dokumente sind Dateien auf deiner Festplatte. Kein Konto, kein Server, kein Internet nötig.

Dein Speicher

Synchronisiere bei Bedarf über deinen eigenen S3-kompatiblen Bucket.

Offene Formate

Export nach .fig, PDF, PPTX, SVG, HTML und JSX. Ein Wechsel ist jederzeit möglich.

MIT-lizenziert

Der Editor, die Rendering-Engine, der .fig-Codec und die CLI.

OpenPencil Cloud

Der Design-Arbeitsbereich deines Teams, für dich gehostet. Alle bearbeiten dieselben Dateien live, teilen sie per Link und gestalten mit KI, ohne etwas zu installieren oder zu betreiben. Deine Dateien bleiben offen: Exportiere sie jederzeit als .fig.

OpenPencil Cloud wird in $OPENPENCIL bezahlt — Seats, Live-Sync, geteilte Bibliotheken und KI laufen über ein Token-Guthaben. Der Checkout öffnet mit der Contract-Adresse im $OPENPENCIL-Band.

Team-Synchronisierung in Echtzeit

Jede Änderung erreicht sofort alle im Team, auf jedem Gerät.

Freigabelinks und Kommentare

Schick einen Link zur Durchsicht und diskutiert direkt auf der Leinwand.

Team-Bibliotheken

Komponenten, Stile und Tokens einmal veröffentlichen und in jeder Datei nutzen.

Gehostete KI

Agenten, die mit dir gestalten, ohne API-Schlüssel zu verwalten.

SSO und Admin-Steuerung

Single Sign-on, Rollen und Kontrolle darüber, wer was sieht.

Roadmap

1. Erschienen

   • Interaktive Komponenten und Vorschau

   • Variablen als Design-Tokens

   • Linting mit Korrekturen per Klick

   • KI-Agenten als Mitwirkende, mit Folgemodus

   • KI-Schritte zurücknehmen, neu erzeugen und bearbeiten

   • Code mit Ebenen verknüpft

   • Visueller Diff und Patch

   • Kommentare und Sprachanrufe in geteilten Räumen

   • Vue- und React-Komponenten im Code-Tab

   • SVG- und HTML-Import als bearbeitbare Ebenen

   • Shader-Füllungen

   • W3C-Design-Tokens

   • Eine geführte Tour durch den Editor

   • Listen und Stile für beliebige Textbereiche

2. Jetzt

   • Storybook aus echten Komponenten

     Stories mit Reka UI für Vue und Radix UI für React.

   • Komponenten erstellen

     Schnelleres Bearbeiten von Varianten und Auswahl innerhalb von Komponenten.

3. Als Nächstes

   • OpenPencil selbst hosten

     Der gesamte Workspace in deinem eigenen Netzwerk: Synchronisierung, Freigabe, Kommentare und Team-Bibliotheken, ohne eine Datei an jemand anderen zu senden.

     Dein Speicher

     Dokumente bleiben in deinem Bucket, in deiner Region.

     Deine Identität

     Anmeldung über deinen OIDC- oder SSO-Anbieter, mit Rollen.

     Dein Netzwerk

     Ein Kollaborations-Relay, das hinter deiner Firewall funktioniert.

     Dein Betrieb

     Geführte Bereitstellung, Upgrades, Backups und Aufbewahrung.

   • OpenPencil Cloud

     Der gehostete Arbeitsbereich für Teams: Live-Synchronisierung, Freigabe, Bibliotheken und KI, ohne eigenen Betrieb.

     OpenPencil Cloud wird in $OPENPENCIL bezahlt — Seats, Live-Sync, geteilte Bibliotheken und KI laufen über ein Token-Guthaben. Der Checkout öffnet mit der Contract-Adresse im $OPENPENCIL-Band.

   • Versionsverlauf

     Automatische Snapshots, benannte Checkpoints und Wiederherstellung.

4. Später

   • Verwaltete Design-Systeme

     Vorschlagen, prüfen, veröffentlichen und migrieren.

   • Einbettbarer Editor

     Bring den Editor von dieser Seite in dein eigenes Produkt.

Der $OPENPENCIL-Token

OpenPencil ist Open Source — das Netzwerk dahinter ist es nicht. KI-Turns, Cloud-Renderings und die Plugin-Registry laufen auf bezahlten Schienen, und $OPENPENCIL ist die einzige Währung, in der sie bezahlt werden. Start auf Solana.

KI-Turns und Cloud-Renderings

Jeder abgerechnete Job in OpenPencil Cloud — KI-Turns, Headless-Renderings, Exporte — wird in $OPENPENCIL bepreist und bezahlt. Kein Fiat-Checkout, keine Seat-Lizenzen.

Plugin- und Template-Markt

Plugins, Icon-Sets und Dokumentvorlagen werden in $OPENPENCIL abgerechnet: Käufer zahlen den Token, Autorinnen und Autoren werden damit on-chain bezahlt.

Staking für gouvernierte Bibliotheken

Stake $OPENPENCIL, um gouvernierte Design-Systeme freizuschalten: Review- und Publish-Flows, Audit-Trails, geteilte Team-Bibliotheken.

Netzwerkgebühren kaufen zurück

Alle Gebühren des Netzwerks fließen in einen On-Chain-Buyback von $OPENPENCIL — die Nutzung des Editors zeigt auf den Token, der sie bezahlt.

Solana · SPL-Token. Start in Kürze — das ist kein Angebot und kein Wertpapier; $OPENPENCIL bezahlt die Nutzung des Netzwerks. Die Contract-Adresse erscheint am Launch-Tag im Band oben.

Nimm deine Designs mit.