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的实现等等。

相关推荐
咖啡の猫2 小时前
Android开发-常用布局
android·gitee
程序员老刘2 小时前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
Tans52 小时前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读
雨白3 小时前
实现双向滑动的 ScalableImageView(下)
android
峥嵘life3 小时前
Android Studio新版本编译release版本apk实现
android·ide·android studio
studyForMokey5 小时前
【Android 消息机制】Handler
android
敲代码的鱼哇5 小时前
跳转原生系统设置插件 支持安卓/iOS/鸿蒙UTS组件
android·ios·harmonyos
翻滚丷大头鱼5 小时前
android View详解—动画
android
我是好小孩5 小时前
[Android]RecycleView的item用法
android
胖虎16 小时前
Android Studio 读取本地文件(以 ZIP 为例)
android·ide·android studio·本地文件·读取本地文件