---
title: JSX-рендерер
description: Создавайте дизайн с помощью JSX — синтаксиса, который LLM уже знают из миллионов React-компонентов.
---

# JSX-рендерер

OpenPencil использует JSX как язык создания дизайна. LLM видели миллионы React-компонентов — описание макета через `<Frame><Text>` естественно и не требует специального обучения. Каждый токен важен, когда ИИ-агент выполняет десятки операций, а JSX — это самое компактное декларативное представление.

JSX также поддаётся сравнению. Когда ИИ изменяет дизайн, изменение представлено как JSX-дифф — читаемый, проверяемый, пригодный для контроля версий.

## Создание дизайна

Инструмент `render` (доступен в ИИ-чате, MCP и CLI eval) принимает 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>
```

В MCP-сервере и ИИ-чате инструмент `render` принимает JSX-строки напрямую. В CLI используйте команду `export` для обратного направления — [экспорт дизайна в JSX](./cli/exporting).

## Элементы

Все типы узлов доступны как JSX-элементы:

| Элемент | Создаёт | Псевдонимы |
|---------|---------|------------|
| `<Frame>` | Фрейм (контейнер, поддерживает автолейаут) | `<View>` |
| `<Rectangle>` | Прямоугольник | `<Rect>` |
| `<Ellipse>` | Эллипс / круг | |
| `<Text>` | Текстовый узел (дочерние элементы становятся текстовым содержимым) | |
| `<Line>` | Линия | |
| `<Star>` | Звезда | |
| `<Polygon>` | Многоугольник | |
| `<Vector>` | Векторный контур | |
| `<Group>` | Группа | |
| `<Section>` | Секция | |

## Свойства стиля

Компактные сокращённые свойства, вдохновлённые именованием Tailwind.

### Лейаут

| Свойство | Описание |
|----------|----------|
| `flex` | `"row"` или `"col"` — включает автолейаут |
| `gap` | Расстояние между дочерними элементами |
| `wrap` | Перенос дочерних элементов на следующую строку |
| `rowGap` | Межстрочный интервал при переносе |
| `justify` | `"start"`, `"end"`, `"center"`, `"between"` |
| `items` | `"start"`, `"end"`, `"center"`, `"stretch"` |
| `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` | Отступы |

### Размер и позиция

| Свойство | Описание |
|----------|----------|
| `w`, `h` | Ширина/высота — число, `"fill"` или `"hug"` |
| `minW`, `maxW`, `minH`, `maxH` | Ограничения размера |
| `x`, `y` | Позиция |

### Внешний вид

| Свойство | Описание |
|----------|----------|
| `bg` | Заливка фона (HEX-цвет) |
| `fill` | Псевдоним для `bg` |
| `stroke` | Цвет обводки |
| `strokeWidth` | Толщина обводки (по умолчанию: 1) |
| `rounded` | Скругление углов (или `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR`) |
| `cornerSmoothing` | Плавное скругление в стиле iOS (0–1) |
| `opacity` | 0–1 |
| `shadow` | Тень (напр. `"0 4 8 #00000040"`) |
| `blur` | Радиус размытия слоя |
| `rotate` | Поворот в градусах |
| `blendMode` | Режим наложения |
| `overflow` | `"hidden"` или `"visible"` |

### Типографика

| Свойство | Описание |
|----------|----------|
| `size` / `fontSize` | Размер шрифта |
| `font` / `fontFamily` | Семейство шрифта |
| `weight` / `fontWeight` | `"bold"`, `"medium"`, `"normal"` или число |
| `color` | Цвет текста |
| `textAlign` | `"left"`, `"center"`, `"right"`, `"justified"` |

## Экспорт в JSX

Конвертируйте существующий дизайн обратно в JSX:

```sh
openpencil export design.fig -f jsx                   # формат OpenPencil
openpencil export design.fig -f jsx --style tailwind  # классы Tailwind
```

Круговой цикл работает: экспортируйте дизайн как JSX, измените код, отрендерьте обратно.

## Визуальное сравнение

Поскольку дизайн можно представить как JSX, изменения становятся диффами кода:

```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>
```

Это делает изменения дизайна доступными для ревью в пулл-реквестах, отслеживаемыми в системе контроля версий и проверяемыми в CI.