Рендерер JSX

4B Pen использует 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. В коде приложения или библиотеки без интерфейса импортируйте Frame, Text и другие элементы для описания дизайна из @open-pencil/design-jsx, а узлы создавайте через renderTree или renderJSX из @open-pencil/core/design-jsx: они добавляют значки, преобразование SVG и компоновку. Чтобы писать такие деревья в TSX, укажите в tsconfig.json "jsxImportSource": "@open-pencil/design-jsx" вместе с "jsx": "react-jsx" или добавьте в файл комментарий /** @jsxImportSource @open-pencil/design-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

Экспортированный дизайн можно изменить как код и снова отрисовать. Экспорт записывает скрытые и заблокированные слои, ограничения, ограничения размеров, многослойные, градиентные и изображённые заливки, обводки, эффекты, маски и привязки переменных, поэтому при повторной отрисовке они воспроизводятся, а diff_jsx показывает изменения любого из них. Форматированный текст со смешанными стилями, векторные контуры, сетки компоновки, общие стили и определения свойств компонентов пока не записываются. Экземпляры записываются как фреймы со своим содержимым, поэтому экспортированный JSX самодостаточен.

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

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