使用Cursor制作高保真原型图
视频详细演示了如何利用 AI 编程工具 Cursor 的 Agent 模式，通过 HTML 和 CSS 快速生成高保真原型图，并探讨了与传统设计流程的结合。
UP主: AI技术玩家 · 时长: 33:37 · 🔗 B站原视频
发布: 2025-03-06 · 收录: 2025-03-24
标签: Cursor · AI编程 · 原型设计 · UI/UX
Cursor 能做的不止写代码
Cursor 除了可以帮我们编写日常代码，其实还可以做很多事情。因为它集成了很多模型，只要是它支持的模型，我们都可以用上。比如 OpenAI 的相关模型、谷歌的 Gemini、DeepSeek、Claude 等模型都可以用。
我们还能用 Cursor 做什么？比如用它做 PPT，让它帮助做产品开发。
为什么要用 Cursor 做高保真原型
今天演示一下，如何使用 Cursor 帮助我们开发，或者帮助我们设计高保真的原型图。
之前我们做需求，可能直接有个需求就开始做，相当于没有提前把产品设计或者效果图输出出来，所以过程不是很可控。
按常规产品开发流程，一般需要先有产品设计，再由美工把产品效果输出，其中很重要的一步就是输出高保真的原型图，然后给到开发人员做对应开发。
今天就让 Cursor 帮我们自动输出高保真的原型图。
先用 Ask 模式：问清楚怎么实现
有些同学不太清楚怎么让 Cursor 做这个能力。Cursor 不是有三种模式：Agent、Ask、Editor。
我们可以先切到 Ask 模式：当你不太清楚怎么做时，直接问 Cursor，让它给你方案。
例如我问：我想使用 Cursor 创建高保真原型图，可以怎样实现？
模型选择 3.7 或 thinking 都行，先看它会给什么方案。它可能会说：
- 用 HTML/CSS 直接开发
- 结合现代前端框架
- 集成设计工具（Figma、Sketch）把设计转为代码
- 用 CSS 框架自动补全
- AI 生成 UI 代码，再根据需求调整优化
但我们这里的目标是做原型图，不想把事情搞复杂，所以不一定要上前端框架。更适合的方案是用最基础的前端技术：HTML + CSS（必要时加一点 JS）就能实现。
切到 Agent：把需求写清楚
有了思路后，我们切到 Agent（或 Edit 也可以）。核心是把需求写清楚：让它输出高保真原型图，并且按规范来。
我这里举例让它做一个「少儿学习单词」的 App 原型（iOS 风格）。
需求大概分几块：
-
用户体验与功能分析
先分析产品主要功能和需求，确定核心能力。 -
产品规划
让它以“20 年产品经理”的角度设计产品，保证架构合理。 -
UI 设计要求
让它以“30 年 UI 设计师”的角度，保证符合目标人群使用习惯，符合手机端（iOS）设计规范，用现代 UI 元素，注重产品体验和视觉。 -
输出技术栈
使用 HTML + Tailwind CSS 生成所有原型界面。
图标可以用开源组件，例如 Material Design、Ant Design，或者 Font Awesome，让效果更接近真实 App。
控制 token：拆分文件、分离样式与脚本
App 页面功能多，如果全部放一个页面，token 会很长，Cursor 容易截断，生成不完整或出错。
所以要明确告诉它：
-
按功能拆分文件，结构清晰
每个功能界面一个独立 HTML 文件，比如home.html、games.html、me.html等。 -
尽量用 Tailwind CSS
如果必须自定义样式，用独立的 CSS 文件，不要内嵌在 HTML 里，避免 HTML 文件过长。 -
用
index.html作为主入口
不直接写入所有界面代码。可以用iframe嵌套其它页面，这样代码分开，但查看时在一个入口页就能看到。 -
高保真外观
尽量模拟 iPhone 外观，比如 iPhone 15。需要图片可从 Unsplash、Pexels 获取。 -
尽可能降低页面 token
如果希望后面能顺畅转成 Figma 再编辑，也可以把这个要求写上。
生成后预览：效果基本可用，但图片可能 404
Cursor 会创建目录、生成页面和 CSS 文件。生成后可以直接预览，打开 index.html 或各页面看效果。
一般第一次效果就还可以，例如首页有“继续学习”“每日推荐单词”“单词库”“游戏”“进度”“我的”等页面框架都出来了。
但图片如果用的是 Unsplash 链接，可能会出现 404，这种就手动换一下图片链接即可。
入口页展示方式：跳转 vs 平铺网格
我原本希望在 index.html 里把所有页面平铺展示，方便一次性导出给 Figma 做二次设计。
但 Cursor 可能会做成点击跳转（例如从首页跳到单词库）。这种也能用，但如果你更想平铺展示，需要明确补一句：
- 希望在
index.html用网格（grid）形式平铺展示所有页面（用iframe或其他方式）。
另外注意：
- 有时它会把少量 CSS 写回 HTML 里；页面少还好，页面多时最好要求它把 CSS 独立出来。
- script 也最好拆成独立文件，内容多时更稳。
解决同质化：给参考图，让它按风格改
有同学会觉得生成的页面“同质化严重”，很多学习类 App 都长得差不多。
解决方式：
- 在一开始就明确颜色、风格要求；
- 或者找优秀设计作为参考，比如 Dribbble 上的作品截图，复制给 Cursor，并明确说：参考图片中的样式和配色进行修改。
注意要说清楚修改哪些页面。比如如果你只说“修改首页”，它可能只改 index.html，但你真正想改的是 home.html、games.html、me.html、progress.html、wordbank.html 等，就要把这些页面名都写出来。
导入 Figma 做二次编辑：先部署成 URL
很多把网页转 Figma 的插件需要 URL（不能直接上传一堆本地分散的 HTML 文件）。因此做法是先把项目部署到线上。
一个方式是用 Cloudflare Pages：
- 创建 Pages 项目
- 上传你的生成文件夹作为静态资源
- 部署后拿到可访问的 URL
然后在 Figma 里：
- 新建一个 Figma 文件
- 用插件（把 website 转成可编辑 Figma）输入 URL 导入
导入后可能出现字体不一致，这是因为本地/线上字体缺失或默认字体不同导致的，后续在 Figma 里再调。
导入的好处是元素层级会比较细，能精确到最小元素，产品/设计人员就可以很快把高保真原型搭出来，再做微调。
最终交付给开发：用图驱动实现
调整完成后，把图交给开发人员。开发按图实现即可：把图发给他，让他按这个效果去开发。
同样的方式，也可以让 Cursor 去做 PPT。