4.1 KiB
| title | description |
|---|---|
| Renderer JSX | Crea design con JSX — la sintassi che gli LLM già conoscono da milioni di componenti React. |
Renderer JSX
OpenPencil usa JSX come linguaggio di creazione dei design. Gli LLM hanno visto milioni di componenti React — descrivere un layout come <Frame><Text> è naturale, nessun addestramento speciale necessario. Ogni token conta quando un agente IA esegue decine di operazioni, e JSX è la rappresentazione dichiarativa più compatta.
JSX è anche confrontabile con diff. Quando un'IA modifica un design, la modifica è un diff JSX — leggibile, revisionabile, versionabile.
Creazione dei Design
Lo strumento render (disponibile nella chat IA, MCP e CLI eval) accetta 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>
Nel server MCP e nella chat IA, lo strumento render accetta direttamente stringhe JSX. Nella CLI, usa il comando export per andare nella direzione opposta — esportare design come JSX.
Elementi
Tutti i tipi di nodo sono disponibili come elementi JSX:
| Elemento | Crea | Alias |
|---|---|---|
<Frame> |
Frame (contenitore, supporta auto-layout) | <View> |
<Rectangle> |
Rettangolo | <Rect> |
<Ellipse> |
Ellisse / cerchio | |
<Text> |
Nodo di testo (i figli diventano contenuto testuale) | |
<Line> |
Linea | |
<Star> |
Stella | |
<Polygon> |
Poligono | |
<Vector> |
Tracciato vettoriale | |
<Group> |
Gruppo | |
<Section> |
Sezione |
Proprietà di Stile
Proprietà abbreviate compatte ispirate alla nomenclatura di Tailwind.
Layout
| Proprietà | Descrizione |
|---|---|
flex |
"row" o "col" — attiva l'auto-layout |
gap |
Spazio tra i figli |
wrap |
Manda a capo i figli alla riga successiva |
rowGap |
Spaziatura sull'asse trasversale durante il wrapping |
justify |
"start", "end", "center", "between" |
items |
"start", "end", "center", "stretch" |
p, px, py, pt, pr, pb, pl |
Padding |
Dimensione e Posizione
| Proprietà | Descrizione |
|---|---|
w, h |
Larghezza/altezza — numero, "fill" o "hug" |
minW, maxW, minH, maxH |
Vincoli di dimensione |
x, y |
Posizione |
Aspetto
| Proprietà | Descrizione |
|---|---|
bg |
Riempimento di sfondo (colore esadecimale) |
fill |
Alias per bg |
stroke |
Colore del bordo |
strokeWidth |
Larghezza del bordo (predefinito: 1) |
rounded |
Raggio degli angoli (o roundedTL, roundedTR, roundedBL, roundedBR) |
cornerSmoothing |
Angoli arrotondati stile iOS (0–1) |
opacity |
0–1 |
shadow |
Ombra esterna (es. "0 4 8 #00000040") |
blur |
Raggio sfocatura del livello |
rotate |
Rotazione in gradi |
blendMode |
Metodo di fusione |
overflow |
"hidden" o "visible" |
Tipografia
| Proprietà | Descrizione |
|---|---|
size / fontSize |
Dimensione del font |
font / fontFamily |
Famiglia di font |
weight / fontWeight |
"bold", "medium", "normal" o numero |
color |
Colore del testo |
textAlign |
"left", "center", "right", "justified" |
Esportazione in JSX
Converti design esistenti in JSX:
openpencil export design.fig -f jsx # formato OpenPencil
openpencil export design.fig -f jsx --style tailwind # classi Tailwind
Il ciclo completo funziona: esporta un design come JSX, modifica il codice, renderizzalo di nuovo.
Confronto Visuale con Diff
Poiché i design sono rappresentabili come JSX, le modifiche diventano diff del codice:
<Frame name="Card" w={320} flex="col" gap={16} p={24} bg="#FFF">
- <Text size={18} weight="bold">Old Title</Text>
+ <Text size={24} weight="bold" color="#1D1B20">New Title</Text>
<Text size={14} color="#666">Description</Text>
</Frame>
Questo rende le modifiche ai design revisionabili nelle pull request, tracciabili nel controllo di versione e verificabili nella CI.