一键运行Vibe Prompts工作流，打包AI产品经理+UI设计师

一键运行Vibe Prompts工作流，打包AI产品经理+UI设计师 🍎 一键运行Vibe Prompts工作流，打包AI产品经理+UI设计师 Modified October 15, 2025 1. 基于 PRD 生成 UI 实现提示词 2. 在 React 项目中实现完整的 UI 组件 5、调试预览 启动 React 开发服务器： cd my app npm start 在浏览器中访问 http://localhost:3000 查看生成的 UI 原型。 效果来了 总的来说，这个项目的实用性还是非常强的。 相比普通 UI 工作流，vibe coding pro 核心优势是打通 “需求 设计 开发” 闭环， 实现从模糊创意到可交互原型的全链路自动化， 具体 3 点：👇🏻 先借 AI 将模糊需求转专业 PRD 定方向，再生成 UI，避免需求脱节； 从参考截图提取完整设计系统（色彩、字体等），生成风格统一的整套 UI，而非照搬单个元素； 直接输出可运行的 React 组件并支持预览交互，不用手动将静态 UI 转代码。 我是阿星 我们下期再见👋 1. 基于 PRD 生成 UI 实现提示词 2. 在 React 项目中实现完整的 UI 组件 5、调试预览 启动 React 开发服务器： cd my app npm start 在浏览器中访问 http://localhost:3000 查看生成的 UI 原型。 效果来了 总的来说，这个项目的实用性还是非常强的。 相比普通 UI 工作流，vibe coding pro 核心优势是打通 “需求 设计 开发” 闭环， 实现从模糊创意到可交互原型的全链路自动化， 具体 3 点：👇🏻 先借 AI 将模糊需求转专业 PRD 定方向，再生成 UI，避免需求脱节； 从参考截图提取完整设计系统（色彩、字体等），生成风格统一的整套 UI，而非照搬单个元素； 直接输出可运行的 React 组件并支持预览交互，不用手动将静态 UI 转代码。 先借 AI 将模糊需求转专业 PRD 定方向，再生成 UI，避免需求脱节； 从参考截图提取完整设计系统（色彩、字体等），生成风格统一的整套 UI，而非照搬单个元素； 直接输出可运行的 React 组件并支持预览交互，不用手动将静态 UI 转代码。 我是阿星 我们下期再见👋 原文链接：https://mp.weixin.qq.com/s/SBdL G8ogOsDwkoa5bhuPw 哈喽，大家好！ 我是阿星👋🏻 听说这个vibe coding pro特别火这两天 只用几张网页截图、几句模糊需求 就能直接生成可交互的reactUI组件和专业级产品需求文档？ 阿星测试的效果如下，不得不说专业的有点过分 而且都是直接能用的ract代码 阿星瞅了下主要功能就是—— • ✨ 将初步的产品创意结构化为专业的 PRD（和产品经理一样的） • 🎨 从参考 App 截图中提取设计系统 • 🚀 自动生成完整的 React UI 原型（看参考图直接生成） • 🔄 实现从创意到可视化原型的端到端闭环 一起来试试效果到底如何—— 准备工作 首先本地新建文件夹，打开系统终端，进入到这个文件夹路径。 cd+自己的路径 点右上角的code按钮或者直接输入git clone+你的项目地址。 git clone https://github.com/feizhen/vibe coding pro.git 下载到本地后把文件夹拖入vscode，你也可以拖入你的trae、qorder里。 我们首先打开vscode里的claudecode，阿星这里用的是kimi 生产PRD 1、创建需求文档 在 ideas/ 目录下创建一个 markdown 文件 在文档里写上你对这个产品的基本描述、mvp功能 图片里是作者自己提供的示例 我们暂且就直接用他提供的这个prd做 创意描述 我想实现一款产品帮助用户成功实现他的目标。用户在 app 里输入他想要实现的目标，大模型会根据用户预期达到的时间、每天可以投入的时间、当前基础等上下文自主规划目标达成的路径和里程碑。用户在这个过程中每天可以随时记录他学习的内容，包括但不限于：文字、图片、语音、链接、待办事项等。系统会定期总结用户的学习进度和习惯，并给出指导意见或鼓励。 MVP 功能范围 1. 用户注册和登陆 2. 创建目标：用户可以通过输入的方式告诉系统想要达成的目标。 3. 路径规划：大模型会根据用户的输入规划当前目标达成的路径和里程碑，用户可以按需调整规划 4. 学习记录：系统每天会为用户创建学习日志，用户可以在当天的日志上记录学习的内容，内容包括但不限于：文字、图片、语音、链接、待办事项等 5. 总结&推送：系统每天、每周或每个自定义周期内会对用户学习的记录进行总结，分析其学习进度和习惯，并给出指导意见或鼓励 2、生成增强版prd 在 Claude Code 中运行你的idea文件，注意文件名换成你自己的，路径仍然是在项目文件夹下不要跑错了： /pm file ideas/你的idea文件名.md 系统会启动一个 AI 产品经理与你对话，最终生成完整的 PRD 文档到 documents/prds/ 目录。 但是这里大家需要注意，如果你之前给的idea prd不够详细，它会要求你详细补充，否则不会给你生成documents文件夹下面的prds文件夹，更没有prd。 所以阿星又补充了一下了，才有了这个文件夹。 它嘎嘎给你写完了，但是是英文的。内容就是对初始需求做了提示词增强。 这张图是翻译后的。 那么有了prd咱们就可以开始画起来了—— 3、给AI提供UX参考样式 将参考 App 的截图放到 images/app name/ 目录下（支持 PNG、JPG、WebP 等格式）。 我这里给的图片太随意了，大家可以找点专业的ios图。 4、生成 UI 设计原型 运行 UX 设计工作流： 注意app name（你放图片的文件夹名）和your idea.md（你的初始需求文件名）和your prd.md（你的prd文件名）要替换成你实际的文件名 /ux dir images/app name idea ideas/your idea.md prd documents/prds/your prd.md 比如我的就改为了下面这样 /ux dir images/learnui idea ideas/idea.md prd documents/prds/001 goal achievement assistant prd.md 系统会咔咔一顿执行 比如，它会从你的图片里主要提取的是这些东西—— UX 工作流会从参考图片中自动提取： 色彩调色板：主色、辅色、功能色 排版系统：字体、字号、字重、行高 组件样式：按钮、卡片、输入框、导航等 间距系统：基础单位、内外边距、网格 圆角和阴影：视觉层次和深度 交互动效：过渡时间、缓动曲线 这是它自己在收到你的网页截图后 整个产品的UI设计提示词