我用 4 小时，让 AI 帮我从 0 开发了一个 AI 漫剧生成平台

2026-03-16 5 纸飞机账号购买

什么是 Vibe Coding？

在2025年2月的时候，有一位曾经担任过特斯拉AI总监的人，同时还是OpenAI联合创始人的Andrej Karpathy，提出了一个具有颠覆性的编程理念，这个理念叫做Vibe Coding（氛围编程）。

这句话经翻译后变为：你并非再切实地“编写”代码，而是借由自然语言去阐述你所期望达成的内容，进而安排AI生成代码。对于生成的代码，你仅需“体悟氛围”，判别结果是否正确即可，若不正确，便持续运用自然语言予以调适。

说来这听着特别玄乎，可我实实在在是凭借这种方式达成了。这儿要记述的是，我历经从无到有，去开发一个AI漫剧生成平台的一整个历程。

Vibe Coding的核心特点，有别于传统编程，它具备独特之处，是一种特殊的编程方式，其相关特性在编程领域别具一格，与传统编程大不相同。

输入方式

写代码

写自然语言

开发节奏

设计→编码→测试

描述→生成→看效果→调整

开发者角色

程序员

更像产品经理

最重要的东西

代码能力

文档和需求描述

AI 时代下的编程：文档为王。

工具选择：Claude Code

这个项目，把Claude Code运用成AI编程工具，搭配以下Skills插件体系，达成了完整的Vibe Coding工作流。

必要安装Skills插件，其中1. superpowers，它是完整的，关于AI开发工作流的框架。

这乃是整个实践所具备的核心，其中 superpowers 涵盖 14 个能够进行组合的技能，这些技能包含：

强制执行"红-绿-重构"TDD 循环、四阶段调试方法论。

/plugin install superpowers@claude-plugins-official

2. 前端设计，这是Anthropic官方所具备的前端设计技能。

特别针对 Claude 进行专门指导，使得其避免那种所谓 “AI 通用美学”，进而做出大胆的设计决策，同时还要注重排版方面，以及配色主题方面，还有动效微交互方面。它是特别适合 React + Tailwind 技术栈的。

npx skills add https://github.com/anthropics/skills --skill frontend-design

3. 与文件相关的规划，—— 马努斯风格的持久化计划性安排规划。

把Markdown文件当作磁盘之上的“工作记忆”，去创建三个核心文件。

适合需要超过 5 次工具调用的复杂多步骤任务。

npx skills add https://github.com/OthmanAdi/planning-with-files --skill planning-with-files

4. ui-ux-pro-max —— AI 设计智能技能

包含：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

5. best-minds —— 模拟顶级专家思维

不再询问“你怎么想”，而是去问“世界上谁对于这个问题最为了解？他们会给出怎样的说法？”，促使Claude运用世界级专家的视角去解决问题。

npx skills add https://github.com/brucexo/skills-collection --skill best-minds

6. notebooklm，而是直接连接 Google NotebookLM。

让Claude Code直接跟Google NotebookLM笔记本进行通信，从而获取基于来源的、带有引用的回答。

mkdir -p ~/.claude/skills
cd ~/.claude/skills
git clone https://github.com/PleasePrompto/notebooklm-skill notebooklm

安装效果

安装 Skills 后的效果：

实战项目：开启从无到有的 AI 漫剧生成平台开发之旅，第一步：进行技术选型，借助 AI 来辅助你作出决策。

对于以0作为起始点的项目，我先是大致地设想好了技术方面的方向，随即让处于人工智能状态的AI，去产出完整又全面的技术方略文档。

我给 AI 的提示词：

我想做一个 AI 漫剧生成平台，这是我大概的技术选型：
使用 nextjs 全栈开发，数据库使用 sqlite 快速完成集成
请你帮我完成技术选型，生成一个文档我 check 一下

AI 立刻开始生成技术选型方案：

我在中途，依据自身需求，径直于终端去给AI反馈，以使它对方案作出调整。

最终生成完整的技术选型和系统设计文档：

第二步：启动 AI 开发

技术文档写好后，直接 @ 引用文档，让 AI 开始开发：

AI 会先生成一个完整的执行计划：

接着，AI 会自行针对才生成的 Plan 开展 Review，要是存在不合理之处，它会自行予以二次修改。

确认 Plan 没问题后，开始执行：

第三步：Subagent 全自动开发

加载一项名为superpowers:subagent-driven-development的技能，人工智能开始进行完全自动化的开发。

遇到需要确认的操作，直接点击确认即可：

完成项目结构之后，AI 会自动着手去补充功能，像是队列处理以及数据库集成。

前端页面也全自动开发：

拥有一个重要优势的superpowers skill，它是，每完成一个功能便会自动commit一次，哪怕AI将代码改坏了，也能够方便地进行回退。

全程约 45 分钟，初版系统开发完成：

第四步：调试和 UI 优化

启动时遇到报错，不要慌，截图发给 AI 就行：

成功修复，页面处于正常运行状态，然而 UI 较为难看，一句话能够引发出 UI 重新设计：

UI 比较丑，请你使用 ui-ux-pro-max 重新设计各个环节的 UI 和交互逻辑，补齐一下切换语言的地方

经过 3 轮迭代优化，UI 焕然一新：

项目迭代：继续添加功能模型配置设置页

初版用环境变量配置模型，太麻烦了。我给 AI 的提示词：

现在我们对模型配置进行改造，有一个设置页面，点击进入配置模型，
文本模型支持 openai 协议、gemini 协议，
图像模型支持 openai 协议、gemini 协议。
视频模型支持字节 seedance 协议和 google 协议。
用户可以配置多个模型供应商，默认通过 /model/list api 获取模型，
获取失败的时候，用户可以自己填写 model_id，将 key 保存在本地。
在使用模型的时候，用户可以选择自己勾选的模型。
请你计划整个开发流程，完成开发，界面的风格需要和现在的保持一致

模型对话功能补齐：

流程优化

发现生成流程有些问题，给 AI 描述后，它生成优化路径：

图片生成 API 有问题，继续修复：

分镜页面流程修复和优化后的效果：

最终成品展示列表页

剧本生成

角色解析

分镜

预览

模型配置

总结：Vibe Coding 的正确姿势