当前位置: 首页 > 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插件中生成相应的原型图

相关文章:

使用cursor进行原型图设计

1.下载cursor 2.模式设置: 模型使用claude-3.7-sonnet的think模式 3.引导词模板: 我想要开发一个中高考英语口语考试的模拟考试系统,我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下的规范: 用户体验&#xff1…...

Vue el-from的el-form-item v-for循环表单如何校验rules(二)

在上一篇文章中,通过校验规则写成内联循环去校验from表单项,在之前的代码基础上,进行校验规则的二次封装,使代码更加简洁,灵活高效、 参考上一篇:Vue el-from的el-form-item v-for循环表单如何校验rules&a…...

Spark-SQL3

Spark-SQL 一.Spark-SQL核心编程(四) 1.数据加载与保存: 1)通用方式: SparkSQL 提供了通用的保存数据和数据加载的方式。这里的通用指的是使用相同的API,根据不同的参数读取和保存不同格式的数据&#…...

Redis字符串类型实战:解锁五大高频应用场景

精心整理了最新的面试资料和简历模板,有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 Redis的字符串(String)类型是最基础的数据结构,但其灵活性和原子性操作使其成为解决高并发场景问题的利器。本文通过真实项…...

通信算法之266: 无人机信号带宽计算

pwelch 通常返回功率谱密度(PSD)和对应的频率向量。带宽的计算可能涉及到找到 PSD 的有效频率范围,比如半功率点(-3dB)或者根据信号的能量集中区域。 pwelch 的参数设置,比如窗函数、重叠、FFT 点数&#x…...

【MySQL】前缀索引、索引下推、访问方法,自适应哈希索引

最左前缀原则 对于INDEX(name, age)来说最左前缀可以是联合索引的最左N个字段, 也可以是字符串索引的最左M个字符。 SELECT * FROM t WHERE name LIKE 张%其效果和单独创建一个INDEX(name)的效果是一样的若通过调整索引字段的顺序, 可以少维护一个索引树, 那么这个顺序就是需要…...

【C++游戏引擎开发】第16篇:ImGui指南

ImGui官方Github ImGUI(即时模式图形用户界面)是一种颠覆传统GUI开发范式的界面系统,由Casey Muratori于2005年提出概念,后经Omar Cornut开发为Dear ImGui开源库。其核心设计理念彻底改变了开发者构建交互式工具的方式。 一、vcpkg安装与特点介绍 1.1 安装 vcpkg install…...

分享一下这几天在公司学到的东西

这几天我学到了很多东西 (1)我自己原来写项目,前后端联调用的都是postman,然后直接测试接口,然后连一下就完了。这几天我接触到了apifox的Mock这个东西!我知道了一个前端工程师进行前后端链条的时候&#…...

C# 将Excel格式文件导入到界面中,用datagridview显示

界面按钮不做介绍。 主要代码: //用于获取从上一个页面传过来datagridview标题 public DataTable GetHeader { get; set; } private void UI_EXPINFO_Load(object sender, EventArgs e) { //页面加载显示listbox1中可…...

Shell编程之正则表达式与文本

目录 一 正则表达式 1 正则表达式的定义 2 正则表达式用途 二 正则表达式类型 1 基础正则表达式示例 (1)查找特定字符 (2)利用中括号” [] “来查找集合字符 (3)查找行首” ^ “与行尾字符”$“ &…...

Spring JDBC 与数据访问:从性能优化到事务协同

在高并发场景(如电商、金融等行业),数据库访问的性能和事务一致性是系统稳定性的关键。 Spring JDBC通过模板化操作和事务管理机制,大幅简化了传统 JDBC 繁琐的 API 处理,使数据库操作更加高效、安全、可维护。 一、…...

Markdown 编辑器的使用

欢迎使用 Markdown 编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持&…...

自动化浏览器环境与 Node.js 环境的逆向分析:完整教程

在当今的 Web 开发中,了解浏览器环境与 Node.js 环境之间的差异是非常重要的,特别是当你希望进行自动化操作、逆向工程或进行跨平台开发时。在这篇教程中,我们将探讨如何通过 JavaScript 在浏览器中自动化环境检测、分析并对比 Node.js 和浏览…...

脉冲编码调制(PCM)在三角形信号中的应用

基于MATLAB平台,详细阐述脉冲编码调制(PCM)在三角形信号处理中的全流程实现。我这里将变量名更改为具有辨识度的Dogness_、Lhuu_,包括信号生成、均匀量化、编码、解码及解量化过程,为数字信号处理提供实践参考。 Dogne…...

