b9753aa016
Eleven translated pages changed in English since the last release without matching updates: system requirements, the Lint tab, AI chat diff tools, collaboration with agents, design JSX imports and export fidelity, Storybook and live-app export, lint fixes, page navigation, and Checking Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections the abridged translations lacked where a change landed, use each language's UI labels, and point the export page at documents list.
7 KiB
| 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. В коде приложения или библиотеки без интерфейса импортируйте 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.