夜雨聆风
5分钟从设计到代码,这个工具让 AI 不再是看截图
如果你经常做前端开发，这个场景一定不陌生。
拿到了设计稿，外加一堆标注：”这个按钮离左边 20px，字体 14px，颜色 #3B82F6…”
你盯着设计稿，在代码里调了半天。
设计师看了一眼：”感觉不太对，间距好像不对。”
你：”…”
这就是传统设计-开发协作的日常。来回拉扯，效率全废。
截图 + 标注的困境
这个流程有三个坑。
第一个坑：信息丢失。
截图是图片，不是数据。AI 看到的是一堆像素，不知道这个按钮是按钮，那个框是输入框。你得一句句解释。
第二个坑：来回确认。
标注文档再详细，也不可能覆盖所有细节。按钮 hover 是什么颜色？移动端怎么适配？每次都要问设计师。
第三个坑：无法自动同步。
设计师改了一处颜色，你得手动找到对应代码改掉。
没有自动同步，只有人工同步。累。
现在有个新方案，能把这三个坑一起填了。
AI 不再看截图：MCP 协议的革命性变化
MCP（Model Context Protocol）是 Anthropic 推出的协议。它让 AI 可以直接”读取”结构化数据，而不是”看”图片。
什么意思？
传统方式：AI 看截图 → 猜测 → 可能猜错MCP 方式：AI 读文件 → 获取精确数据 → 不会错
Pencil 就是一个支持 MCP 协议的设计工具。当你在 Claude Code 里用 Pencil 时，AI 可以直接读取：
-
• 布局结构（flexbox、padding、gap） -
• 颜色值（精确的十六进制，不是”大概蓝色”） -
• 字体信息（大小、粗细、字体族） -
• 层级关系（谁在谁里面）
不是”看图猜”，是”读数据”。一字之差，效率翻倍。
Pencil 是什么？
一句话：Pencil 是给开发者用的设计工具（目前免费使用）
核心特点：
-
• 集成在 IDE 中：VS Code、Cursor 都能用，不用切窗口 -
• .pen 文件格式：JSON 文本，可以 Git 管理 -
• MCP 支持：让 Claude Code 直接读取设计数据 -
• 代码生成：从设计直接生成 React/Vue/HTML 代码 -
• 官网：https://www.pencil.dev
把设计工具搬到你的 IDE 里，让 AI 能直接”理解”你的设计。不用再导出截图、写标注文档。
安装配置：3 步搞定
1）安装 Pencil
两种方式：
方式一：VS Code / Cursor 扩展
打开扩展面板，搜 “Pencil”，点安装。完事。
方式二：桌面应用
去官网下载对应平台的安装包：
-
• macOS：.dmg 文件，拖到 Applications -
• Windows：直接安装 -
• Linux：.deb 或 .AppImage
2）安装 Claude Code CLI
AI 功能需要这个：
npm install -g @anthropic-ai/claude-code-cli装完运行 claude 命令，按提示登录。
3）配置 MCP
Pencil 会自动检测 Claude Code。你只需要：
-
1. 打开 Pencil，创建或打开一个 .pen 文件 -
2. 保持 Pencil 运行 -
3. 在项目目录打开终端，运行 claude
配置成功的话，你会在 Claude Code 里看到 Pencil 的 MCP 工具已就绪。
实战：用 Claude Code 设计一个登录页
来实际体验一下。
打开 Claude Code，在项目目录下运行：
claude然后输入类似这样的提示词：
在 Pencil 当前激活的画布上，设计一个登录页面：- 居中布局- 标题"登录"- 邮箱输入框- 密码输入框- 登录按钮- 简洁现代风格Claude 调用 MCP 工具，直接在 Pencil 画布上生成设计。
你可以在 Pencil 里看到实时变化：标题出现，输入框出现，按钮出现。整个过程不到 1 分钟。
比手动拖拽快多了。
AI 读到了什么？
关键点来了：AI 不是在”猜”你的设计。
通过 MCP，Claude 读到的是精确数据：
{ "type": "frame", "name": "Login Page", "layout": "vertical", "width": 400, "padding": 48, "gap": 24, "fill": "#FFFFFF", "cornerRadius": 12}这是登录页容器的数据。再看登录按钮：
{ "type": "frame", "name": "loginBtn", "width": "fill_container", "height": 44, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center"}AI 知道：
-
• 这是一个 frame（框架） -
• 宽度填满父容器 -
• 高度 44px -
• 背景 #3B82F6（蓝色） -
• 圆角 8px
不需要截图，不需要标注。数据就在那里。
从设计到代码：一键生成
设计完之后，让 Claude 直接生成代码。
在 Claude Code 里输入：
把这个登录页转换成 React + Tailwind CSS 代码Claude 基于读取到的设计数据，生成代码：
export default function LoginPage() { return ( <div className="flex min-h-screen items-center justify-center bg-gray-100"> <div className="w-[400px] rounded-xl border border-gray-200 bg-white p-12"> <h1 className="text-center text-2xl font-semibold text-gray-900">登录</h1> <p className="mt-2 text-center text-sm text-gray-500">请输入您的账号信息</p> <div className="mt-6 space-y-4"> <div> <label className="text-sm font-medium text-gray-700">邮箱</label> <input type="email" placeholder="example@email.com" className="mt-1 w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-sm" /> </div> <div> <label className="text-sm font-medium text-gray-700">密码</label> <input type="password" placeholder="••••••••" className="mt-1 w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-sm" /> </div> <button className="w-full rounded-lg bg-blue-500 py-3 text-base font-medium text-white hover:bg-blue-600"> 登录 </button> </div> </div> </div> );}注意：这个代码不是”猜”出来的。每个数值都来自设计文件：
-
• w-[400px]来自width: 400 -
• p-12来自padding: 48 -
• rounded-xl来自cornerRadius: 12 -
• bg-blue-500来自fill: #3B82F6
数据来源清晰，不用猜。
两个方向的工作流
Pencil 支持双向流转：
设计 → 代码
在 Pencil 里设计，让 Claude 生成代码。适合快速原型、新项目起步。
代码 → 设计
把现有代码导入 Pencil，在可视化界面里调整，再同步回代码。适合迭代优化。
两种方式交替用，形成设计-开发闭环。
这个工作流适合谁？
适合：
-
• 全栈工程师 / 独立开发者：一个人搞定设计和开发 -
• vibe coding 爱好者：用 AI 加速开发流程 -
• 小团队：减少设计师和开发者的沟通成本 -
• 快速原型：几分钟从想法到可视化界面
可能不太适合：
-
• 大型设计团队：Figma 的协作功能更成熟 -
• 复杂视觉设计：需要高级视觉效果的项目 -
• 精细像素级调整：Pencil 更偏”工程化”
总结
Pencil + Claude Code 的组合，解决了传统设计-开发协作的三个痛点：
-
1. 信息丢失 → MCP 直接读取结构化数据 -
2. 来回确认 → 设计即代码，不需要额外标注 -
3. 无法同步 → .pen 文件可以 Git 管理，双向流转
好了，如果觉得喜欢的话，还请点赞，分享加关注。万分感谢！