# 03_Elastic Stack 从入门到实践(三)-- 4

03_Elastic Stack 从入门到实践(三)-- 4 七、Elasticsearch之中文分词器(IK分词器) 1、什么是分词? 分词:就是指将一个文本转化成一系列单词的过程,也叫文本分析,在Elasticsearch…...

前端VUE框架理论与应用(10)

1、记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。 2、要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 3、注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push…...

基础学习:(6)nanoGPT

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言1 nanoGPT 浅尝1.1 基础环境1.2 prepare.py1.2 train.py1.3 sample.py 2 再探gpt2.1 layer_norm2.2 KQV 和 self attention2.3 masked self-attention2.4 调用构…...

python支持自定义基准的相对误差计算

def is_within_tolerance_custom(a, b, tolerance0.1, reference“max”): “”" 支持自定义基准的相对误差计算。 参数:reference (str): 基准类型,可选 "max"(默认)、"min"、"mean"、"a"&am…...

力扣DAY52-54 | 热100 | 图论:腐烂的橘子、课程表、前缀树

前言 中等 √ 腐烂的橘子用层次遍历,课程表用俩哈希表,前缀树基本与题解一致。however不太规范。 腐烂的橘子 我的题解 层次遍历,先找出所有腐烂的橘子进入队列并记录数量,接着内层遍历第一层腐烂的橘子,上下左右四…...

java CountDownLatch用法简介

