bfa4b7de8b
48 translated pages (de, es, fr, it, pl, ru) for the Programmable section: overview, AI Chat, Collaboration, JSX Renderer, CLI (inspecting, exporting, analyzing, scripting). CLI reference and MCP server pages copied as-is (mostly code/tables).
117 lines
5.6 KiB
Markdown
117 lines
5.6 KiB
Markdown
---
|
||
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
|
||
open-pencil export design.fig -f jsx # формат OpenPencil
|
||
open-pencil 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.
|