OpenPencil JSX 渲染器：用代码声明式构建设计并导出为 JSX/Tailwind

前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载本文围绕 OpenPencil开源 Figma 替代方案、AI 原生设计编辑器的 JSX 渲染器展开系统讲解如何把 JSX 作为声明式设计语言在 AI 聊天、MCP 工具与evalCLI 中通过render传入 JSX 字符串创建设计在无界面代码或库中通过renderJSX/renderTree把 JSX 渲染进场景图以及用export命令把既有设计反向导出为可读、可 diff、可复用的 JSX 或 Tailwind 代码。读完本文你将掌握 OpenPencil JSX 的完整元素与样式属性体系、底层渲染管线sucrase 编译 → 树解析 → 场景图节点创建 → 自动布局以及用代码评审Code Review与版本管理承载设计变更的工程化工作流。JSX 作为声明式设计语言OpenPencil 把 JSX 用作设计创作的声明式语言一段 JSX 即描述一个设计树适合 AI Agent、脚本与可复现的界面构建。同时 JSX 也是既有设计的可读表示——设计变更表现为普通的代码 diff便于人工审查、存入版本控制系统甚至放到 CI 中自动分析。其核心思路与前端组件化完全一致用Frame容器和Text文本等元素声明层级与样式再交给渲染器转换为真正的场景图节点。相比在画布上手工拖拽JSX 方式的优势在于可复现、可审查、可自动化。一段最小设计示例Frame nameCard w{320} hhug flexcol gap{16} p{24} bg#FFF rounded{16} Text size{18} weightboldCard Title/Text Text size{14} color#666Description text/Text /Frame这里Frame声明了一个宽 320、高度自适应hug、纵向 flex 布局flexcol、子元素间距 16、内边距 24、白色背景、圆角 16 的卡片容器两个Text作为其子节点声明标题与描述文本。这段 JSX 可直接在 AI 聊天、MCP 的render工具或evalCLI 中执行渲染出一个真实的图层树。使用render渲染 JSX 的三种途径render工具同时存在于以下三个入口均接收 JSX 字符串入口使用方式AI 聊天Chat直接向 AI 会话中的render工具传入 JSX 字符串MCP 服务器通过 MCP 工具调用render传入 JSX 字符串evalCLI在命令行执行包含 JSX 的代码见openpencil eval底层通过 RPC 调用eval执行并渲染三种入口共享同一套 JSX 语法与渲染语义因此同一个设计代码段可以在不同场景间无缝迁移。在无界面代码中渲染open-pencil/design-jsx与open-pencil/core/design-jsx在不经过聊天/MCP/CLI、而是从应用代码或库中直接创建设计时需要引入两组包open-pencil/design-jsx提供Frame、Text等元素函数组件工厂用于在 TypeScript 中直接拼装设计树。其导出内容见 packages/design-jsx/src/index.ts包括Frame、Text、Rectangle、Ellipse、Line、Star、Polygon、Vector、Group、Section、Component、ComponentSet、Instance及其别名ViewFrame、RectRectangle、PageFrame。open-pencil/core/design-jsx提供renderJSX与renderTree两个渲染函数负责把 JSX 字符串/设计树真正渲染进场景图。它们来自 packages/core/src/design-jsx/index.ts底层由 packages/core/src/design-jsx/renderer.ts 通过createDesignJSXRenderer绑定引擎服务实现。open-pencil/core/design-jsx的渲染器绑定的是 OpenPencil 引擎提供的三类服务见 packages/core/src/design-jsx/renderer.ts#L39-L48图标icon按名称与尺寸拉取 Iconify 图标数据SVG 转换svg把内联svg标记提取路径并按 viewBox 缩放走与图标相同的管线布局layout渲染完成后调用computeAllLayouts计算自动布局。因此renderJSX/renderTree天然具备图标、内联 SVG 与自动布局能力这就是原文档所说它们添加图标、SVG 转换与布局的底层来源。两个函数的签名差异renderJSX(graph, jsxString, options)接收 JSX 字符串内部用 sucrase 编译renderTree(graph, tree, options)接收已用元素函数构建好的TreeNode树两者共享RenderOptions见 packages/design-jsx/src/types.tsx/y设置根节点位置、parentId指定父节点默认第一页、onNode在每创建一个图层时回调可用来建立源码到图层的映射。在 TSX 中书写设计树若想在.tsx源文件中直接用 JSX 语法书写设计树需要在tsconfig.json中配置{ compilerOptions: { jsx: react-jsx, jsxImportSource: open-pencil/design-jsx } }或只在单个文件顶部添加编译指令注释/** jsxImportSource open-pencil/design-jsx */这样open-pencil/design-jsx的 JSX 运行时见 packages/design-jsx/src/jsx-runtime.ts会接管jsx/jsxs/jsxDEV与Fragment字符串标签如frame、text映射为node(type, props)函数组件则直接调用返回TreeNode。该文件同时声明了JSX.IntrinsicElements接口frame、text、rectangle、ellipse、line、star、polygon、vector、group、section、component、component-set、instance为 TSX 提供类型提示。渲染管线从字符串到场景图renderJSX的完整链路见 packages/design-jsx/src/render.ts 与 packages/design-jsx/src/renderer.ts可以概括为五步编译buildComponent用 sucrase 把 JSX 字符串编译为函数编译时自动注入别名Frame、Text、View、Rect、Component、Instance、Icon、svg及各 Reka 元素命名空间和辅助函数solid、gradient、dropShadow、layerBlur、designVar等因此 JSX 字符串中可直接使用这些名字同时剥离 HTML 注释。解析resolveToTree把编译产物解析为TreeNode递归函数组件最多 100 层片段…/会被内联展开见 packages/design-jsx/src/tree.ts。校验对每个节点检查属性名不支持的属性收集为 warnings如Unsupported prop xxx on frame is ignored.并随渲染结果返回。建树renderNode按TYPE_MAP把元素类型映射为场景图节点类型frame→FRAME、text→TEXT、group→GROUP等通过propsToOverrides把 JSX 属性转换为节点字段再递归渲染子节点。值得注意的映射div/main/header/footer/nav/article/aside映射为FRAMEspan/p/h1~h6映射为TEXT——即可以直接用 HTML 语义标签写设计。布局所有根节点渲染完成后调用services.layout(graph)统一计算自动布局随后返回每个根节点的RenderResultid、name、type、childIds可能带warnings。若 JSX 未返回任何 Figma 元素会抛出明确错误JSX must return a Figma element (Frame, Text, etc)。元素清单下表为 OpenPencil JSX 支持的元素与 packages/design-jsx/src/schema.ts#L35-L53 的DESIGN_JSX_ELEMENTS定义一致元素创建的节点别名Frame带自动布局的帧容器View、PageRectangle矩形RectEllipse椭圆或圆Text文本对象子元素内容即文本内容Line直线Star星形可用points、innerRadius控制Polygon多边形可用pointCount控制Vector矢量路径Group编组Section画布分区除上表外schema 还注册了Component、ComponentSet、Instance组件/组件集/实例以及IconIconify 图标要求name属性如namelucide:heart默认尺寸 24见 packages/design-jsx/src/renderer.ts#L231-L245。Instance通过component/componentId/of属性按 ID、名称或组件集变体解析组件并支持overrides形如{ label:text: … }按子节点名覆盖实例内容。ComponentSet渲染后会依据变体命名如StateHover自动推断变体属性定义inferComponentSetProperties。样式属性体系属性命名刻意贴近 Tailwind 以保持简洁且绝大多数支持多别名。从源码 packages/design-jsx/src/schema.ts#L193-L210 的DESIGN_JSX_PROPERTY_ALIASES可以看到完整别名表w/width、h/height、bg/fill/background/backgroundColor、stroke/border/borderColor、rounded/cornerRadius/borderRadius、rotate/rotation、p/padding、justify/justifyContent、items/align/alignItems、size/fontSize、font/fontFamily、weight/fontWeight、textAlign/textAlignHorizontal/textHorizontalAlignment。渲染器按别名顺序读取第一个已设置的值。此外还支持style{{ … }}对象形式DESIGN_JSX_STYLE_KEYS把 CSS 风格键映射回 JSX 属性如background→bg、fontSize→size、borderWidth→strokeWidth、width/height等px字符串如320px会被解析为数字直接属性优先于style见 packages/design-jsx/src/props-overrides.ts#L74-L86。布局属性作用flexrow或col开启自动布局column等同colgap子元素间距wrap子元素换行rowGap换行时行间距justifystart、end、center或between主轴线对齐itemsstart、end、center或stretch交叉轴对齐p、px、py、pt、pr、pb、pl内边距p 为四边统一px/py 为水平/垂直其余为单边实现细节见 packages/design-jsx/src/props-overrides.ts#L317-L397flex决定layoutModecol/column→VERTICALrow→HORIZONTAL默认主轴/交叉轴均为HUG给w/h传数字会将该轴改为FIXED传hug保持HUG传fill则映射为layoutGrow/layoutAlignSelf在 flex 容器中子元素按方向选择 grow 或 stretchgrid 容器按行语义处理。只要出现flex或任意内边距/对齐属性就会自动启用自动布局shouldEnableAutoLayout。网格布局由grid、columns、rows、colStart、rowStart、colSpan、rowSpan属性驱动columns/rows支持数字或 CSS 轨道字符串如1fr 2fr。尺寸与位置属性作用w、h宽高数字、fill或hugminW、maxW、minH、maxH尺寸约束x、y位置top/left为别名在自动布局容器内显式给出x/y或top/left会自动把该节点标记为绝对定位layoutPositioning ABSOLUTEpositionabsolute也可直接声明。外观属性作用bg十六进制背景填充色fill/background/backgroundColor为别名fillbg的别名stroke描边颜色border/borderColor为别名strokeWidth描边粗细默认 1rounded圆角半径独立圆角roundedTL、roundedTR、roundedBL、roundedBRcornerSmoothing圆角平滑度 01opacity不透明度 01shadow投影如0 4 8 #00000040x 偏移、y 偏移、模糊半径、颜色blur图层模糊半径rotate旋转角度度blendMode混合模式overflowhidden或visiblehidden会设置clipsContent外观属性通过applyVisualOverrides见 packages/design-jsx/src/props-overrides.ts#L204-L215写入节点rounded为数字时设置cornerRadius四个独立圆角属性任一出现时启用independentCornersfills数组可用于声明多层填充每个成员可以是颜色字符串、Color对象或Fill对象。更丰富的填充渐变、多重效果可通过solid、gradient、linearGradient、radialGradient、angularGradient、diamondGradient、dropShadow、innerShadow、layerBlur、backgroundBlur、foregroundBlur等辅助函数表达DESIGN_JSX_HELPERS见 packages/design-jsx/src/schema.ts#L254-L268。排版属性作用size/fontSize字号font/fontFamily字族weight/fontWeightbold、medium、normal或数字映射为 700/500/400color文本颜色textAlignleft、center、right或justified排版族还支持lineHeight、letterSpacing、italic、textDecoration、textCase、maxLines、truncate、textAlignVerticaltop/center/bottom、textAutoResizenone/width/height等属性。文本自动尺寸有专门逻辑见 packages/design-jsx/src/props-overrides.ts#L448-L469显式宽度或位于自动布局且fill时用HEIGHT否则默认WIDTH_AND_HEIGHT——源码注释特别提醒该默认值依赖 headless 布局的 fallback 估算器改动会破坏所有 JSX 渲染。设计变量绑定JSX 支持把属性绑定到设计变量designVar与defineVars辅助函数创建变量引用bind属性或直接传变量对象到bg/color/stroke/size/gap等属性时渲染器会解析变量 ID 并调用graph.bindVariable建立绑定同时保留回退值见 packages/design-jsx/src/renderer.ts#L132-L218。这让代码生成的设计与设计系统 token 保持一致。导出设计为 JSX反向流程由export命令完成。JSX 导出支持两种风格openpencil export design.fig -f jsx # OpenPencil 原生 JSX 格式 openpencil export design.fig -f jsx --style tailwind # Tailwind 工具类-f jsx或-f tailwind-jsx以 OpenPencil 原生 JSX 格式输出可直接再渲染--style tailwind输出带 Tailwind 工具类的代码例如div classNameflex flex-col gap-4 p-6 bg-white rounded-xl p classNametext-2xl font-bold text-[#1D1B20]Card Title/p p classNametext-sm text-[#49454F]Description text/p /div导出的设计可以当作代码修改后再重新渲染。导出会完整记录隐藏与锁定图层、约束、尺寸约束、多层/渐变/图片填充、描边、效果、蒙版与变量绑定——这些信息在重新渲染时都能复现diff_jsx可以显示其中任何一项的变化。目前尚未导出的内容包括混合样式的富文本、矢量路径、布局网格、共享样式与组件属性定义。实例Instance会导出为带自身内容的 Frame因此导出的 JSX 是自包含的不依赖外部组件库。导出的完整命令集合见 packages/docs/programmable/cli/exporting.mdopenpencil export design.fig -f tailwind-jsx与-f jsx --style tailwind等价导出还支持png、jpg、webp、svg、pdf、pptx、fig、html、storybook等格式与-s缩放、-q质量、--page、--node等选项。另外openpencil tokens design.fig可以把文档变量导出为 CSS 自定义属性--format tailwind输出 Tailwind v4 的theme块供bg-primary这类类名使用与 JSX/HTML 导出的 token 化输出配套使用。设计变更的代码级对比由于 JSX 是可读的文本表示设计变更自然呈现为普通代码 diffFrame nameCard w{320} flexcol gap{16} p{24} bg#FFF - Text size{18} weightboldOld Title/Text Text size{24} weightbold color#1D1B20New Title/Text Text size{14} color#666Description/Text /Frame这样的 diff 可以在 Pull Request 中进行人工审查提交进版本控制系统并放到 CI 里自动分析配合diff_jsx检查任意属性的变化。对团队而言这意味着设计评审与代码评审可以共用同一套流程AI 或设计师修改 JSX审查者只看 diff 即可判断改动意图无需打开设计文件逐一比对。与相关工具链的衔接evalCLIopenpencil eval执行代码片段内部通过 RPC 的eval通道运行见 packages/cli/src/commands/eval.ts 与 packages/cli/src/index.ts--write可把结果保存为文档是脚本化构建设计的主入口。MCP / AI 聊天render工具面向 AI Agent 暴露同一 JSX 语法使模型可以直接写代码生图。open-pencil/design-jsx测试仓库内配套测试覆盖属性、网格、流式解析、reconcile 等行为见 packages/design-jsx/tests例如attributes.test.ts、grid.test.ts、props-overrides.test.ts、streaming.test.ts可作为 JSX 语法行为的可运行参考。JSX 导出实现selectionToJSX、sceneNodeToJSX等导出函数位于 packages/design-jsx/src/export/index.ts剪辑板 JSX 导出亦复用selectionToJSX见 packages/core/src/editor/clipboard/export.ts说明选中图层复制为 JSX与文件导出走同一套序列化逻辑。小结OpenPencil 的 JSX 渲染器把写界面变成了写代码render聊天/MCP/evalCLI负责解释执行 JSXrenderJSX/renderTreeopen-pencil/core/design-jsx在代码侧构建设计树export命令则把既有设计序列化为可读、自包含、可再渲染的 JSX/Tailwind。元素、布局、外观、排版与变量绑定构成的完整属性体系全部支持别名与style对象形式加上底层 sucrase 编译 → 树解析 → 场景图建树 → 自动布局的渲染管线让设计既可以由 AI 与脚本生成也可以像源码一样被审查、diff、入库与 CI 校验——这是 OpenPencil 作为 AI 原生设计编辑器的核心工程能力之一。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil JSX 渲染器用声明式 JSX 创建与导出可编辑设计OpenPencil JSX 渲染器用声明式 JSX 创建与导出可编辑设计 OpenPencil开源 Figma 替代品将 JSX 作为设计创作的声明式语前端桌面应用AI 应用MCP 服务OpenPencil JSX 渲染引擎用声明式 JSX 构建可编辑设计树与 Tailwind 导出实战OpenPencil JSX 渲染引擎用声明式 JSX 构建可编辑设计树与 Tailwind 导出实战 OpenPencil 提供了一套独立的设计 JSX前端桌面应用AI 应用MCP 服务OpenPencil JSX 渲染器Motore JSX完全指南从声明式 JSX 到可编辑设计树OpenPencil JSX 渲染器Motore JSX完全指南从声明式 JSX 到可编辑设计树 导读 OpenPencil开源 Figma 替代品的前端桌面应用AI 应用MCP 服务上一篇arduino-esp32 Deep Sleep 完全指南ExternalWakeUp 外部唤醒与 TimerWakeUp 定时器唤醒实战下一篇iii 引擎生产部署实战Docker 化打包与 Caddy/Nginx 反向代理配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考