OpenPencil 开源:把提示词直接变成可编辑 UI 画布

 

   

     QUOTE     

     AI 设计工具正在从生成一张图,转向接管一条可编辑、可交付、可被 Agent 接力的设计工作流。      

   

     OpenPencil 开源:把提示词直接变成可编辑 UI 画布    

 

 

   — OpenPencil 项目主图      

     OpenPencil 值得看,原因在于它不是在传统设计工具旁边加一个聊天框,而是把画布、文件格式、MCP、CLI、并发 Agent Team 和代码导出放进同一个工作区。设计资产不再只是图片,而是 Agent 可以读取、修改、接力和导出的工程对象。     

     它的定位很清楚:开源 AI-native 矢量设计工具,支持 Concurrent Agent Teams、Design-as-Code、内置 MCP Server,并且可以把自然语言 prompt 直接写入实时无限画布。项目当前在 GitHub 有约4.5k Star,主语言是 Rust,采用 MIT License。     

     本文看点     

     

       

01

       

Prompt 到实时画布

     

     

       

02

       

MCP 与 CLI 自动化

     

     

       

03

       

Rust 重写后的工程价值

     

     

01

     

       

WORKFLOW

       

它真正想替代的不是画图,而是断裂的设计链路

     很多 AI 设计产品的问题是:生成效果看起来很炫,但产物很快断在一张静态图里。用户还要手动重画、重排、转代码、进 Git,Agent 也很难继续接手。        

     OpenPencil 想解决的是这条断裂链路:用户用自然语言描述页面,Orchestrator 按空间结构拆任务,多个 Agent 并行处理 Hero、Feature、Footer 等区域,生成过程流式写入无限画布,最后再进入多端代码导出。     

   

     OpenPencil 开源:把提示词直接变成可编辑 UI 画布

 

   — OpenPencil 功能架构图    

   

     「真正的变化在于:AI 不再只负责出一版效果,而是进入设计资产的生命周期。」    

   


 

   02       

CANVAS

       

核心能力:Prompt 直接进入画布

        OpenPencil 的第一层能力是 Prompt to Canvas。用户描述一个页面后,系统会把设计实时生成到无限画布上,并通过流式动画展示过程。它还支持 Vision input,也就是把截图或 mockup 作为参考,让 AI 按已有视觉方向生成或修改。     

   

     第二层能力是并发 Agent Team。它不是让一个模型从头写到尾,而是由 Orchestrator 按空间结构拆分任务,再让多个 Agent 同时处理不同区域。这对复杂落地页、后台界面和多模块页面尤其关键。    

   

     第三层能力是模型能力适配。OpenPencil 会根据模型层级自动调整 prompt、thinking mode 和 timeout:强模型拿完整提示和 thinking,标准模型关闭 thinking,小模型则使用更简化的嵌套 JSON prompt 来提高稳定性。     

   

     OpenPencil 开源:把提示词直接变成可编辑 UI 画布    

 

 

   — OpenPencil 工作流程图      


 

  03       

MCP AND CLI

让设计被 Agent 接管

        OpenPencil 内置 MCP Server,可以一键安装到 Claude Code、Codex、OpenCode、Kiro、Copilot CLIs。通过 MCP,外部 Agent 可以读取、创建和修改.op文件。     

   

     CLI 工具op则承担终端侧自动化入口。它既可以接收文件,也可以接收 stdin,还支持 batch design DSL。这让需求文档、Agent 编排、设计画布和代码导出之间不再完全靠人工复制粘贴。     

 

   

     .      .      .      bash    

   

     

op start

     

op start –headless –file design.op

     

op design @landing.txt

     

op import:figma design.fig

     

cat design.dsl | op design –

   

 

 

   


 

04

PRODUCT SURFACE

       

不只画布:设计系统、代码导出和 Git 集成

      

     1      

画布层:无限画布、缩放、智能对齐、吸附、图形、文字、Frame、布尔运算、图标和多页文档。

   

   

     2      

设计系统层:设计变量、多个主题轴、组件系统、CSS sync、可复用 UIKits 和.pen文件导入导出。

   

   

     3      

