c3412a44fc
* docs: polish localized documentation - Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports * docs(pl): complete editorial pass - Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page * docs(de): complete editorial pass - Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(es): complete editorial pass - Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(fr): complete editorial pass - Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs: correct localized terminology - Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms * docs(it): continue editorial pass - Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior * docs(it): complete editorial pass - Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose * docs(pl): refine property panel terminology * docs: refine remaining localized prose - Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology * docs(ru): rewrite Penpot comparison naturally - Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required * docs: rewrite localized feature overviews naturally - Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged * docs(de): refine property panel terminology * docs: refine Spanish and French SDK terminology * docs(ru): continue full prose audit - Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts * docs(ru): audit user and automation guides - Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology * docs(ru): audit CLI inspection and analysis * docs(ru): audit Vue SDK overview and guides * docs(ru): audit Vue SDK API prose - Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers * docs(ru): audit advanced and gradient API references * docs(ru): finish advanced API prose audit * docs(ru): audit JSX renderer guide * docs(ru): audit CLI export and scripting guides * docs(pl): audit Penpot comparison prose * docs(pl): audit selection and automation guides * docs(pl): audit homepage and variable guides * docs(pl): audit vector, layers, and Pen guides * docs(pl): audit Auto layout and shape guides * docs(pl): audit context menu and export guides * docs(pl): audit JSX and analysis guides * docs(pl): audit AI Chat guide * docs(pl): audit components and CLI inspection * docs(pl): audit scripting and SDK overview prose * docs(pl): audit SDK API indexes * docs(pl): audit SDK component references * docs(pl): audit SDK composable references * docs(ru): refine usePosition terminology * docs(pl): audit advanced SDK references * docs(pl): audit Figma compatibility matrix * docs(pl): finish residual SDK terminology audit * docs(pl): finish component terminology audit * docs(pl): finish SDK guide terminology audit * docs(de): begin full user guide prose audit * docs(de): audit navigation, Pen, and layers guides * docs(de): audit Auto Layout, shapes, menu, and export * docs(de): audit components, text, and vector guides * docs(de): audit variables and automation overview * docs(de): audit AI Chat and collaboration guides * docs(de): audit CLI inspection, analysis, and export * docs(de): audit scripting and JSX guides * docs(de): audit Vue SDK overview and guides * docs(de): audit SDK API indexes * docs(de): audit SDK component references * docs(de): audit SDK composable references * docs(de): audit advanced SDK references * docs(de): audit Penpot comparison prose * docs(de): audit Figma compatibility reference * docs(es): begin full user guide prose audit * docs(es): audit document organization guides * docs(es): audit editing workflow guides * docs(es): audit automation and collaboration prose * docs(es): audit CLI inspection and export guides * docs(es): audit CLI scripting guide * docs(es): audit JSX and feature overview prose * docs(es): audit Penpot comparison prose * docs(es): audit SDK overview and guides * docs(es): begin SDK component reference audit * docs(es): audit SDK navigation component references * docs(es): audit SDK color and layout components * docs(es): begin SDK composable reference audit * docs(es): audit SDK property composable references * docs(es): audit SDK editor composable references * docs(es): begin advanced SDK reference audit * docs(es): audit advanced SDK state references * docs(es): complete advanced SDK reference audit * docs(es): audit Figma compatibility reference * docs(es): complete residual terminology sweep * docs(fr): begin full prose second audit * docs(fr): audit AI and variables prose * docs(fr): audit core user guide prose * docs(fr): audit editing workflow guides * docs(fr): audit CLI and JSX prose * docs(fr): audit Penpot comparison prose * docs(fr): audit SDK overview and guides * docs(fr): begin SDK API reference audit * docs(fr): audit SDK navigation component references * docs(fr): audit SDK color and layout components * docs(fr): begin SDK composable reference audit * docs(fr): audit SDK property composable references * docs(fr): audit editor composables and advanced APIs * docs(fr): audit advanced SDK state references * docs(fr): complete advanced SDK reference audit * docs(fr): audit Figma compatibility reference * docs(fr): complete residual terminology sweep * docs(it): begin full prose second audit * docs(it): audit document workflow guides * docs(it): audit editing and automation prose * docs(it): audit CLI and JSX prose * docs(it): audit Penpot comparison and SDK guides * docs(it): begin SDK API reference audit * docs(it): audit SDK component and state references * docs(it): audit residual SDK references * docs(it): audit Figma compatibility reference * docs(it): complete residual terminology sweep * docs(i18n): verify residual locale terminology
111 lines
5.3 KiB
Markdown
111 lines
5.3 KiB
Markdown
---
|
||
title: Рендерер JSX
|
||
description: Декларативное создание дизайна с помощью JSX и обратный экспорт в JSX или HTML с Tailwind.
|
||
---
|
||
|
||
# Рендерер JSX
|
||
|
||
OpenPencil использует JSX как декларативный язык создания дизайна. Он подходит для агентов ИИ, сценариев и воспроизводимого построения интерфейсов.
|
||
|
||
JSX также служит читаемым представлением существующего дизайна. Изменения выглядят как обычная разница в коде, которую удобно проверять и хранить в системе управления версиями.
|
||
|
||
## Создание дизайна
|
||
|
||
Инструмент `render`, доступный в чате с ИИ, MCP и `eval` CLI, принимает 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. Для обратного преобразования используйте команду `export` — подробнее в разделе [Экспорт дизайна в JSX](./cli/exporting).
|
||
|
||
## Элементы
|
||
|
||
| Элемент | Создаёт | Псевдоним |
|
||
|---------|---------|-----------|
|
||
| `<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` | Цвет фоновой заливки в шестнадцатеричном формате |
|
||
| `fill` | Псевдоним для `bg` |
|
||
| `stroke` | Цвет обводки |
|
||
| `strokeWidth` | Толщина обводки; по умолчанию 1 |
|
||
| `rounded` | Радиус углов; отдельные углы: `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR` |
|
||
| `cornerSmoothing` | Сглаживание углов от 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
|
||
|
||
```sh
|
||
openpencil export design.fig -f jsx # Формат OpenPencil
|
||
openpencil export design.fig -f jsx --style tailwind # Классы Tailwind
|
||
```
|
||
|
||
Экспортированный дизайн можно изменить как код и снова отрисовать.
|
||
|
||
## Сравнение изменений
|
||
|
||
```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.
|