JSX-рендерер
OpenPencil использует JSX как язык создания дизайна. LLM видели миллионы React-компонентов — описание макета через <Frame><Text> естественно и не требует специального обучения. Каждый токен важен, когда ИИ-агент выполняет десятки операций, а JSX — это самое компактное декларативное представление.
JSX также поддаётся сравнению. Когда ИИ изменяет дизайн, изменение представлено как JSX-дифф — читаемый, проверяемый, пригодный для контроля версий.
Создание дизайна
Инструмент render (доступен в ИИ-чате, MCP и CLI eval) принимает 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.
Элементы
Все типы узлов доступны как 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:
open-pencil export design.fig -f jsx # формат OpenPencil
open-pencil export design.fig -f jsx --style tailwind # классы TailwindКруговой цикл работает: экспортируйте дизайн как 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.