5.6 KiB
| title | description |
|---|---|
| JSX-рендерер | Создавайте дизайн с помощью JSX — синтаксиса, который LLM уже знают из миллионов React-компонентов. |
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:
openpencil export design.fig -f jsx # формат OpenPencil
openpencil 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.