Cursor+MCP生成高保真原型喂饭级指南
▲点击关注并星标，及时收看更多 AI、商业观察。
怎么样让cursor给你做一套高保真原型
我想开发一个【】现在需要输出高保真的原型图，主要功能包括【】请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：1、用户体验分析：先分析这个App的主要功能和用户需求，确定核心交互逻辑。2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理，用户流程顺畅。3、高保真UI设计：作为UI设计师，严格遵循iOS设计规范(Human Interface Guidelines)，设计贴近iOS系统风格的界面，使用卡片式布局、圆角元素和适当的投影效果，确保视觉体验现代简洁。4、HTML原型实现：使用HTML + Tailwind CSS生成所有原型界面，使用JavaScript实现基本交互功能，包括页面跳转、表单操作和数据模拟。代码文件应清晰分离为HTML、CSS和JS。5、每个界面应作为独立的HTML文件存放，例如home.html、profile.html、settings.html, 使用index.html作为主入口，使用iframe方式嵌入这些HTML片段，并将所有页面平铺展示，方便整体预览, 每个独立页面之间应支持相互跳转，确保单独打开也能完整体验- 真实感增强：- 界面尺寸应模拟iPhone 15 Pro（393×852px），并应用圆角边框（20px）。- 选择与应用主题相关的图片，避免使用明显的占位图（如灰色块或标有"image"的框）- 图标和UI元素可使用Font Awesome或Material Icons等专业图标库 (通过CDN引用)- 背景和内容图片可从Unsplash、Pexels等免费图库选取，确保风格统一- 添加iOS标准状态栏和底部导航栏，包含主页、小组件和设置三个选项卡。- 使用符合iOS风格的日期选择器、开关组件和列表样式。请按照以上要求生成完整的代码，并添加必要的注释说明界面逻辑和交互设计考虑。
我想开发一个【类似淘宝的APP】，现在需要输出高保真的原型图' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
我想开发一个【待办】iOS App现在需要输出高保真的原型图，主要功能包括【1、创建待办：支持分类、优先级、子待办、截止日期、干系人2、展示待办支持基于分类、截止日期、优先级、干系人分类展示】请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：1、用户体验分析：先分析这个App的主要功能和用户需求，确定核心交互逻辑。2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理，用户流程顺畅。3、高保真UI设计：作为UI设计师，严格遵循iOS设计规范(Human Interface Guidelines)，设计贴近iOS系统风格的界面，使用卡片式布局、圆角元素和适当的投影效果，确保视觉体验现代简洁。4、HTML原型实现：使用HTML + Tailwind CSS生成所有原型界面，使用JavaScript实现基本交互功能，包括页面跳转、表单操作和数据模拟。代码文件应清晰分离为HTML、CSS和JS。5、每个界面应作为独立的HTML文件存放，例如home.html、profile.html、settings.html, 使用index.html作为主入口，使用iframe方式嵌入这些HTML片段，并将所有页面平铺展示，方便整体预览, 每个独立页面之间应支持相互跳转，确保单独打开也能完整体验- 真实感增强：- 界面尺寸应模拟iPhone 15 Pro（393×852px），并应用圆角边框（20px）。- 选择与应用主题相关的图片，避免使用明显的占位图（如灰色块或标有"image"的框）- 图标和UI元素可使用Font Awesome或Material Icons等专业图标库 (通过CDN引用)- 背景和内容图片可从Unsplash、Pexels等免费图库选取，确保风格统一- 添加iOS标准状态栏和底部导航栏，包含主页、小组件和设置三个选项卡。- 使用符合iOS风格的日期选择器、开关组件和列表样式。请按照以上要求生成完整的代码，并添加必要的注释说明界面逻辑和交互设计考虑。
### 真实感增强设计规范（iOS 17风格）**设备拟真要求**- 使用iPhone 15 Pro标准分辨率(393×852px)- 界面边缘保留20px安全圆角- 顶部状态栏需包含：动态岛效果、5G信号强度、电量数字显示- 底部导航栏采用半透明磨砂质感，包含三选项卡：- 主页（活动指示器+SF Symbols图标）- 看板（分类视图+动态徽章）- 设置（齿轮图标+账户状态）**视觉设计准则**- 图标系统：- 优先使用Apple官方SF Symbols 5.0图标库- 辅助图标从Material Icons选择匹配iOS风格版本- 交互元素保持2px线性图标风格- 图片规范：- 背景图源锁定Unsplash/Pexels的"minimal workspace"主题- 用户头像采用iOS风格拟我表情+渐变蒙层- 禁止出现占位图，默认展示模糊加载态- 动效原则：- 列表项入场使用iOS标准弹簧动画- 页面切换保留右进左出转场- 长按触发触觉反馈震动模拟**交互拟真要素**- 控件规范：- 日期选择器采用iOS 17轮盘式组件- 开关控件使用iOS默认滑块样式- 优先级选择器实现动态色阶变化- 内容呈现：- 待办卡片使用双层投影（1px浅层+4px深层）- 截止日期临近时自动启用红色呼吸光效- 子任务列表呈现折叠/展开动画- 上下文交互：- 长按任务卡片触发3D Touch式浮层菜单- 侧滑手势支持标记完成/删除操作- 下拉刷新实现拉伸弹簧动画**系统级体验要求**- 深色模式：- 提供完整Dark Mode适配方案- 界面元素需通过WCAG 2.1对比度验证- 辅助功能：- 所有交互元素标注VoiceOver提示- 文字支持动态类型缩放布局- 色彩方案兼容色盲过滤模式- 数据感知：- 空状态页面展示插画引导- 网络错误提示使用系统标准Toast- 加载状态显示进度环动画**交付物标准**- 设计文件需包含：- 完整交互流程图（用户旅程图）- 带标注的组件样式规范表- 动效曲线参数说明文档- 多主题配色方案矩阵- 原型演示要求：- 主界面呈现真实用户场景数据- 包含边缘case演示（超长文本/密集信息）- 展示深色模式切换过程- 录制带操作热区的演示视频
请基于截图的视觉风格，提炼它的视觉风格有点，优化所有页面的UI使用Magic MCP美化你的UI
1、访问21st.dev注册账号
直接用Github登录就好了。
2、注册完有个快捷入口 Try magic
然后会让你选择你使用的是什么编程，如果找不到，那就直接访问下面的链接。
https://21st.dev/magic/onboarding?step=select-ide
请使用 21st_magic，优化全部页面的UI/UI <你想说的话>CursorRules是什么？怎么用？
CursorRules 就像是给 AI 程序员定制的「规则手册」，让AI能自动按你的要求完成任务，而不是随心所欲乱写。
就像公司要求所有人用「中文写注释」、「变量名用驼峰式」，你提前告诉 AI 这些规矩，它就不会给你生成拼音变量名或英文注释。同样的用于技术栈、文件归类等等都能够做到。
而这个Rules不管是做原型还是做开发都能够用得上，能够让AI打出更好的代码。
使用的方法很简单
1、打开Setting->Rules->Add new rules
这里要注意添加的地方是Project Rules，在页面的上方还有一个User Rules是全局规则，例如你可以添加一条：总是用中文响应用户的会话。
2、输入rules的名称和编写规则
选择rules 的匹配类型，Always是每次都是用，Auto Attached是基于文件来匹配rules规则。
到了具体里面的规则，如果图省事可以直接安装花生老师的Cursorrules插件，然后将里面的内容复制进来就可以了。
当然在Cursor的官网也有很多的rules，可以进去查询自己适用的规则。
传送门：https://cursor.directory/
如果想自己写，还可以参考老师 @ai呀蔡蔡 的提示词模版，投喂给AI就好了。
请参考下面这份模板，给我写一份用于开发<Python脚本>应用的合格的cursorrules文档，这份模板中的*号是占位符，你需要补充相关的信息和技术栈和其它可能需要的信息，文档以markdown格式输出# 角色你是一名精通 **开发的高级工程师，拥有10年以上的**应用开发经验，熟悉*** 等开发工具和技术栈。你的任务是帮助用户设计和开发易用且易于维护的***应用。始终遵循最佳实践，并坚持干净代码和健壮架构的原则。#目标你的目标是以用户容易理解的方式帮助他们完成”" 应用的设计和开发工作，确保应用功能完善、性能优异、用户体验良好。#要求在理解用户需求、设计UI、编写代码、解决问题和项目迭代优化时，你应该始终遵循以下原则:## 项目初始化.在项目开始时，首先仔细阅读项目目录下的 README.md文件并理解其内容，包括项目的目标、功能架构、技术栈和开发计划确保对项目的整体架构和实现方式有清晰的认识;如果还没有README.md文件，请主动创建一个，用于后续记录该应用的功能模块、页面结构、数据流、依赖库等信息,## 需求理解充分理解用户需求，站在用户角度思考，分析需求是否存在缺漏，并与用户讨论完善需求;选择最简单的解决方案来满足用户需求，避免过度设计。## UI和样式设计使用现代UI框架进行样式设计(例如””，这里可以根据不同开发项目仔细展开，比如使用哪些视觉规范或者U框架，没有的话也可以不用过多展开)，-在不同平台上实现一致的设计和响应式模式## 代码编写·技术选型:根据项目需求选择合适的技术栈(例如***，这里需要仔细展开，比如介绍某个技术栈用在什么地方，以及要遵循什么最佳实践).代码结构:强调代码的清晰性、模块化、可维护性，遵循最佳实践(如DRY原则、最小权限原则、响应式设计等》代码安全性:在编写代码时，始终考虑安全性，避免引入漏洞，确保用户输入的安全处理性能优化:优化代码的性能，减少资源占用，提升加载速度，确保项目的高效运行.测试与文档:编写单元测试，确保代码的健壮性，并提供清晰的中文注释和文档，方便后续阅读和维护## 问题解决.全面阅读相关代码，理解***应用的工作原理根据用户的反馈分析问题的原因，提出解决问题的思路确保每次代码变更不会破坏现有功能，且尽可能保持最小的改动### 迭代优化与用户保持密切沟通，根据反馈调整功能和设计，确保应用符合用户需求在不确定需求时，主动询问用户以澄清需求或技术细节每次迭代都需要更新README.md文件，包括功能说明和优化建议## 方法论系统2思维:以分析严谨的方式解决问题。将需求分解为更小、可管理的部分，并在实施前仔细考虑每一步思维树，评估多种可能的解决方案及其后果。使用结构化的方法探索不同的路径，并选择最优的解决方案迭代改进;在最终确定代码之前，考虑改进、边缘情况和优化。通过潜在增强的迭代，确保最终解决方案是健壮的
只需要把提示词最前面的<python脚本>换成你要开发的程序就好了，例如可以是iOS App，然后把它投喂给Deepseek或者其他的AI帮助你补全。
设置好了之后，基于你的匹配规则就可以使用了，希望朋友们打工顺利。
有缘的话，让俺来分享开发实践8~
看完记得关注并星标我
及时收看更多AI、商业观察
↓↓↓
AI · 目录
上一篇你能用嘴来画一幅画吗？GPT-4o：我可以！下一篇Figma无痛画原型，一键直出设计稿和代码