分享下用Cursor+Claude 3.7 Sonnet一段话生成高保真app原型图的提示词

提示词

我想开发一个{类似小宇宙的播客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 代码,并确保其可用于实际开发。

效果还是很满意的 不过有个小瑕疵 从 Unsplash 来的图片有一张失效了 懒得纠正了,不影响效果。

会生成以下文件 如果有修改需求可以直接把 html 导入设计工具 可以大大节省初期建设的思考时间

103 Likes

不错:+1: 整个最后的截图是自己拼接的吗

3 Likes

不是拼的,生成出来就是这样的。

2 Likes

直接生成的,要求 ai 把 index.html 当入口设计图,然后用的浏览器插件( FireShot)全屏截图

2 Likes

太强了!!!!!!!!

2 Likes

牛哇!感谢!

1 Like

流批,我先mark一下。

1 Like

看着真不错

1 Like

听说这就是 小猫补光灯 作者用的提示词

1 Like

太强了佬

1 Like

可以的,佬,这个效果直接起飞

1 Like

感谢分享

1 Like

昨天晚上看到飞书 Trae官方群里面分享了这个,没想到今天就看到大佬本人了

2 Likes

怎么想出来的这种提示词 :call_me_hand:

2 Likes

先mark一下,
我用cline也能有这个效果吗

1 Like

可以去搜搜AI进化论-花生,这提示词是他写的

1 Like

昨天在找这个,今天佬发出来了 :+1:

太强了佬

确实牛的。有了AI,真是只有不敢想没有不能干

太强了,牛啊!!!!!!!!