AI 生成 UI 设计的 Cursor 实践

最近在探索 AI Coding in Front-End 的时候看到一篇较为🐂🍺的文章《一个提示词 claude 生成一个 app 的 ui/ux》（UC 震惊部提前预定作者入职）。虽然标题比较震惊，但是内容的确挺好，我（让 AI）整理了一下核心内容，并且可以借鉴到接下来的 AI Coding 实践中，可能会尝试在 VSCode + Copilot 来复现一下效果。

文章内容主要是结合 Cursor 和 Claude3.7 进行了一些实践，核心思路是利用 AI 自动生成 HTML 页面，提高 UI 设计的效率，同时探索 AI 在前端开发流程中的潜力。

但是作者推荐使用 Ask（Chat）模式来进行开发，而不是 Agent 模式；虽然说的有点道理，但是经过这段时间试用 Agent 模式，我感觉作者遇到的 Agent 模式的问题总会被解决的。

PS：文章中有几个视频，有兴趣可以点进去看看。

以下是 AI 总结的内容

顺便感谢 GPT-4o 的支持，虽然你在 Design to Code 的表现令我失望，但是当个文员还真不错

1. Claude3.7 + Cursor 的 UI 生成实践

1.1 基础方法：Ask 模式 + Prompt 结构优化

• 使用 Cursor 搭配 Claude-3.7-sonnet-thinking，采用 Ask 模式，而不是 Agent 或 Composer 模式，以避免 AI 生成错误。

• 核心 Prompt 结构（本人人工标注：AI 总结的不完全，请看源文）：

  你是一位资深全栈工程师，参考 ui_ux_design 设计一个【产品需求】，模拟产品经理提出需求和信息架构，然后设计 UI/UX。

• 为什么加优秀 HTML 案例？

  • 通过提供优秀案例作为上下文，大模型会模仿更优质的代码风格，提升最终 UI 的美观度和质量。

• 如何获取完整代码？

  • 由于 AI 可能一次性无法生成完整代码，需要不断发送“继续”，直到 HTML 代码完整闭合（出现 </html>）。

1.2 进阶方法：引入 TailwindCSS + UI 优化

• 减少冗余代码：采用 TailwindCSS 代替原生 CSS，提高可读性并减少 Token 消耗。

  <script src="https://cdn.tailwindcss.com"></script>

• 优化 Prompt（本人人工标注：同上）：

  你是一位资深全栈工程师，参考 ui_ux_design 设计一个【健康类app】，模拟产品经理提出需求和信息架构，请自己构思好功能需求和界面，然后设计 UI/UX。
  1. 请引入 TailwindCSS CDN 来完成，而不是编写 style 样式。
  2. 仅支持暗色模式，注重 UI 细节。
  3. 生成 HTML 页面并写入 sj.html 文件。

• 改进点：

  • 1.0 版本 Ask 模式可用，但 Agent 模式可能导致生成不完整。
  • 2.0 版本测试发现，TailwindCSS 方案可以降低 Token 消耗，并让 UI 设计更加精美。

1.3 进阶 3.0：与设计软件协作（Pixso/Figma）【本人人工标注：可以考虑，之前没想到可以直接喂 SVG，但是感觉组件层级还是有问题】

• Cursor 生成 SVG 设计稿，并导入 Pixso/Figma 进行二次优化。

• 遇到的问题：

  • 直接复制 AI 生成的 SVG 时，Pixso/Figma 可能会出现字体错乱、图片丢失。

  • 解决方案：

    • 文本转曲，避免字体兼容性问题。
    • Base64 嵌入图片，避免外链失效。

2. AI 生成 UI 设计的可行性分析

• 适用场景：

  • 适用于 简单 UI 设计（如 To-Do 应用、健康管理 APP）。
  • 复杂 UI 仍然需要人工调整（如法律法考类 APP）。

• 优化思路：

  1. 第一版 UI 生成后，手动反馈问题（截图问题区域，让 AI 进行优化）。
  2. 调整 Prompt，优化结构（引导 AI 生成更符合需求的界面）。
  3. 结合 SVG 方案，提高设计自由度。