cursor-我愿称之为程序员的福音_cursor生成ui设计原型图-CSDN博客

本文链接：https://blog.csdn.net/u010671061/article/details/147999872

首先花两小时看看用cursor做的原型图

在这里插入图片描述

cursor是什么？

Cursor是一款革命性的代码编辑器，它基于VSCode构建但融合了强大的人工智能能力，正在重新定义开发者的编码体验。这款由前Scale AI工程师团队打造的工具通过GPT-4等先进语言模型的集成，实现了代码生成、实时建议、智能重构等功能，使开发者能够通过自然语言对话方式与编辑器交互。Cursor不仅可以理解复杂代码库、生成高质量代码片段，还能解释代码逻辑、提供优化建议，显著减少了查阅文档和编写重复代码的时间。它支持几乎所有主流编程语言，同时保留了传统IDE的熟悉界面和强大功能，成为连接人类创造力与AI效率的理想桥梁，让编程变得更加直观、高效且智能化。

Cursor的核心功能

AI指令与代码生成

自然语言指令：按下Ctrl+K（或Cmd+K）使用普通语言要求AI执行任务
智能代码生成：能根据简单描述生成完整函数、类或模块
上下文感知补全：根据项目风格和结构提供符合一致性的代码建议

代码理解与解释

全局代码分析：理解整个代码库的结构和关系
复杂逻辑解释：解释函数实现原理和代码意图
项目导航辅助：帮助新团队成员快速掌握项目架构

调试与优化

错误分析：自动分析错误并提供解决方案
性能优化建议：识别性能瓶颈并提出改进方案
根因解释：不只修复问题，还解释问题原因，提升开发者能力

智能重构

代码质量建议：提出结构优化和最佳实践建议
自动重构实现：能自动执行复杂的代码重构
保持设计一致性：确保重构后的代码与项目风格保持一致

案例实战：使用Cursor开发一款应用

时间有限只是完成了原型图的设计，并按照原型图用H5实现了所有页面，并实现了基本的跳转

先上提示词

你是一位全栈工程师，同时精通产品规划和UI设计。   

我想开发一款XX应用，功能类似于XX、XX、XX等APP，现在需要输出完整的APP原型图，请通过以下方式帮我完成app所有原型图片的设计。 

1、用户体验分析:先分析这个App的主要功能和用户需求，确定核心交互逻辑。

2、产品界面规划:作为产品经理，思考用户需要签名应用app实现哪些功能，定义关键界面，确保信息架构合理。  

3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX；  
4、使用html在一个界面上生成所有的原型界面，文件命名为:app_prototype.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实   

5、引入tailwindcss来完成，而不是变成style样式，图片使用unsplash 我希望这些界面是需要能直接拿去进行开发的，界面中不要有滚动条出现拆分代码文件，保持结构清晰:

6、高保真UI设计：作为UI设计师，设计贴近真实i0S/Android 设计规范的界面，使用现代化的UI元素，使其具有良好的视觉体验。

7、HTML原型实现：要高级有质感(比如玻璃拟态、渐变等视觉特效)，使用 HTML+TailwindCSS(或 Bootstrap)生成所有原型界面，并使用FontAwesome(或其他开源 UI组件)让界面更加精美、接近真实的 App 设计。

提示词应该尽可能完整，全面，因为我们的cursor是按次的，告诉它的越全面，他越知道自己该做什么。

原型图设计好后，我们可以一步步让他按照原型图，用H5来实现我们原型图中的页面，并完成基本的页面跳转功能。