使用cursor进行原型图设计

1.下载cursor

2.模式设置：

模型使用claude-3.7-sonnet的think模式

3.引导词模板：

我想要开发一个中高考英语口语考试的模拟考试系统，我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下的规范：

1. 用户体验：先分析产品的主要功能和需求，确定下核心能力
2. 产品规划：希望你作为一个20年的产品经理，来设计我们的整个产品，确保架构非常合理
3. UI设计：作为30年的UI设计师，要保证符合目标人群的使用习惯，符合网页端的设计规范，使用比较现代化的UI元素，注重产品体验和视觉
4. 输出：

请使用HTML+Tailwind CSS来生成所有的原型图界面，可以使用FontAwesome来美化界面，接近真实的网页效果

请根据功能拆分代码文件，保持结构清晰，每个功能界面需要一个独立的HTML文件，比如home.html, exame.html, me.html等等

尽可能使用Tailwind CSS样式，如果需要自定义的话，请用独立的css文件，然后引入到html代码中来

用index.html作为主入口，不直接写入所有界面的代码，这里我们使用iframe的方式来嵌套其他页面，并将所有页面直接展示到index页面上

界面尽可能适配大部分网页界面的真实外观

页面里面需要使用的图片，可与从unslpash，pexeis获取图片

尽最大的可能降低页面的TOKEN

保证我们的代码页面最后能够很顺畅的转为figma文件进行二次编辑

4.提示词进一步改善

可进行产品设计参考的社区：dribbleDribbble - 发现世界顶级设计师和创意专业人士

可以在里面找到自己想参考的设计图，然后在想修改的网页的chat聊天框内将图片粘贴进去，并输入以下提示词：

      希望能够参考图片中的样式和颜色搭配，修改home exam me progress页面（列举需要修改的页面）

5.原型改善

搜索到相应的Figma插件Figma插件组件推荐-插件库安装- Figma 中文社区

在里面通过关键词（如：html）搜索到相应的插件---->点“open in"那个绿色按钮---->new一个figma file

6.部署生成的内容

cloudflare进行部署全球云平台 | Cloudflare 中国官网 | Cloudflare

7.部署完之后再将部署完的url传到figma插件中生成相应的原型图

8.cursor上传其他参考文档的方式：

A.图片可以直接点右下角"send"按钮旁边的图片标志上传

B.其他文件可以先复制到cursor最左边的文件栏中，再在聊天框左上角的@功能那里找到需要的文件