当前位置: 首页 > news >正文

使用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最左边的文件栏中,再在聊天框左上角的@功能那里找到需要的文件


http://www.mrgr.cn/news/98725.html

相关文章:

  • 概念实践极速入门 - 常用的设计模式 - 简单生活例子
  • Flutter:图片在弹窗外部的UI布局
  • 一文掌握RK3568开发板Android13挂载Windows共享目录
  • vue3获取defineOptions的值;vue3获取组件实例;vue3页面获取defineOptions的name
  • 分布式热点网络
  • AI大模型学习九:‌Sealos cloud+k8s云操作系统私有化一键安装脚本部署完美教程
  • 集群搭建Weblogic服务器!
  • 《Against The Achilles’ Heel: A Survey on Red Teaming for Generative Models》全文阅读
  • 红宝书第四十七讲:Node.js服务器框架解析:Express vs Koa 完全指南
  • 前端基础之《Vue(5)—组件基础(1)》
  • Kubernetes(K8S)内部功能总结
  • 猫咪如厕检测与分类识别系统系列【六】分类模型训练+混合检测分类+未知目标自动更新
  • 【Vue】从 MVC 到 MVVM:前端架构演变与 Vue 的实践之路
  • shell 编程之正则表达式与文本处理器
  • centos7停服yum更新kernel失败解决办法
  • C++中变量、函数存储、包括虚函数多态实现机制说明
  • Deno 统一 Node 和 npm,既是 JS 运行时,又是包管理器
  • chili3d调试笔记2+添加web ui按钮
  • 基础学习:(6)nanoGPT
  • 单片机基础知识-STM32