前端桌面應用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系統(tǒng)講解零安裝的瀏覽器試用、各平臺桌面安裝包與系統(tǒng)要求、Homebrew 一鍵安裝、從源碼構建開發(fā)環(huán)境、Tauri 桌面應用的分平臺前置條件與最終打包分發(fā)。讀完你可以在一臺新機器上從零把 OpenPencil 跑起來并理解其瀏覽器基線策略與桌面打包的內部原理。在線試用無需安裝的瀏覽器體驗OpenPencil 完全運行在瀏覽器中無需任何安裝步驟直接打開官方在線應用app.openpencil.dev即可開始設計。官方首頁 packages/docs/index.md 將“Try Online”列為第一入口并說明這是一個免費、本地優(yōu)先No account, no server, no internet required的設計工具文件存儲在你的設備上不依賴云端賬號。在線應用默認以「設計應用」形態(tài)運行如果你想在默認應用之上做二次開發(fā)可以轉向可編程方向參考 Programmable 自動化說明 與 Vue SDK 文檔。從文檔結構看自動化面AI Chat、CLI、JSX Renderer、MCP Server、Vue SDK與編輯器 UI 共享同一套底層引擎——「編輯器里能點出來的操作腳本里就能寫出來」這是 OpenPencil 與其他設計工具最本質的差異。桌面應用下載平臺與安裝包一覽倉庫在 GitHub Releases 頁面發(fā)布各平臺的預構建二進制本倉庫為鏡像同步倉庫直接 clone 后自行構建亦可見后文。各平臺對應安裝包類型如下平臺下載格式macOSApple Silicon.dmgaarch64macOSIntel.dmgx64Windowsx64.msi/.exeWindowsARM.msi/.exeLinuxx64.AppImage/.deb與 Web 版不同桌面應用渲染在系統(tǒng)的 WebView 中因此其最低支持版本取決于操作系統(tǒng)自帶的瀏覽器引擎而不是應用自身詳見下文“系統(tǒng)要求”。系統(tǒng)要求CanvasKit、WebGL 與瀏覽器基線OpenPencil 使用 CanvasKitSkia 的 WASM 構建在 WebGL 上完成渲染并依賴一批較新的 Web 平臺特性因此對瀏覽器引擎有明確的最低版本要求。Web 應用支持Chrome 111 或更高、Edge 111 或更高、Firefox 128 或更高、Safari 16.4 或更高基于 Chromium 的瀏覽器如 Brave、Opera跟隨其對應的 Chrome 版本。這些數(shù)字并非隨口而定而是倉庫中一份被嚴格執(zhí)行的“瀏覽器基線”。在 src/app/shell/support/baseline.ts 中BROWSER_BASELINE被注釋為“Minimum browser engines OpenPencil supports”它是 Vitebuild.target語法降級、啟動支持門禁startup support gate和本文檔系統(tǒng)要求的同一份單一事實來源single source。該文件同時說明了兩個細節(jié)Firefox 被抬升到 128因為 Tailwind CSS 4 需要property而 Firefox 在該版本才支持Vite 只做語法降級、從不 polyfill API因此應用使用的每個運行時內置 API 都必須存在于這些版本中。為此倉庫做了兩層數(shù)據(jù)驅動校驗TypeScriptlib固定為BASELINE_ECMASCRIPT_LIB ES2023更晚的內置 API如Promise.withResolvers直接構成類型錯誤同時用compat/compatbrowserslist MDN 兼容性數(shù)據(jù)拒絕這些引擎缺失的 Web API。桌面端因為渲染在系統(tǒng) WebView 中最低版本取決于操作系統(tǒng)自帶的引擎平臺要求macOSmacOS 13 Ventura 或更高并安裝當前 Safari 更新Safari 16.4 隨 macOS 13.3 發(fā)布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 中哨兵機制在運行時的體現(xiàn)。如果你在滿足要求的系統(tǒng)上仍然看到該提示可以使用提示頁中的 “Report a problem” 鏈接它會把瀏覽器與引擎細節(jié)預填到問題反饋里。macOS 用戶Homebrew 一鍵安裝macOS 上最便捷的安裝方式是官方 Homebrew caskbrew install --cask openpencil該命令安裝官方 caskApple Silicon 與 Intel 雙架構的簽名應用。需要注意兩點Homebrew 更新滯后cask 的更新經(jīng)上游人工審核可能滯后于 GitHub Releases 上的最新版本若你需要 Homebrew 尚未收錄的版本應改用官方發(fā)布頁直接下載。CLI 需單獨安裝桌面 cask 不會安裝 CLI如需要終端自動化能力另行執(zhí)行npm install -g open-pencil/cli如果你之前使用過已歸檔的自定義 tap遷移方式為brew uninstall open-pencil/tap/open-pencil brew install --cask openpencil官方首頁還提到桌面應用通過 Homebrew 安裝后體積約 7 MB進一步印證了“輕量、本地優(yōu)先”的定位。從源碼構建環(huán)境準備與依賴安裝如果你想閱讀、修改或二次構建 OpenPencil本倉庫即為可 clone 的源碼鏡像按以下步驟準備環(huán)境。前置條件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 中列出了核心工作區(qū)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會一次性完成所有工作區(qū)的依賴解析與安裝。啟動開發(fā)服務器bun run dev該命令本質是啟動 Vite 開發(fā)服務器對應 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與前端開發(fā)服務器始終對齊。開發(fā)服務器自帶 HMR并主動忽略desktop/、packages/cli/、packages/docs/、tests/等目錄的變更監(jiān)聽WATCH_IGNORED避免文檔與測試目錄的改動觸發(fā)不必要的重編譯。常用腳本構建、檢查、測試與文檔倉庫根目錄的 package.json 集中定義了工程腳本下表為最常用的一組命令說明bun run dev開發(fā)服務器帶 HMR端口 1420bun run build生產(chǎn)構建先構建各 packages再執(zhí)行 lint 與 Vite 構建bun run check完整質量門禁Lintoxlint 類型檢查tsgo 包檢查 架構檢查等bun run testE2E 視覺回歸測試Playwrightbun run test:update重新生成截圖基線--update-snapshotsbun run test:unit單元測試bun:testbun run docs:dev文檔開發(fā)服務器bun run docs:build本地文檔構建快速校驗版bun run docs:build:production構建可部署文檔包含 LLM 文件值得說明的是bun run check并非單一 lint而是一條長達十余步的質量流水線對應 package.json依次執(zhí)行圖標檢查、包構建、oxlint、tsgo 類型檢查、Vue 類型檢查vue-tsc、原生測試類型檢查、i18n locale 校驗、文檔檢查、變更日志檢查、包質量檢查、依賴審計knip、密鑰掃描、monorepo 校驗sherif、架構檢查steiger、類型形狀測試與重復代碼檢測jscpd。若你只做日常改動可先跑bun run check的某幾個子步驟如bun run lint、bun run typecheck以加速反饋。桌面應用Tauri分平臺環(huán)境搭建桌面應用基于 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等系統(tǒng)框架。開發(fā)桌面應用需要 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 預裝無需額外安裝啟動開發(fā)bun run tauri devLinuxDebian/Ubuntu 系安裝系統(tǒng)依賴sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \ libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev然后同樣執(zhí)行bun run tauri dev注意包名中的webkit2gtk-4.1與“系統(tǒng)要求”一節(jié)中 Linux 需 WebKitGTK 2.40webkit2gtk-4.1完全對應——桌面應用實際運行于系統(tǒng) WebView因此系統(tǒng)級 WebKitGTK 版本即應用的兼容性下限。開發(fā)流程背后的細節(jié)bun run tauri dev會先觸發(fā) Tauri 的beforeDevCommanddesktop/tauri.conf.json依次執(zhí)行generate:icons --target desktop生成各平臺圖標、generate:tauri-menu生成應用菜單與bun run dev啟動 Vite 開發(fā)服務器隨后 Tauri 以devUrlhttp://localhost:1420加載前端并打開一個 1280×800 的應用窗口。桌面應用同時注冊了openpencil://深鏈協(xié)議與.pen/.fig文件關聯(lián)fileAssociationsmime 分別為application/x-pencil-pen與application/x-figma并配置了基于簽名公鑰的自動更新plugins.updater——這些能力共同構成“桌面即完整編輯器”的體驗閉環(huán)。構建分發(fā)安裝包開發(fā)調試完成后即可產(chǎn)出可分發(fā)的安裝包bun run tauri build # 構建當前平臺安裝包 bun run tauri build --target universal-apple-darwin # macOS 通用Universal二進制tauri build會先執(zhí)行beforeBuildCommand生成圖標與菜單后執(zhí)行bun run build完成前端生產(chǎn)構建再以frontendDist: ../dist為前端產(chǎn)物目錄打包。倉庫的 desktop/tauri.conf.json 中bundle.targets為all當前平臺全格式并開啟了createUpdaterArtifacts生成更新簽名產(chǎn)物Linux 側為.deb與.rpm提供了統(tǒng)一的桌面入口模板linux/main.desktopmacOS 側設置了minimumSystemVersion: 13.0與 Developer ID 簽名身份。各平臺產(chǎn)物類型與官方發(fā)布頁保持一致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理解“支持哪些瀏覽器”為何由一份常量統(tǒng)一驅動工程腳本全集package.json包含測試、lint、文檔、原生測試等全部命令。從瀏覽器一鍵試用到各平臺安裝包與 Homebrew 安裝再到源碼構建、Tauri 分平臺開發(fā)與最終打包OpenPencil 的整套上手路徑清晰且完全開源。無論你只是想體驗一個可編程的 Figma 替代品還是計劃在其引擎之上構建自己的編輯工作流本文都已給出可立即執(zhí)行的起點。贊分享前端桌面應用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 快速上手指南網(wǎng)頁版、桌面安裝與源碼構建全流程OpenPencil 快速上手指南網(wǎng)頁版、桌面安裝與源碼構建全流程 本指南以 packages/docs/es/getting started.md http前端桌面應用AI 應用MCP 服務AI-Research-SKILLs 長上下文擴展實戰(zhàn)指南RoPE、YaRN、ALiBi 與位置插值全解析AI Research SKILLs 長上下文擴展實戰(zhàn)指南RoPE、YaRN、ALiBi 與位置插值全解析 本指南是 AI Research SKILLs 倉AI 技能人工智能大模型深度學習上一篇Typst與LaTeX對比分析為何選擇新一代排版系統(tǒng)下一篇3分鐘上手模型管理GGUF/EXL3/Transformers格式全攻略創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考