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

黄叔：全自动设计神器曝光！一个提示词让Claude 4狂生3000行代码，iOS界面秒出（提示词来了！） 黄叔：全自动设计神器曝光！一个提示词让Claude 4狂生3000行代码，iOS界面秒出（提示词来了！） Modified May 27, 2025 Code block Plain Text 核心功能：<列出该页面包含的主要功能 所有页面的信息输出完成后，更新【产品设计文档.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. 新建一个文件夹（用来存放生成的设计文件） 2. 用Cursor打开这个文件夹 3. 选择Agent模式，选择 Claude 4 Sonnet 模型（注意：不是Thinking模型） 4. 输入上面的提示词，回车 稍等片刻，下面给大家演示一下！ 开发流程实战演示 输入完提示词，Cursor会很快给你几个问题，让你确认： 这一步是需要你来告诉这个万能的提示词，你希望做什么样的产品！ 拿我们前面的"给你码"来举例，我输入的产品描述是： Code block Plain Text 做一个产品叫：给你码，现在很多AI应用都需要邀请码，然后产品蝗虫们都找不到但又想用邀请码，所以可以开发一个邀请码共享平台，这样AI应用可以来这里发布邀请码，用户也可以发布自己的邀请码，风格要酷炫一些，其他的你作为资深AI产品经理帮我补充 接着，Cursor会继续追问细节： 你可以详细描述需求，也可以像我这样简单说说，让AI发挥创意： Code block Plain Text AI应用可以选择三个：纳米AI搜索，Lovart，天工SkyWork作为示例，你可以使用搜索获取这三个产品的信息，其他的你看着办 然后Claude会开始输出， 一次生成3000行代码都没问题 ！是的，Claude 3.7大约只能输出1000行，而Claude 4的代码输出能力有了质的飞跃。我们静候佳音就好，它会完成整体的输出： 这里我们中断了一下，预防模型输出太长，只需要输入"继续"两个字，接着会一直到整个UI稿输出完毕： 最后，打开生成的UI.html文件，就能看到本文开头展示的那些精美界面了！ 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模型。 结语 通过Claude 4一键生成iOS设计，我们看到了AI在设计领域的巨大潜力。它不仅大大提高了设计效率，还能保证设计质量，是产品开发过程中的强大助手。 这个提示词的成功，也证明了提示词工程的价值。通过精心设计的提示词，我们可以引导AI生成符合预期的高质量内容，实现从创意到成品的快速转化。 注意：使用Curosr+Claude 4 Sonnet（不是thinking模型） 如何使用这个提示词？ 使用方法超级简单： 1. 新建一个文件夹（用来存放生成的设计文件） 2. 用Cursor打开这个文件夹 3. 选择Agent模式，选择 Claude 4 Sonnet 模型（注意：不是Thinking模型） 4. 输入上面的提示词，回车 稍等片刻，下面给大家演示一下！ 开发流程实战演示 输入完提示词，Cursor会很快给你几个问题，让你确认： 这一步是需要你来告诉这个万能的提示词，你希望做什么样的产品！ 拿我们前面的"给你码"来举例，我输入的产品描述是： 接着，Cursor会继续追问细节： 你可以详细描述需求，也可以像我这样简单说说，让AI发挥创意： 然后Claude会开始输出， 一次生成3000行代码都没问题 ！是的，Claude 3.7大约只能输出1000行，而Claude 4的代码输出能力有了质的飞跃。我们静候佳音就好，它会完成整体的输出： 这里我们中断了一下，预防模型输出太长，只需要输入"继续"两个字，接着会一直到整个UI稿输出完毕： 最后，打开生成的UI.html文件，就能看到本文开头展示的那些精美界面了！ 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模型。 结语 通过Claude 4一键生成iOS设计，我们看到了AI在设计领域的巨大潜力。它不仅大大提高了设计效率，还能保证设计质量，是产品开发过程中的强大助手。 这个提示词的成功，也证明了提示词工程的价值。通过精心设计的提示词，我们可以引导AI生成符合预期的高质量内容，实现从创意到成品的快速转化。 🔗 原文链接： https://mp.weixin.qq.com/s/6ylOzxiZ... https://mp.weixin.qq.com/s/6ylOzxiZ... 原创 AI产品黄叔 AI产品黄叔2025年05月24日 20:45 北京 你有没有过这样的经历？脑子里闪过一个绝妙的产品创意，却苦于没有设计能力把它变成现实？或者为了一个简单的界面原型，不得不花大价钱请设计师？ 最近我沉迷于一件事： 用Claude 4一步生成完整的iOS界面设计 。经过一天时间调试40多版Prompt后，我终于搞定了这个神奇的提示词，让AI直接输出高颜值的iOS界面设计，而且是 一次性生成多个页面 ！ 先看看效果，真的太香了！ 第一个产品： 给你码 （没有谐音梗）！idea来源于前段时间特工宇宙的文章《码都来》，我微创新了一下，搞了个「给你码」！ 第二个产品： 高考祈福App ，马上高考了，给考生祈福吧： 看到这些界面，你可能会惊讶：「这真的是AI生成的？也太专业了吧！」没错，这就是Claude 4的实力！而且整个过程只需要一个提示词，不需要任何设计基础。 完整提示词大公开