117 lines
4.1 KiB
Markdown
117 lines
4.1 KiB
Markdown
---
|
||
title: Renderizador JSX
|
||
description: Crea diseños con JSX — la sintaxis que los LLMs ya conocen de millones de componentes React.
|
||
---
|
||
|
||
# Renderizador JSX
|
||
|
||
OpenPencil usa JSX como su lenguaje de creación de diseños. Los LLMs han visto millones de componentes React — describir un layout como `<Frame><Text>` es natural, sin necesidad de entrenamiento especial. Cada token importa cuando un agente de IA realiza docenas de operaciones, y JSX es la representación declarativa más compacta.
|
||
|
||
JSX también es diferenciable. Cuando una IA modifica un diseño, el cambio es un diff de JSX — legible, revisable, versionable.
|
||
|
||
## Crear Diseños
|
||
|
||
La herramienta `render` (disponible en el chat con IA, MCP y CLI eval) acepta 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>
|
||
```
|
||
|
||
En el servidor MCP y el chat con IA, la herramienta `render` acepta cadenas JSX directamente. En el CLI, usa el comando `export` para ir en la dirección opuesta — [exportar diseños como JSX](./cli/exporting).
|
||
|
||
## Elementos
|
||
|
||
Todos los tipos de nodos están disponibles como elementos JSX:
|
||
|
||
| Elemento | Crea | Alias |
|
||
|----------|------|-------|
|
||
| `<Frame>` | Frame (contenedor, soporta auto-layout) | `<View>` |
|
||
| `<Rectangle>` | Rectángulo | `<Rect>` |
|
||
| `<Ellipse>` | Elipse / círculo | |
|
||
| `<Text>` | Nodo de texto (los hijos se convierten en contenido de texto) | |
|
||
| `<Line>` | Línea | |
|
||
| `<Star>` | Estrella | |
|
||
| `<Polygon>` | Polígono | |
|
||
| `<Vector>` | Trazado vectorial | |
|
||
| `<Group>` | Grupo | |
|
||
| `<Section>` | Sección | |
|
||
|
||
## Props de Estilo
|
||
|
||
Props abreviados compactos inspirados en la nomenclatura de Tailwind.
|
||
|
||
### Layout
|
||
|
||
| Prop | Descripción |
|
||
|------|-------------|
|
||
| `flex` | `"row"` o `"col"` — activa auto-layout |
|
||
| `gap` | Espacio entre hijos |
|
||
| `wrap` | Ajustar hijos a la siguiente línea |
|
||
| `rowGap` | Espaciado en el eje transversal al ajustar |
|
||
| `justify` | `"start"`, `"end"`, `"center"`, `"between"` |
|
||
| `items` | `"start"`, `"end"`, `"center"`, `"stretch"` |
|
||
| `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` | Padding |
|
||
|
||
### Tamaño y Posición
|
||
|
||
| Prop | Descripción |
|
||
|------|-------------|
|
||
| `w`, `h` | Ancho/alto — número, `"fill"` o `"hug"` |
|
||
| `minW`, `maxW`, `minH`, `maxH` | Restricciones de tamaño |
|
||
| `x`, `y` | Posición |
|
||
|
||
### Apariencia
|
||
|
||
| Prop | Descripción |
|
||
|------|-------------|
|
||
| `bg` | Relleno de fondo (color hexadecimal) |
|
||
| `fill` | Alias de `bg` |
|
||
| `stroke` | Color de borde |
|
||
| `strokeWidth` | Ancho del borde (predeterminado: 1) |
|
||
| `rounded` | Radio de esquina (o `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR`) |
|
||
| `cornerSmoothing` | Esquinas suaves estilo iOS (0–1) |
|
||
| `opacity` | 0–1 |
|
||
| `shadow` | Sombra proyectada (ej. `"0 4 8 #00000040"`) |
|
||
| `blur` | Radio de desenfoque de capa |
|
||
| `rotate` | Rotación en grados |
|
||
| `blendMode` | Modo de fusión |
|
||
| `overflow` | `"hidden"` o `"visible"` |
|
||
|
||
### Tipografía
|
||
|
||
| Prop | Descripción |
|
||
|------|-------------|
|
||
| `size` / `fontSize` | Tamaño de fuente |
|
||
| `font` / `fontFamily` | Familia tipográfica |
|
||
| `weight` / `fontWeight` | `"bold"`, `"medium"`, `"normal"` o número |
|
||
| `color` | Color del texto |
|
||
| `textAlign` | `"left"`, `"center"`, `"right"`, `"justified"` |
|
||
|
||
## Exportar a JSX
|
||
|
||
Convierte diseños existentes de vuelta a JSX:
|
||
|
||
```sh
|
||
openpencil export design.fig -f jsx # formato OpenPencil
|
||
openpencil export design.fig -f jsx --style tailwind # clases Tailwind
|
||
```
|
||
|
||
El viaje de ida y vuelta funciona: exporta un diseño como JSX, modifica el código, renderízalo de nuevo.
|
||
|
||
## Diferencias Visuales
|
||
|
||
Como los diseños son representables como JSX, los cambios se convierten en diffs de código:
|
||
|
||
```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>
|
||
```
|
||
|
||
Esto hace que los cambios de diseño sean revisables en pull requests, rastreables en control de versiones y auditables en CI.
|