Pencil.dev:AI 驱动的开发设计工具安装与使用指南
介绍 Pencil.dev 是一款代理驱动的 MCP 画布工具,旨在将设计过程嵌入编码环境。文章涵盖其核心理念、解决的设计开发断层问题、适用人群及环境要求。详细说明了在 VS Code 中安装扩展、注册账户及验证 MCP 配置的步骤。通过提示词生成界面和代码生成的实战案例,展示了从设计到生产代码的工作流。此外还介绍了 Figma 导入、设计规范、主题设置等功能,强调其在独立开发和全栈场景下的效率提升价值。

介绍 Pencil.dev 是一款代理驱动的 MCP 画布工具,旨在将设计过程嵌入编码环境。文章涵盖其核心理念、解决的设计开发断层问题、适用人群及环境要求。详细说明了在 VS Code 中安装扩展、注册账户及验证 MCP 配置的步骤。通过提示词生成界面和代码生成的实战案例,展示了从设计到生产代码的工作流。此外还介绍了 Figma 导入、设计规范、主题设置等功能,强调其在独立开发和全栈场景下的效率提升价值。


Pencil.dev 最近在开发者社区受到关注,被称为'程序员专属的 AI 设计画布'。它解决了'设计 - 开发'断层问题,将设计过程无缝嵌入编码环境。
Pencil.dev 是一款代理驱动的 MCP 画布工具,专为开发者设计,旨在将设计过程无缝嵌入编码环境中。它在 VS Code 中提供无限大画布,并直接集成 AI,设计完成后可一键转换为生产就绪的代码。
核心特性:
传统开发流程中存在明显的'设计 - 开发'断层:
Pencil.dev 通过以下方式解决这些问题:
Pencil.dev 特别适合以下开发者:
在开始之前,请确保你的环境满足以下条件:
重要提示:使用 Pencil 不需要订阅官方正版 Claude Code 套餐,任何支持 MCP 的 AI 编程工具都可以使用。

安装成功后,VS Code 侧边栏会出现一个✏️图标,这就是 Pencil 了。

回到扩展商城查看设置,你会发现:当插件打开时,会自动为你所有的编程工具安装 Pencil MCP。这意味着它不依赖于特定的 AI 编程工具,Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用。
# 关键点解释
# Pencil 通过 MCP(Model Context Protocol)与 AI 工具通信
# 这意味着它不依赖于特定的 AI 编程工具
# Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用

这一步主要检查你本地的 Claude Code 或其他 AI 工具是否正常配置了 MCP 工具。
在 Claude Code IDE 扩展中,你应该能看到 Pencil MCP 工具已经加载。如果一切正常,你就可以开始使用了。

删除操作很简单:选中中间的白色矩形,按 Delete 键删除即可。删除后画布会更清爽,更适合你的编码环境。

注意事项:
让我们先用一个简单的提示词试试 Pencil 的成色。
提示词示例
使用 pencil mcp,在当前活跃的画布上,设计一个运维相关的 app 登录页,要求有指纹登录、账号登录、一键登录、手机验证登录。类似飞书的 B 端简洁风格,iOS 风格。

Pencil.dev 最强大的功能之一是一键生成生产级代码。
提示词示例
请生成该登录界面的 html 代码,不要生成手机的状态栏。
结合上述案例,Pencil.dev 的完整工作流程如下:
这个流程彻底补上了传统开发流程中的'设计 - 开发'断层,实现了从构思到代码的无缝衔接。
除了上述核心功能,Pencil 还有更多玩法值得探索:
支持从 Figma 直接导入设计,保留向量、文本和样式。这意味着你可以无缝迁移现有设计资源。

Pencil 自带了多种设计规范和示例风格,可以直接使用或作为参考。这大大降低了设计门槛,即使没有设计背景的开发者也能快速产出专业级 UI。
可以整体设置设计的主题、颜色、字体等变量,实现设计系统的统一管理。这对于需要保持品牌一致性的项目特别有用。
和 Figma 一样,Pencil 也提供源码图层,方便查看和修改设计的底层结构。
可以打开预设组件库,使用这些预设组件进行快速设计。这类似于使用 UI 组件库开发,大大提高了设计效率。
注意事项:目前 Pencil 只能导入 Figma 源文件,还不能导出 Figma 格式,尚未实现完全的互联互通。
传统流程:
需求沟通 → Figma 设计 → 手动切图 → 手动编码 → 反复调整
Pencil.dev 流程:
AI 辅助设计 → 自动生成代码 → 版本控制 → 完成
新的流程步骤更少、效率更高、成本更低。
如果你是以下角色,Pencil.dev 绝对值得一试:
如果你已经在使用 frontend-design、ui-ux-pro-max 等 Skills,现在加上 Pencil,你的开发效率会再上一个台阶。
尝试将 Pencil.dev 整合到你的现有工作流中,你会发现:在 AI 时代,工具链的选择决定了你的生产力上限。


微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online