Cursor + Claude 4 自动输出APP设计稿，再也不需要设计师和产品经理了
作者:giscafer
平台:微信公众号
日期:2025-07-30
探索如何利用Cursor和Claude 4 AI工具自动生成APP设计稿，实现从产品设计到UI设计的全流程自动化，提升开发效率，减少对人力的依赖。
Cursor实践项目AI设计自动化开发Claude 4APP设计产品经理替代UI自动化全栈开发
Cursor + Claude 4 自动输出APP设计稿，再也不需要设计师和产品经理了
作者: giscafer 原始链接: 原始链接 👤 作者: giscafer 🌐 来源: 微信公众号
如果你已经是全栈开发工程师或者是入门了全栈，AGI可以帮助你进入真全周期工程师的角色。如果你只是某个端开发工程师（前端或者后端），AGI也可以协助你成为入门级全栈开发或独立开发者。
全周期工程师：用户+产品+设计师+前端开发+后端开发+测试工程师+运维+运营。
全周期工程师也可以认为是独立开发者，自己做产品上线变现。
自动设计APP原型提示词如下：
## 角色
你是一位资深产品经理、交互设计师、UI设计师
## 任务
本次任务的最终目标是生成一套跨平台 LeekHub Stock 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中都强制隐藏滚动条
新建一个 README.md 文档，粘贴上边的Prompt描述进去，可以自己进行微调。然后投喂给Cursor Chat，选择 Claude 4 Agent 模式即可
Agent 会询问你的想法，你可以自己提要求调整。这里演示效果偷懒一下：
最后生成了html 静态代码文件，双击都可以在浏览器打开看到效果
如上图，每个页面是独立的文件，我们需要单独打开看效果，如果页面很多，这样就很累，所以可以让AI生成一个总览所有页面效果的页面就好
待办事项5：创建一个UI.html文件
- UI.html页面的整体背景色为#f6f6f6
- 使用iframe技术将所有页面以适当的网格排列在UI.html里面，每个iframe的宽度固定为400px，高度固定为850px，保证每张设计图完整显示出来，不会被裁切或遮挡。
- iframe的背景色为##f6f6f6
这样我们打开UI.html 就有一个所有页面效果的预览图
至此，UI设计稿已经设计完成了。接下来如果某个页面不满意就要求AI Agent去调整，调整完成后再进行第二部AI生成前后端代码，然后本地测试运行。最后就发布上线了。
未来AGI确实可以大幅度提效，并且会取代大部分工作。我们要做的是跟进变化，熟悉和使用工具，让我们的工作方式也带来变化。
最难的是自己不行动起来，不去了解新事物……