[课程5] Cursor开发复杂UI界面 | 结构化思维描述需求

视频讲解了如何利用 Cursor AI 编程工具，通过结构化思维描述需求，在零代码基础下完成复杂 App 的 UI 界面开发与布局。

UP主: Zhu的AI日记 · 时长: 7:08 · 🔗 B站原视频

发布: 2025-01-02 · 收录: 2025-03-24

标签: Cursor · AI编程 · UI设计 · 结构化思维 · 零基础开发

这节课要做什么：不用写代码，用结构化描述需求做出复杂 UI

不用写代码，只需要用结构化的方式去描述需求。我们只用了四轮对话，就把这个内容丰富的 AI 翻译页面实现出来了。

上一节课我介绍了如何在不懂编程的情况下开发 MySQL 数据库，成功实现用户注册和登录功能。这节课我们将完成 AI 翻译页面的前端开发，用结构化的方式描述需求，快速准确地实现 UI 设计的展示。

不管是做 UI 开发还是做功能开发，为了让 AI 准确理解我们的实际需求，并确保 AI 写出来的代码有良好的可维护性和可拓展性，我们都需要用结构化的思维和 AI 沟通。

做法是按照从整体到局部的顺序逐步展开描述：先从页面框架结构开始，再逐步细化到每个区域的细节。

这个 App 主要有三个页面：AI 翻译、生词本、用户信息。这三个页面通过底部的 Tab 导航连接。点击 Tab 上的每个选项，就会切换到不同页面。

所以首先要让 AI 知道：Tab 是一个独立组件，通过 Tab 连接到三个主要页面。第一步先实现通过 Tab 切换三个页面的功能。

结构化描述需求时，主要交代 Tab 和三个页面的关系，让它实现 Tab 的基本逻辑，暂时不用考虑页面内部功能实现，附上 Tab 的截图就可以。

第一轮实现效果已经顺利完成：通过 Tab 切换三个空页面。

为了测试方便，在测试阶段可以让 AI 帮我们先跳过每次都要登录的过程。

具体看 AI 翻译页面的 UI 布局时，就不用再管下面的 Tab 了，因为 Tab 已经作为独立组件开发好了。

AI 翻译页面从上到下可以拆成三个部分：

这一轮先提供截图，再用结构化方式描述三个部分之间的关系，并对每个部分内部布局做一定程度说明。

第一轮的实现效果已经不错，比较准确还原了设计图布局。交互和一些细节上的差距，是因为第一轮需求里没有提供局部设计细节，比如字体颜色、字体大小等。

接下来针对设计图把设计细节补充给 AI。这一轮需求主要补充第一轮未涉及的具体设计参数，比如：

Cursor 按需求更新后，UI 已经和设计图非常接近。

这时只剩一个问题：AI 解读的内容被压缩到看不到。我按常规方法尝试解决了两次都没改善，意识到 AI 可能陷入了错误方向，无法自我纠正。

我就告诉它忘掉之前这部分逻辑，换一个思路，完全基于我们的需求重新写，这个布局问题立马解决了，最终效果和设计图保持一致。

整个过程中我们都没有关心过 AI 写的代码，所以这些方法完全可以应用到安卓或微信小程序的开发上。

这节课同样准备了一个 40 多分钟的完整开发视频，详细介绍每一轮对话前后的思考过程，尤其是结构化思维在实际过程中的具体运用。如果想进一步了解，欢迎到知识星球获取完整视频内容。

下节课我会介绍 AI 翻译页面的功能实现，重点包括 AI 模型的调用，以及返回内容如何以流的方式在页面上逐步展示。

如果你对这些内容感兴趣，记得点赞和关注这个系列。

如果你正在为 AI 时代的激烈竞争感到焦虑，担心自己会被淘汰，渴望快速掌握新技能来提高竞争力，欢迎加入我的知识星球。

这里会提供大量完整实战教程，即使你从未接触过开发，也能轻松成为多平台开发者。我会分享我通过大量 AI 开发尝试总结的一系列应对 AI 出错的解决办法，让你面对复杂项目开发也没有后顾之忧。

我也会随时分享 AI 的最新趋势，让你永远都能先人一步，发现新的职业发展机会。AI 已经彻底打破技术门槛，让每一位曾经不懂编程的外行人都拥有了弯道超车的机会。拥抱 AI，你的未来将从今天开始改变。