当前位置：

社区首页

文化娱乐

在线教育

软件技能

AIGC文章详情

不懂代码也能做产品！Vibe Coding的正确打开方式，三个技巧让AI不再跑偏

源自57位全网作者

11:01

精选参考来源

🟦私藏！ 7个秘籍让你Vibe Coding效率翻10倍

Vibe Coding 高效工作流。很多 AI Coding 项目翻车，不是工具不够强，而是任务没有讲清楚。我的工作方法主要有 8 步： 1. 先写项目规则使用 AGENTS.md 说明技术栈、目录结构、命名规范、禁改文件、测试命令和交付要求。 2. 先规划，再执行复杂任务先用 /plan。让 AI 阅读项目、拆分模块、说明改动和风险；确认方案后再写代码。 3. 明确验收标准不要说“优化一下”，要写清楚目标、保留内容、交互效果、移动端要求，以及构建和测试必须通过。 4. 一次只做一件事把大需求拆成小闭环，例如：页面 → 接口 → 错误处理 → 状态保存。任务越明确，输出越稳定。 5. 先测试，再实现先生成测试用例，再编写代码。涉及依赖、配置、删除文件或数据库迁移时，先让 AI 说明原因。 6. 完成后主动复查使用 /review 检查：是否改错文件是否遗漏测试是否存在边界问题 7. 跑偏就重置需求反复修改、上下文变乱时，直接使用 /clear 重新开始。连续纠正两次仍不理想，就不要继续硬改。 8. 沉淀为 Skills 或 MCP 用 AGENTS.md 固定项目规则，用 Skills 固定工作流程，用 MCP 连接文档、设计稿、GitHub 和数据库等真实上下文。核心原则：不是把需求扔给 AI，而是先把问题想清楚，再让 AI 执行。 #vibe #vibecoding #codex #claude #ai

Young 2026-08-01

来自抖音

全部
来源

内容由AI生成

1. 🟦私藏！ 7个秘籍让你Vibe Coding效率翻10倍

2. Vibe Coding 高效工作流。很多 AI Coding 项目翻车，不是工具不够强，而是任务没有讲清楚。我的工作方法主要有 8 步： 1. 先写项目规则使用 AGENTS.md 说明技术栈、目录结构、命名规范、禁改文件、测试命令和交付要求。 2. 先规划，再执行复杂任务先用 /plan。让 AI 阅读项目、拆分模块、说明改动和风险；确认方案后再写代码。 3. 明确验收标准不要说“优化一下”，要写清楚目标、保留内容、交互效果、移动端要求，以及构建和测试必须通过。 4. 一次只做一件事把大需求拆成小闭环，例如：页面 → 接口 → 错误处理 → 状态保存。任务越明确，输出越稳定。 5. 先测试，再实现先生成测试用例，再编写代码。涉及依赖、配置、删除文件或数据库迁移时，先让 AI 说明原因。 6. 完成后主动复查使用 /review 检查：是否改错文件是否遗漏测试是否存在边界问题 7. 跑偏就重置需求反复修改、上下文变乱时，直接使用 /clear 重新开始。连续纠正两次仍不理想，就不要继续硬改。 8. 沉淀为 Skills 或 MCP 用 AGENTS.md 固定项目规则，用 Skills 固定工作流程，用 MCP 连接文档、设计稿、GitHub 和数据库等真实上下文。核心原则：不是把需求扔给 AI，而是先把问题想清楚，再让 AI 执行。 #vibe #vibecoding #codex #claude #ai

3. Vibe Coding 是什么？分享我的 9 步工作流

4. 用AI混合工作流，我把Vibecoding从3小时压缩到25分钟

