ARTICLE DETAIL

资讯详情

深耕商务建站与企业官网运营的一线实战洞察。

OpenPencil 快速上手:从浏览器试用到源码构建与 Tauri 桌面分发

OpenPencil 快速上手:从浏览器试用到源码构建与 Tauri 桌面分发 前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是一个 AI-native 的开源设计编辑器开源 Figma 替代品支持原生打开.fig文件、内置 AI 对话与 90 编辑工具并提供 CLI、MCP Server、JSX 渲染器与 Vue SDK 等完整的可编程自动化面。本文以官方 getting-started.md 为骨架结合仓库源码package.json、vite/server.ts、desktop/tauri.conf.json、src/app/shell/support/baseline.ts系统讲解零安装的浏览器试用、各平台桌面安装包与系统要求、Homebrew 一键安装、从源码构建开发环境、Tauri 桌面应用的分平台前置条件与最终打包分发。读完你可以在一台新机器上从零把 OpenPencil 跑起来并理解其浏览器基线策略与桌面打包的内部原理。在线试用无需安装的浏览器体验OpenPencil 完全运行在浏览器中无需任何安装步骤直接打开官方在线应用app.openpencil.dev即可开始设计。官方首页 packages/docs/index.md 将“Try Online”列为第一入口并说明这是一个免费、本地优先No account, no server, no internet required的设计工具文件存储在你的设备上不依赖云端账号。在线应用默认以「设计应用」形态运行如果你想在默认应用之上做二次开发可以转向可编程方向参考 Programmable 自动化说明 与 Vue SDK 文档。从文档结构看自动化面AI Chat、CLI、JSX Renderer、MCP Server、Vue SDK与编辑器 UI 共享同一套底层引擎——「编辑器里能点出来的操作脚本里就能写出来」这是 OpenPencil 与其他设计工具最本质的差异。桌面应用下载平台与安装包一览仓库在 GitHub Releases 页面发布各平台的预构建二进制本仓库为镜像同步仓库直接 clone 后自行构建亦可见后文。各平台对应安装包类型如下平台下载格式macOSApple Silicon.dmgaarch64macOSIntel.dmgx64Windowsx64.msi/.exeWindowsARM.msi/.exeLinuxx64.AppImage/.deb与 Web 版不同桌面应用渲染在系统的 WebView 中因此其最低支持版本取决于操作系统自带的浏览器引擎而不是应用自身详见下文“系统要求”。系统要求CanvasKit、WebGL 与浏览器基线OpenPencil 使用 CanvasKitSkia 的 WASM 构建在 WebGL 上完成渲染并依赖一批较新的 Web 平台特性因此对浏览器引擎有明确的最低版本要求。Web 应用支持Chrome 111 或更高、Edge 111 或更高、Firefox 128 或更高、Safari 16.4 或更高基于 Chromium 的浏览器如 Brave、Opera跟随其对应的 Chrome 版本。这些数字并非随口而定而是仓库中一份被严格执行的“浏览器基线”。在 src/app/shell/support/baseline.ts 中BROWSER_BASELINE被注释为“Minimum browser engines OpenPencil supports”它是 Vitebuild.target语法降级、启动支持门禁startup support gate和本文档系统要求的同一份单一事实来源single source。该文件同时说明了两个细节Firefox 被抬升到 128因为 Tailwind CSS 4 需要property而 Firefox 在该版本才支持Vite 只做语法降级、从不 polyfill API因此应用使用的每个运行时内置 API 都必须存在于这些版本中。为此仓库做了两层数据驱动校验TypeScriptlib固定为BASELINE_ECMASCRIPT_LIB ES2023更晚的内置 API如Promise.withResolvers直接构成类型错误同时用compat/compatbrowserslist MDN 兼容性数据拒绝这些引擎缺失的 Web API。桌面端因为渲染在系统 WebView 中最低版本取决于操作系统自带的引擎平台要求macOSmacOS 13 Ventura 或更高并安装当前 Safari 更新Safari 16.4 随 macOS 13.3 发布WindowsWindows 10 或更高自带 Microsoft Edge WebView2 Evergreen 运行时自动更新LinuxWebKitGTK 2.40 或更高webkit2gtk-4.1在启动时OpenPencil 会通过SUPPORT_SENTINELS支持哨兵逐项探测引擎能力例如WebAssembly、WebGL 2、structuredClone、Array.prototype.toSorted、String.prototype.isWellFormed、CSScolor-mix()与 CSSproperty通过missingSupportSentinels()汇总缺失项。当引擎过旧时应用显示的是“该更新什么”的提示页而不是空白窗口——这正是 baseline.ts 中哨兵机制在运行时的体现。如果你在满足要求的系统上仍然看到该提示可以使用提示页中的 “Report a problem” 链接它会把浏览器与引擎细节预填到问题反馈里。macOS 用户Homebrew 一键安装macOS 上最便捷的安装方式是官方 Homebrew caskbrew install --cask openpencil该命令安装官方 caskApple Silicon 与 Intel 双架构的签名应用。需要注意两点Homebrew 更新滞后cask 的更新经上游人工审核可能滞后于 GitHub Releases 上的最新版本若你需要 Homebrew 尚未收录的版本应改用官方发布页直接下载。CLI 需单独安装桌面 cask 不会安装 CLI如需要终端自动化能力另行执行npm install -g open-pencil/cli如果你之前使用过已归档的自定义 tap迁移方式为brew uninstall open-pencil/tap/open-pencil brew install --cask openpencil官方首页还提到桌面应用通过 Homebrew 安装后体积约 7 MB进一步印证了“轻量、本地优先”的定位。从源码构建环境准备与依赖安装如果你想阅读、修改或二次构建 OpenPencil本仓库即为可 clone 的源码镜像按以下步骤准备环境。前置条件Bun包管理器与运行时仓库package.json中packageManager固定为bun1.4.2Rust仅构建桌面应用时需要用于 Tauri 壳层与插件。拉取与安装依赖git clone https://gitcode.com/gh_mirrors/op/open-pencil.git cd open-pencil bun install仓库采用 Bun workspaces 组织package.json 中列出了核心工作区packages/scene-graph、packages/pen、packages/kiwiFigma 二进制编解码、packages/fig、packages/core、packages/dom-css、packages/vueVue SDK、packages/cli、packages/mcp、packages/harness以及文档站点packages/docs另有tools/下的若干工程化工具包。bun install会一次性完成所有工作区的依赖解析与安装。启动开发服务器bun run dev该命令本质是启动 Vite 开发服务器对应 package.json 中的dev: vite。编辑器随即在http://localhost:1420打开。端口 1420 在 vite/server.ts 中通过port: 1420, strictPort: true固定端口被占用时 Vite 不会自动换端口而是直接报错这是为了让 Tauri 的devUrl同为http://localhost:1420见 desktop/tauri.conf.json与前端开发服务器始终对齐。开发服务器自带 HMR并主动忽略desktop/、packages/cli/、packages/docs/、tests/等目录的变更监听WATCH_IGNORED避免文档与测试目录的改动触发不必要的重编译。常用脚本构建、检查、测试与文档仓库根目录的 package.json 集中定义了工程脚本下表为最常用的一组命令说明bun run dev开发服务器带 HMR端口 1420bun run build生产构建先构建各 packages再执行 lint 与 Vite 构建bun run check完整质量门禁Lintoxlint 类型检查tsgo 包检查 架构检查等bun run testE2E 视觉回归测试Playwrightbun run test:update重新生成截图基线--update-snapshotsbun run test:unit单元测试bun:testbun run docs:dev文档开发服务器bun run docs:build本地文档构建快速校验版bun run docs:build:production构建可部署文档包含 LLM 文件值得说明的是bun run check并非单一 lint而是一条长达十余步的质量流水线对应 package.json依次执行图标检查、包构建、oxlint、tsgo 类型检查、Vue 类型检查vue-tsc、原生测试类型检查、i18n locale 校验、文档检查、变更日志检查、包质量检查、依赖审计knip、密钥扫描、monorepo 校验sherif、架构检查steiger、类型形状测试与重复代码检测jscpd。若你只做日常改动可先跑bun run check的某几个子步骤如bun run lint、bun run typecheck以加速反馈。桌面应用Tauri分平台环境搭建桌面应用基于 Tauri 2 构建其 Rust 侧清单见 desktop/Cargo.toml应用名为open_pencil启用了tauri-plugin-updater、tauri-plugin-deep-link、tauri-plugin-single-instance、tauri-plugin-clipboard-manager、tauri-plugin-fs、tauri-plugin-shell、tauri-plugin-dialog等插件macOS 目标上还依赖security-framework、objc2-core-text等系统框架。开发桌面应用需要 Rust 及各平台专属前置条件。macOSxcode-select --install cargo install tauri-cli --version ^2 bun run tauri devWindows安装 Rustrustup并设置stable-msvc工具链rustup default stable-msvc安装 Visual Studio Build Tools勾选 “Desktop development with C” 工作负载Tauri 依赖 MSVC 链接器与 C 构建能力WebView2 已在 Windows 101803与 Windows 11 预装无需额外安装启动开发bun run tauri devLinuxDebian/Ubuntu 系安装系统依赖sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \ libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev然后同样执行bun run tauri dev注意包名中的webkit2gtk-4.1与“系统要求”一节中 Linux 需 WebKitGTK 2.40webkit2gtk-4.1完全对应——桌面应用实际运行于系统 WebView因此系统级 WebKitGTK 版本即应用的兼容性下限。开发流程背后的细节bun run tauri dev会先触发 Tauri 的beforeDevCommanddesktop/tauri.conf.json依次执行generate:icons --target desktop生成各平台图标、generate:tauri-menu生成应用菜单与bun run dev启动 Vite 开发服务器随后 Tauri 以devUrlhttp://localhost:1420加载前端并打开一个 1280×800 的应用窗口。桌面应用同时注册了openpencil://深链协议与.pen/.fig文件关联fileAssociationsmime 分别为application/x-pencil-pen与application/x-figma并配置了基于签名公钥的自动更新plugins.updater——这些能力共同构成“桌面即完整编辑器”的体验闭环。构建分发安装包开发调试完成后即可产出可分发的安装包bun run tauri build # 构建当前平台安装包 bun run tauri build --target universal-apple-darwin # macOS 通用Universal二进制tauri build会先执行beforeBuildCommand生成图标与菜单后执行bun run build完成前端生产构建再以frontendDist: ../dist为前端产物目录打包。仓库的 desktop/tauri.conf.json 中bundle.targets为all当前平台全格式并开启了createUpdaterArtifacts生成更新签名产物Linux 侧为.deb与.rpm提供了统一的桌面入口模板linux/main.desktopmacOS 侧设置了minimumSystemVersion: 13.0与 Developer ID 签名身份。各平台产物类型与官方发布页保持一致macOS 为.dmg、Windows 为.msi/.exe、Linux 为.AppImage/.deb。进一步探索自动化能力总览Programmable 说明覆盖 AI Chat、CLI、JSX Renderer、MCP Server、Vue SDK 与openpencil://URL schemeVue SDK 入门getting-started.md了解如何用与官方应用相同的 Vue SDK 构建自定义编辑器桌面配置全貌desktop/tauri.conf.json 与 desktop/Cargo.toml可对照调整窗口、打包与插件行为浏览器基线策略src/app/shell/support/baseline.ts理解“支持哪些浏览器”为何由一份常量统一驱动工程脚本全集package.json包含测试、lint、文档、原生测试等全部命令。从浏览器一键试用到各平台安装包与 Homebrew 安装再到源码构建、Tauri 分平台开发与最终打包OpenPencil 的整套上手路径清晰且完全开源。无论你只是想体验一个可编程的 Figma 替代品还是计划在其引擎之上构建自己的编辑工作流本文都已给出可立即执行的起点。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 快速上手从 Web 版、桌面安装到源码构建与 Tauri 打包OpenPencil 快速上手从 Web 版、桌面安装到源码构建与 Tauri 打包 OpenPencil 是一个 AI 原生的开源设计编辑器Open So前端桌面应用AI 应用MCP 服务OpenPencil 快速上手指南网页版、桌面安装与源码构建全流程OpenPencil 快速上手指南网页版、桌面安装与源码构建全流程 本指南以 packages/docs/es/getting started.md http前端桌面应用AI 应用MCP 服务AI-Research-SKILLs 长上下文扩展实战指南RoPE、YaRN、ALiBi 与位置插值全解析AI Research SKILLs 长上下文扩展实战指南RoPE、YaRN、ALiBi 与位置插值全解析 本指南是 AI Research SKILLs 仓AI 技能人工智能大模型深度学习上一篇Typst与LaTeX对比分析为何选择新一代排版系统下一篇3分钟上手模型管理GGUF/EXL3/Transformers格式全攻略创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表
PREV
查看更多资讯
NEXT
返回资讯列表