保姆级教程！教你用Cursor+Pencil 零基础搞定网页设计与开发

一、全文速览图

在设计与开发的日常工作中，我们常常需要在设计工具（如 Figma）和代码编辑器之间来回切换，不仅耗时，还容易出现设计与代码脱节的问题。而 Cursor IDE 搭配 Pencil 插件，就能完美解决这个痛点——无需切换软件，在一个编辑器内就能完成“设计→代码→预览”全流程，哪怕你是零基础，跟着这篇手把手教程，也能快速创建出属于自己的页面。

先简单科普下核心工具：Cursor IDE 是一款基于 VS Code 内核构建的独立 AI 原生代码编辑器，并非依附于其他软件的插件，它内置强大的 AI 模型，支持对话式编程，新手也能轻松驾驭；Pencil 是一款可嵌入 Cursor IDE 的设计插件，并非独立应用，它能通过自然语言指令生成结构化设计稿，且设计参数可直接同步给 Agent 生成代码，实现设计与开发的无缝衔接。

本文全程无复杂术语，每一步都附具体操作（含快捷键），适配 Windows、macOS 系统，跟着做就能成功创建第一个页面！

二、前期准备：搞定基础环境（5 分钟搞定）

在安装插件前，我们需要先准备好 Cursor IDE，确保环境正常，避免后续安装插件出现兼容问题。

1. 安装 Cursor IDE

① 打开浏览器，访问 Cursor 官方网站（ https://cursor.com/cn ），根据自己的操作系统（Windows/macOS）下载对应安装包，我下的是 windows 版本。

② 下载完成后，双击安装包，按照提示一步步完成安装（默认下一步即可，无需额外配置）。

③ 启动 Cursor IDE，首次打开会提示“Use Extensions from VS Code”（沿用 VS Code 插件）或“Skip and continue”（跳过继续），新手建议选择“Skip and continue”，避免多余插件干扰。

④ 完成登录：点击左下角用户图标，选择 Sign in with GitHub 或邮箱注册并登录，登录后才能启用 AI 功能，后续生成设计和代码都需要用到这一功能。

2. 验证 Cursor IDE 基础功能

登录后，按 Ctrl+N（Windows）/Cmd+N（macOS）新建一个空白文件，输入任意文字（如“测试”），保存为 .txt 格式，确认能正常保存和编辑，说明 Cursor IDE 环境已搭建完成。若出现无法保存的情况，检查软件权限，或重启 Cursor IDE 重试，若问题持续，可更新编辑器至最新版本。

三、安装 Pencil 插件（关键一步）

Pencil 插件是实现“设计生成”的核心，安装过程非常简单。

1. 打开 Cursor IDE，使用快捷键 Ctrl+Shift+X（Windows）/Cmd+Shift+X（macOS），或点击左侧活动栏的“拼图”图标，打开插件市场面板。
2. 在插件市场的搜索框中，输入“Pencil”（注意首字母大写，避免搜索到无关插件），找到官方发布的 Pencil 插件（可参考下面配图对应的图表进行查找）。
3. 点击插件卡片上的“Install”按钮，等待 1-2 分钟，插件会自动下载并安装，安装完成后，左侧边栏会出现一个“铅笔”图标，说明安装成功。
4. 重启 Cursor IDE（可选）：部分情况下，插件需要重启才能生效，若左侧未出现铅笔图标，关闭 Cursor IDE 再重新打开即可。

注意事项

千万不要去 Pencil 官网下载独立的桌面应用，否则会与 Cursor IDE 中的插件冲突，导致 MCP 连接失败，无法正常使用设计功能。若已安装独立应用，需先卸载，再重新安装插件；

四、使用 Cursor 的 Agent 功能自动生成 pencil 页面

安装好插件后，我们就可以在 Cursor IDE 内，用自然语言指令和 Cursor 的 Agent 进行对话 帮我们生成页面设计稿，无需手动拖拽，新手也能快速做出美观的界面。这一步是整个流程的核心，重点关注指令的描述，描述越详细，生成的设计稿越符合预期。

1. 在 Pencil 插件中新建文件

打开 Cursor IDE，点击左侧边栏的“铅笔”图标（Pencil 插件入口），进入插件界面。进入的时候会提示需要登录，可以去 pencil（ https://www.pencil.dev/ ）的官网进行注册，使用注册好的账号进行登录。

pencil插件在cursor页面的状态

pencil官网

pencil插件在使用时需要登录对应的pencil账号

② 点击插件界面中的“New .pen file”，创建一个新的设计画布（.pen 是 Pencil 设计文件的专属格式，可直接存储在代码仓库中，支持版本控制），此时会弹出一个无限画布，初始包含一个白色矩形（可删除）。

