Design senza lock‑in.
Un editor di design open source che apre i tuoi file Figma, gira sul tuo computer e lascia a te o al tuo agente AI il controllo di ogni livello.
Apri quello che hai già
OpenPencil legge direttamente i file .fig: pagine, componenti, istanze, variabili e auto layout arrivano come livelli modificabili, e puoi salvare di nuovo in .fig. Incolla SVG o apri HTML e CSS, e diventano livelli anche loro, disposti come li dispone un browser.
Questo è il tour dell’app stessa, un vero file .fig. Apri un capitolo nei livelli ed esplora.
Progetta con strumenti veri
Auto layout, vincoli, riempimenti, tratti, effetti e tipografia, con i controlli dove te li aspetti. I componenti hanno slot: un’istanza mantiene il design e porta il proprio contenuto. Tutto si può annullare, e niente aspetta un server.
Passa sopra la copertina selezionata e trascina un angolo per arrotondarlo. Gli altri lettori portano la propria copertina tramite lo slot Artwork.
Componenti che funzionano
Dai a un componente un comportamento, come un interruttore, una casella, uno slider, delle schede o un campo di testo, e l’anteprima lo esegue come un vero controllo Reka UI. Le varianti diventano i suoi stati, e gli stessi componenti si esportano in Storybook con controlli cliccabili.
Questa tela è in anteprima: premi play, trascina la barra di avanzamento, attiva la riproduzione casuale. Esci dall’anteprima per modificare.
Le variabili sono design token
Colori, spaziature e tipografia stanno in raccolte con modalità e si modificano come token. Il codice esportato scrive i valori collegati come proprietà personalizzate CSS, così il codice usa gli stessi nomi del design.
Ogni lettore legge la collezione Theme nella propria modalità. Cambia il valore di un token ed entrambi lo seguono.
Riempimenti che si muovono
Uno shader è un riempimento come gli altri: sceglilo nel selettore di riempimento, impila effetti, regola i cursori o incolla un preset da shaders.com. I file ne conservano un fotogramma fisso, così si aprono ovunque, e l’anteprima lo riproduce.
Questa tela è in anteprima, per questo gli shader si muovono. Esci dall’anteprima, seleziona un quadrato e apri il suo riempimento.
Linting
OpenPencil controlla il design mentre lavori: contrasto, testo troppo piccolo, nomi predefiniti, livelli nascosti e vuoti, gruppi superflui. I problemi sono segnati sulla tela, molti si correggono con un clic, e le stesse regole funzionano nella CLI e per gli agenti.
Fai clic su un indicatore sulla tela, oppure applica una correzione dall’elenco.
Progetta con l’AI, con le tue chiavi
Chiedi con parole tue e l’agente modifica il documento con gli stessi strumenti che usi tu, mostrando il lavoro sulla tela man mano che arriva. Collega qualsiasi provider con la tua chiave, oppure usa l’agente di programmazione che già utilizzi.
Un turno registrato passa per il vero ciclo dell’agente. Guarda la tela costruirsi mentre arriva.
Funziona con
- Claude Code
- Cursor
- Windsurf
- Codex
- Gemini CLI
- e qualsiasi client MCP
Lavorare insieme, persone e agenti
Condividi un link e tutti modificano lo stesso documento, peer to peer, con cursori dal vivo, modalità segui, commenti fissati ai livelli e chiamate vocali. Gli agenti di IA entrano allo stesso modo: tutti nella stanza li guardano costruire mentre trasmettono.
Entrambi gli schermi sono tuoi. Trascina un livello su uno e guardalo muoversi sull’altro, poi chiedi all’agente.
Dal design al codice
Ogni selezione è un componente Vue o React, con le varianti come props e Reka UI o Radix dietro quelli interattivi, oppure HTML, Tailwind e design JSX con le variabili scritte come token. I componenti si esportano come storie di Storybook, e il design JSX resta collegato alla tela: modificalo e la tela lo segue.
Passa a React, HTML o design JSX, oppure seleziona un altro livello.
Automatizza tutto
La CLI openpencil lavora su un file senza che l’app sia aperta, oppure controlla l’app in esecuzione. Ispeziona un documento, interrogalo con XPath, controllalo con il linter, esportalo o esegui codice dei plugin Figma con eval. Il server MCP offre agli agenti le stesse possibilità tramite stdio o HTTP.
Esegui un comando e osserva la tela.
24 comandi
- 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 strumenti MCP
Creare, applicare stili, impaginare, ispezionare ed esportare. Ognuno è disponibile anche per l’agente integrato.
Integralo nel tuo prodotto
OpenPencil è tanto un insieme di strumenti quanto un’app: un motore indipendente dal framework, un SDK Vue headless e pacchetti separati per il grafo di scena e i formati di file. Incorpora una tela nel tuo prodotto, genera e controlla i design in CI oppure costruisci un altro editor sullo stesso motore. Ogni tela di questa pagina è quell’SDK in esecuzione dentro un sito di documentazione.
Il codice accanto alla tela è tutto ciò che serve per montarne una.
I tuoi file restano tuoi
- Prima in locale
- I documenti sono file sul tuo disco. Nessun account, nessun server, nessuna connessione necessaria.
- Il tuo spazio di archiviazione
- Sincronizza tramite il tuo bucket compatibile con S3 quando ti serve.
- Formati aperti
- Esporta in .fig, PDF, PPTX, SVG, HTML e JSX. Andarsene è sempre possibile.
- Licenza MIT
- L’editor, il motore di rendering, il codec .fig e la CLI.
OpenPencil Cloud
Lo spazio di design del tuo team, ospitato per te. Tutti modificano gli stessi file in diretta, li condividono con un link e progettano con l’IA, senza nulla da installare o gestire. I tuoi file restano aperti: esportali come .fig quando vuoi.
OpenPencil Cloud si paga in $OPENPENCIL — postazioni, sincronizzazione live, librerie condivise e AI attingono a un unico saldo di token. Il checkout apre con l'indirizzo del contratto nella fascia $OPENPENCIL.
- Sincronizzazione del team in tempo reale
- Ogni modifica raggiunge tutto il team nel momento in cui avviene, su qualsiasi dispositivo.
- Link di condivisione e commenti
- Invia un link per rivedere un design e discuterne direttamente sulla tela.
- Librerie del team
- Pubblica componenti, stili e token una volta e usali in ogni file.
- IA ospitata
- Agenti che progettano con te, senza chiavi API da gestire.
- SSO e controlli di amministrazione
- Single sign-on, ruoli e controllo su chi vede cosa.
Roadmap
- Rilasciato
Componenti interattivi e anteprima
Variabili come design token
Linting con correzioni in un clic
Agenti AI come collaboratori, con modalità segui
Annulla, rigenera e modifica i turni dell’AI
Codice collegato ai livelli
Diff visivo e patch
Commenti e chiamate vocali nelle stanze condivise
Componenti Vue e React nella scheda Codice
Importazione di SVG e HTML come livelli modificabili
Riempimenti con shader
Design token W3C
Un tour guidato dell’editor
Elenchi e stili per qualsiasi porzione di testo
- Ora
Storybook da componenti reali
Storie che usano Reka UI per Vue e Radix UI per React.
Creazione di componenti
Modifica delle varianti più rapida e selezione dentro i componenti.
- Poi
OpenPencil self-hosted
L’intero spazio di lavoro dentro la tua rete: sincronizzazione, condivisione, commenti e librerie di team senza inviare un file a nessun altro.
- Il tuo spazio di archiviazione
- I documenti restano nel tuo bucket, nella tua regione.
- La tua identità
- Accesso tramite il tuo provider OIDC o SSO, con ruoli.
- La tua rete
- Un relay di collaborazione che funziona dietro il tuo firewall.
- La tua gestione
- Distribuzione guidata, aggiornamenti, backup e conservazione.
OpenPencil Cloud
Lo spazio ospitato per i team: sincronizzazione in diretta, condivisione, librerie e IA, senza nulla da gestire.
OpenPencil Cloud si paga in $OPENPENCIL — postazioni, sincronizzazione live, librerie condivise e AI attingono a un unico saldo di token. Il checkout apre con l'indirizzo del contratto nella fascia $OPENPENCIL.
Cronologia delle versioni
Istantanee automatiche, checkpoint con nome e ripristino.
- Più avanti
Design system governati
Proporre, rivedere, pubblicare e migrare.
Editor incorporabile
Porta l’editor di questa pagina nel tuo prodotto.
Il token $OPENPENCIL
OpenPencil è open source; la rete che lo fa girare non è gratuita. Turni AI, render cloud e registro dei plugin sono binari a pagamento, e $OPENPENCIL è la sola moneta con cui si comprano. Lancio su Solana.
Prossimamente — lancio su Solana- Turni AI e render cloud
- Ogni lavoro a consumo su OpenPencil Cloud — turni AI, render headless, export — è tariffato e pagato in $OPENPENCIL. Nessun checkout in fiat, nessuna licenza per postazione.
- Mercato di plugin e template
- Plugin, set di icone e template di documento si regolano in $OPENPENCIL: chi compra paga il token, chi pubblica viene pagato on-chain.
- Staking per librerie governate
- Fai staking di $OPENPENCIL per sbloccare i design system governati: flussi di revisione e pubblicazione, audit trail, librerie di team condivise.
- Le fee ricomprano il token
- Tutte le fee raccolte dalla rete confluiscono in un buyback on-chain di $OPENPENCIL: l'uso dell'editor punta al token che lo paga.
Solana · token SPL. Lancio imminente — nulla qui è un'offerta o un titolo; $OPENPENCIL paga l'uso della rete. L'indirizzo del contratto arriverà nella fascia qui sopra il giorno del lancio.