5. 我最新的 vibecoding 工作流。4 月写过一篇 vibecoding 工作方式，受到了很多关注和讨论，两个月过去了，那套工作流已经有了很大的变化，今天就拆开讲一下。先说结论：底层原则没变，但我的角色变了。以前我是审核员，现在更像架构师加项目经理。第一，主力模型从 Opus 4.6 换成了 Fable 5 这是最本质的变化，模型能力有巨大提升，很多人工介入的环节都可以自动化了。第二，模型能力和上下文的增强，使得多 Agent 并行成为可能我在 Claude Code 里配了 6 个 agent 加一个总调度，后端、前端、产品、营销、审查各管一摊，总调度负责派活。配置很简单，~/.claude/agents/ 下一个 markdown 文件就是一个 agent，上面 YAML 头，下面写角色和协作关系。最关键两条：description 要精确到技术栈，写含糊了永远不会被触发；写代码的和审代码的必须分开，又当裁判又当运动员等于没审。第三，复杂任务上 Workflow 本质是让 Claude 自己写一段 JS 脚本，去调度几十上百个子 agent。它从结构上解决了单 session 的老毛病：干着干着偷懒、看不出自己的 bug、丢掉最初的目标。代码迁移、测试覆盖、安全审计这种大规模重复的活，特别合适。记得用 /goal 定目标，再设一个 token 上限，不然账单会吓你一跳。第四，能自动化的都交给 Loops 以前是打一段需求、等结果、手动改、再问一遍，全程手工。现在用 loop 和 goal，把它变成自动流水线：设目标、给方案、执行、验证、继续迭代，不达标不停。前提是目标和验证必须能量化。代码天然适合，能不能编译、测试过没过，都是硬指标。第五，CLAUDE.md 比以前更重要了以前它是写给一个 session 看的，现在是写给一整个 agent 团队看的。技术栈、目录结构、命名规范、每个 agent 的职责边界，全靠它对齐。说到底，vibecoding 发展太快，你要做的不是天天追新工具，是把自己从写代码的人，慢慢变成设计系统的人。 #vibecoding #shipswift #软件开发 #创业 #出海

6. VibeCoding大赏｜AI做网页太土？3招秒变商业级UI Day11｜29天0基础玩转Vibe Coding。 ❌ 你用 AI 做的网页，是不是总有一股浓浓的“90年代土味”和廉价的Demo感？别怪 AI！因为它默认是在用“程序员模式”干活，根本没管审美！🤷‍♂️ 🚀 Day11 纯干货局：今天不讲写代码，教你化身“视觉导演”！大厂PM手把手教你 3 个秘籍，把丑陋的原始网页，一秒精修成商业级APP： 🎨 秘籍 1：截图“偷师”法（附神级提示词）看到好看的网站，直接截图发给AI！ ⚠️ 抄作业提示词：“重点提取图中的留白比例、圆角大小和阴影。为我生成相似风格，但【只抄审美，绝不抄业务结构】！” 🛠 秘籍 2：锁定现代组件库给 AI 下死命令：排版必须用 Tailwind CSS，交互必须用 Radix UI！直接锁死大厂前端规范，绝对不跑偏。 📏 秘籍 3：极简审美约束告诉 AI：最多只用1种主色+2种中性色！加大所有内边距（Padding）让页面深呼吸！统一所有卡片圆角！ 🎁 今日作业：拿着这三个秘籍，去给你的 v0.1 小工具“换个皮”吧！把你优化前后的对比截图发在评论区，看看谁的审美跃升最大！👇 #vibecoding大赏 #ai新星计划 #vibeCoding #从0开始学编程 #ai编程

7. VibeCoding大赏。我是 02 后，16 岁入行钻研计算机，没上过大学，也并无专业产品从业经验。这次借助 VibeCoding，独立打造出论文AI 配图生成 + AI 智能指导项目。初期依托自身沉淀的工作流，联动 AI 快速搭建 MVP 版本，快速校验市场需求。针对用户绘制 UML 图表、梳理项目逻辑时遇到的各类问题收集反馈，拆解痛点，以此作为功能迭代优化的核心方向，结合过往经验持续打磨调整。历经多轮版本迭代，项目现已成型完整 AI 生成体系，涵盖作品展示、用户交互、AI 工作流引擎三大模块。对比常规 AI 工具，在运行稳定性、生成精准度与实际使用体验上优势显著。创作路上感触颇深：AI 不止是编码助手，更是并肩协作的产品搭档，支持边开发边调整、边验证边优化。项目上线一月，用户量成功破万。后续也会持续打磨升级，推出更多优质实用功能。各行各业有实操痛点、自有工作流体系的朋友，都可以体验尝试～ #vibecoding大赏 #ai新星 #毕设论文智能AI画图助手

8. Vibe Coding 经验分享分享一下我实践过的vibe coding经验： 1.一定要用好模型，不然你就别coding了，垃圾模型只会让你coding体验一团糟。 2.编程工具选择(选一种)：codex， cloud code , cursor ， trae国际版。 3.开局先写需求文档，定死架构，别让AI在错误的方向里疯狂自嗨。 4.Vibe Coding 绝不是盲目拼速度。AI 负责极致的执行力，但方向、结构、边界和验收等必须由人来定。 5.多用plan mode(计划模式)，复杂功能先出 Plan。Plan 盘不清楚，绝不直接跑代码。 6.一个功能或者一个bug或者一个问题实现后,立刻切换新的对话。#vibecoding #codex #claude

