Danila Poyarkov b9753aa016

docs: sync translations with documentation changes since v0.15.1 (#886 )

Eleven translated pages changed in English since the last release without
matching updates: system requirements, the Lint tab, AI chat diff tools,
collaboration with agents, design JSX imports and export fidelity,
Storybook and live-app export, lint fixes, page navigation, and Checking
Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections
the abridged translations lacked where a change landed, use each
language's UI labels, and point the export page at documents list.

2026-10-04 16:38:35 +00:00

3.3 KiB

Raw Blame History

title	description
Renderer JSX	Deklaratywne tworzenie projektu w JSX i eksport z powrotem do JSX lub HTML z Tailwind.

Renderer JSX

OpenPencil używa JSX jako deklaratywnego języka tworzenia projektu. Nadaje się on do agentów AI, skryptów i powtarzalnego budowania interfejsów.

JSX służy też jako czytelna reprezentacja istniejącego projektu. Zmiany wyglądają jak zwykła różnica w kodzie, którą można sprawdzić i zachować w systemie kontroli wersji.

Tworzenie projektu

Narzędzie render, dostępne w czacie AI, MCP i eval CLI, przyjmuje JSX:

<Frame name="Card" w={320} h="hug" flex="col" gap={16} p={24} bg="#FFF" rounded={16}>
  <Text size={18} weight="bold">Card Title</Text>
  <Text size={14} color="#666">Description text</Text>
</Frame>

W MCP i czacie AI przekaż narzędziu render ciąg JSX. W kodzie aplikacji lub bibliotece działającej bez interfejsu zaimportuj Frame, Text i pozostałe elementy do tworzenia projektu z @open-pencil/design-jsx, a potem twórz obiekty przez renderTree lub renderJSX z @open-pencil/core/design-jsx, które dodają ikony, konwersję SVG i układ. Aby zapisywać drzewa jako TSX, ustaw w tsconfig.json "jsxImportSource": "@open-pencil/design-jsx" wraz z "jsx": "react-jsx" albo dodaj do pliku komentarz /** @jsxImportSource @open-pencil/design-jsx */. Środowisko skryptowe określa, które API są dostępne w eval; eksporty pakietów nie są tam automatycznie zmiennymi globalnymi. Do konwersji w drugą stronę użyj polecenia export.

Elementy

Element	Tworzy	Alias
`<Frame>`	Ramkę z automatycznym układem	`<View>`
`<Rectangle>`	Prostokąt	`<Rect>`
`<Ellipse>`	Elipsę lub koło
`<Text>`	Obiekt tekstowy; elementy potomne stają się treścią
`<Line>`	Linię
`<Star>`	Gwiazdę
`<Polygon>`	Wielokąt
`<Vector>`	Ścieżkę wektorową
`<Group>`	Grupę
`<Section>`	Sekcję

Właściwości stylu

Nazwy właściwości pozostają zgodne z API JSX, natomiast ich znaczenie jest następujące:

flex, gap, wrap, justify, items i skróty p* sterują układem i odstępami;
w, h, minW, maxW, x i y sterują rozmiarem i położeniem;
bg, stroke, rounded, opacity, shadow, blur i blendMode sterują wyglądem;
fontFamily, fontSize, fontWeight, color i textAlign sterują typografią.

Eksport do JSX

openpencil export design.fig -f jsx                   # Format OpenPencil
openpencil export design.fig -f jsx --style tailwind  # Klasy Tailwind

Wyeksportowany projekt można zmienić jak kod i ponownie wyrenderować. Eksport zapisuje ukryte i zablokowane warstwy, ograniczenia, limity rozmiaru, wielowarstwowe, gradientowe i obrazowe zalewy, obwiednie, efekty, maski oraz powiązania ze zmiennymi, więc renderowanie eksportu je odtwarza, a diff_jsx pokazuje zmiany każdego z nich. Tekst sformatowany wieloma stylami, ścieżki wektorowe, siatki układu, style współdzielone i definicje właściwości komponentów nie są jeszcze zapisywane. Egzemplarze są zapisywane jako ramki z zawartością, dzięki czemu wyeksportowany JSX jest samodzielny.

Porównanie zmian

Różnica JSX może być sprawdzana w przeglądzie zmian i przechowywana w systemie kontroli wersji.

3.3 KiB Raw Blame History