Cursor一段话高保真的UI原形图
目录
Cursor一段话高保真的UI原形图
我想开发一个(XXX功能的中文App,等等说明),现在需要输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发
1、用户体验分析:先分析这个App的用户需求和主要功能,确定核心交互逻辑。
2、产品界面规划:作为产品经理,定义关键界面,确保产品功能模块和信息架构合理。
3、高保真UI设计:作为UI设计师,设计贴近真实iOS设计规范的界面,使用现代化的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代码,并确保其可用于实际iOS App的开发。
(提示词模板来自「小猫补光灯」创作者-花生的最佳实践,这句话不用输入给cursor)