9. 不碰一行代码，串联多个AI Agent开发App的工作流拆解这条视频不是展示我做了什么功能，而是想分享我怎么把 CodeX、Claude、Claude Code 串成一条工作流。一个做不好就换下一个继续接力，人负责判断和粘合，AI 负责执行，这才是我理解的 Vibe Coding。 #AI #vibecoding #效率 #ai使用技巧 #claude

10. VibeCoding大赏｜搭建ClaudeCode翻译工作流使用国产模型DeepSeek 在Claude Code中全流程实操「动态工作流」Dynamic Workflows 。一句话就能把5个文件批量翻译成英德法日韩5种语言。它会自动把任务拆开，后台调度30个AI Agent，并动态适配并行执行，处理文件越多越复杂，那么动态工作流的优势就越大。而且工作流能保存复用，常做翻译的下次直接调用，效率直接拉满。尤其符合规模比较大、执行过程可拆分、执行流程又是固定的任务，形成一套可复用的工作流，来替你打工干活了。 #ai新星计划 #vibecoding大赏 #ClaudeCode #DeepSeek #翻译

11. VibeCoding大赏 16个VibeCoding技巧还在被 AI 代码幻觉、报错问题困扰？90% 的程序员都用错了 AI 编程方式，掌握 Vibe Coding 完成思维转型，从写代码执行者变身 AI 管理者，分享实战总结的 16 个技巧与标准化协作流程，轻松告别低效改 bug。 #VibeCoding大赏 #ai新星计划 #VibeCoding #AI编程 #程序员

12. 全攻略｜VibeCoding的5步流程，1个案例

13. 一次用 Vibe Coding 解决真实生图工作流痛点的 AI 实战案例。

14. Vibe Coding 实战:多智能体AI长篇小说工作流 Vibe Coding 实战：Claude Fable 5 + GPT 5.5 + Gemini 3.5 组队做了一个多智能体 AI 小说自动化长篇小说工作流，这期分享一次 vibecoding 实战：我用 Claude Fable 5、GPT 5.5、Gemini 3.5 分工协作，做了一个多智能体 AI 小说创作工具「墨灵 AI 小说工坊」。从模糊想法到 PRD、UI 原型、前后端实现、最后验收，我把不同模型放在不同阶段使用，而不是让一个 AI 一口气写完。评论区可以分享你的 AI 开发技巧，也欢迎说说你的行业需求和痛点，我会挑一些用这套方式拆成产品方案。 #VibeCoding #vibecoding大赏 #上热门 #ai新星计划

15. vibecoding效率提升100% 如何利用AI提高工作效率，强调不要盲目依赖现成的工具，而是要自己组装适合自己需求的工作流。通过Codex搜索热门开源项目和scale，提取有用能力，逐步优化，形成完美的工作流。这种方法能节省精力，提高效率，拉开人与人之间的差距。 #vibecoding #ai #agent #skill #只讲干货不讲废话

16. Vibe Coding 入门教程-md。入门篇-从了解到理解，想看其他场景实操案例，可以打在评论区，我有的话就分享给你们这篇入门教程整理了：・12 款主流 Vibe Coding 工具对比・四步核心工作流・提示词四要素模型・常见误区与避坑指南适合所有想提升开发效率的开发者，建议收藏。 #VibeCoding #vibecoding大赏 #ai新星计划 #Codex #入门教程

17. 「VibeCoding大赏」。请允许我介绍一下claude-workflow-studio：一个多agent工作流管理平台，提供可视化和便捷的工作流搭建。这个项目的灵感来源于b站上某个agent教学视频里，up主简短几秒的个人工作流平台展示，于是我就想能不能给我经常使用的claude code也建立一个这样的可视化平台。我查阅了许多资料，了解到claude code虽然有一套比较成熟的workflow机制，但是用户只能通过提示词去限定AI按照自己的要求形成一个工作流，但AI不可能完全遵循指令，所以我就以这一点为切入口，vibe coding出了这个项目，通过系统级别的限制，严格让AI按照你在图形界面搭好的工作流上面跑，避免了因AI幻觉而导致工作流跑偏的问题。这个作品算是对官方的一个比较拙劣的模仿和改进吧，我前后共做了三四次大改版，从一开始的“表面上遵循跑通”到现在能做到真正的严格遵循，期间好几次因为找不到问题根源并且AI一直敷衍回复我“你说得对”想放弃了，不过秉着有始有终的原则，我还是做出来了。这个过程中虽然代码能力没什么提升，但是我学会了怎样更好的表述自己的需求，提升了debug的能力，也不失为一个宝贵的经验吧！如果这个项目对你有什么帮助或启发的话，欢迎点一个star⭐！ #vibecoding大赏 #ai新星计划 #ai