工程层:PNG、JPEG、WEBP、PDF 导出,以及 React、HTML、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native 等代码目标。

   

   

     4      

协作层:clone wizard、分支、pull/push、merge、冲突面板、内联 JSON 编辑和三方 diff。

     


05

RUST CORE

为什么要重写成 Rust

        OpenPencil 曾经有 TypeScript + Electron 编辑器,但该编辑器已停在v0.7.5,当前仓库已经是 Rust workspace 产品。    

   

     OpenPencil 开源:把提示词直接变成可编辑 UI 画布    

 

 

   — OpenPencil Rust 重写价值图   

   

     

55.5 MB

     

桌面端单二进制

   

   

     

2.18 MB

     

Web gzip 体积

   

   

     重写后的收益包括:桌面端不再捆绑浏览器引擎和 Node runtime,10,000-node live canvas 在嵌套 auto-layout 场景中可以写入、读取和快照布局,空闲 CPU 接近 0%;一次热路径修复还把 wheel-zoom CPU 从约 69% 降到接近 0%。     

     更重要的是,编辑器状态、渲染、MCP、CLI、AI providers、codegen、Figma import 和 Git integration 都在同一个 Rust workspace 中。对 AI-native 设计工具来说,这种一套核心跑多端的结构,比单纯把 Electron 换成 Rust 更关键。       


 

  06

 STACK

       

一个 Rust workspace 承担产品主体

   

PROJECT STRUCTURE

   

     核心在crates/:包括编辑器核心、UI、native host、web host、CLI、MCP、AI、orchestrator、codegen、Figma parser 和 Git integration。    

   

   

RENDERING

   

     渲染上,native 端使用skia-safe,浏览器端使用 CanvasKit WASM/WebGL2,UI 框架是 pure-Rust GPU-Skia UI frameworkjian    

   

07
     

       

ECOSYSTEM

       

它在 ZSeven-W 工具族里的位置

        OpenPencil 不是孤立项目。它和 ZSeven-W 的其他 AI-native Rust 工具组成了一套产品栈:Zode 是终端里的 AI-native coding assistant;agent-rs 是纯 Rust async runtime;jian 承担 UI framework;noema 则是 local-first、非向量的 coding agent memory system。    

   

     OpenPencil 开源:把提示词直接变成可编辑 UI 画布    

 

 

   — ZSeven-W AI-native 工具族   


   08

INSTALL

       

安装和开发入口

     .      .      .      bash    

   

     

brew tap zseven-w/openpencil

     

brew install –cask openpencil

     

brew install zseven-w/openpencil/op

     

bash scripts/start-web-rust.sh

     

cargo run -p op-host-desktop

   

 

 

   

     OpenPencil 更适合正在把 AI 引入设计与前端协作流程的团队,也适合想把设计资产纳入 Git、MCP 和 Agent 工作流的开发者。    

   

     

       

THE END

       

画布正在变成 Agent 的工作环境

  OpenPencil 最值得关注的地方,不是又一个开源设计工具,而是它对 AI 设计工具形态的重新定义。过去的设计工具以人操作画布为中心,AI 只是辅助输入;OpenPencil 则把.op 文件、MCP、CLI、Agent Team 和 codegen放进同一条链路,让画布成为 Agent 可以持续工作的对象。     

   

     如果这个方向跑通,未来的 UI 设计工具可能不再只是视觉稿编辑器,而会变成 Agent 的设计执行环境:需求进来,Agent 拆任务,上画布,用户审改,代码导出,Git 接管。    

     

       
       END        
     
   

     

       声明:本文由山行整理自:ZSeven-W/openpencil,如果对您有帮助,请帮忙点赞、关注、收藏,谢谢~      

     

       来源链接:https://github.com/ZSeven-W/openpencil      

     

       我是山行AI,持续关注 AI 工具链、Agent 工程和开源项目。如果你觉得今天这篇有收获,欢迎点赞、在看、转发三连,我们下篇见。       

© 版权声明
THE END
喜欢就支持一下吧
点赞200 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片