Projektuj bez uzależnienia od dostawcy.

Otwórz to, co już masz

OpenPencil czyta pliki .fig bezpośrednio: strony, komponenty, instancje, zmienne i auto layout trafiają jako edytowalne warstwy, a zapisać możesz znowu do .fig. Wklej SVG albo otwórz HTML i CSS, a one też stają się warstwami, ułożonymi tak, jak układa je przeglądarka.

To przewodnik samej aplikacji, prawdziwy plik .fig. Otwórz rozdział w warstwach i poklikaj.

Projektuj prawdziwymi narzędziami

Auto layout, ograniczenia, wypełnienia, obrysy, efekty i typografia, z kontrolkami tam, gdzie ich szukasz. Komponenty mają sloty: instancja zachowuje projekt i wnosi własną treść. Wszystko da się cofnąć i nic nie czeka na serwer.

Najedź na zaznaczoną okładkę i przeciągnij róg, aby go zaokrąglić. Pozostałe odtwarzacze wnoszą własne okładki przez slot Artwork.

Komponenty, które działają

Nadaj komponentowi zachowanie, na przykład przełącznika, pola wyboru, suwaka, kart lub pola tekstowego, a podgląd uruchomi go jako prawdziwą kontrolkę Reka UI. Warianty stają się jego stanami, a te same komponenty eksportują się do Storybooka z klikalnymi kontrolkami.

To płótno jest w podglądzie: naciśnij play, przeciągnij pasek postępu, włącz losowanie. Wyjdź z podglądu, by edytować.

Zmienne to tokeny projektowe

Kolory, odstępy i typografia żyją w kolekcjach z trybami i edytuje się je jako tokeny. Wyeksportowany kod zapisuje powiązane wartości jako niestandardowe właściwości CSS, więc kod używa tych samych nazw co projekt.

Każdy odtwarzacz czyta kolekcję Theme we własnym trybie. Zmień wartość tokena, a oba podążą.

Wypełnienia, które się ruszają

Shader to wypełnienie jak każde inne: wybierz go w selektorze wypełnień, nakładaj efekty, ustawiaj ich suwaki albo wklej preset z shaders.com. Pliki zachowują jego nieruchomą klatkę, więc otwierają się wszędzie, a podgląd go odtwarza.

To płótno jest w podglądzie, dlatego shadery się ruszają. Wyjdź z podglądu, zaznacz kwadrat i otwórz jego wypełnienie.

Linting

OpenPencil sprawdza projekt w trakcie pracy: kontrast, zbyt mały tekst, domyślne nazwy, ukryte i puste warstwy, zbędne grupy. Problemy są oznaczane na obszarze roboczym, wiele z nich naprawisz jednym kliknięciem, a te same reguły działają w CLI i dla agentów.

Kliknij znacznik na obszarze roboczym albo zastosuj poprawkę z listy.

Projektuj z AI, na własnych kluczach

Opisz zadanie zwykłym językiem, a agent edytuje dokument tymi samymi narzędziami co Ty i pokazuje efekty na obszarze roboczym już w trakcie generowania. Podłącz dowolnego dostawcę własnym kluczem albo użyj agenta programistycznego, z którego już korzystasz.

Nagrana tura przechodzi przez prawdziwą pętlę agenta. Zobacz, jak obszar roboczy powstaje w trakcie strumieniowania.

Działa z

• Claude Code
• Cursor
• Windsurf
• Codex
• Gemini CLI
• i każdym klientem MCP

Współpraca ludzi i agentów

Udostępnij link, a wszyscy edytują ten sam dokument, peer-to-peer, z kursorami na żywo, trybem śledzenia, komentarzami przypiętymi do warstw i rozmowami głosowymi. Agenci AI dołączają tak samo: wszyscy w pokoju widzą, jak budują, gdy strumieniują.

Oba ekrany są Twoje. Przeciągnij warstwę na jednym i zobacz, jak przesuwa się na drugim, a potem poproś agenta.

Od projektu do kodu

Każde zaznaczenie to komponent Vue lub React, z wariantami jako propsami i Reka UI lub Radix za tymi interaktywnymi, albo HTML, Tailwind i design JSX ze zmiennymi zapisanymi jako tokeny. Komponenty eksportują się jako historie Storybooka, a design JSX pozostaje powiązany z płótnem: edytuj go, a płótno podąży.

Przełącz na React, HTML lub design JSX albo zaznacz inną warstwę.

Wszystko da się oskryptować

CLI openpencil pracuje na pliku bez uruchomionej aplikacji albo steruje otwartą aplikacją. Przejrzyj dokument, odpytaj go przez XPath, sprawdź linterem, wyeksportuj albo uruchom na nim kod wtyczek Figmy przez eval. Serwer MCP daje agentom te same możliwości przez stdio lub HTTP.

Uruchom polecenie i obserwuj obszar roboczy.

Polecenia CLI: 24

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

Narzędzia MCP: 122

Tworzenie, stylowanie, układ, inspekcja i eksport. Każde z nich jest też dostępne dla wbudowanego agenta.

Wbuduj go we własny produkt

OpenPencil to nie tylko aplikacja, ale też zestaw narzędzi: silnik niezależny od frameworka, SDK Vue bez interfejsu oraz osobne pakiety dla grafu sceny i formatów plików. Osadź obszar roboczy w swoim produkcie, renderuj i sprawdzaj projekty w CI albo zbuduj inny edytor na tym samym silniku. Każdy obszar roboczy na tej stronie to właśnie to SDK działające w witrynie z dokumentacją.

