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

2.7 KiB

Raw Blame History

title	description
Motore JSX	Creare design da JSX ed esportare una selezione in JSX con Tailwind.

Motore JSX

OpenPencil converte JSX dichiarativo in un albero di design. Lo stesso sistema è disponibile nella chat AI, in MCP e in eval.

<Frame flex="col" gap={16} p={24} w={320} bg="#ffffff" radius={16}>
  <Text size={18} weight="bold">Card Title</Text>
  <Text color="#667085">Description</Text>
</Frame>

Nel codice dell’applicazione o nelle librerie headless, importa Frame, Text e gli altri export di scrittura da @open-pencil/design-jsx, poi crea i nodi con renderTree o renderJSX da @open-pencil/core/design-jsx, che aggiungono icone, conversione SVG e disposizione. Per scrivere gli alberi come TSX, imposta "jsxImportSource": "@open-pencil/design-jsx" con "jsx": "react-jsx" in tsconfig.json, oppure aggiungi al file il commento /** @jsxImportSource @open-pencil/design-jsx */. L’ambiente di scripting determina quali API sono esposte a eval: gli export dei pacchetti non diventano automaticamente globali.

Elementi

Frame, Text, Rectangle, Ellipse e Image creano i rispettivi oggetti. I componenti registrati possono generare alberi riutilizzabili definiti dall’applicazione.

Disposizione

flex="row" o flex="col" attiva la disposizione automatica.
gap regola la spaziatura.
p, px, py, pt, pr, pb e pl regolano i margini interni.
align, justify e wrap controllano allineamento e ritorno a capo.

Dimensioni e aspetto

w e h accettano numeri, "fill" o "hug"; x e y definiscono la posizione fuori dal flusso. bg, fill, color, stroke, opacity, radius e shadow controllano l’aspetto.

Le proprietà tipografiche come size, font, weight, lineHeight e letterSpacing mantengono il nome inglese perché fanno parte dell’API JSX.

Esportare in JSX

Copia come → JSX converte la selezione in JSX e classi Tailwind. L’output prova a conservare gerarchia, disposizione, dimensioni, colori, tipografia e bordi come punto di partenza per l’implementazione.

Il JSX esportato può essere modificato e renderizzato di nuovo nel documento. L’esportazione scrive livelli nascosti e bloccati, vincoli, limiti di dimensione, riempimenti multipli, sfumati e immagine, contorni, effetti, maschere e collegamenti alle variabili, quindi renderizzare un export li riproduce e diff_jsx mostra le modifiche a ciascuno di essi. Testo formattato con stili misti, tracciati vettoriali, griglie di layout, stili condivisi e definizioni delle proprietà dei componenti non vengono ancora scritti. Le istanze sono scritte come frame con il loro contenuto, così il JSX esportato è autonomo. Vedi esportazioni dalla CLI.

2.7 KiB Raw Blame History Unescape Escape