1.下载cursor
2.模式设置:
模型使用claude-3.7-sonnet的think模式
3.引导词模板:
我想要开发一个中高考英语口语考试的模拟考试系统,我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下的规范:
- 用户体验:先分析产品的主要功能和需求,确定下核心能力
- 产品规划:希望你作为一个20年的产品经理,来设计我们的整个产品,确保架构非常合理
- UI设计:作为30年的UI设计师,要保证符合目标人群的使用习惯,符合网页端的设计规范,使用比较现代化的UI元素,注重产品体验和视觉
- 输出:
请使用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最左边的文件栏中,再在聊天框左上角的@功能那里找到需要的文件