Android App:每次想写新项目锻炼一下,但苦于没有UI,那么这篇文章适合你~(适合基础小白锻炼)

一、问题

每次想写新项目锻炼一下,但苦于没有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的实现等等。

相关推荐
小趴菜82274 小时前
安卓接入Kwai广告源
android·kotlin
2501_916013744 小时前
iOS 混淆与 App Store 审核兼容性 避免被拒的策略与实战流程(iOS 混淆、ipa 加固、上架合规)
android·ios·小程序·https·uni-app·iphone·webview
程序员江同学5 小时前
Kotlin 技术月报 | 2025 年 9 月
android·kotlin
码农的小菜园6 小时前
探究ContentProvider(一)
android
时光少年7 小时前
Compose AnnotatedString实现Html样式解析
android·前端
hnlgzb8 小时前
安卓中,kotlin如何写app界面?
android·开发语言·kotlin
jzlhll1238 小时前
deepseek kotlin flow快生产者和慢消费者解决策略
android·kotlin
火柴就是我8 小时前
Android 事件分发之动态的决定某个View来处理事件
android
一直向钱8 小时前
FileProvider 配置必须针对 Android 7.0+(API 24+)做兼容
android
zh_xuan8 小时前
Android 消息循环机制
android