你是否设想过，只用一句自然语言描述，就能生成一个完整的产品原型界面，甚至能一键导出为可运行的前端代码？现在，通过结合 AI 设计工具 Pencil 和编程助手 Claude Code，这个工作流已经可以轻松实现。本文将带你从零开始，完成从自然语言描述到可运行 React 项目的全流程实战。
一、 工具简介与配置
Pencil 就像是 Figma 中的 Make Design 功能，它允许你通过 AI 和自然语言来绘制产品原型。它不仅可以与主流设计工具互操作，还能无缝对接 Claude Code 等 AI 编程工具，形成从设计到代码的快速闭环。
Pencil 有几个关键特性值得关注：
- 文件格式：Pencil 的文件格式是
.pen，其本质是结构化 JSON，因此非常适合放入 Git 等版本控制系统中进行管理和协同。
- 兼容性：Pencil 生成的设计文件可以直接导入到 Figma 中，方便后续的精细调整或团队协作。
- 代码生成：Pencil 可以直接将设计稿导出为前端代码（通过
File -> Export Design to Code Guide 功能）。
下载安装后，需要使用邮箱注册一个账号。之后，关键的步骤是配置驱动设计的 AI 大模型 Agent。你可以选择使用 Pencil 账户直接登录，也可以填入如 Claude 等第三方模型的 API Key 进行配置。
安装 Pencil 桌面应用后，它会自动在 Claude Code 中安装对应的 MCP (Model Context Protocol) 服务。你可以在 Claude Code 中通过 /mcp 命令进行管理，确保连接状态正常。
完成大模型 Agent 的配置后，你就可以在 Pencil 中使用自然语言生成原型了。操作很简单：File -> New File 创建一个新文件，然后在界面中输入你的设计需求。
二、 实战：从描述到可运行应用
除了在 Pencil 软件内直接与 AI 对话，你还可以在任何支持 MCP 的工具中使用 Pencil 的功能。以下演示在 Claude Code CLI 中直接驱动的完整流程。
步骤1：用自然语言设计原型
在 Claude Code 的终端中，你可以直接对连接的 Pencil 服务下达指令。例如，输入：“使用pencil绘制一个手机端登录页面”。
AI 会理解你的需求，并自动调用 Pencil 的 MCP 工具来获取当前画布状态、移动端设计规范以及可用的风格指南，然后开始创作。
你还可以提出更复杂的需求，比如：“设计一个短视频App，包含登录页面、首页、我的页面”。AI 会规划画布空间，并逐一设计每个页面。
步骤2：一键生成前端项目代码
设计稿完成后，生成代码只需要一句提示词。例如，在 Claude Code 中输入：“使用Pencil导出选中的页面代码，生成一个完整的React项目代码”。
AI 会开始工作，最终生成一个完整的、技术栈现代化的 React 项目。从下图的输出可以看到，项目使用了 React 19、TypeScript 5.7、Vite 6.0 以及 React Router 7.1，并且包含了登录页、首页和个人主页等多个页面组件。
步骤3：自动安装依赖与启动
更强大的是，这个工作流不仅能生成代码，还会自动为项目安装依赖、进行 TypeScript 类型检查，甚至完成生产构建的验证。一切就绪后，它会给出启动命令。
项目代码结构清晰，完全遵循了 React 和 TypeScript 的最佳实践，CSS 样式也与 Pencil 中的设计稿保持了一致。
步骤4：运行并查看效果
按照提示，进入项目目录并运行开发服务器。
cd Desktop/shanying-app
npm run dev
访问 http://localhost:5173/preview 可以同时预览所有生成的页面。可以看到，最终的页面效果与 Pencil 中的设计稿在颜色、间距、圆角、字体等细节上完全一致。
生成的短视频App首页效果：
生成的个人主页效果：
至此，我们成功实现了一条龙式的开发体验：从一句自然语言描述开始，到生成高保真原型，再到输出可运行、高质量的前端项目代码。如果你对React和前端开发有更深入的学习需求，可以前往云栈社区的相关板块探索更多资源。
三、 Pencil MCP API 概览
Pencil 通过 MCP 暴露了丰富的 API，共 14 个，可将其分为 5 大类，方便开发者精细控制设计流程：
- 查询类 (了解当前状态)
get_editor_state: 获取当前选中元素的信息，允许你选中某个组件后用语言指令修改它。get_screenshot: 截图以验证设计效果。
- 读取类 (理解设计稿)
batch_get: 批量搜索画布上的节点。get_variables: 获取设计中使用的变量（如颜色、字体变量）。
- 修改类 (改设计稿)
batch_design: 核心API，用于批量增删改画布节点。set_variables: 设置设计变量。
- 批量操作类 (全局修改)
replace_all_matching_properties: 批量替换属性，例如实现全局换肤。
- 辅助类 (设计灵感)
get_guidelines: 获取设计规范（如移动端设计规范）。get_style_guide: 获取风格指南，为AI提供设计灵感。
四、 进阶工具：find-skills 与社区技能
为了进一步提升设计质量和代码生成效果，你可以利用 find-skills 这个工具来搜索和安装社区开发的技能(Skill)。
首先，安装 find-skills 技能：
npx skills add https://github.com/vercel-labs/skills --skill find-skills
安装后，你可以使用它来搜索或管理技能：
npx skills find [query] # 搜索技能
npx skills add # 安装技能
npx skills check # 检查更新
npx skills update # 更新所有技能
例如，搜索与 pencil-design 相关的技能：
有两个技能特别有用：
- pencil-design: 能帮你生成更优质的设计提示词，并调用 Pencil MCP 创建设计稿。
- ui-skills: 可以把设计稿导出成代码，它会读取设计稿节点，并按照 Tailwind CSS + shadcn/ui 的规范生成高质量的 React 组件代码。
这些社区技能能帮助缺乏设计经验或想快速应用流行 UI 库的开发者，生成更美观、专业的页面。
五、 总结与最佳工作流
基于以上实践，我们可以梳理出一个高效的 AI 驱动设计与开发工作流：
- 设计界面：在 Pencil 中用自然语言描述生成界面，或使用 AI 辅助调整。
- 导出代码：通过 Pencil 的 MCP 功能，一键将设计稿导出为前端项目代码。
- 运行验证：启动生成的项目，在浏览器中查看实际效果。
- 迭代修改：需要调整时，可选择在 Pencil 中可视化修改，或回到 Claude Code 中用自然语言指令修改设计稿。
- 再次导出：修改完成后，重新导出代码，实现快速迭代。
- 版本管理：将
.pen 设计源文件用 Git 管理，记录每一次设计变更，实现设计与代码的版本同步。
这个工作流极大地压缩了从产品想法到前端可交互原型的时间，为人工智能在研发提效领域的应用提供了一个非常实用的范例。开发者可以将更多精力集中在业务逻辑和交互细节上，而将重复性的UI构建工作交给AI。
发表于 1 小时前
|
查看: 3|
回复: 0
