如何使用Cursor的claude-3.7模型来开发高保真的原型设计图,学会写好的提示词人人都是设计师

ops/2025/3/14 21:37:48/

1、想要开发出高保真的设计图原型,需要给出cursor具体的提示词:比如我想开发一款IT面试题小程序,给出的提示词是这样的

我想开发一个 {IT面试题库小程序},现在需要输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并使用这些原界面直接开发一个小程序:1、用户体验分析:先分析这个小程序的主要功能和用户需求,确定核心交互逻辑。2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。3、高保真 UI 设计:作为 UI 设计师,设计贴近真实小程序设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。4、HTML 原型实现:使用 HTML + Tailwind CSS (或 Bootstrap) 生成所有原型界面,并使用 FontAwesome (或其他开源 UI 组件) 让界更加精美、接近真实的 App 设计。拆分代码文件,保持结构清晰:5、每个界面应作为独立的 HTML 文件存放,例如 home.html、profile.html、settings.html 等。- index.html 作为主入口,不直接写入所有界面的 HTML 代码,而是使用 iframe 的方式嵌入这些 HTML 片段,并将所有页面直接平铺示在 index 页面中,而不是跳转链接。- 真实感增强:- 界面尺寸应模拟 iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。- 使用真实的 UI 图片,而非占位符图片 (可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。- 添加顶部状态栏 (模拟 iOS 状态栏),并包含小程序导航栏 (类似 iOS 底部 Tab Bar)。请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。

然后我什么都没有动,给出效果图如下:

生成的页面如下结构:

附上md文件:

# IT面试题库小程序这是一个使用HTML、CSS和JavaScript构建的IT面试题库高保真原型设计。该原型设计模拟了一个iOS风格的小程序,专注于IT面试题的收集、浏览和学习。## 功能概述- **首页**: 展示推荐题目、热门题目和最近学习记录
- **分类页**: 按技术领域分类展示题目
- **题库页**: 题目列表和详细信息
- **搜索页**: 搜索题目功能
- **收藏页**: 收藏的题目集合
- **个人中心**: 个人信息和学习统计
- **设置页**: 应用设置和偏好## 技术栈- HTML5
- CSS3 
- Tailwind CSS
- Font Awesome 图标库## 项目结构```
it-interview-app/
├── css/                # 样式文件
│   └── style.css       # 主样式文件
├── images/             # 图片资源
│   └── status-bar.svg  # 状态栏图片
├── pages/              # 页面文件
│   ├── home.html           # 首页
│   ├── categories.html     # 分类页
│   ├── questions.html      # 题库页
│   ├── question-detail.html# 题目详情页
│   ├── search.html         # 搜索页
│   ├── favorites.html      # 收藏页
│   ├── profile.html        # 个人中心页
│   └── settings.html       # 设置页
└── index.html          # 主入口文件(iframe容器)
```## 使用说明1. 克隆或下载本仓库
2. 打开 `index.html` 文件在浏览器中查看所有界面
3. 每个页面也可以单独打开查看## 设计特点- 模拟iPhone 15 Pro的界面尺寸和圆角
- 包含iOS状态栏和底部导航栏
- 使用现代化UI元素
- 遵循iOS设计规范的交互逻辑
- 高保真度UI组件## 预览使用 `index.html` 可以在一个页面中预览所有界面。## 开发该项目仅为原型设计,可以作为实际开发的参考。如果要进行实际开发,建议:1. 使用框架如React Native、Flutter或微信小程序框架
2. 添加后端API接口连接
3. 实现真实的数据交互功能## 许可MIT License 


http://www.ppmy.cn/ops/165482.html

相关文章

【DNS系列】使用TCP传输

DNS ​默认使用UDP协议​(端口53)进行通信,但在以下场景中会切换到TCP协议​(端口53): ​1. 响应数据过大(超过512字节)​ ​UDP限制:DNS的UDP协议默认限制单个数据包大…

基于Redis实现限流

限流尽可能在满足需求的情况下越简单越好! 1、基于Redsi的increment方法实现固定窗口限流 Redis的increment方法保证并发线程安全窗口尽可能越小越好(太大可能某一小段时间就打满请求剩下的都拿不到令牌了)这个原理其实就是用当前时间戳然后除窗口大小 在这个窗口大…

视频推拉流:EasyDSS平台直播通道重连转推失败原因排查与解决

视频推拉流EasyDSS视频直播点播平台,集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 用户使用EasyDSS平台对直播通道进行转推,发现只要关闭…

机器学习—赵卫东阅读笔记(一)

第一章:机器学习基础 1.1.2 机器学习主要流派 1.符号主义 2.贝叶斯分类——基础是贝叶斯定理 3.联结主义——源于神经学,主要算法是神经网络。——BP算法:作为一种监督学习算法,训练神经网络时通过不断反馈当前网络计算结果与…

vb编程有哪些相关的IDE开发工具vb.net,Basic语言?

在编程领域,VB 系列拥有丰富多样的 IDE 开发工具,为不同需求的开发者提供了广泛的选择,以下为你详细介绍: 兼容 VB6 源码的开发工具 twinbasic:属于 VB7 系列,它几乎能 100% 兼容 VB6 源码,这…

doris:ClickHouse

Deepseek R1 提供的 3D 迷宫设计方案是一个结合虚拟现实(VR)、增强现实(AR)和物理迷宫的创新项目,旨在为用户提供沉浸式体验。以下是该设计方案的详细讲解: 1. 设计目标 沉浸式体验:通过 3D 技…

鸿蒙ArkTs如何实现v-html的功能,显示富文本内容?

鸿蒙ArkTs如何实现v-html的功能,显示富文本内容? 先看效果前言功能介绍解决方案hp-richtext介绍hp-richtext 组件是如何实现的?下载安装代码示例richTextOption属性自定义 parser 函数具体介绍imageProp 对象具体属性 我在使用中遇到的问题问…

微信小程序-实现锚点跳转,页面加载后自动跳转、点击跳转到指定位置

一、页面加载后滚动到指定位置,onLoad或onReady里执行。 scrollAfterLoading() {const query wx.createSelectorQuery()query.select(#cont1).boundingClientRect()query.selectViewport().scrollOffset()query.exec(function (res) {wx.pageScrollTo({scrollTop:…