openpencil/packages/docs/ru/programmable/jsx-renderer.md

title	description
Рендерер JSX	Декларативное создание дизайна с помощью JSX и обратный экспорт в JSX или HTML с Tailwind.

Рендерер JSX

OpenPencil использует JSX как декларативный язык создания дизайна. Он подходит для агентов ИИ, сценариев и воспроизводимого построения интерфейсов.

JSX также служит читаемым представлением существующего дизайна. Изменения выглядят как обычная разница в коде, которую удобно проверять и хранить в системе управления версиями.

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

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

Элементы

Элемент	Создаёт	Псевдоним
<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

openpencil export design.fig -f jsx                   # Формат OpenPencil
openpencil export design.fig -f jsx --style tailwind  # Классы Tailwind

Экспортированный дизайн можно изменить как код и снова отрисовать.

Сравнение изменений

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