18. CodeX使用教程：手把手带你掌握基础功能

19. VibeCoding｜AI原型迭代管理，效率拉满💥 产品人 AI 提效小技巧✨ 日常用 AI 做原型💻 页面零散、版本混乱，协作超麻烦分享 VibeCoding 实操📌 一站式管理 AI 原型迭代一键发布 + 生成预览链接🔗 团队交付、版本管理更省心 #ai产品经理 # #vibecoding #产品经理 #ai画原型 #产品经理干货

20. 几句话，生成你自己风格的 PRD工作流

21. Vibe Coding 核心技巧与工具选型：Trae 才是当下首选开发利器

22. 「VibeCoding 大赏」作为产品经理，脑子里总蹦出提升效率的小点子，但不懂代码一直是落地的大难题💡。这次赶上VibeCoding大赏活动，我连续熬夜，靠扣子工作流和豆包搭出了两套原创自动化工具，终于把想法变成了真东西！ 🏋️‍♂️健身管理工作流自动记录训练重量、组数，还能结合目标生成个性化策略，训练节奏稳稳拿捏～ 📝智能备忘录工作流把工作和生活事项分的清清楚楚，周末自动生成周报，一键切换汇报、简洁记录等口吻，职场场景适配度拉满！全程没写一行代码，可视化拖拽就搞定了，普通人也能玩明白VibeCoding的感觉太爽了！接下来打算继续搭生活类工具，用AI解放双手，让更多创意落地～ #vibecoding大赏 #ai新星计划

23. 分享一个很适合小白的vibe coding 工作流：

24. 文科生Vibecoding，手搓了一个外语人就业平台~

25. 10张图讲清 Vibe Coding.Vibe Coding 不是让 AI 乱写代码。真正有用的流程是：先把想法写成需求，再砍出 MVP，选好工具和技术路线，先搭项目骨架，再处理页面状态、报错调试、diff 检查、功能验收和上线迭代。我把这套流程整理成了 10 张图。适合想用 AI 做个人工具、网页、小产品、MVP 原型的人收藏。 #VibeCoding #AI编程 #Codex #ClaudeCode #ai

26. UX设计师的 Vibe Coding 工作流

27. 什么是Vibe Coding？生产环境正确实操指南来了

28. Vibecoding大赏还在用 compact 续命、把 CLAUDE.md 当记事本？这些都不是长期记忆。本期分享我长期使用的结构化记忆工作流：Claude Code 原生 AutoMemory 加一套整理规则，四段提示词就能上手。真实测试了compact与AutoMemory使用效果。还可以使用我的开源协议 Engramory将这套工作流移到其他Agent上使用。 #vibecoding大赏 #ai新星计划 #Claude

29. 必学！7个命令，0基础5分钟速通VibeCoding，做出规范级项目！

30. 10个vibecoding技巧让你效率翻倍 🚀

31. 开发不用求设计师！Pencil+TRAE终极白嫖视频教程很多在做 VibeCoding、小程序开发的朋友本身并非设计专业出身，在项目界面、视觉美化、UI 制作上一直比较吃力，想要借助 AI 提升设计效率，却不知道工具搭配与完整工作流。本期全程无废话纯实操，完整演示一套可直接落地的工作流：使用免费开源 Pencil 设计软件结合 AI，从零开始生成符合项目需求的应用视觉界面，完整讲解工具用法、提示词思路、界面优化、效果落地。无需专业设计基础，所有步骤均可直接复刻，适配个人项目、微信小程序、自研应用的 UI 制作，补齐开发过程中的视觉短板。 #视频教程 #ai设计 #vibecoding #程序员vlog #实操

32. 5分钟带你入门vibe coding！包教包会 | 0基础如何做网站或网页应用

33. 为啥vibe coding 会有一种让人上头的感觉，我没有？

34. 你开始讨厌Vibe coding了吗？

