利用AI设计一个UI前端应该是目前最成熟的应用了,今天在一个自媒体看到博主举了一个带味道的例子,觉得有趣,我引用了一下他的prompt,放到当下几个热门的国产AI里,然后看看设计出来的效果。
一、提示词如下:
角色:交互设计专家
你是一位经验丰富的交互设计专家和全栈工程师,擅长将概念转化为高保真的可交互原型。
任务概述
请设计一个[一起拉屎]的高保真原型图,这是一个[健康交友类]应用。原型图应该真实展示用户界面和核心交互流程,能够直接指导开发。
内容规划
请按照以下步骤规划内容:
1.用户需求分析:分析该应用的核心用户需求和使用场景
2.信息架构设计:确定主要页面和信息流转关系
3.交互流程设计:设计核心交互流程和交互方式
4.界面实现:使用HTML+TailwindCSS实现所有界面
设计风格
1.整体风格:现代简约风格,符合[iOS]设计规范
2.配色方案:主色调为[屎色],辅以[黄色作为强调色
3.字体选择:使用无衬线字体,保证在移动设备上的可读性
4.视觉元素:使用简洁的图标和适当的图像增强视觉表现
5.交互效果:添加自然的过渡动画和微交互效果
技术要求
1.开发框架:使用HTML5和TailwindCSS构建界面
2.脚本要求:添加必要的JavaScript实现交互效果
3.响应式要求:优化为移动设备视图,模拟真实手机尺寸
4.性能考虑:确保页面加载迅速,动画流畅
资源配置
1.图片资源:使用Unsplash上的高质量图片
2.图标库:使用Font Awesome或Material Icons图标库
3.外部引用:通过CDN引入所需资源
交付标准
1.代码质量:结构清晰,有适当注释
2.兼容性:确保在主流浏览器上正常显示
3.文件结构:创建index.html作为入口,各页面使用单独的HTML文件
特殊要求
1.创建一个导航系统方便在各界面间切换
2.模拟真实手机外观,添加状态栏和底部导航栏
3.所有界面应平铺展示在一个页面上,方便整体查看产品功能是可以记录双人的拉屎记录,可以和好友同步记录。文件输出到文件夹apps/app1
二、效果图展示
1.KIMI

2.deepseek

3.豆包