Kod obok obszaru roboczego wystarczy, żeby go zamontować.

Twoje pliki pozostają Twoje

Najpierw lokalnie

Dokumenty to pliki na Twoim dysku. Bez konta, bez serwera, bez dostępu do internetu.

Twoja pamięć masowa

Synchronizuj przez własny zasobnik zgodny z S3, kiedy tego potrzebujesz.

Otwarte formaty

Eksport do .fig, PDF, PPTX, SVG, HTML i JSX. Zawsze możesz odejść.

Licencja MIT

Edytor, silnik renderujący, kodek .fig i CLI.

OpenPencil Cloud

Przestrzeń projektowa Twojego zespołu, hostowana za Ciebie. Wszyscy edytują te same pliki na żywo, udostępniają je linkiem i projektują z AI, bez instalowania i utrzymywania czegokolwiek. Pliki pozostają otwarte: eksportuj je do .fig, kiedy chcesz.

OpenPencil Cloud płaci się w $OPENPENCIL — stanowiska, synchronizacja na żywo, wspólne biblioteki i AI schodzą z jednego salda tokenów. Płatność rusza z adresem kontraktu w pasku $OPENPENCIL.

Synchronizacja zespołu w czasie rzeczywistym

Każda zmiana od razu trafia do całego zespołu, na każdym urządzeniu.

Linki i komentarze

Wyślij link do przeglądu projektu i omawiajcie go bezpośrednio na płótnie.

Biblioteki zespołu

Opublikuj komponenty, style i tokeny raz i używaj ich w każdym pliku.

Hostowane AI

Agenci, którzy projektują z Tobą, bez zarządzania kluczami API.

SSO i kontrola administracyjna

Logowanie jednokrotne, role i kontrola nad tym, kto co widzi.

Plan rozwoju

1. Wydane

   • Interaktywne komponenty i podgląd

   • Zmienne jako tokeny projektowe

   • Linting z poprawkami jednym kliknięciem

   • Agenci AI jako współpracownicy, z trybem śledzenia

   • Cofanie, ponowne generowanie i edycja tur AI

   • Kod powiązany z warstwami

   • Wizualny diff i łatki

   • Komentarze i rozmowy głosowe we wspólnych pokojach

   • Komponenty Vue i React w karcie Kod

   • Import SVG i HTML jako edytowalnych warstw

   • Wypełnienia shaderami

   • Design tokeny W3C

   • Przewodnik po edytorze

   • Listy i style dla dowolnego fragmentu tekstu

2. Teraz

   • Storybook z prawdziwych komponentów

     Historie korzystające z Reka UI dla Vue i Radix UI dla React.

   • Tworzenie komponentów

     Szybsza edycja wariantów i zaznaczanie wewnątrz komponentów.

3. Następnie

   • OpenPencil na własnym serwerze

     Cała przestrzeń robocza we własnej sieci: synchronizacja, udostępnianie, komentarze i biblioteki zespołu bez wysyłania pliku komukolwiek innemu.

     Twoja pamięć masowa

     Dokumenty pozostają w Twoim zasobniku, w Twoim regionie.

     Twoja tożsamość

     Logowanie przez Twojego dostawcę OIDC lub SSO, z rolami.

     Twoja sieć

     Przekaźnik współpracy, który działa za Twoją zaporą.

     Twoje utrzymanie

     Wdrożenie z przewodnikiem, aktualizacje, kopie zapasowe i retencja.

   • OpenPencil Cloud

     Hostowana przestrzeń dla zespołów: synchronizacja na żywo, udostępnianie, biblioteki i AI, bez utrzymywania czegokolwiek.

     OpenPencil Cloud płaci się w $OPENPENCIL — stanowiska, synchronizacja na żywo, wspólne biblioteki i AI schodzą z jednego salda tokenów. Płatność rusza z adresem kontraktu w pasku $OPENPENCIL.

   • Historia wersji

     Automatyczne migawki, nazwane punkty kontrolne i przywracanie.

4. Później

   • Zarządzane systemy projektowe

     Proponowanie, przegląd, publikacja i migracja.

   • Edytor do osadzenia

     Przenieś edytor z tej strony do własnego produktu.

Token $OPENPENCIL

OpenPencil jest open source; sieć, która go napędza, już nie. Tury AI, rendery w chmurze i rejestr pluginów to płatne tory, a $OPENPENCIL to jedyna waluta, w której się je rozlicza. Start na Solanie.

Tury AI i rendery w chmurze

Każde rozliczane zadanie w OpenPencil Cloud — tury AI, rendery headless, eksporty — ma cenę i płatność w $OPENPENCIL. Bez checkoutu w fiat, bez licencji na stanowisko.

Rynek pluginów i szablonów

Pluginy, zestawy ikon i szablony dokumentów rozliczają się w $OPENPENCIL: kupujący płaci tokenem, autor dostaje wypłatę on-chain.

Staking dla bibliotek pod governance

Stakuj $OPENPENCIL, aby odblokować systemy designu pod governance: przepływy przeglądu i publikacji, ścieżki audytu, wspólne biblioteki zespołu.

Opłaty skupują token

Wszystkie opłaty zbierane przez sieć trafiają do buybacku $OPENPENCIL on-chain — użycie edytora wskazuje na token, który za nie płaci.

Solana · token SPL. Start już wkrótce — to nie jest oferta ani papier wartościowy; $OPENPENCIL płaci za korzystanie z sieci. Adres kontraktu pojawi się w pasku powyżej w dniu startu.

Zabierz swoje projekty ze sobą.