③ 给设计文件命名：点击画布顶部的“Untitled.pen”，修改为容易识别的名称（如“pencil-new.pen”），方便后续在 Cursor IDE 中查找和管理。

2. 用自然语言生成设计稿（关键操作）

我们需要在 Cursor 中，用文字描述想要的页面效果，就会自动在 Pencil 对应的画布上生成对应的设计元素，无需任何设计基础。

① 在 Cursor 的 New chat 对话框中，输入你的页面需求（描述越详细，生成效果越好，请选择 gpt 或 claude 模型，目前 pencil 仅支持这两类模型），示例指令（可直接复制修改）：

“在 pencil-new.pen 中帮我设计一个简单的个人主页，背景色为浅灰色 #f5f5f5，顶部有一个白色导航栏，导航栏左侧有文字‘我的主页’，右侧有 2 个按钮（‘关于我’、‘联系我’）；中间是主体区域，显示一张圆形头像、姓名‘张三’、简介‘零基础学习 Cursor+Pencil’；底部是版权信息‘©2026 我的主页 版权所有’，整体风格简洁、干净，适配 PC 端。”

② 输入完成后，点击输入框右侧的“ 发送按钮 ↑，等待 30 秒-1分钟，会自动在画布上绘制出完整的设计稿，包括所有元素的位置、颜色、字体等，且会自动提取关键设计参数（如颜色值、圆角、间距等）

等待生成页面

如图，已经在pencil画布中生成对应的页面

③ 此时生成的页面在 pencil 插件中已经可以正常编辑，页面生成相对简单，我们可以使用其他的 AI 工具如豆包，帮我们优化提示词，再次生成。

生成更丰富的个人主页（以UX设计师个人主页为例）

3. 保存设计稿（如需后续复用）

设计稿调整完成后，按 Ctrl+S（Windows）/Cmd+S（macOS）保存文件，.pen 格式会自动保存所有设计参数和元素，后续可在 Cursor IDE 中随时打开修改。

五、将设计稿转化为可运行页面代码

继续在 Agent 中进行对话，使用自然语言进行描述，让它自动搭建本地部署的页面。提示词如下：

“请帮我将 pencil 中的页面进行代码转化，可以在本地部署，可使用 VUE 或者 React 框架，使用 Node.js 的服务”

点击右下角本地部署的网页链接（ http://localhost:3000 ）进行查看：

六、避坑指南（必看）

本次在实际操作过程中，我遇到 Cursor 报错，pencil 设计文件无法生成：
错误提示如下：

Request ID: be6fb39f-3489-4be7-bf13-21dfedd09b75
{"error":"ERROR_OPENAI","details":{"title":"Unable to reach the model provider","detail":"Error: EPERM: operation not permitted, mkdir 'tmp'","additionalInfo":{},"buttons":[],"planChoices":[]},"isExpected":true}

在豆包的指导下：

1. 我重新卸载安装 Cursor，使用管理员权限开启 Cursor 并且按照豆包的指导：
2. 打开 Cursor 设置 JSON（Ctrl+Shift+P → Open Settings (JSON)）

在大括号中增加代码如下：

{
"files.tmpDir": "C:/cursor_tmp",
"terminal.integrated.env.windows": {
"TMP": "C:/cursor_tmp",
"TEMP": "C:/cursor_tmp"
},
"ai.tmpDir": "C:/cursor_tmp",
"pencil.tmpDir": "C:/cursor_tmp"
}

经过多次尝试，才成功创建 pencil 文件，进行后续操作，此过程花费我较多时间，写在这里，给大家避坑。

如遇类似问题，可复制对应的错误输入给到豆包，按照豆包的步骤一步一步操作，多尝试几遍。

总结：4 步快速创建页面，新手也能轻松上手

用 Cursor IDE+Pencil 插件创建页面，全程无需切换软件、无需依赖 VS Code、无需手动编写复杂代码，核心流程只需 3 步：

1. 准备环境：安装 Cursor IDE 并登录，确保环境正常；
2. 设计页面：在 Cursor IDE 内安装 Pencil 插件，在 Agent 中用自然语言生成设计稿并优化；
3. 生成代码：Cursor 的 Agent 自动将设计稿转化为可运行代码，本地部署，在浏览器中预览。

这套组合的优势在于“无缝衔接”，打破了设计与开发的壁垒，且全程基于独立的 Cursor IDE 操作，无需依赖其他软件，无论是新手练手、快速制作原型，还是专业开发者提升效率，都非常实用。而且 Pencil 生成的设计文件和代码完全兼容版本控制，可团队协作使用，进一步提升工作效率。

现在，打开你的 Cursor IDE，跟着教程操作一遍，相信你很快就能创建出自己的第一个页面！如果在操作中遇到其他问题，可使用你熟悉的 AI 工具进行解答，或在评论区留言交流～