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

news2025/3/15 0:05:50

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.coloradmin.cn/o/2315140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AGI大模型(5):提示词工程

1 什么是提示词工程(Prompt) 所谓的提示词其实指的就是提供给模型的⼀个⽂本⽚段,⽤于指导模型⽣成特定的输出或回答。提示词的⽬的是为模型提供⼀个任务的上下⽂,以便模型能够更准确地理解⽤户的意图,并⽣成相关的回…

[LeetCode热门100题]|137,260,268,面试17.19

1、137 只出现一次数字|| 1、题目描述 137 只出现一次数字||https://leetcode.cn/problems/single-number-ii/description/ 给你一个整数数组 nums ,除某个元素仅出现 一次 外,其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你…

Android子线程更新View的方法原理

对于所有的Android开发者来说,“View的更新必须在UI线程中进行”是一项最基本常识。 如果不在UI线程中更新View,系统会抛出CalledFromWrongThreadException异常。那么有没有什么办法可以不在UI线程中更新View?答案当然是有的! 一…

Kafka常用指令(详细)

Kafka常用指令(详细) 启停命令 前台启动 前台启动命令 ./bin/kafka-server-start.sh config/server.properties 后台启动方式1 后台启动命令加上参数-daemon,窗口关闭之后kafka后台程序继续运行 ./bin/kafka-server-start.sh -daemon co…

2025移动端软件供应链安全开源治理方案最佳实践

2025年3月13日,由中国软件评测中心、CAPPVD漏洞库联合主办的“第六期移动互联网APP产品安全漏洞技术沙龙”在海口成功召开。悬镜安全基于移动端数字供应链安全开源治理方案荣获中国软件评测中心“2024移动互联网APP产品安全漏洞治理”优秀案例,并获颁证书…

《C#上位机开发从门外到门内》2-3:SPI总线协议详解及应用实践

文章目录 一、引言二、SPI总线协议的基本原理三、SPI通信模式详解 —— CPOL与CPHA3.1 时钟极性(CPOL)3.2 时钟相位(CPHA)3.3 四种SPI模式 四、主从设备通信机制4.1 通信流程概述4.2 数据帧结构与传输细节4.3 主设备与从设备的协同…

vscode出现:No module named ‘requests‘ 问题的解决方法

问题: ① No module named requests ② pip install requests:显示已经安装成功 运行失败原因: 我的失败原因是因为:我的python环境有两个,电脑C盘默认一个、pycharm下载后在它的路径下有一个。而vscode所运行的环境…

【openwebui 搭建本地知识库(RAG搭建本地知识库)】

安装准备 openwebui 这个本地安装之前写过使用python安装。也可以直接用docker 命令 docker run --rm -d \-p 3080:8080 \-p 3081:8081 \-e WEBUI_AUTHtrue \-e DEFAULT_LOCALEcn \-e GLOBAL_LOG_LEVEL"INFO" \-e AIOHTTP_CLIENT_TIMEOUT100 \--privilegedtrue \-…

雷池WAF 处理 HTTP 请求的流程

项目介绍 SafeLine,中文名 "雷池",是一款简单好用, 效果突出的 Web 应用防火墙(WAF),可以保护 Web 服务不受黑客攻击。 雷池通过过滤和监控 Web 应用与互联网之间的 HTTP 流量来保护 Web 服务。可以保护 Web 服务免受 SQL 注入、…

JAVA-Thread类实现多线程

引言: 本章博客涉及进程线程内容,如果不了解的可以看:什么是进程线程-CSDN博客 线程是操作系统的概念,操作系统提供的API供程序员使用操作。但是不同的操作系统(Winodws、Linux、Unix……差别很大),但是做为JAVA程序员就不需要担心…

【算法】DFS、BFS、拓扑排序

⭐️个人主页:小羊 ⭐️所属专栏:算法 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 持续更新中...1、DFS2、BFSN 叉树的层序遍历二叉树的锯齿形层序遍历二叉树最大宽度 3、多源BFS腐烂的苹果 4、拓扑排序 持续更新中…

MySQL中 IN 到底走不走索引?

文章目录 前言数据库表结构查询sqlEXPLAIN介绍EXPLAIN 的输出每列解释 强制走索引查询时添加条件(复合索引字段)查询小时查询分钟 总结 前言 在 MySQL 中,IN 语句是否能够利用索引取决于多个因素,包括但不限于查询的具体形式、表的统计信息、索引的选择…

centos没有ll

vi /etc/bashrc alias ll‘ls -l’ source /etc/bashrc

腾讯云低代码开发应用

创建客户端应用 如上所示,登录腾讯云微搭低代码业务控制台,开始搭建企业官网应用 如上所示,在腾讯云微搭低代码业务控制台中,开始创建企业官网应用 如上所示,在腾讯云微搭低代码业务控制台中,开始编辑企业官…

深度学习项目--基于DenseNet网络的“乳腺癌图像识别”,准确率90%+,pytorch复现

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 前言 如果说最经典的神经网络,ResNet肯定是一个,从ResNet发布后,很多人做了修改,denseNet网络无疑是最成功的…

【Linux 指北】常用 Linux 指令汇总

第一章、常用基本指令 # 注意: # #表示管理员 # $表示普通用户 [rootlocalhost Practice]# 说明此处表示管理员01. ls 指令 语法: ls [选项][目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件。对于文件&#xf…

docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境

docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境 docker-compose.yml services:mysql-8.0:container_name: mysql-8.0image: mysql:8.0restart: always#ports:#- "3306:3306"volumes:- ./etc/mysql/conf.d/mysql.cnf:/etc/mysql/conf.d/mysql.cnf:ro- ./var/log…

Android7上移植I2C-tools

一,下载源码 cd hardware/libhardware/tests git clone https://git.kernel.org/pub/scm/utils/i2c-tools/i2c-tools.git 二, 在 i2c-tools 目录添加 Android.mk 编译文件 LOCAL_PATH: $(call my-dir)################### i2c-tools ###############…

Centos 7 修改语言和输入源为中文+修改终端快捷键复制为Ctrl+C、粘贴为Ctrl+V

目录 修改语言和输入源为中文 1、设置 2、Region & Language(区域和语言) 3、Add an Input Source(添加输入源) 4、修改语言为中文 5、Restart(重启) 6、Log Out (注销) …

DeepSeek-进阶版部署(Linux+GPU)

前面几个小节讲解的Win和Linux部署DeepSeek的比较简单的方法,而且采用的模型也是最小的,作为测试体验使用是没问题的。如果要在生产环境使用还是需要用到GPU来实现,下面我将以有一台带上GPU显卡的Linux机器来部署DeepSeek。这里还只是先体验单…