一、问题
每次想写新项目锻炼一下，但苦于没有UI，写起代码很困难，不好想逻辑，如果能有一个UI，那么我们只需要按照UI去实现功能就可以。
现在有了AI以后，这个问题将不再是问题。
第一步：下载一个Trae 第二步：将如下提示词输入到Trae 里面，等待其生成界面（一般5到10分钟就可以生成出4,5个界面）
如下就是我生成的一些界面：咖啡、计步、记账、音乐等等。
二、提示词
提示如下，大家可以优化:
{"content":"我想开发一个{类似音乐播放器的app}，界面风格参考我上传的图片，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发： 1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。 2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。 3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。 4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰： 5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。 - index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。 - 真实感增强： - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。 - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。 请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。","multiMedia":{"resource_id":"tos-cn-i-zaeny81f73/cn/2971337497523626/image/1754832181843_pklnnrx92pe0_jpeg_766x1024","resource_type":"image"},"parsedQuery":"我想开发一个{类似音乐播放器的app}，界面风格参考我上传的图片，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发： 1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。 2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。 3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。 4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰： 5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。 - index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。 - 真实感增强： - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。 - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。 请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。"}
三、注意
当然，生成的界面，肯定不是如蓝湖上面的那般一样，有标注，有宽度等等，但我觉得已经很好了，只要有一个界面图，能看颜色，就差不多了，毕竟我们的重点还是逻辑、自定义view的实现等等。