AI 时代的 Vibe Coding 实践：使用 Claude Code 从零开发 AI 漫剧生成平台的完整记录，涵盖技术选型、...

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

# vibe-coding

社区支持

https://linux.do/

本项目用于记录我的 AI 编程过程

使用的工具 claude code

添加飞书群：

飞书群

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

什么是 Vibe Coding？

Vibe Coding（氛围编程）是由 Andrej Karpathy（前特斯拉 AI 总监、OpenAI 联合创始人）在 2025 年 2 月提出的概念。核心思想是：

> 你不再真正"写"代码，而是用自然语言描述你想要什么，让 AI 来生成代码。你只需要"感受氛围"（vibe），看看结果对不对，不对就继续用自然语言调整。

Karpathy 原话：

> "There’s a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

Vibe Coding 的特点

自然语言驱动：用人话描述需求，AI 生成代码
迭代式开发：看效果 → 反馈 → 再调整，循环往复
关注"做什么"而非"怎么做"：开发者更像产品经理，而非传统程序员
文档即代码：好的需求描述和技术文档比写代码本身更重要

SPEC开发规范

简单来说，SPEC 规范就是一套 “结构化的标准语言”，用来告诉机器（或 AI）一个功能长什么样、怎么调用、输入什么、输出什么。

核心定义
- 非执行代码：它通常是一份 YAML 或 JSON 文件，描述了系统的行为。
- 标准化格式：最常用的是 OpenAPI Specification (OAS)。
- 机器可理解：因为有了规范，AI 才能在没有人工干预的情况下，读懂你的接口并自动调用。
SPEC 的典型工作流 “先写规矩，再写实现。”
- Drafting (起草)：使用 YAML 编写一份符合 OpenAPI 规范的文档。
- Validation (验证)：使用工具（如 Swagger Editor）检查语法是否正确。
- Binding (绑定)：将这个 SPEC 导入到你的 Skill 平台。
- Implementation (实现)：编写后端逻辑代码，确保它返回的数据格式跟 SPEC 描述的一模一样。

本项目的实践方式

本项目使用 Claude Code 作为 AI 编程工具，通过以下方式实践 Vibe Coding：

技术选型阶段：用自然语言描述项目需求，让 AI 生成技术方案文档
开发阶段：通过 Skills 和 Subagent 驱动开发，AI 自动完成代码编写和 Git 提交
迭代阶段：截图 + 自然语言反馈，AI 理解上下文后自动修复和优化
UI 优化阶段：一句话指令触发 UI/UX 重新设计

本次实践的代码地址：https://github.com/twwch/AIComicBuilder

需要安装的 Skills

1. superpowers

GitHub: https://github.com/obra/superpowers
介绍: AI 编程代理的完整软件开发工作流框架，包含 14 个可组合技能（brainstorming、test-driven-development、systematic-debugging、subagent-driven-development、code-review 等）。强制执行"红-绿-重构" TDD 循环、四阶段调试方法论和苏格拉底式头脑风暴等**实践。
安装 (通过 Claude Code 官方插件市场，一键安装全部 14 个技能):
```
 /plugin install superpowers@claude-plugins-official 
```

2. frontend-design

GitHub: https://github.com/anthropics/skills/tree/main/skills/frontend-design
介绍: Anthropic 官方出品的前端设计技能，用于创建独特的、生产级的前端界面。指导 Claude 避免"AI 通用美学"，做出大胆的设计决策，注重排版、配色主题和动效微交互，特别适合 React + Tailwind 技术栈。

安装:

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

3. planning-with-files

GitHub: https://github.com/OthmanAdi/planning-with-files
介绍: 实现 Manus 风格的持久化 Markdown 规划工作流。将 Markdown 文件作为磁盘上的"工作记忆"，创建 task_plan.md（追踪阶段和进度）、findings.md（存储研究发现）和 progress.md（会话日志和测试结果），适合需要超过 5 次工具调用的复杂多步骤任务。

安装:

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

4. skill-creator

GitHub: https://github.com/anthropics/skills/tree/main/skills/skill-creator
介绍: Anthropic 官方出品的技能创建元技能。提供 Create、Eval、Improve 和 Benchmark 四种操作模式，指导你完成 Claude Code 技能的完整开发生命周期，包括初始化、验证、打包和**实践。

安装:

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

5. notebooklm

GitHub: https://github.com/PleasePrompto/notebooklm-skill
介绍: 让 Claude Code 直接与 Google NotebookLM 笔记本通信的技能。可以查询上传到 NotebookLM 的文档，获取基于来源的、带引用的回答。支持浏览器自动化、笔记本库管理和持久化身份认证。⚠️ 仅支持本地 Claude Code 安装，不支持 Web UI。

安装:

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

6. best-minds

GitHub: https://github.com/brucexo/skills-collection/tree/main/skills/best-minds
介绍: 实现"模拟器思维"方法的技能——不再问"你怎么想"，而是问"世界上谁最了解这个问题？他们会怎么说？"。让 Claude 采用世界级专家的视角来回答问题或解决问题，提供更权威和深入的回答。

安装:

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

7. find-skills

GitHub: https://github.com/vercel-labs/skills
介绍: Vercel 出品的技能发现工具。帮助用户发现和安装 Agent Skills，当你询问"如何做 X"、"有没有技能可以…"等问题时，会搜索可用的技能并推荐合适的选项。

安装:

 npx skills add https://github.com/vercel-labs/skills --skill find-skills

8. ui-ux-pro-max

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
介绍: AI 设计智能技能，用于构建专业 UI/UX。包含 67+ UI 风格、161 配色方案、57 字体搭配和 161 条行业特定设计规则，支持 13 个技术栈（React、Next.js、Vue、SwiftUI、Flutter 等）。会根据项目类型自动生成定制化的设计系统。

安装:

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

9. simplify (内置)

介绍: Claude Code 内置技能，无需安装。审查最近修改的代码，从代码复用、代码质量和效率三个维度并行分析，汇总发现并自动修复问题。使用 /simplify 即可调用。

安装 Skills

开启agent team模式

项目初始化

本次演示，从 0 开发一个 AI 漫剧生成平台

技术选型

对于从 0 开始的项目，我们自己需要指定一下我们的技术选型，大概规划一下前后端，数据库的要求。然后让 AI 帮我进行技术选型。

以下是我给到 AI 的提示词

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

我们根据 AI 的交互提示，根据自己的需要选择，中途遇到需要修改的地方，直接在终端给他说就行

最终生成的文件

[技术选型和系统设计](https://github.com/twwch/AIComicBuilder/blob/main/d