CountDownLatch倒计数锁存器 CountDownLatch:用于协同控制一个或多个线程等待在其他线程中执行的一组操作完成,然后再继续执行 CountDownLatch用法 构造方法:CountDownLatch(int count),count指定等待的条件数(任务…...

科技项目验收测试报告有哪些作用?需要多长时间和费用?

在当今快速发展的科技环境中,科技项目的有效验收至关重要。对于公司、开发团队以及客户来说,科技项目验收测试报告更是一个不可缺少的一项重要环节。 科技项目验收测试报告是对一个项目在开发完成后所进行的一系列测试结果的总结。这份报告不仅用于证明…...

网络原理面试题

1.如何理解 URI? URI, 全称为(Uniform Resource Identifier), 也就是统一资源标识符,它的作用很简单,就是区分互联网上不同的资源。但是,它并不是我们常说的网址, 网址指的是URL, 实际上URI包含了URN和URL两个部分,由于 URL 过于普及,就默认将 URI 视为 URL 了。 URI 的…...

专为路由器和嵌入式设备设计的OpenWrt是什么?

OpenWrt是一款基于Linux内核的开源嵌入式操作系统,专为路由器和嵌入式设备设计。自2004年诞生以来,它已成为替代商业固件的首选方案,凭借其高度可定制性、模块化架构和活跃的开发者社区,广泛应用于家庭网络、企业级设备、物联网(IoT)及安全领域。以下从多个维度展开详细介…...

NVIDIA RTX™ GPU 低成本启动零售 AI 场景开发

零售行业正在探索应用 AI 升级客户体验,同时优化内部流程。面对多重应用场景以及成本优化压力,团队可采用成本相对可控的方案,来应对多重场景的前期项目预演和落地,避免短期内大规模投入造成的资源浪费。 客户体验 AI 场景的研究…...

element-ui自定义主题

此处的element-ui为基于vue2.x的 由于https://element.eleme.cn/#/zh-CN/theme/preview(element的主题)报错503, 所以使用https://element.eleme.cn/#/zh-CN/component/custom-theme 自定义主题文档中,在项目中改变scss变量的方…...

PhotoShop学习10

1.画板功能的使用 使用画板功能可以轻松针对不同的设备和屏幕尺寸设计网页和 APP。画板是一种容器,类似于特殊图层组。画板中的图层在图层面板中,按画板进行分组。 使用画板,一个文档中可以有多个设计版面,这样可以在画板之间轻…...

基于LLVM设计领域专用语言(DSL)的步骤——以激光微加工为例

1. 明确DSL的设计目标 在激光微加工领域,DSL需解决以下问题: • 工艺参数抽象化:激光功率、频率、扫描路径等需用高阶语法描述,而非底层G代码。 • 实时性要求:控制指令需低延迟编译为机器码(如FPGA或运动控…...

【MAUI】IOS保活

文章目录 概述sevice使用 概述 每种方法都是独立的,可以根据应用的需求单独使用。例如,如果应用的主要功能是跟踪用户的地理位置,则可以仅使用后台定位;若是为了保持应用在后台运行以完成特定任务(比如上传数据&#…...

shardingsphere-jdbc集成Seata分布式事务

1、导入相关依赖 <!-- shardingsphere-jdbc --><dependency><groupId>org.apache.shardingsphere</groupId><artifactId>shardingsphere-jdbc</artifactId><version>5.5.1</version></dependency><!-- shardingspher…...

基于区块链的技术应用探索

文章目录 前言一、区块链技术的核心特性1.1 去中心化1.2 不可篡改性1.3 透明性与可追溯性1.4 智能合约机制 二、区块链的典型应用场景2.1 金融与支付2.2 溯源与供应链管理2.3 数字身份与数据隐私2.4 数字资产与NFT2.5 公共服务与政务透明 三、区块链的分类1.按权限管理方式分类…...

MQ(RabbitMQ)消息重复消费问题的全面解决方案

MQ消息重复消费是分布式系统中的常见问题&#xff0c;主要由网络问题、消费者故障、消息重试机制等引起。以下是针对RabbitMQ的完整解决方案体系&#xff1a; 一、消息生产端解决方案 1. 消息幂等设计 全局唯一消息ID&#xff1a; MessageProperties props MessagePropert…...

windows Cursor 配置MCP的小坑

以高德地图MCP举例 按需求配置好以后&#xff0c;会提示 Client closed 解决方案&#xff0c; windows 需要更改一下 commandargs 新增一个npx保存后Cursor设置MCP页面Refresh一下即可&#xff0c;打开的终端不要关闭 最后贴一下文本代码&#xff0c;方便复制粘贴 {"m…...

探秘串口服务器厂家:背后的故事与应用

在科技飞速发展的今天&#xff0c;串口服务器作为连接串口设备与网络的桥梁&#xff0c;在工业自动化、智能交通、智能家居等众多领域发挥着关键作用。你是否好奇&#xff0c;那些生产串口服务器的厂家究竟有着怎样的故事&#xff1f;它们的产品背后又蕴含着怎样的原理呢&#…...

二叉树详细讲解(2/2)

4. 实现链式结构二叉树 ⽤链表来表⽰⼀棵⼆叉树&#xff0c;即⽤链来指⽰元素的逻辑关系。通常的⽅法是链表中每个结点由三个域组成&#xff0c;数据域和左右指针域&#xff0c;左右指针分别⽤来给出该结点左孩⼦和右孩⼦所在的链结点的存储地址&#xff0c;其结构如下&#…...

SpringBoot整合Redis限流

通过一个完整的Spring Boot项目演示如何用Redis实现简单的API限流功能。我们将从零开始搭建项目。 一、环境准备 1.1 开发环境要求 JDK 1.8IntelliJ IDEA&#xff08;推荐&#xff09;Redis 5.0&#xff08;本地安装&#xff09;Postman&#xff08;测试用&#xff09; 1.2…...

(Matlab)自动驾驶仿真 设计驾驶场景、配置传感器并生成合成 数据

驾驶场景仿真平台核心功能 一、场景搭建与编辑 ‌可视化场景构建‌ 使用拖放界面创建道路网络和角色模型&#xff08;车辆、行人等&#xff09;支持欧洲新车评估计划&#xff08;Euro NCAP&#xff09;测试协议及其他预置场景模板 二、传感器配置 ‌车载传感器系统‌ 支持…...

接口测试(get请求方法)-----------实战演练

1.最简单的get请求方法 eg:请求一个王者荣耀语音包的接口 接口文档如下&#xff1a; 2.把接口地址、请求方法、请求参数写到postman相应位置 3.填写请求参数的值&#xff0c;点击发送按钮&#xff0c;即可获得到返回参数...

【赵渝强老师】TiDB的列存引擎:TiFlash

TiDB的TiFlash提供列式存储&#xff0c;且拥有借助ClickHouse高效实现的协处理器层。除此以外&#xff0c;它与TiKV非常类似&#xff0c;依赖同样的Multi-Raft体系&#xff0c;以Region为单位进行数据复制和分散。TiFlash以低消耗不阻塞TiKV写入的方式&#xff0c;实时复制TiKV…...

《vue3学习手记3》

标签的ref属性 vue3和vue2中的ref属性&#xff1a; 用在普通DOM标签上&#xff0c;获取的是DOM节点 ref用在组件标签上&#xff0c;获取的是组件实例对象 区别在于&#xff1a; 1.vue3中person子组件中的数据父组件App不能直接使用&#xff0c;需要引入并使用defineExpose才可…...

【Vue】从 MVC 到 MVVM:前端架构演变与 Vue 的实践之路

个人博客&#xff1a;haichenyi.com。感谢关注 一. 目录 一–目录二–架构模式的演变背景​三–MVC&#xff1a;经典的分层起点​四–MVP&#xff1a;面向接口的解耦尝试​五–MVVM&#xff1a;数据驱动的终极形态​​六–Vue&#xff1a;MVVM 的现代化实践​​​ 二. 架构模…...

Docker Compose 命令实现动态构建和部署

Docker Compose 命令实现动态构建和部署 一、编写支持动态版本号的 docker-compose.yml version: 3.8services:myapp:build: context: . # Dockerfile所在目录args:APP_VERSION: ${TAG:-latest} # 从环境变量获取版本号&#xff0c;默认latestimage: myapp:${TAG:-latest} …...

工厂模式实现案例

场景一&#xff1a;配置文件解析&#xff08;工厂模式实现&#xff09; 1. 定义解析器接口与具体实现 from abc import ABC, abstractmethod import json import yaml # 需要安装PyYAML库&#xff1a;pip install pyyamlclass ConfigParser(ABC):"""配置文件解…...

Vue3.5 企业级管理系统实战(十五):其他全局设置项

在设置面板中&#xff0c;除了主题颜色的选择设置&#xff0c;还可以添加其他全局配置选项&#xff0c;如 tagsView 导航栏&#xff0c;Logo 的显示隐藏配置等。 1 Settings 的 Pinia 配置 在 src/stores/settings.ts 中添加要持久存储的全局配置项&#xff0c;这里是 tagsVi…...

L2-052 吉利矩阵分

L2-052 吉利矩阵 - 团体程序设计天梯赛-练习集 所有元素为非负整数&#xff0c;且各行各列的元素和都等于 7 的 33 方阵称为“吉利矩阵”&#xff0c;因为这样的矩阵一共有 666 种。 本题就请你统计一下&#xff0c;把 7 换成任何一个 [2,9] 区间内的正整数 L&#xff0c;把矩…...

408 计算机网络 知识点记忆(9)

前言 本文基于王道考研课程与湖科大计算机网络课程教学内容&#xff0c;系统梳理核心知识记忆点和框架&#xff0c;既为个人复习沉淀思考&#xff0c;亦希望能与同行者互助共进。&#xff08;PS&#xff1a;后续将持续迭代优化细节&#xff09; 往期内容 408 计算机网络 知识…...

矩阵基础+矩阵转置+矩阵乘法+行列式与逆矩阵

GPU渲染过程 矩阵 什么是矩阵&#xff08;Matrix&#xff09; 向量 &#xff08;3&#xff0c;9&#xff0c;88&#xff09; 点乘&#xff1a;计算向量夹角 叉乘&#xff1a;计算两个向量构成平面的法向量。 矩阵 矩阵有3行&#xff0c;2列&#xff0c;所以表示为M32 获取固…...

如何在 .NET 环境中使用 Npgsql 驱动连接 KaiwuDB

在现代软件开发中&#xff0c;数据库连接和操作是任何应用程序的核心部分。本文将介绍如何在 .NET 环境下&#xff0c;使用 Npgsql 驱动连接 KaiwuDB&#xff0c;并执行基本的数据库操作&#xff0c;包括创建表、插入数据和查询操作。我们假设您已经安装并配置好了 KaiwuDB 数据…...

【代理错误 django】Request error: HTTPSConnectionPool(host=‘‘, port=443): 、

❗问题 ❶&#xff1a;仍然是代理错误&#xff08;ProxyError&#xff09; 错误日志&#xff1a; Request error: HTTPSConnectionPool(hostxueshu.baidu.com, port443): Max retries exceeded ... Caused by ProxyError(Unable to connect to proxy, FileNotFoundError(2, N…...

5.9 《GPT-4调试+测试金字塔:构建高可靠系统的5大实战策略》

5.4 测试与调试:构建企业级质量的保障体系 关键词:测试金字塔模型、GPT-4调试助手、LangChain调试模式、异步任务验证 测试策略设计(测试金字塔实践) #mermaid-svg-RblGbJVMnCIShiCW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill…...

Maven 多仓库和多镜像配置

Maven是一个流行的Java项目构建和管理工具。在Maven中&#xff0c;我们可以配置多个仓库源来下载和管理依赖项。同时&#xff0c;我们还可以使用repositories和mirrors进行配置&#xff0c;以满足特定的需求。 首先&#xff0c;让我们了解一下repositories和mirrors的作用。在M…...