117 lines
4.1 KiB
Markdown
117 lines
4.1 KiB
Markdown
---
|
||
title: Renderer JSX
|
||
description: 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:
|
||
|
||
```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](./cli/exporting).
|
||
|
||
## 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:
|
||
|
||
```sh
|
||
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:
|
||
|
||
```diff
|
||
<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.
|