35. DailySecurity 安全日报：近期的一个 Vibe Coding 小项目实践

36. Vibe Coding实战复盘：做玩具容易，做产品难

37. AI时代，人人都是程序员：Vibe Coding如何重塑软件开发的未来

38. 我用Vibe Coding做了套HR AI系统，现在把全过程复盘给你

39. AI生成的网页总没有设计感？我发现了3个神器

40. 你动嘴，AI干活：这就是Vibe Coding！

41. 当代码有了“体温”：我用Vibe Coding给孩子们造了个AI学伴

42. 12 Vibe Coding 网站美化技巧

43. 怎么才能Vibe Code出来漂亮的UI？（四）

44. Vibe Coding 前端 UI 高度还原指南：告别 AI 味，打造专业级界面

45. 我给deepseek-tui做了GUI

46. 5个Vibe Coding审美提升网站（小白经验分享）这一期不聊抽象观点，直接分享资源。我在补产品体验 / 交互动效 / 页面节奏 / 视觉表达相关知识，所以整理了 5 个我自己在看的网站和资源，适合想做 vibe coding / AI 产品 / 个人网站 / 作品集的人参考。这期视频里提到的 5 个资源是： Motion Designspells Unicorn Studio navnav+ React Bits 如果你也想让自己的页面少一点模板感、少一点“AI味”，多一点动效、细节和氛围感，这几个都很值得先收藏起来慢慢看。如果你们喜欢这一期，下一条我可以继续拆：我怎么把这些灵感真正用到自己的产品里。#vibecoding #交互动效 #网页设计 #产品体验 #UI设计

47. Vibecoding必修 | 6个灵感库拯救AI审美为什么你vibe coding出来的东西总是很丑？因为你没有审美！没关系，这六个灵感库帮你提高审美，涉及网站，组件，APP。什么审美都有的救#vibecoding #vibecoding大赏 #ai设计 #ai网站搭建 #ai审美

48. Vibecoding做的页面不高级怎么办？提升审美产品的卖相决定了用户的第一印象和氛围感受， 3个Vibecoding审美库+2个AI生图技巧，帮助非设计出身的小伙伴们，也能通过合适的方法以及工具，实现设计师水平的页面配图和设计 #vibecoding #ui设计 #ai #ai工具 #claudecode

49. Vibe Coding 前先逛这7个网站，审美会稳很多拒绝ai泔水！AI 做出来的网站一股模板味，我按用途找了一些参考网站： 1. Pinterest：非常经典的找灵感、找图网站。 2. SiteInspire：按风格、类型和主题筛，适合找完整网站。 3. Recent.Design：最新的视觉方向，观察 UI、排版、视觉趋势与品牌表达的最佳灵感库之一 4. Motion Sites：找 Hero、页面动效及可交给 AI 的实现提示词。 5. Land-book：研究真实落地页的结构与商业表达；并且会显示该页面用什么色块设计的。 6. Awwwards：看大胆动效和视觉实验，但不要照搬它的交互复杂度。 7. ShotDeck：找电影分镜、光线和构图参考。找着找着就会有些头绪的，把喜欢的截图放一个文件夹里。如果迟迟不能开始，那就先从想要做的个人网站的风格开始吧哈哈 #网站设计# #审美提升# #设计灵感# #网页参考# #VibeCoding##vibecoding# #ai#

50. VibeCoding——从0到1开发微信小程序详细教程（六、优化后台管理端页面）

51. 如何调教vibecoding审美，价值10万？！找到小白也能轻松做出高级审美的vibecoding捷径啦！ 3招小技巧0基础也能上手 Btw，kimi2.6这次更新之后的前端审美能力确实aha到我了，审美届最严格的老师！ #vibecoding #vibecoding大赏 #ai #ai工具 #kimi

52. Vibe Coding 这样描述页面会更好看

53. AI设计页面太丑了，我尝试了6种方法，终于让我找到了正解

54. 3招拯救Vibecoding丑页面！0基础保姆级教程

55. AI编程没审美？那是你没用这个网站很多人玩 Vibe Coding，用 Cursor、gemini写出一堆逻辑，结果界面一出来——“直男审美”，满屏的默认按钮和死板布局。今天就给大家介绍一个小技巧，可以让大家的vibecoding产品变得高级起来。 #vibecoding #设计网站 #UI设计 #独立开发 #生产力工具

56. Vibe Coding 页面又丑又平？3 个技巧复刻顶级设计

57. 如何coding出你的第一个漂亮网站