前端开发最近火了一个工具Pencil.dev，而且把"设计-开发断层"给解决了

Pencil 是什么？

Pencil 是一个能将你的设计稿（Figma）自动、快速地转化为高质量前端代码的工具。

它的核心定位是 设计到代码（Design to Code） 的桥梁，旨在解决设计师与前端开发者之间漫长且容易出错的“设计稿交付”与“代码实现”流程。Pencil 生成的不是静态的 HTML/CSS 图片，而是可以直接用于 React、Vue 等现代前端框架的、生产就绪的、可维护的组件代码。

该工具支持与多种IDE集成，如Cursor、VSCode、Trae等，只要是 VS Code fork 出来的 IDE 工具都无缝使用，它本质上就是 VS Code拓展生态。

官方网站

https://www.pencil.dev

Pencil.dev怎么用？

我用真实经历告诉你：
使用Pencil，不需要订阅官方正版Claude Code套餐。

使用Pencil，并不需要强制使用Claude Code，任何一个AI编程工具都可以。

无论是VS Code、Cursor、Google Antigravity、 Trae，全都可以。因为我上个标题已经说了，Pencil是一个的MCP工具，现如今那个编辑器不支持 MCP 工具？

安装Pencil Extension

下面以 VS Code为例, 在测试阶段还发现一件事，trae 的 vscode 版本太低，没法把 cc 的插件放做侧边栏

1：打开插件商店搜索Pencil安装

安装成功后，会出现以下界面，有个✏️的图标。他就是Pencil了

2：回到应用商城查看设置

你可以看到：当插件打开的时候，会自动为你所有的编程工具，安装Pencil MCP。

我们上文提到了，Pencil根本就支持全部的AI编程工具，原因就在于此。

3： 正常登录邮箱并完成注册

回看第一操作它是需要你注册登录邮箱的，你正常使用国内的邮箱登录即可。

它会发邮箱邀请码给到你输入的邮箱

4： 打开Claude Code IDE Extension

这一步主要检查一下，你本地的 claude code 有没有正常配置了 MCP 工具。

5： 开始使用 Pencil

1点击左上角的New .pen file
2会新建一个打开的空白画布
3白色的画布跟vscode 的暗黑风格不太搭，我建议可以删除掉

6： 开始使用 cc 生成界面

先使用一些简单的提示语，试试成色

提示词：

使用 pencil mcp , 在当前活跃的画布上，设计一个运维相关的 app 登录页，要求有指纹登录，账号登录，一键登录，手机验证登录。类似飞书的 b端简洁风格，ios 风格

不得不说，生成速度是贼快，比 figma 真的快多了，但是效果不是很好，没有完成做出我期待的样子，可能是提示词太过于简单了。

7： 结合ASCII 草图，看看生成效果。

提示词：

使用pencil MCP 工具,在当前活跃的画布上，重新调整界面，界面大概的风格类似 @ascii-ui-design/login/ios_login_20250112.txt

还原度还是很高的，连ASCII 草图的位置偏移了，它没有帮我扶正，得要靠自己扶正一下拖拖拽拽移动，或者再次对话让ai 居中。

下面我让 CC 总结一下它的工作流程如下：

用户提供了ASCII设计稿文件路径
我读取了ASCII设计稿了解设计要求
我获取了当前编辑器状态，了解活跃的画布
我读取了当前画布的内容，了解现有布局结构
我获取了设计指南（landing-page）以确保遵循设计规范
我获取了当前页面的截图，了解现有界面
我分析了当前界面
我使用batch_design工具重新设计界面
遇到语法错误（注释问题），我修正了
遇到属性问题（textColor vs fill），我修正了
遇到布局问题（内容被裁剪），我修正了
最终获取截图并验证设计效果

实在还原得太精准了！！！这就是惊喜啊，figma 都做不到这么精准的还原！！！