大家好，我是在做出海产品的良逍，马上过年了，年前再发个文章跟大家分享一下最近的新收获。

做网页、做 App 的时候，你有没有过这种感觉：

• 想做个好看的页面,但自己设计不行
• 找设计师太贵,找免费模板又不合适
• 好不容易搞定设计稿,还原成代码又是一堆问题

说实话,我以前做前端项目的时候，光是对着设计稿调样式就能调半天。间距差个 2px、颜色不太对、圆角忘了加……反反复复，烦死人了。

好消息是：现在有了 Pencil 这个 MCP，这些问题基本都能解决。

最近用它做了几个页面，发现真的挺香——从设计稿到代码，效率直接提升了好几倍。而且最关键的是，AI 帮你生成的设计稿质量还不错，代码还原度也很高。

这篇文章就来聊聊：Pencil 到底是什么、为什么值得用、以及怎么快速上手。

---

01. Pencil 是什么？用大白话说清楚

简单来说，Pencil 是一个能把设计和代码打通的工具。

以前的流程是这样的：

1. 在 Figma 里做设计稿
2. 设计师标注尺寸、颜色、间距
3. 开发照着设计稿一行一行写代码
4. 写完对比设计稿，发现还原度只有 70%-80%
5. 反复调整、沟通……

Pencil 的解决方案是：

你只要用自然语言描述需求（比如"帮我设计一个苹果风格的音乐播放器"），AI 就能直接在画布上生成设计稿，然后一键生成对应的代码（Next.js、Flutter、Vue 等都支持）。

而且神奇的是，你可以边设计边调整。比如：

• “紫色太多了，换点绿色”
• “间距再大一点”
• “参考一下这个网站的风格”

AI 会实时帮你调整设计和代码，完全不用你自己动手。

---

02. 为什么我觉得 Pencil 值得用？

1）效率真的高

传统方式做一个页面的设计稿，可能要 4-6 小时。
用 Pencil，20-40 分钟就能搞定。

而且代码还原度能到 98%+，基本不用再去调样式了。

我自己试了一下，做一个简单的 Landing Page，从设计到代码全部搞定，前后也就半小时。

2）设计质量稳定

以前让 AI 生成设计稿，经常会遇到这种问题：

• 配色不协调
• 间距乱七八糟
• 字体大小不统一

Pencil 背后有一套设计系统和审美标准，生成的设计稿质量比较稳定。虽然不一定完美，但至少不会太丑。

3）支持多种技术栈

不管你是做 Next.js、Flutter、Vue 还是 SwiftUI，Pencil 都能自动生成对应的代码。

这对于像我这种做多端开发的人来说，真的太方便了——一个设计稿，多个平台的代码全都有了。

---

03. 怎么安装和使用 Pencil？

下面分享一下我自己的安装和使用流程，应该是目前最简单的方式了。

第一步：安装 Pencil MCP

1. 直接在你的 IDE（VS Code、Cursor 等）里搜 “pencil”
2. 点击安装就行，不要去其他地方下载（避免下到盗版）

⚠️ 注意：直接在 IDE 里搜是最安全的方式。

---

第二步：让 AI 帮你配置

装好之后怎么配置呢？

说实话，我一开始也不太懂。后来发现最简单的办法就是：直接让 AI 帮你配。

打开你的 AI 编程助手（Claude Code 或 Codex），对它说：

我已经在这个 IDE 里面安装好了 "pencil" 这个 MCP 了，
请帮我配置一下，让我的 Claude Code、Codex、VS Code
都可以使用这个 MCP

然后等它帮你配置就行了。

---

第三步：开始用 Pencil 做设计

配置好之后，你会在 IDE 左侧看到一个铅笔图标，点击打开就是 Pencil 的画布。

然后在右侧的 AI 对话框里，告诉它你想要什么设计。

比如：

• “帮我设计一个苹果风格的音乐播放器”
• “做一个简洁的 Landing Page，主色调是蓝色”
• “参考这个网站的风格，帮我做个类似的”
  

AI 会在画布上生成设计稿。如果不满意，可以继续让它调整：

• “字体太小了，放大一点”
• “间距再大一些”
• “换个更柔和的颜色”

一直调到满意为止。

---

第四步：生成代码

设计稿搞定之后，就可以让 AI 帮你生成代码了。

你可以直接说：

• “帮我生成 Next.js 代码”
• “生成 Flutter 代码”
• “生成 Vue 3 代码”

AI 会根据你的设计稿，自动生成对应的代码。

实际效果：

---

04. 一些实际使用体验

用了几次之后，有几个感受分享一下：

1）描述需求要具体

刚开始我会说"帮我做个网站"，结果 AI 生成的东西完全不是我想要的。

后来发现，描述越具体，效果越好。

比如：

• ❌ 不好的描述：“帮我做个登录页面”
• ✅ 好的描述：“帮我做一个简洁的登录页面，顶部有 Logo，中间是邮箱和密码输入框，底部是登录按钮，风格参考苹果官网”

2）可以上传参考图

如果你看到某个网站的设计不错，可以截图上传给 AI，让它参考。

这样生成的设计稿会更接近你的预期。

3）迭代比一次到位更重要

不要想着一次就生成完美的设计，这不现实。

正确的方式是：先生成一个大概的，然后一点一点调。

每次只调一两个地方，比如"间距再大一点"“颜色再柔和一点”，这样效率最高。

4）代码质量还不错

我试了几次，生成的代码质量还挺高的：

• 代码结构清晰
• 样式还原度高（98%+）
• 响应式布局也做得不错

基本拿过来稍微改改就能用。

---

05. 需要注意的几个点

虽然 Pencil 很好用，但也有一些需要注意的地方：

1）审美还是要靠你自己

AI 可以帮你生成设计稿，但好不好看还是要你自己判断。

所以平时多看一些好的设计，提升一下审美，这样用 Pencil 的时候才能给出更好的指导。

推荐几个找设计参考的地方：

• Dribbble
• Mobbin（专门收集移动端 UI）
• 各种优秀网站的截图

2）复杂交互还是要自己写

Pencil 适合做静态页面和常规交互，但如果涉及到复杂的动画、手势等，还是需要自己写代码。

不过对于大部分场景来说，Pencil 已经够用了。

3）选对 AI 模型很重要

我试了几个模型，发现 Claude Opus 4.5 的视觉表现最好。

如果你用其他模型，生成的设计稿质量可能会差一些。

---

06. 效率对比数据

最后分享一组我自己实测的数据：

指标	传统方式	用 Pencil	效率提升
设计稿制作	4-6 小时	20-40 分钟	8 倍
代码还原度	70%-85%	98%+	纠错时间减少 90%
多端适配	需要重复开发	自动生成	节省 75% 时间

对我来说，最大的价值就是：把精力从"怎么实现"转移到"做什么功能"上。

---

07. 小结

Pencil 本质上就是把设计和开发打通了，让你可以用自然语言驱动整个流程。

如果你也在做前端开发、做自己的产品，强烈建议试试 Pencil：

✅ 效率提升明显：从设计到代码，时间缩短 8 倍
✅ 代码质量稳定：还原度 98%+，基本不用调样式
✅ 支持多技术栈：Next.js、Flutter、Vue 等都能用
✅ 自然语言驱动：用人话描述需求，AI 自动生成

最后，如果你也在做独立开发、AI 编程，欢迎聊聊：

• 你平时是怎么做设计的？
• 用过 Pencil 吗？效果怎么样？