一个提示词完成一款App的设计（Claude4）
Claude4发布后，我昨天用了一天时间调了30多版Prompt，完成了一步做出多个IOS界面设计的提示词，先看看效果：
第一个产品：给你码（没有谐音梗)！idea来源于前段时间特工宇宙的文章：码都来，我微创新，搞了个给你码！
第二个产品：高考祈福App，马上高考了，给考生祈福吧：
完整提示词
#角色
你是一位资深产品经理、交互设计师、UI设计师
#任务
本次任务的最终目标是生成一套手机APP的UI设计图，首先在当前项目目录创建task.md文件，列举全部待办事项，每完成一个待办事项就编辑task.md文件，使用✅更新对应事项的完成状态，按照顺序依次完成待办直到所有待办事项均变为完成状态。
待办事项1：产品功能设计
- 初始信息：我是你的产品设计助手，现在请你告诉我，你想开发什么样的产品吧~
- 分析用户发送的信息，对不明确的细节进行追问
- 结合追问得到的答案，加以详细描述形成【产品设计文档.md】文件
待办事项2：交互设计
结合{待办事项1}输出的最终功能，确定该产品包含的所有页面，以下方示例格式输出全部页面的信息。
示例格式：
<页面名称>
用途：<页面的主要作用>
核心功能：<列出该页面包含的主要功能>
所有页面的信息输出完成后，更新【产品设计文档.md】，
待办事项3：UI设计
- 根据【产品设计文档.md】，同时遵守下方{UI设计风格}和{UI设计规格}，为每个设计图创建独立的html文件。
全部页面的html文件输出完成后，中断任务，提示用户输出“继续”指令
待办事项4：提示用户输入“继续”指令
待办事项5：创建一个UI.html文件
- UI.html页面的整体背景色为#f6f6f6
- 使用iframe技术将所有页面以适当的网格排列在UI.html里面，每个iframe的宽度固定为400px，高度固定为850px，保证每张设计图完整显示出来，不会被裁切或遮挡。
- iframe的背景色为##f6f6f6
待办事项6：自检代码
依次检查每个页面的html文件，
检查：强制隐藏所有滚动条
检查：设计图尺寸为 375x812PX
检查：信号栏与标题栏背景色必须一致（可以都是透明）
检查：图标和其他样式调用方式
检查：底部tab栏必须为白色填充，100%不透明度。
待办事项7：检查UI.html文件
检查UI.html文件的全部代码，删除iframe之外的多余装饰性元素，每张设计图的内部已经带有了mock up的样式代码，UI.html内的iframe不需要带有mock up的样式，如果有也需要进行删除。
#UI设计风格
优雅的清新主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
规范的间距；
#UI设计规格
1、单个设计图尺寸为 375x812PX，带有mock up模拟手机的样式。
2、图标:引用在线矢量图标库内的图标
3、图片: 使用Unsplash开源图片网站链接的形式引入
4、样式必须使用<link>标签引入 tailwindcss CDN来完成
5、状态栏显示时间、信号等模拟信息
6、信号栏与标题栏背景色必须一致（可以都是透明）
7、底部tab栏必须为白色填充，100%不透明度。
8、使用固定高度防止容器变形
#注意事项
1、mock up的颜色只能使用黑色
2、所有html中都强制隐藏滚动条
注意：使用Curosr+Claude 4 Sonnet（不是thinking模型）
怎么用这个提示词呢？新建文件夹，然后用Cursor打开这个文件夹，然后选择Agent模式，选择Claude 4 Sonnet模型，然后输入上面的提示词，回车。
稍等一会，就会开始出现下面的界面：
开发流程
输入完提示词，Cursor会很快给你几个问题，让你确认：
这一步是需要你来告诉这个万能的提示词，你希望做什么样的产品！
拿我们前面的“给你码”来举例，我们输入的提示词是：
做一个产品叫：给你码，现在很多AI应用都需要邀请码，然后产品蝗虫们都找不到但又想用邀请码，所以可以开发一个邀请码共享平台，这样AI应用可以来这里发布邀请码，用户也可以发布自己的邀请码，风格要酷炫一些，其他的你作为资深AI产品经理帮我补充
继续，Cursor会接着来追问细节：
你可以详细描述需求，也可以和我这样，简单说说，让AI发挥：
AI应用可以选择三个：纳米AI搜索，Lovart，天工SkyWork作为示例，你可以使用搜索获取这三个产品的信息，其他的你看着办
然后Claude会酷酷输出，一次生成3000行代码都没问题，是的，Claude 3.7大约只能输出1000行，所以我们静候佳音就好，然后它会完成整体的输出：
这里我们中断了一下，预防模型输出太长，只需要输出“继续”两个字，接着会一直到整个UI稿输出完毕：
好的，打开UI.html，可以看到本文一开始的界面了！
如果你想看高考祈福App的提示词，以及继续查看更多有关这个提示词的设计流程，欢迎打开咱们AI编程蓝皮书来看：
做一个产品叫：高考祈福，每个人可以给特定的用户祈福，也可以给全国考生祈福，可以新建考生，然后充钱让更多人来帮他一起祈福，也可以分享邀请更多人祈福。给那些想为高考考生祈福的朋友，祈福会有一些动画效果，其他的你来定，你是资深AI产品经理，很有洞察和创造力。
给那些想为高考考生祈福的朋友，祈福会有一些动画效果，整体设计要比较温馨，其他的你来定，你是资深AI产品经理，很有洞察和创造力。
提示词设计过程
这套提示词的重点可以用两个词来形容，分别是**「流程」和「渐进」**。
换个角度想想，即使是Agent，第一步做啥第二步做啥，也是需要流程设计的。所以我们其实是用提示词代替了图形界面的工作流形式。因为提示词不像图形化界面那样可以非常明确的设置出各个环节和任务，所以流程控制是重点。
因此首先对应的提示词是：
#角色
你是一位资深产品经理、交互设计师、UI设计师
#任务
本次任务的最终目标是生成一套手机APP的UI设计图，首先在当前项目目录创建task.md文件，列举全部待办事项，每完成一个待办事项就编辑task.md文件，使用✅更新对应事项的完成状态，按照顺序依次完成待办直到所有待办事项均变为完成状态。
渐进一方面是说：为了减少一开始对用户输入信息的要求过高，所以需要采用对话的方式来逐步引导用户完善信息，得到关键信息后由AI进行完善。
另一方面是指：每个环节的输入都依赖上一环节的输出。所以我们要在提示词中严格规定各个任务需要按照顺序执行，如果上一环节没有完成输出就开始下一环节，那么输入信息变差一定会导致下一环节的输出变差，影响最终结果和整体质量，所以这里把**按照顺序依次任务设定为最高级规则，也需要首先设定罗列task.md**。
随后是任务部分，也是这套提示词的重点，我们先看下提示词：
待办事项1：产品功能设计
- 初始信息：我是你的产品设计助手，现在请你告诉我，你想开发什么样的产品吧~
- 分析用户发送的信息，对不明确的细节进行追问
- 结合追问得到的答案，加以详细描述形成【产品设计文档.md】文件
待办事项2：交互设计
结合{待办事项1}输出的最终功能，确定该产品包含的所有页面，以下方示例格式输出全部页面的信息。
示例格式：
<页面名称>
用途：<页面的主要作用>
核心功能：<列出该页面包含的主要功能>
所有页面的信息输出完成后，更新【产品设计文档.md】，
待办事项3：UI设计
- 根据【产品设计文档.md】，同时遵守下方{UI设计风格}和{UI设计规格}，为每个设计图创建独立的html文件。
全部页面的html文件输出完成后，中断任务，提示用户输出“继续”指令
待办事项4：提示用户输入“继续”指令
待办事项5：创建一个UI.html文件
- UI.html页面的整体背景色为#f6f6f6
- 使用iframe技术将所有页面以适当的网格排列在UI.html里面，每个iframe的宽度固定为400px，高度固定为850px，保证每张设计图完整显示出来，不会被裁切或遮挡。
- iframe的背景色为##f6f6f6
待办事项6：自检代码
依次检查每个页面的html文件，
检查：强制隐藏所有滚动条
检查：设计图尺寸为 375x812PX
检查：信号栏与标题栏背景色必须一致（可以都是透明）
检查：图标和其他样式调用方式
检查：底部tab栏必须为白色填充，100%不透明度。
待办事项7：检查UI.html文件
检查UI.html文件的全部代码，删除iframe之外的多余装饰性元素，每张设计图的内部已经带有了mock up的样式代码，UI.html内的iframe不需要带有mock up的样式，如果有也需要进行删除。
如上文所说 ，这套提示词的最重要规则就是按照流程（待办事项顺序）执行，所以在任务模块的第一部分就要创建待办事项文件，并列出具体的细分任务。
这里面，完成任务后需要输出**产品设计文档.md**文件，用作信息留存，作为下一环节的输入信息和后续开发流程中的参考信息。功能设计完成后需要进行交互设计工作，对页面元素的显示规则、操作结果等做出具体的定义。
然后开始做交互设计，再是UI设计，交互设计规则被更到文档后，开始UI设计就可以得到更准确的结果，而UI设计环节要考虑的就更多一些，信息涉及到视觉风格和页面规格的定义，并且需要在任务中引用这两部分内容。在开始UI设计之前，再次要求了根据产品设计文档内的信息做输出。
到这就完成了一半，接着我们截断了任务，为啥呢？是为了防止遇到代码输出量限制的问题，这里为每个页面创建单独的html文件，所以最后再形成了聚合查看全部UI设计方案的UI.html文件（使用iframe技术只需要极少的代码就可以引入其他独立的UI文件，就像插入了链接一样，只需要一行代码）
这里等待用户输入**继续**，再创建一个UI.html把所有单个App的界面拼到一起，最后再检查一下代码，检查一下UI.html确实是按照我们的要求实现的。
后续又添加了独立的设计风格模块和设计规格模块，整体的提示词就形成了：
#UI设计风格
优雅的清新主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
规范的间距；
#UI设计规格
1、单个设计图尺寸为 375x812PX，带有mock up模拟手机的样式。
2、图标:引用在线矢量图标库内的图标
3、图片: 使用Unsplash开源图片网站链接的形式引入
4、样式必须使用<link>标签引入 tailwindcss CDN来完成
5、状态栏显示时间、信号等模拟信息
6、信号栏与标题栏背景色必须一致（可以都是透明）
7、底部tab栏必须为白色填充，100%不透明度。
8、使用固定高度防止容器变形
#注意事项
1、mock up的颜色只能使用黑色
2、所有html中都强制隐藏滚动条
以上是全部内容~ 后续会继续更新IOS APP的实际开发过程