前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是 AI 原生的开源设计编辑器Figma 开源替代方案其组件系统是整个设计复用体系的核心编辑主组件后所有实例自动同步更新组件集component set与变体variant支持多维参数化设计行为behaviour机制让组件在预览中作为真实的 Reka UI 控件运行组件库则以不可变修订revision的方式实现跨文档复用。本文以官方用户指南 components.md 为主体骨架结合仓库源码与开发文档完整讲解组件从创建、参数化、行为化到发布复用的全流程读完你将掌握 OpenPencil 组件系统的全部操作与底层原理。什么是组件可复用设计元素的基石组件Component是可复用的设计元素。其核心语义是编辑主组件main component所有实例instance自动随之更新。这不同于传统的复制粘贴——复制产生的是独立对象而组件实例始终与主组件保持链接关系形成一处修改、处处生效的设计系统工作流。从源码结构看组件这一概念直接映射到场景图scene graph中的COMPONENT与COMPONENT_SET节点类型实例则通过INSTANCE节点携带指向主组件的引用完整的组件实例关系模型位于 packages/core/src/editor/components/ 目录下包含create.ts创建、instances.ts实例、properties.ts属性、variant-set.ts变体集与slots/插槽等模块。浏览组件Assets 面板打开左侧面板的Assets标签页可以浏览本地组件和已启用的组件库资源支持网格视图与列表视图两种浏览方式可按组件名称搜索点击组件、按Enter键或将其拖拽到画布上均可完成插入。本地资源按来源页面分组展示。已发布的库资源library assets在其修订版本已下载的情况下始终可用——即使远端提供方暂时离线也不会影响浏览与插入。Assets 面板的界面实现在 AssetsPanel.vue 与 AssetThumbnail.vue面板内的资源查找逻辑位于 assets-panel/page.ts。创建组件从 Frame 或 Group 创建选中一个 Frame 或 Group按下⌥⌘KWindows/Linux 为CtrlAltK选中内容即成为一个可复用组件。从源码看这一行为对应 create.ts 中的becomesComponent()判断export function becomesComponent(node: SceneNode): boolean { return node.type FRAME || node.type GROUP }Frame 和 Group 会被就地转换为组件与 Figma 的画布操作和插件 API 行为一致而不是套一层新的容器。从其他图层创建如果是任意其他图层或若干图层OpenPencil 会在这些图层的边界框处包裹一个新的白色组件位置取图层列表中顶层图层所在位置当只包裹单个图层时组件自动以该图层命名。这一规则同样在 componentWrapProps() 中有直接体现——包裹容器的属性取自newLayerDefaults(COMPONENT)白色背景的默认外观并在nodes.length 1时把组件名设为被包裹图层的名称。组件创建完成后画布上会显示一个紫色标签 菱形图标用于标识组件身份。组件集与变体Component Sets and Variants创建组件集选中两个及以上组件按下⇧⌘KWindows/Linux 为ShiftCtrlK即可合并为一个组件集——一个包含多个变体组件的容器外观为紫色虚线边框子元素四周带 20 px 内边距与 Figma 的呈现一致。通过脚本调用figma.combineAsVariants()创建的组件集则精确包裹其组件不附加额外边距与 Figma 插件 API 的行为一致。对应实现位于 figma-api/components.ts其中明确要求传入的必须是互不相同的COMPONENT节点combineAsVariants requires distinct COMPONENT nodes相关测试见 combine-variants.test.ts。多维变体与稀疏组合组件集中的每个组件可以跨多个变体维度variant dimensions定义取值例如SizeSmall、StateHover、ThemeDark。OpenPencil 支持稀疏组合sparse combinations——组件集无需包含所有可能的组合只定义实际用到的组合即可。组件集左上角的变体是默认变体。当更新后的修订中不再包含某个精确组合时系统会用左上角默认变体作为回退fallback呈现。管理变体维度通过组件属性面板可以添加、重命名、重新排序和删除变体维度及其取值重复的组合会被拒绝。变体模型、定义与历史管理的实现位于 editor/components/variants/ 目录definitions.ts、model.ts、history.ts。组件属性Component Properties组件和组件集支持四类可复用属性文本属性text——绑定到某个后代文本图层布尔可见性boolean visibility——控制图层的显示/隐藏实例替换instance-swap——允许实例替换为其他组件/组件集插槽属性slot——允许实例替换插槽内容。工作流为先将属性链接到某个后代字段descendant field然后选中实例即可直接编辑其分配值assigned value无需分离detach实例。这些属性及其分配值在保存并重新打开.fig文件后依然保留。插槽Slots插槽是主组件中的一个 Frame其内容允许每个实例各自替换。创建插槽在主组件内选中一个 Frame通过右键菜单或 Slots 区域的Create slot创建也可以选中其他图层将其包裹进一个新的插槽 Frame。插槽设置可以设置插槽的描述description、偏好使用的组件preferred components、以及容纳条目数量how many items it holds实例内容超出这些限制时会显示警告。实例内编辑在实例中可以添加、重排、删除插槽条目或重置为组件的原始内容。插槽的作者authoring与历史逻辑分别实现在 editor/components/slots/authoring.ts 与 editor/components/slots/history.ts插槽编辑的入口封装在 editor/components/slots/index.ts。行为与预览Behaviours and Preview行为behaviour让主组件或组件集像真实控件一样工作其基础是 Reka UI 的无头headless原语。OpenPencil 支持 15 种行为按面板中的展示顺序依次为Button按钮、Text field文本输入、Textarea多行文本、Number field数字输入、Toggle、Switch开关、Checkbox复选框、Radio单选、Radio group单选组、Toggle group切换组、Slider滑块、Progress进度条、Tabs标签页、Collapsible折叠面板、Accordion手风琴。这 15 种行为种类直接定义在 scene-graph/src/behaviours/kinds.ts 的BEHAVIOUR_KINDS常量中。选中组件后在Behaviour区域点击即可选择一种行为。行为的三类绑定行为不会新增任何节点类型而是描述如何复用组件已有的属性、插槽和变体。Behaviour 区域会列出控件需要的内容Values值——承载控件状态值的属性On / Checked / Pressed / Open / Filled / Disabled 这类布尔状态绑定到一个变体属性并指定哪些取值代表开/关或布尔属性字段类文本绑定到一个文本属性滑块的数值使用行为自身的 minimum、maximum、step、default因为 Figma 没有 number 类型的属性数字由行为自带的范围定义见 kinds.ts 中BehaviourValueType boolean | text | number | choice。Parts部件——绘制控件各部件part的插槽例如 Switch 的 thumb滑块、Slider 的 track/range/thumb、Tab list 的触发器列表组的 items 插槽则持有其 radio、toggle 或 collapsible 的实例。States状态——一个变体属性其取值分别绘制 default、hover、pressed、focus、disabled 五种交互状态与这些状态同名rest/hover/pressed/focus/disabled的取值会被自动匹配。交互状态的完整集合定义在 kinds.ts 的INTERACTION_STATES常量中。自动补齐缺失的绑定控件必需的行排在前面其余归入More options。当组件还没有可绑定的内容时某行会提供创建入口文本层 文本属性Off 和 On 变体一个插槽States提供Add state variants一键为组件添加 Default、Hover、Pressed、Focus、Disabled 五个变体。这里有两个值得注意的规则一个孤立的lone主组件通过这种方式获得变体后会自动转成组件集而组件集新增的插槽会出现在每个变体中。在控件尚未完全可用前其名称下方会有一行提示文字说明还缺什么点击即可跳到对应位置。预览把画布变成真实控件按⌥⌘↩Windows/Linux 为CtrlAltEnter或选择View → Preview或点击 Share 旁的 ▶ 按钮即可进入预览模式每个包含控件的顶层图层都会作为真实的 Reka UI 组件在画布上方实时运行外观由组件的变体绘制开关可拨动、滑块可拖拽、标签页和手风琴可开合、文本字段是带有浏览器光标/选区/粘贴能力的真实输入框预览永远不会修改文档或文档历史Reset将所有控件恢复为设计稿状态按Esc或点击胶囊按钮的关闭按钮返回编辑模式在分屏视图中每个画布各自独立预览。行为会随.fig文件保存并在发布组件库时随库组件一起发布。预览的底层机制预览机制的完整说明见开发文档 behaviours-and-preview.md其核心要点如下行为模型存储行为作为组件/组件集插件数据plugin data的behaviour字段存储属性与插槽按 id 绑定模型定义在open-pencil/scene-graphpackages/scene-graph/src/behaviours/含model.ts、schema.ts、spec.ts。其 role 为content因此会随库资源一起传输并计入更新哈希。预览岛islands预览是每个窗格的独立模式EditorViewState.play。Core 的playIslandRoots挑选页面中持有带行为实例的顶层图层渲染器在预览时跳过它们由PlayIslands为每个根挂载一个岛覆盖在画布当前平移缩放下。Shadow DOM 隔离每个岛渲染到自己的 shadow root 中——应用 CSS 不会渗入岛内 CSS 不会外泄应用已加载的字体生效岛随画布同一帧移动。状态投影resolvePlayState把岛的图层复制进一个私有图private graph按实例状态呈现匹配的变体、布尔属性与控件暴露的图层如 tab panels——文档本身不被修改。DOM 投影与 Reka 角色私有图经由open-pencil/dom-css投影到 DOM与 HTML 导出一致的管线每个图层获得一个角色根、部件、组条目、tab 触发器/面板、文本输入等由behaviourControls与controlRoles分配随后用asChild把图层包进对应的 Reka UI 原语从而复用浏览器的输入、焦点、键盘导航与无障碍能力。代码导出同源导出读取与预览相同的模型——behaviourArgs把 on/off 变体属性映射为checked/pressed/open/disabledpropsstateStyles把变体集合并为单一标记树rest 变体为基座其余变体按data-state、:hover等条件生成规则stateStylesToCSS/stateStylesToTailwind分别输出可读类名的样式表或 Tailwind 工具类。组件库Component Libraries组件库以**不可变修订immutable revision**方式发布可复用组件。每个已发布的资源具有稳定的 library、asset、revision 三重身份标识因此不同实例可以停留在不同修订上直到你显式更新它们。发布库创建要共享的组件和组件集打开Assets选择Manage libraries选择Publish library输入稳定的库 IDlibrary ID与显示名称——库 ID 在首次发布后即被锁定不可更改可选搜索变更列表并输入修订描述revision description勾选要包含的已新增、已修改、已重命名或已移除的资源确认目标位置并选择Publish library。在后续发布中未勾选的变更保持待处理pending状态未变化的资源保留其此前发布的定义已被移除的定义在文档仍引用其历史修订时依然可用。启用并插入库资源打开Assets → Manage libraries启用已发布的库其组件会与本地组件一同出现在 Assets 面板中同样通过点击、键盘或拖拽插入画布。已发布定义在消费文档中是只读的。要修改定义需编辑源文档并发布另一个修订链接到这些定义的实例仍可通过组件属性和覆盖overrides编辑。审查并接受更新打开Manage libraries → Updates可发现更新的修订。发现discovery过程不会修改文档。你可以并排对比当前与更新后的实例、在受影响的实例间导航然后选择更新范围选中的实例某个资源的全部实例当前页上的实例所有页面上的实例。OpenPencil 会保留兼容的文本、可见性与实例替换分配。若精确变体已不存在审查界面会在你接受前指出左上角回退变体。应用更新会创建一个撤销条目undo entry。本地、存储与离线使用库可以使用本地浏览器目录local browser catalog或配置的存储提供方storage provider。远端发布使用不可变修订对象 条件最新指针conditional latest pointer防止两位发布者互相静默覆盖。已下载的修订会缓存在本地文档离线时依然可以渲染和插入已下载的定义完整性校验失败会如实报告而不会被缓存数据掩盖。保存消费文档已启用库的绑定bindings与物化定义materialized definitions随.fig文档保存。重新打开消费文件时即使其远端库不可用链接的实例与修订身份也会完整保留。创建实例Creating Instances右键点击组件从右键菜单中选择Create instance实例即出现在源组件右侧40 px处视觉上与源组件完全一致。这一 40 px 偏移在 instances.ts 的defaultInstancePlacement()中有直接实现——新实例的世界坐标取bounds.x bounds.width 40即源组件包围盒右侧偏移 40 px再转换到父级局部坐标系。需要注意实例创建只能通过右键菜单完成没有对应的工具栏按钮。分离实例Detaching an Instance选中实例按⌥⌘BWindows/Linux 为CtrlAltB将其分离。分离后实例变成一个普通 Frame与源组件不再有任何链接所有覆盖overrides被烘焙baked in进图层。转到主组件Go to Main Component右键点击实例选择Go to main component。编辑器会导航到主组件并选中它必要时自动切换页面。实时同步Live Sync编辑组件时其所有实例自动更新。同步的属性包括宽与高width and height填充、描边与效果fills, strokes, and effects不透明度与圆角opacity and corner radii布局属性自动布局设置内容裁剪设置clips content setting同步在组件内的节点更新、移动和缩放后自动触发。其核心实现位于 editor/component-sync.ts其中componentSyncOrder()负责计算受同步影响组件的传播顺序保证同步按依赖拓扑正确执行对应的行为测试覆盖见 component-sync.test.ts 与 page-instance-sync.test.ts。覆盖Overrides实例可以覆盖特定属性而不破坏同步链接。某个属性在实例上被覆盖后同步时该属性会被跳过——其余属性仍继续跟随主组件更新。可覆盖的属性子层级child-level覆盖支持名称、文本、字号、字重、字体族以及全部视觉与布局属性填充、描边、效果、不透明度、圆角、尺寸。新子级New Children当组件新增一个子级时所有既有实例自动获得该子级的一个克隆副本实例中的子级顺序始终与组件保持一致。命中测试Hit Testing组件与实例是不透明容器——单击其子级选中的是组件/实例本身而不是子级。双击可进入组件内部并选中其子级。视觉处理Visual Treatment元素外观组件标签紫色 菱形图标始终可见实例标签紫色 菱形图标始终可见组件集边框紫色虚线轮廓快捷键速查Keyboard Shortcuts操作MacWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK分离实例⌥⌘BCtrlAltB预览⌥⌘↩CtrlAltEnter实战提示Tips实例内编辑文本会创建覆盖——之后组件内容变化不会覆盖这段文本这是设计系统中最常用的局部差异化手段用组件集组织多维变体尺寸、状态、主题等例如Size、State、Theme三个维度组合成按钮矩阵可复用资源应从其源文档发布已发布定义在消费文档中是有意只读的修改需回到源文档再发布新修订当某次修订移除了某个精确变体组合时先审查再接受更新确认左上角回退变体符合预期应用更新会创建撤销条目但审慎仍优于事后回退需要离线继续工作的团队应提前确保所需库修订已下载——缓存机制保证离线时仍可渲染和插入关于组件相关的全部右键菜单动作可参阅 Context Menu行为与预览的架构细节可深入 behaviours-and-preview.md。延伸阅读行为种类与交互状态的完整定义scene-graph/src/behaviours/kinds.ts行为模型、预览岛与代码导出架构behaviours-and-preview.md组件创建/包裹规则实现editor/components/create.ts实例放置与创建实现editor/components/instances.ts实时同步实现editor/component-sync.ts组件集合并combineAsVariants实现figma-api/components.ts行为 API 测试behaviours.test.ts变体合并测试combine-variants.test.ts赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流 OpenPencil开源 Figma 替代品、AI 原生设计编辑器的组件系统前端桌面应用AI 应用MCP 服务OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战 组件Components是 OpenPencil 中最核心的复用机制把一组设计元前端桌面应用AI 应用MCP 服务OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务上一篇CANN/asc-devkit浮点转无符号整型函数下一篇wger API文档版本控制管理不同健身接口版本的文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考