AI编程-用cursor进行web系统原型设计

哈喽！伙伴们，我是小智，你们的AI向导。欢迎来到每日的AI学习时间。今天，我们将一起深入AI的奇妙世界，探索“AI编程-用cursor进行web系统原型设计”，并学会本篇文章中所讲的全部知识点。还是那句话“不必远征未知，只需唤醒你的潜能！”跟着小智的步伐，我们终将学有所成，学以致用，并发现自身的更多可能性。话不多说，现在就让我们开始这场激发潜能的AI学习之旅吧。

AI编程-用cursor进行web系统原型设计：

用cursor进行web系统原型设计的尝试，在2个星期前就进行了，但由于新注册的账号只有50次对话请求，原型设计还有几个小bug没完成，就超50次了，所以搁置了。

一直想着充个会员，把原型设计弄完，但由于各种原因一直拖到现在，今天发现cursor的AI对话模式改成“Auto”模式，非会员也仍然可用，效果还不错，两三次对话就把小bug解决了。

今天写一篇文章记录一下用cursor进行web系统原型设计的过程。

cursor 有个AI对话内容导出的功能，我觉得这个功能非常的nice，导出MD文档，便于之后查阅并回顾整个项目进程的思路。

开发思路与建议
1、让AI阅读readme文档，给我一些思路和建议

2、给AI设定角色，并开始规划web系统

3、生成prd文档和产品设计方案文档

开始原型设计
1、原型设计基本思路

2、对原型页面提要求

对页面原型设计有如下要求：
要求如下：

0. 采用{模块化/工作台/仪表盘}式布局架构
1. 遵循Ant Design/Material Design设计规范
2. 使用 HTML + Tailwind CSS (或 Bootstrap) 生成所有原型界面，并使用 FontAwesome (或其他开源 UI 组件) 让界更加精美
3. 每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
4. index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，模拟正常的web系统，并使用菜单按钮进行跳转链接。
5. 每个页面原型完成设计后必须更新index.html的菜单按钮连接。
6. 菜单栏采用横向排列，放置于index页面的head部位。
7. 引入Echarts实现动态数据可视化占位。
8. 使用真实的 UI 图片，而非占位符图片 (可从 Unsplash、Pexels UI 资源中选择)。
请问有什么优化建议吗，遵循最佳实践，给我一些建议

3、拆解原型设计步骤

4、生成原型设计页面的todoList文档，并标记已完成和未完成的条目

已完成页面标记截图：

待完成页面标记截图：

5、bug修复

根据todolist 完成原型页面代码生成后，除了“对话中心”和“数据库管理”页面有个小bug外，其他页面一次性完成，效率还是杠杠的图片

页面bug截图如下：

将有bug的页面截图，并指定要修改哪个代码文件，一次对话即能解决bug。

原型设计效果图
1、仪表盘原型页面

2、应用中心原型页面

3、大模型管理原型页面

4、知识库原型页面

更多原型页面预览，请访问：

http://47.98.221.121/prototype/cursor/web/

使用心得

1. 程序员在使用AI编程工具时，需要转变思维，从代码编写者转变为代码规划师，做任何功能点都有学会规划和拆解步骤；
2、不要让AI一上来就一顿写代码，而是要让它先思考，给出思路和建议，然后再决定下一步行动，总而言之，要让AI跟随我们的思路走，而不是让AI牵着鼻子团团转，这样项目很容易失去控制。因此要经常跟AI说“这是我要解决的问题，在写代码之前，请先给我列出几种思路，别着急动手！”
3、学会让AI拆解实现步骤，生成todolist文档，并对已完成和未完成条目进行标记。生成todolist文档，然后指引AI每次只针对其中的两三个条目进行编写代码，完成后要更新todolist文档，进行标记并记录完成时间点。小步骤的进行，这样项目才会变得可控。
4、在使用AI对话时，需要学会提问题，需要统筹规划需要提问的问题，尽量把几个相关的小问题合并成一次提问，避免过度的消耗提问次数和大模型的token，这是需要在实践中慢慢积累并总结经验，我目前也在有意识的学习并提高跟AI对话的技巧。

嘿，伙伴们，今天我们的AI探索之旅已经圆满结束。关于“AI编程-用cursor进行web系统原型设计”的内容已经分享给大家了。感谢你们的陪伴，希望这次旅程让你对AI能够更了解、更喜欢。谨记，精准提问是解锁AI潜能的钥匙哦！如果有小伙伴想要了解学习更多的AI知识，请关注我们的官网“AI智研社”，保证让你收获满满呦！