1- 全自动设计神器曝光！一个提示词让 Claude 4 狂生 3000 行代码，iOS 界面秒出（提示词来了！）

你有没有过这样的经历？脑子里闪过一个绝妙的产品创意，却苦于没有设计能力把它变成现实？或者为了一个简单的界面原型，不得不花大价钱请设计师？

最近我沉迷于一件事：用 Claude 4 一步生成完整的 iOS 界面设计。经过一天时间调试 40 多版 Prompt 后，我终于搞定了这个神奇的提示词，让 AI 直接输出高颜值的 iOS 界面设计，而且是一次性生成多个页面！

1.1- 先看看效果，真的太香了

1.1.1- 给你码

第一个产品：给你码（没有谐音梗）！idea 来源于前段时间特工宇宙的文章《码都来》，我微创新了一下，搞了个「给你码」！

1.1.2- 高考祈福 App

第二个产品：高考祈福 App，马上高考了，给考生祈福吧：

看到这些界面，你可能会惊讶：「这真的是 AI 生成的？也太专业了吧！」没错，这就是 Claude 4 的实力！而且整个过程只需要一个提示词，不需要任何设计基础。

1.2- 完整提示词大公开

#角色
你是一位资深产品经理、交互设计师、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 模型）

1.3- 如何使用这个提示词？

使用方法超级简单：

1. 新建一个文件夹（用来存放生成的设计文件）
2. 用 Cursor 打开这个文件夹
3. 选择 Agent 模式，选择Claude 4 Sonnet模型（注意：不是 Thinking 模型）
4. 输入上面的提示词，回车

稍等片刻，下面给大家演示一下！

1.4- 开发流程实战演示

输入完提示词，Cursor 会很快给你几个问题，让你确认：

这一步是需要你来告诉这个万能的提示词，你希望做什么样的产品！

拿我们前面的 " 给你码 " 来举例，我输入的产品描述是：

做一个产品叫：给你码，现在很多AI应用都需要邀请码，然后产品蝗虫们都找不到但又想用邀请码，所以可以开发一个邀请码共享平台，这样AI应用可以来这里发布邀请码，用户也可以发布自己的邀请码，风格要酷炫一些，其他的你作为资深AI产品经理帮我补充

接着，Cursor 会继续追问细节：

你可以详细描述需求，也可以像我这样简单说说，让 AI 发挥创意：

AI应用可以选择三个：纳米AI搜索，Lovart，天工SkyWork作为示例，你可以使用搜索获取这三个产品的信息，其他的你看着办

然后 Claude 会开始输出，一次生成 3000 行代码都没问题！是的，Claude 3.7 大约只能输出 1000 行，而 Claude 4 的代码输出能力有了质的飞跃。我们静候佳音就好，它会完成整体的输出：

这里我们中断了一下，预防模型输出太长，只需要输入 " 继续 " 两个字，接着会一直到整个 UI 稿输出完毕：

最后，打开生成的 UI.html 文件，就能看到本文开头展示的那些精美界面了！

1.5- Claude 4 到底哪里更强了？

其实这个直出设计稿的提示词，在 3 月份就完成了，那会用 Claude 3.7 也能出整套设计稿，但效果不够稳定。一直拖到 Claude 4 发布，我才重新调整了提示词。

经过 40 多版提示词的调试，才达到现在相对稳定的效果。从个人体验来说，我觉得 Claude 4 Sonnet 的审美能力并没有显著增强，但代码输出能力有了几倍的提升！最直观的感受是：

1. 每次可以输出 3000 行以上的代码，而且几乎不出错
2. 代码质量更高，生成的 HTML/CSS 更加规范和优化
3. 指令理解更精准，能更好地遵循 UI 设计规范

有趣的是，同一套提示词用 Claude 4 Sonnet Thinking 模型反而容易出各种 bug，所以这里强烈建议用 Claude 4 Sonnet 模型。

1.6- 结语

通过 Claude 4 一键生成 iOS 设计，我们看到了 AI 在设计领域的巨大潜力。它不仅大大提高了设计效率，还能保证设计质量，是产品开发过程中的强大助手。

这个提示词的成功，也证明了提示词工程的价值。通过精心设计的提示词，我们可以引导 AI 生成符合预期的高质量内容，实现从创意到成品的快速转化。