你有没有想过，如果有一个设计工具，能像Cursor写代码一样用AI来画图，那该多爽？
今天给大家介绍一个刚开源不久的项目——OpenPencil。它不是一个传统的设计软件加了个AI按钮，而是从第一行代码开始就为AI时代设计的矢量设计工具。
一句话总结：设计师的Cursor，画图界的Copilot。
一、为什么需要OpenPencil？
我们先聊聊痛点。
作为技术人，你一定遇到过这些场景：
- 产品经理丢过来一个需求，你得先画个线框图
- 给客户做方案，需要几张架构图撑场面
- 自己做Side Project，想要个像样的UI但请不起设计师
传统方案：
- Figma：功能强大但学习曲线陡峭，而且AI功能是后加的，不够原生
- Canva：模板多但自由度低，改个布局能把你逼疯
- PPT：别闹了，2026年了还用PPT画设计稿？
OpenPencil的思路完全不同：Design as Code——设计即代码。
二、OpenPencil是什么？
OpenPencil是一个开源的矢量设计工具，核心理念是”Design as Code”。
它的架构非常有意思：
- 渲染引擎：基于CanvasKit/Skia（就是Flutter用的那个），GPU加速的WASM渲染
- 状态管理：Zustand v5，和React生态深度整合
- AI框架：Vercel AI SDK v6，支持多Provider
- 代码生成：一套设计稿可以导出React、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose
这意味着什么？你画一个设计稿，它能直接生成各平台的代码。
三、AI能帮我们做什么？
这才是重点。
3.1 自然语言生成设计
在OpenPencil的AI聊天框里输入：
- “设计一个移动端登录页面，支持社交账号登录”
- “生成一个深色主题的Dashboard布局”
- “给我设计一个底部导航栏，5个Tab”
AI会直接在画布上生成对应的设计稿。不是给你一段代码让你复制粘贴，而是直接在画布上画出来。
3.2 智能修改
选中一个元素，告诉AI：
- “把这个按钮改成圆角”
- “背景色换成深蓝色渐变”
- “添加一个阴影效果”
AI会精准修改你选中的元素，不会影响其他部分。
3.3 多模型支持
OpenPencil支持接入多种AI模型：
- Claude（通过Claude Code）
- OpenAI（通过Codex CLI）
- 小米MiMo（国产模型，性价比高）
- OpenRouter（聚合75+模型）
- GitHub Copilot
你甚至可以同时连接多个模型，让它们”团队协作”。
四、安装部署
OpenPencil提供三种使用方式：
4.1 桌面版（推荐）
支持macOS、Windows、Linux：
`bash
# macOS
brew install openpencil
# Windows
scoop install openpencil
# Linux (AppImage)
# 从 GitHub Releases 下载
`
4.2 Web版（Docker）
`bash
# 用Podman运行
podman run -d –name openpencil
-p 3002:3000
ghcr.io/nicepkg/openpencil:latest
# 访问 http://localhost:3002
`
4.3 源码编译
`bash
git clone https://github.com/nicepkg/OpenPencil.git
cd OpenPencil
bun install
PORT=3002 bun –bun run dev
`
五、配置AI模型
安装完成后，需要配置AI模型才能使用AI功能。
5.1 进入设置
点击右上角的”Agents & MCP”按钮，进入设置面板。
5.2 添加Provider
点击”Add Provider”，选择你要使用的AI服务：
以小米MiMo为例：
- Provider: OpenAI Compatible
- Display Name: MiMo
- API Key: 你的MiMo API Key
- Model: mimo-v2.5-pro
- Base URL: https://token-plan-cn.xiaomimimo.com/v1
5.3 连接Agent
OpenPencil还支持连接外部Agent：
- Claude Code：直接连接Claude的编码能力
- OpenCode：支持75+模型提供商
- GitHub Copilot：微软的AI助手
六、核心功能体验
6.1 矢量绘图
OpenPencil的绘图功能完全对标Figma：
- 矩形、圆形、多边形、路径
- 布尔运算（并集、交集、差集）
- 自动布局（Auto Layout）
- 组件系统（Components）
- 设计变量（Design Variables）
6.2 代码生成
这是OpenPencil的杀手级功能。一套设计稿，一键生成多平台代码：
- React + Tailwind CSS
- Vue 3 + CSS
- Svelte + CSS
- Flutter/Dart
- SwiftUI
- Jetpack Compose
- React Native
生成的代码不是玩具级别的，而是可以直接用在生产环境的高质量代码。
6.3 MCP集成
OpenPencil内置MCP（Model Context Protocol）服务器，可以让外部AI工具直接操作设计稿：
`bash
# MCP服务器地址
http://localhost:3100/mcp
`
这意味着你可以用Claude Code、Cursor等工具直接通过MCP来操控设计稿。
七、与传统工具对比
| 特性 | OpenPencil | Figma | Sketch |
|---|
|——|———–|——-|——–|
| 开源 | MIT协议 | 闭源 | 闭源 |
|---|---|---|---|
| AI原生 | 从底层设计 | 后期添加 | 无 |
| 代码生成 | 7+平台 | 插件支持 | 有限 |
| 本地运行 | 支持 | 云端为主 | macOS only |
| MCP集成 | 原生支持 | 无 | 无 |
| 价格 | 免费 | $12-75/月 | $10/月 |
八、适合谁用？
- 全栈开发者：想快速出设计稿，不想学Figma
- 独立开发者：一个人做产品，需要快速出UI
- 技术团队：需要架构图、流程图、线框图
- AI爱好者：想体验AI+设计的未来
九、不足之处
说实话，OpenPencil目前还有些不足：
- 社区还比较小，遇到问题可能找不到答案
- 插件生态不如Figma丰富
- 某些高级功能还在开发中
- 文档相对简单
但作为一个刚开源不久的项目，能做到这个程度已经很厉害了。
十、我的使用建议
- 先从简单需求开始：别一上来就设计复杂的Dashboard，先画个登录页练手
- 善用AI对话：描述越具体，AI生成的设计越符合预期
- 结合代码生成：设计稿直接导出代码，省去手写UI的时间
- 关注更新：OpenPencil更新很频繁，经常有新功能
总结
OpenPencil代表了设计工具的未来方向：AI原生、代码驱动、开源开放。
它可能现在还不如Figma成熟，但它的发展速度和理念已经领先了一大步。就像Cursor改变了编程方式一样，OpenPencil有可能改变设计方式。
如果你是开发者，想快速出设计稿；如果你是设计师，想拥抱AI时代——OpenPencil值得一试。
项目地址：https://github.com/nicepkg/OpenPencil
你用过OpenPencil吗？或者你用什么工具做设计？欢迎在评论区分享你的经验！
发表回复