Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 程序员鱼皮
|
8243c4f13a | ||
|
程序员鱼皮
|
60affbdc0e | ||
|
liyupi
|
12bf92e21b | ||
|
liyupi
|
5b991bf20e | ||
|
liyupi
|
4b7f52db66 | ||
|
liyupi
|
df34710ea8 |
@@ -22,6 +22,13 @@
|
||||
|
||||
|
||||
|
||||
## 🌐 Translations
|
||||
|
||||
[English](./translations/en/README.md)
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 🔥 鱼皮的 Vibe Coding 零基础入门教程
|
||||
|
||||
|
||||
|
||||
@@ -93,7 +93,9 @@
|
||||
|
||||
在这个板块，我会带你全面了解 AI 编程工具的方方面面。
|
||||
|
||||
1） AI 模型选择
|
||||
### 主线内容（建议按顺序学习）
|
||||
|
||||
1）AI 模型选择指南
|
||||
|
||||
首先会介绍主流的 AI 模型（Claude、ChatGPT、Gemini 等），帮你理解它们的区别和选择方法。这是使用所有 AI 工具的基础。
|
||||
|
||||
@@ -109,14 +111,20 @@
|
||||
|
||||
分享版本管理、部署托管、MCP 服务、Agent Skills、规范化开发工具等实用辅助工具，以及我的工具组合推荐和实战经验。
|
||||
|
||||
5）工具实战
|
||||
5）更多 AI 工具推荐
|
||||
|
||||
深入讲解特定工具的使用方法和实战案例，包括：
|
||||
根据不同场景和需求，给出具体的工具组合建议和我的实战经验。
|
||||
|
||||
- 规范驱动开发工具的详细使用（Spec-kit、OpenSpec）
|
||||
- AI 技能库的安装和使用（Agent Skills、Superpowers）
|
||||
- 各种命令行工具的实测和对比（OpenCode、Gemini CLI 等）
|
||||
- 其他实用工具的深度教程
|
||||
|
||||
|
||||
### 支线内容（可选择性学习）
|
||||
|
||||
工具实战板块主要讲解特定工具的使用方法和实战案例，可以根据需要选择性学习。
|
||||
|
||||
- **规范驱动开发**：Spec-kit、OpenSpec 的详细使用教程
|
||||
- **AI 技能库**：Agent Skills、Superpowers 的安装和进阶用法
|
||||
- **命令行工具实测**：OpenCode、Gemini CLI、TRAE SOLO 等工具的实战评测
|
||||
- **AI 应用平台**：Dify 等零代码 AI 应用开发平台的实战教程
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -363,7 +363,7 @@ AI 就能通过调用 MCP，给你最准确的时间。
|
||||
|
||||
如果你想了解更多 MCP 服务，可以访问：
|
||||
|
||||
- [鱼皮 AI 导航的 MCP 大全](https://ai.codefather.cn/)：整理了各种实用的 MCP 服务
|
||||
- ⭐️ [鱼皮 AI 导航 - MCP 大全](https://ai.codefather.cn/mcp)：持续更新优质 MCP 服务，帮你重塑 AI 工作流
|
||||
- [mcp.so](https://mcp.so/)：MCP 服务器市场，可以找到各种 MCP 服务
|
||||
- [GitHub awesome-mcp-servers](https://github.com/punkpeye/awesome-mcp-servers)：社区维护的 MCP 服务器列表
|
||||
|
||||
@@ -409,6 +409,8 @@ Agent Skills 是 Anthropic 推出的 AI 技能系统，可以把复杂的任务
|
||||
|
||||
⭐️ 推荐观看视频动画版，更通俗易懂：[https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/)
|
||||
|
||||
💡 想要发现更多好用的 Agent Skills？可以访问 [鱼皮 AI 导航 - Skills 大全](https://ai.codefather.cn/skills)，持续更新优质技能，释放 AI 执行潜力。
|
||||
|
||||
|
||||
|
||||
### Superpowers
|
||||
|
||||
@@ -324,7 +324,7 @@ Monica 最大的优势是集成度高，几乎所有常用的 AI 功能都有。
|
||||
|
||||
- **做小项目或快速验证想法时**，我会用 Claude Code + 智谱 GLM，因为速度快，成本低。
|
||||
|
||||
- **预算用完时**，我会切换到 VS Code + Cline + DeepSeek，完全免费，功能也够用。
|
||||
- **使用 VS Code 阅读项目时**，我会搭配 Cline + DeepSeek 大模型，比较方便。
|
||||
|
||||
- **需要生成图片时**，我会用 Nano Banana，因为中文支持好，生成速度快。
|
||||
|
||||
|
||||
@@ -995,9 +995,12 @@ skill install anthropic-agent-skills:frontend-design
|
||||
|
||||
目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的数据库优化、API 安全、测试策略、代码审查、文档生成，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。
|
||||
|
||||
如果官方提供的技能不够用，你还可以上传自定义技能，或者访问 [Claude Skills Hub](https://www.claudeskill.site/) 下载社区贡献的技能。
|
||||
如果官方提供的技能不够用，你还可以上传自定义技能，或者访问以下平台下载社区贡献的技能：
|
||||
|
||||
|
||||
- ⭐️ [鱼皮 AI 导航 - Skills 大全](https://ai.codefather.cn/skills)：持续更新优质技能，释放 AI 执行潜力
|
||||
- [Claude Skills Hub](https://www.claudeskill.site/)：社区技能市场
|
||||
|
||||
|
||||
|
||||
值得一提的是，Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude，[Cursor](https://cursor.com/docs/context/skills) 等主流 AI 编程工具也会陆续提供支持。也就是说，你在一个工具里用的技能，在另一个工具里也能复用。
|
||||
|
||||
|
||||
@@ -351,9 +351,13 @@ AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就
|
||||
|
||||
目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的前端设计、网页测试，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。
|
||||
|
||||
Skills 的社区也非常活跃，你可以在 [Claude Skills Hub 市场](https://www.claudeskill.site/zh/skills)、开源的 [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills) 等地方找到很多现成的技能。
|
||||
Skills 的社区也非常活跃，你可以在以下地方找到很多现成的技能：
|
||||
|
||||
|
||||
- ⭐️ [鱼皮 AI 导航 - Skills 大全](https://ai.codefather.cn/skills)：持续更新优质技能，释放 AI 执行潜力
|
||||
- [Claude Skills Hub 市场](https://www.claudeskill.site/zh/skills)：社区技能市场
|
||||
- [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills)：开源技能列表
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
实战进阶：应对实际开发中的问题
|
||||
- 成本控制技巧
|
||||
- 团队协作技巧
|
||||
- 网站美化技巧
|
||||
|
||||
这些内容都是零基础友好的，即使你不懂编程，也能理解和应用。建议按顺序学习，也可以根据遇到的具体问题，直接查阅对应的文章。
|
||||
|
||||
|
||||
@@ -0,0 +1,713 @@
|
||||
# Vibe Coding 网站美化技巧
|
||||
|
||||
> 7 个方法，让你的网站告别 AI 味儿
|
||||
|
||||
|
||||
|
||||
你好，我是鱼皮。
|
||||
|
||||
先做个小测试，下面这几个网站，你能看出哪些是 AI 做的吗？
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
公布答案：**全都是 AI 做的！**
|
||||
|
||||
|
||||
|
||||
是不是觉得有点意外？
|
||||
|
||||
“为啥我用 AI 搓出来的网站一股子 AI 味儿？而这些网站看起来干净很多呢？”
|
||||
|
||||
这就是接下来我要分享的：
|
||||
|
||||
- 什么是 AI 编程的 AI 味儿？
|
||||
- 为什么网站会有 AI 味儿？
|
||||
- 怎么去除网站的 AI 味儿？
|
||||
|
||||
学会这些技巧后，你也能让 AI 做出更精美的网站。
|
||||
|
||||
⭐️ 推荐观看本文对应视频版，效果更明显：
|
||||
https://bilibili.com/video/BV1QF6EBiErM
|
||||
|
||||
|
||||
## 什么是 AI 味儿？
|
||||
|
||||
所谓的 AI 味儿，就是那种一眼就能看出是 AI 生成的网站，界面样式和内容风格都千篇一律。
|
||||
|
||||
|
||||
|
||||
1）配色死板：蓝紫渐变色用到吐。
|
||||
|
||||
2）布局死板：首屏放个大标题，下面三个卡片并排。
|
||||
|
||||
3）字体死板：基本上就是 Inter、Roboto 等几种固定的字体。
|
||||
|
||||
4）Emoji 泛滥：什么 🐟4️⃣🐶 之类的，满屏幕都是表情图标。
|
||||
|
||||
5）内容空洞：基本没有真实图片，文字风格也比较刻板。
|
||||
|
||||
用户看这些网站时就一个感觉：我在跟机器人聊天。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 为什么网站会有 AI 味儿？
|
||||
|
||||
说了这么多问题，到底为啥会这样？
|
||||
|
||||
核心原因就俩字：**求稳**。
|
||||
|
||||
举个例子，为啥 AI 那么爱用蓝紫渐变色？
|
||||
|
||||
因为 AI 的训练数据里，很多现代网站采用 Tailwind 样式库，而这个库的默认主色调就是蓝紫色。AI 在学习数亿行代码时，这些颜色出现的频率是最高的，于是 AI 就认为 “现代化网站 ≈ 蓝紫色渐变”。
|
||||
|
||||
|
||||
|
||||
并且 AI 学会了一个生存法则：**用最常见的 = 最不容易出错**。
|
||||
|
||||
所以当你让 AI “开发一个现代化的网站” 时，AI 为了求稳，就会选择使用蓝紫渐变色。
|
||||
|
||||
**那怎么破局？**
|
||||
|
||||
很简单，从 “请求者” 变成 “指挥官”。
|
||||
|
||||
不要只说需求：给我做个网站
|
||||
|
||||
而是要明确要求：用深灰色背景、手绘图标、不对称布局、拒绝蓝紫色。
|
||||
|
||||
用强有力的约束条件，逼着 AI 偏离它的舒适区。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 怎么去除网站的 AI 味儿？
|
||||
|
||||
下面分享我总结的 7 个方法，保证让你的网站摆脱 AI 味儿。
|
||||
|
||||
### 方法 1、让 AI 参考真实网站
|
||||
|
||||
最简单粗暴的一招，你看到好看的网站，直接让 AI 学。
|
||||
|
||||
有 4 种具体的做法：
|
||||
|
||||
1）如果你使用 Cursor 或者 Claude Code 等 AI 编程工具，或者利用 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够直接读取网页。
|
||||
|
||||
|
||||
|
||||
你只需要跟 AI 说：
|
||||
|
||||
```markdown
|
||||
请访问 ai.codefather.cn，提取它的配色方案、字体选择和布局结构，然后生成类似风格的网站。
|
||||
```
|
||||
|
||||
AI 会自己去看那个网站，然后学着做。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）如果 AI 大模型支持图片理解，你还可以把网页截图提供给 AI，搭配文字能让 AI 还原网站更准确。
|
||||
|
||||
|
||||
|
||||
效果如图：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3）如果你用的 AI 大模型不支持图片理解、纯文本理解又不到位，可以先利用 **截图转代码** 工具，比如 [Screenshot to Code](https://github.com/abi/screenshot-to-code)。
|
||||
|
||||
|
||||
|
||||
把喜欢的网站截个图，上传上去，它直接给你转成代码。
|
||||
|
||||
|
||||
|
||||
然后你再把代码喂给 AI，让它参考着做。
|
||||
|
||||
|
||||
|
||||
准确度会高很多，抄样式肯定不如抄代码来的直接。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4）此外，还可以直接套用现成的网站模板或者 GitHub 上的开源项目。
|
||||
|
||||
推荐几个不错的网站模板资源：
|
||||
|
||||
- [HTML5 UP](https://html5up.net/)：免费的响应式网站合集，极简风格
|
||||
- [WordPress 官方主题库](https://cn.wordpress.org/themes/)：1 万多个免费主题，啥类型都有
|
||||
- [Start Bootstrap](https://startbootstrap.com/)：Bootstrap 生态的免费网站模板库
|
||||
- [Colorlib](https://colorlib.com/wp/free-wordpress-themes/)：提供不少免费的网站模板，设计精美
|
||||
|
||||
这些网站模板都有源代码，你选个不错的下载下来，把代码丢给 AI 让它去改改内容就好了，样式基本准确还原。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 2、设计优先开发
|
||||
|
||||
这个方法特别适合做大项目。
|
||||
|
||||
简单来说，就是 **不要上来就让 AI 梭哈整个项目**。
|
||||
|
||||
比如传统做法是这样的：帮我做一个包含用户系统、后台管理的完整 SaaS 平台。
|
||||
|
||||
然后 AI 哗啦哗啦给你生成几十个文件，结果做完后发现页面风格不对，重新返工，浪费 Tokens。
|
||||
|
||||
|
||||
|
||||
推荐的做法是 **拆分步骤**，先让 AI 做个前端网站 Demo，纯静态页面就好。对设计满意了之后，再让 AI 基于 Demo 代码，用同样的风格开发完整项目。
|
||||
|
||||
你像我生成出下面这种破玩意，肯定是不能让 AI 继续开发的！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这里推荐一个很强大的 AI 设计工具 [Google Stitch](https://stitch.withgoogle.com/)。
|
||||
|
||||
你只需要输入一段描述，它就能生成专业的界面原型。
|
||||
|
||||
|
||||
|
||||
甚至你在纸上画个草图，拍照上传，它都能识别出来转成代码。
|
||||
|
||||
|
||||
|
||||
你还可以人工修改设计的主题风格，或者人工标注要修改的部分，让 AI 帮你快速调整。
|
||||
|
||||
|
||||
|
||||
设计完成后，导出文件或下载代码，再喂给 Cursor 等 AI 编程工具继续开发。这样风格就定下来了，不会跑偏。
|
||||
|
||||
|
||||
|
||||
当然，如果你会用 [Figma](https://www.figma.com/) 这种更专业的设计工具，你可以先在 Figma 里把网站设计得清清楚楚。
|
||||
|
||||
|
||||
|
||||
然后搭配 [Figma MCP](https://github.com/GLips/Figma-Context-MCP) 扩展，让 AI 直接读取你的 Figma 设计文件，按照设计生成代码。
|
||||
|
||||
|
||||
|
||||
此外，还有个工具叫 [Onlook](https://www.onlook.ai/)，号称为设计师准备的 Cursor，可以让设计师直接可视化编辑网页代码，设计和开发无缝衔接。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 3、丰富网站图片
|
||||
|
||||
一般 AI 生成的网站是没有图片的，我们可以通过添加图片让网站更个性化。
|
||||
|
||||
没必要让 AI 从 0 开始生图，只要告诉 AI 去主动找图、到哪里找图就好。
|
||||
|
||||
图片资源主要包括插画、图标、真实照片和占位图这几类。
|
||||
|
||||
1）插画库 [unDraw](https://undraw.co/)：有非常多免费的 SVG 插画，而且可以自定义颜色。
|
||||
|
||||
|
||||
|
||||
2）图标库 [Iconify](https://iconify.design/)：20 多万个免费矢量图标
|
||||
|
||||
|
||||
|
||||
3）真实照片 [Pexels](https://www.pexels.com/)：免费高质量图库，还提供了 API 快速搜索图片
|
||||
|
||||
|
||||
|
||||
4）占位图 [Picsum Photos](https://picsum.photos/)：直接用 URL 指定图片尺寸，每次刷新都是不同的真实照片
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果你的 AI 编程工具支持网页读取，可以直接让 AI 从这些网站搜索图片：
|
||||
|
||||
```markdown
|
||||
我要开发一个摄影作品集网站
|
||||
请根据需要，为网站搜索并集成图片资源：
|
||||
1. 插画：使用 undraw.co，搜索与网站内容相关的插画
|
||||
2. 图标：使用 Iconify 图标库
|
||||
3. 真实照片：使用 Pexels 搜索真实照片
|
||||
4. 占位图：使用 Picsum Photos 作为临时占位图
|
||||
```
|
||||
|
||||
|
||||
|
||||
这下，生成的网站看起来成熟多了吧？
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 4、提示词约束
|
||||
|
||||
就算不搞那些花里胡哨的工具，只要跟 AI 对话时，把你的要求说清楚，一样能让网站变专业。
|
||||
|
||||
Claude 官方的 Cookbook 中有篇文章 [Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics)（前端美学），专门讲怎么避免让 AI 生成具有 AI 味儿的通用设计。
|
||||
|
||||
|
||||
|
||||
下面讲几个我自己常用的提示词技巧。
|
||||
|
||||
#### 1）反向提示
|
||||
|
||||
不要只说 “要什么”，更要说 “不要什么”。
|
||||
|
||||
```plain
|
||||
设计禁止清单：
|
||||
❌ 紫色/靛蓝色渐变
|
||||
❌ 纯平背景色（必须有噪点或渐变）
|
||||
❌ Hero + 三卡片布局
|
||||
❌ 完美居中对齐
|
||||
❌ 高深的专业名词和无意义的空话
|
||||
❌ Emoji 作为功能图标
|
||||
❌ 线性动画 ease-in-out
|
||||
```
|
||||
|
||||
你把这些禁止项写清楚，AI 就不敢乱来了。
|
||||
|
||||
|
||||
|
||||
#### 2）角色设定
|
||||
|
||||
给 AI 定个人设，比如：
|
||||
|
||||
```markdown
|
||||
你是一位资深独立设计师，专注于《反主流》的网页美学。
|
||||
你鄙视千篇一律的 SaaS 模板，认为软件界面应该有触感和灵魂。
|
||||
你的创意边界：
|
||||
- "现代但不要紫色" → 可以试试深灰+橙色
|
||||
- "极简但要有温度" → 用大留白+手绘插画
|
||||
- "科技感但不要冰冷" → 用深色+暖色点缀
|
||||
```
|
||||
|
||||
这样 AI 就知道，它不是在做标准答案，而是在做有个性的设计。
|
||||
|
||||
|
||||
|
||||
#### 3）拒绝空洞文案
|
||||
|
||||
AI 特别喜欢写那些 “听起来很厉害但啥也没说” 的文案。
|
||||
|
||||
你得明确告诉它文案的要求：
|
||||
|
||||
```plain
|
||||
网站的文字内容必须做到：
|
||||
- 具体化："每天节省 2 小时重复劳动"（不要说"提升生产力"）
|
||||
- 口语化："用起来就像呼吸一样自然"（不要说"卓越的用户体验"）
|
||||
- 带情绪："再也不用在 10 个群里找文件了"（不要说"高效协作"）
|
||||
- 甚至可以挑衅："别再假装你会看完那些 PPT 了"
|
||||
```
|
||||
|
||||
这样文案就会更有人味儿了。
|
||||
|
||||
|
||||
|
||||
#### 4）语境注入
|
||||
|
||||
AI 老是生成通用设计，是因为它不知道你要传达什么 “感觉”。
|
||||
|
||||
所以我们可以尝试 **先给 AI 喂情绪，再提设计**。
|
||||
|
||||
比如你要做个具有科技感的博客网站，可以这么说：
|
||||
|
||||
```markdown
|
||||
先阅读这段话：《黑客与画家》 - 编程语言是用来思考的
|
||||
|
||||
现在根据这种冷静、理性的情绪设计博客首页：
|
||||
- 配色：深灰+冷蓝
|
||||
- 布局：理性、有序
|
||||
- 感觉：沉思的、专注的
|
||||
```
|
||||
|
||||
AI 会把视觉参数（颜色、间距、字体）和文本的情感特征（冷静、理性）对齐，生成有特定氛围的设计。
|
||||
|
||||
|
||||
|
||||
就像给演员说戏，不是告诉他演得开心一点，而是让他回忆一段开心的记忆，情绪自然就出来了。
|
||||
|
||||
|
||||
|
||||
#### 5）复用提示词
|
||||
|
||||
前面讲了这么多约束条件，你不能每次都重复人工编写一遍吧？
|
||||
|
||||
所以要保存提示词为项目规则文件 [AGENTS.md](https://agents.md/)，便于多次复用。
|
||||
|
||||
[AGENTS.md](https://agents.md/) 是一个开放标准，让不同的 AI 工具都能读取同一份规则文件，主流的 AI 编程工具（Cursor、Claude Code、Windsurf 等）都支持。
|
||||
|
||||
|
||||
|
||||
比如这里我给大家准备了一套提示词模板，包含了前面讲的所有技巧：
|
||||
|
||||
```markdown
|
||||
# 项目设计规则（AGENTS.md）
|
||||
|
||||
## 角色设定
|
||||
你是一位资深独立设计师，专注于 "反主流" 的网页美学。
|
||||
你鄙视千篇一律的 SaaS 模板，追求每个像素都有温度。
|
||||
|
||||
## ❌ 绝对禁止项
|
||||
|
||||
### 配色禁止
|
||||
- 紫色/靛蓝色/蓝紫渐变（#6366F1、#8B5CF6）
|
||||
- 纯平背景色（必须有噪点纹理或渐变）
|
||||
- Tailwind 默认色板
|
||||
|
||||
### 布局禁止
|
||||
- Hero + 三卡片布局
|
||||
- 完美居中对齐
|
||||
- 等宽多栏（必须不对称）
|
||||
|
||||
### 文案禁止
|
||||
- 高深的专业名词和无意义的空话
|
||||
- Lorem Ipsum 占位文本
|
||||
- 被动语态和长句
|
||||
|
||||
### 组件禁止
|
||||
- Shadcn/Material UI 默认组件（必须深度定制）
|
||||
- Emoji 作为功能图标
|
||||
- 线性动画（ease-in-out）
|
||||
|
||||
## ✅ 必须遵守项
|
||||
|
||||
### 文案风格
|
||||
- 口语化，像朋友聊天
|
||||
- 具体化，有数字和场景
|
||||
- 可以幽默、自嘲、甚至挑衅
|
||||
- 每句话不超过 15 个字
|
||||
|
||||
### 图片系统
|
||||
- 图标：使用 Iconify 图标库（https://iconify.design）
|
||||
- 占位图：使用 Picsum Photos（https://picsum.photos）
|
||||
- 真实图片：使用 Pexels 搜索（https://www.pexels.com）
|
||||
- 插画：使用 unDraw（https://undraw.co）
|
||||
```
|
||||
|
||||
保存这个文件为 `AGENTS.md`，放在项目根目录，以后每次跟 AI 对话，它都会自动读取这个文件，按照你的要求来工作。
|
||||
|
||||
|
||||
|
||||
举个例子，输入跟之前一毛一样的需求 “帮我做个动漫视频网站”，有了规则文件后，效果立竿见影！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 5、Agent Skills
|
||||
|
||||
如果你觉得自己写提示词太麻烦，还有个更省事的办法 —— **Agent Skills**。
|
||||
|
||||
简单来说，Agent Skills 就是别人封装好的专业技能包，你直接在 AI 编程工具中安装就能用，让 AI 学会各种专业技能，比如制作 PPT、整理 Excel 表格等等。
|
||||
|
||||
|
||||
|
||||
如果想让 AI 开发的网站更精美独特，可以用下面 2 个 Skills。
|
||||
|
||||
#### Frontend-design
|
||||
|
||||
这是 Anthropic 官方出品的 [前端设计技能](https://github.com/anthropics/skills/tree/main/skills/frontend-design)，可以教 AI 生成专业设计感网站。
|
||||
|
||||
用法很简单，以 Claude Code 为例。
|
||||
|
||||
首先打开 Claude Code 并输入命令，添加官方技能市场：
|
||||
|
||||
```plain
|
||||
/plugin marketplace add anthropics/skills
|
||||
```
|
||||
|
||||
|
||||
|
||||
这就像是在你的 AI 助手里开通了一个技能商店，接下来你就可以从商店中获取技能了。
|
||||
|
||||
|
||||
|
||||
在 Claude Code 中输入命令，安装官方提供的技能包：
|
||||
|
||||
```plain
|
||||
/plugin install example-skills@anthropic-agent-skills
|
||||
```
|
||||
|
||||
|
||||
|
||||
这个 example-skills 包含了一堆官方示例技能，包括前端设计、网页测试、动图制作等等。
|
||||
|
||||
|
||||
|
||||
装完之后，你就可以直接让 AI 使用这些技能了。
|
||||
|
||||
比如你输入：帮我开发个人作品集网站。
|
||||
|
||||
AI 会主动问你：我发现你安装了前端设计技能，需要用它来生成更具设计感的页面吗？
|
||||
|
||||
|
||||
|
||||
确认之后，AI 会利用技能生成代码，告别蓝紫渐变、生成独特风格的精美页面。
|
||||
|
||||
|
||||
|
||||
不用每次都给 AI 输入一大堆相同的提示词，装一次技能就行了。
|
||||
|
||||
|
||||
|
||||
#### UI UX Pro Max
|
||||
|
||||
[UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) 是我现在用下来最顺手的去 AI 味儿技能了，专门用于提升 AI 的设计能力。
|
||||
|
||||
|
||||
|
||||
它支持几乎目前所有主流的 AI 编程工具，比如 Claude Code、Cursor、VS Code、Codex 等等。
|
||||
|
||||
用法很简单，首先按照 [开源仓库文档](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 的指引，安装官方提供的命令行工具：
|
||||
|
||||
```bash
|
||||
npm install -g uipro-cli
|
||||
```
|
||||
|
||||
|
||||
|
||||
然后进入到你的项目目录下，根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor：
|
||||
|
||||
```bash
|
||||
uipro init --ai cursor
|
||||
```
|
||||
|
||||
|
||||
|
||||
它会自动把技能安装到 Cursor 的配置目录里。
|
||||
|
||||
接下来，当你让 AI 开发一个网站时，可以使用斜杠命令手动触发技能，或者让 AI 自动识别技能。
|
||||
|
||||
|
||||
|
||||
1）AI 会根据你的需求识别出产品类型和需要的页面类型
|
||||
|
||||
|
||||
|
||||
2）然后调用 `search.py` 搜索脚本，在 data 目录里进行多维度搜索，找到适合的配色、字体、布局风格
|
||||
|
||||
|
||||
|
||||
3）综合搜索结果，生成完整的设计方案（主色调、字体组合、间距规范等）
|
||||
|
||||
|
||||
|
||||
4）最后，再按照设计方案生成代码
|
||||
|
||||
|
||||
|
||||
这样一来，生成的界面既专业又有设计感。
|
||||
|
||||
|
||||
|
||||
AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就是 Agent Skills 的精髓。
|
||||
|
||||
|
||||
|
||||
### 方法 6、反 AI 味儿组件库
|
||||
|
||||
前面提到，AI 为了保险，默认会选最主流的组件库，比如 Tailwind CSS、Shadcn UI 等。
|
||||
|
||||
这些库虽然专业，但也最容易产生 AI 味儿。
|
||||
|
||||
所以我们可以反其道而行之，明确告诉 AI 用一些 **小众但有特色** 的组件库。
|
||||
|
||||
比如 [Aceternity UI](https://ui.aceternity.com/) 这个库专门做那种炫酷效果，什么闪光粒子（Sparkles）、极光背景（Aurora Background）、流星效果（Meteors），都是高计算量的视觉组件。
|
||||
|
||||
|
||||
|
||||
AI 很难从零写出这么复杂的效果，但你直接让 AI 用这个库，几行代码就能搞定。
|
||||
|
||||
要注意，对于这些相对小众的组件库，AI 可能不太熟悉用法。建议安装 Context7 插件，可以实时查询最新文档。
|
||||
|
||||
|
||||
|
||||
或者直接把官方文档地址发给 AI 让它参考：
|
||||
|
||||
```plain
|
||||
必须使用 Aceternity UI 设计网站
|
||||
你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components
|
||||
```
|
||||
|
||||
网站的逼格立刻就上去了，完全不像 AI 生成的。
|
||||
|
||||
|
||||
|
||||
还有很多我觉得有特点的 UI 组件库：
|
||||
|
||||
- [Magic UI](https://magicui.design/)：150+ 动画组件，专门做微交互、流光边框、文字渐变
|
||||
- [DaisyUI](https://daisyui.com/)：30+ 主题，有 cyberpunk、retro、cupcake 等风格
|
||||
- [Brutalist UI](https://brutalistui.site/)：粗野主义风格，粗边框、硬阴影、高对比
|
||||
- [Glass UI](https://ui.glass/)：玻璃拟态效果，半透明、模糊背景
|
||||
- [ikun-ui](https://github.com/ikun-svelte/ikun-ui)：基于 Svelte.js 和 UnoCSS 的组件库
|
||||
- [Radix UI](https://www.radix-ui.com/)：无样式原语组件，完全自定义
|
||||
- [Mantine](https://mantine.dev/)：100+ 组件，功能丰富
|
||||
|
||||
像我练习时长两年半，最喜欢 [ikun-ui](https://github.com/ikun-svelte/ikun-ui) 了~
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 7、自主配色（扩展知识）
|
||||
|
||||
如果你想让网站更独特，完全走自己的路，那就得人工设计配色方案了。
|
||||
|
||||
这个方法适合有设计基础的朋友，可以用一些快速生成个性化配色的工具，比如：
|
||||
|
||||
- [Coolors](https://coolors.co/)：主流的配色生成器，按空格键随机生成，支持导出多种格式
|
||||
- [Adobe Color](https://color.adobe.com/)：Adobe 官方的专业配色工具
|
||||
|
||||
|
||||
|
||||
生成好配色后，把色值告诉 AI，让它严格按照你的配色方案来设计。这样出来的网站，配色绝对独特。
|
||||
|
||||
|
||||
|
||||
## 实战案例
|
||||
|
||||
前面我讲的这些方法是可以结合使用的。下面分享几个实战例子，大家可以感受下效果。
|
||||
|
||||
### 案例 1、个人技术博客
|
||||
|
||||
#### 优化前
|
||||
|
||||
直接输入提示词：
|
||||
|
||||
```markdown
|
||||
开发个人技术博客网站首页
|
||||
```
|
||||
|
||||
效果是这样的，一眼 AI……
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 优化后
|
||||
|
||||
使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能：
|
||||
|
||||
```markdown
|
||||
开发个人技术博客网站首页
|
||||
```
|
||||
|
||||
得到的网站更有极客范儿，内容更充实。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 案例 2、SaaS 产品落地页
|
||||
|
||||
#### 优化前
|
||||
|
||||
直接输入提示词：
|
||||
|
||||
```markdown
|
||||
开发 SaaS 产品《服务器运维监控平台》的落地页
|
||||
```
|
||||
|
||||
效果是这样的，又是蓝紫配色，一眼 AI……
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 优化后
|
||||
|
||||
使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 语境注入 + 反 AI 味儿组件库：
|
||||
|
||||
```markdown
|
||||
开发 SaaS 产品《服务器运维监控平台》的落地页
|
||||
|
||||
先阅读这段话感受氛围：《黑客帝国》你选择蓝色药丸还是红色药丸？
|
||||
必须使用 Aceternity UI 设计网站
|
||||
你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components
|
||||
```
|
||||
|
||||
网站背景变成了代码雨，也更像一个专业产品介绍页：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 案例 3、健身 APP 落地页（移动端）
|
||||
|
||||
#### 优化前
|
||||
|
||||
直接输入提示词：
|
||||
|
||||
```markdown
|
||||
开发健身 APP 落地页（移动端）
|
||||
```
|
||||
|
||||
效果…… 这啥玩意，不评价了……
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 优化后
|
||||
|
||||
使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 反 AI 味儿组件库：
|
||||
|
||||
```markdown
|
||||
开发健身 APP 落地页（移动端）
|
||||
|
||||
必须使用 IKun UI 设计网站
|
||||
你需要阅读官方文档来了解最新的使用方法：https://ikun-ui.netlify.app
|
||||
```
|
||||
|
||||
|
||||
|
||||
这下得到的页面更真实可用了，对比还是非常明显的吧！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 写在最后
|
||||
|
||||
看到这里你应该意识到，现在 AI 开发网站的能力已经非常强了。
|
||||
|
||||
有朋友觉得 AI 生成的效果不理想，可能只是因为没给它足够明确的指令。
|
||||
|
||||
就像一个厨师，你只说做个好吃的，他为了保险只能做最大众化的家常菜。但你说 “多放辣椒、不要花椒、多放豆瓣酱”，他就能做出你想要的味道。
|
||||
|
||||
**记住，AI 是工具，你才是主导者。**
|
||||
|
||||
学会了或者学废了的朋友们，点个赞吧~
|
||||
|
||||
|
||||
|
||||
## 推荐资源
|
||||
|
||||
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
|
||||
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
|
||||
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
|
||||
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
@@ -318,7 +318,18 @@ ReAct（Reasoning and Acting）是一种让 AI 智能体交替进行推理和行
|
||||
|
||||
|
||||
|
||||
在 Vibe Coding 中，工具调用让 AI 从 "只会说" 变成 "能动手"。比如 Cursor 的 Agent 模式就是通过工具调用来修改你的代码文件的。
|
||||
工具调用的工作流程分为 4 步：
|
||||
|
||||
1. 识别需求：AI 判断当前任务需要使用工具
|
||||
2. 选择工具：从可用工具中选择合适的
|
||||
3. 执行调用：用正确的参数调用工具
|
||||
4. 整合结果：将工具返回的结果融入回答
|
||||
|
||||
|
||||
|
||||
需要注意的是，AI 模型本身并不直接执行工具，而是生成 “我想调用这个工具，参数是这些” 的指令，由外部程序执行后把结果返回给 AI。
|
||||
|
||||
在 Vibe Coding 中，工具调用让 AI 从 "只会说" 变成 "能动手"。比如 Cursor 的 Agent 模式就是通过工具调用来读取文件、修改代码、运行命令的。
|
||||
|
||||
|
||||
|
||||
@@ -340,6 +351,8 @@ Skills 的核心设计是 **渐进式披露**：AI 只在需要时才加载相
|
||||
|
||||
|
||||
|
||||
💡 想要发现更多好用的 Agent Skills？可以访问 [鱼皮 AI 导航 - Skills 大全](https://ai.codefather.cn/skills)，持续更新优质技能，释放 AI 执行潜力。
|
||||
|
||||
|
||||
|
||||
### A2A（Agent-to-Agent）
|
||||
@@ -354,6 +367,78 @@ A2A 协议让不同的 AI 智能体能够组成团队，分工合作完成复杂
|
||||
|
||||
|
||||
|
||||
### BMAD 敏捷 AI 开发方法
|
||||
|
||||
[BMAD-METHOD](https://github.com/bmad-code-org/BMAD-METHOD)（Breakthrough Method of Agile AI-Driven Development，突破性敏捷 AI 驱动开发方法）是一套系统化的 AI 智能体开发框架，旨在将原本混乱的 AI 编程过程变得结构化、可复用。
|
||||
|
||||
BMAD 使用 **角色化智能体** 的方式组织开发流程，每个智能体扮演特定角色：
|
||||
|
||||
- Analyst Agent（分析师）：创建项目简报，包含市场分析和用户画像
|
||||
- PM Agent（产品经理）：将简报转化为详细的产品需求文档（PRD）
|
||||
- Architect Agent（架构师）：设计技术实现方案和系统架构
|
||||
|
||||
BMAD 中的智能体分为两种类型：
|
||||
|
||||
- Simple Agents（简单智能体）：单文件、自包含，适合代码审查、文档生成等聚焦任务
|
||||
- Expert Agents（专家智能体）：具有跨会话持久记忆，配有专属文件夹存放资源，适合复杂的多步骤工作流
|
||||
|
||||
每个智能体都有标准化的组成部分：人设（角色、身份、沟通风格、原则）、能力列表、交互菜单，以及可选的关键行动。
|
||||
|
||||
BMAD 在 GitHub 上获得了几万+ Star，说明这种结构化的 AI 开发方法正在被越来越多的开发者认可。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Browser Use 浏览器使用
|
||||
|
||||
Browser Use（浏览器使用）是让 AI 智能体能够自动操控网页浏览器的技术能力。通过 Browser Use，AI 可以像人类一样浏览网页、点击按钮、填写表单、提取数据。
|
||||
|
||||
Browser Use 的典型应用场景：
|
||||
|
||||
- 自动化研究：让 AI 在多个网站上搜索、整理信息
|
||||
- 数据采集：从网页中提取结构化数据
|
||||
- 表单填写：自动完成繁琐的在线表单
|
||||
- 跨平台操作：在不同网站间完成多步骤任务
|
||||
|
||||
比较知名的开源项目是 [Browser-Use](https://github.com/browser-use/browser-use)，支持通过 Python 调用多种大模型来控制浏览器。此外，Cursor、Claude Code 等主流 AI 编程工具也内置了 Browser Use 能力，可以在开发过程中自动打开浏览器预览效果、执行测试等操作。
|
||||
|
||||
|
||||
|
||||
Browser Use 的一个关键优势是，AI 可以利用你现有的浏览器会话和登录状态，无需为每个网站单独开发 API 集成。也就是说，AI 能够访问那些没有公开 API 的网站，大大扩展了自动化的应用范围。
|
||||
|
||||
|
||||
|
||||
### Computer Use 计算机使用
|
||||
|
||||
Computer Use（计算机使用）是 Anthropic 公司在 2024 年推出的 AI 能力，让 Claude 能够像人类一样操作整个计算机桌面。
|
||||
|
||||
和 Browser Use 只能操作浏览器不同，Computer Use 可以操作任何桌面应用程序，比如：
|
||||
|
||||
- 查看屏幕截图，理解界面元素
|
||||
- 移动鼠标光标，点击按钮
|
||||
- 使用键盘输入文字
|
||||
- 执行命令行操作
|
||||
|
||||
Computer Use 的工作原理是一个持续的反馈循环：
|
||||
|
||||
1. 截图分析：AI 捕获并分析当前屏幕
|
||||
2. 决策规划：根据任务目标确定下一步操作
|
||||
3. 执行操作：发送鼠标/键盘输入
|
||||
4. 观察结果：检查操作效果，调整策略
|
||||
|
||||
💡 为了安全起见，Computer Use 通常在虚拟机或容器中运行，不会直接控制你的真实电脑。
|
||||
|
||||
Computer Use 代表了 AI 从 "只能生成文字" 到 "能够操作软件" 的重大跨越，彻底改变人机交互方式。
|
||||
|
||||
基于 Computer Use 技术，Anthropic 在 2026 年推出了 [Claude Cowork](https://claude.com/product/cowork)，这是一个桌面端 AI 助手，可以直接访问你电脑上的文件和文件夹，帮你整理下载目录、从截图中提取数据到表格、准备品牌报告等日常办公任务。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 上下文管理
|
||||
|
||||
|
||||
@@ -387,11 +472,101 @@ A2A 协议让不同的 AI 智能体能够组成团队，分工合作完成复杂
|
||||
|
||||
### 规则文件
|
||||
|
||||
规则文件（Rules File）是放在项目根目录的配置文件，用来告诉 AI 你的项目规范、技术栈、代码风格等信息。
|
||||
规则文件（Rules File）是放在项目中的配置文件，用来告诉 AI 你的项目规范、技术栈、代码风格等信息。有了规则文件，AI 每次生成代码时都可以参考这些规则，生成的代码更符合你的项目风格，省去了反复强调的麻烦。
|
||||
|
||||
在 Cursor 中，这个文件叫 `.cursorrules`；在 Claude Code 中，这个文件叫 `CLAUDE.md`。（注意，随着工具版本的更新，这些文件的名称和标准可能会发生改变）
|
||||
|
||||
有了规则文件，AI 每次生成代码时都会参考这些规则，生成的代码更符合你的项目风格，省去了反复强调的麻烦。
|
||||
不同 AI 编程工具使用不同的规则文件格式：
|
||||
|
||||
- Cursor：早期使用 `.cursorrules` 单文件格式，现在推荐使用 `.cursor/rules/*.mdc` 多文件格式
|
||||
- Claude Code：使用 `CLAUDE.md` 文件
|
||||
- GitHub Copilot：使用 `.github/copilot-instructions.md` 文件
|
||||
|
||||
以 Cursor 为例，现代的 `.mdc` 规则文件支持 YAML 元数据，可以指定规则的适用范围：
|
||||
|
||||
```yaml
|
||||
---
|
||||
description: React 组件开发规范
|
||||
globs: src/components/**/*.tsx
|
||||
alwaysApply: false
|
||||
---
|
||||
# React 规范
|
||||
- 使用函数式组件
|
||||
- 优先使用 hooks
|
||||
```
|
||||
|
||||
规则文件的激活方式有多种，比如：
|
||||
|
||||
- 始终生效：设置 `alwaysApply: true`
|
||||
- 模式匹配：当引用匹配 `globs` 的文件时自动激活
|
||||
- 手动调用：在对话中用 `@规则名` 引用
|
||||
- AI 自主决定：AI 根据任务相关性自动加载
|
||||
|
||||
|
||||
💡 注意，随着工具版本的更新，这些文件的名称和标准可能会发生改变，一切以工具官方文档为主。
|
||||
|
||||
|
||||
|
||||
### AGENTS.md
|
||||
|
||||
[AGENTS.md](https://agents.md/) 是一种开放的文件格式，专门用于给 AI 编程智能体提供项目指令。
|
||||
|
||||
|
||||
|
||||
传统的 README.md 是写给人看的，主要介绍项目是什么、怎么用。而 AGENTS.md 是写给 AI 看的，包含 AI 工作时需要的技术细节：
|
||||
|
||||
- 项目的构建和启动命令
|
||||
- 测试运行方式
|
||||
- 代码风格和规范
|
||||
- 项目结构说明
|
||||
|
||||
一个典型的 AGENTS.md 文件大概长这样：
|
||||
|
||||
```markdown
|
||||
# 项目设置
|
||||
- 安装依赖：npm install
|
||||
- 启动开发：npm run dev
|
||||
- 运行测试：npm test
|
||||
|
||||
# 代码规范
|
||||
- 使用 TypeScript 严格模式
|
||||
- 组件文件使用 PascalCase 命名
|
||||
- 工具函数使用 camelCase 命名
|
||||
```
|
||||
|
||||
AGENTS.md 的优势在于它是一个开放标准，被数万个开源项目采用。当你使用支持该标准的 AI 编程工具（如 Claude Code、OpenAI Codex、Cursor、GitHub Copilot 等）时，AI 会自动识别项目根目录下的 AGENTS.md 文件，并将其中的指令发送给 AI，无需你手动引用。
|
||||
|
||||
|
||||
|
||||
### SDD 规范驱动开发
|
||||
|
||||
SDD（Spec-Driven Development，规范驱动开发）是 AI 时代的一种新型开发方法论，强调在编码之前先创建精确、机器可读的规范文档。
|
||||
|
||||
传统开发流程是：想到什么写什么，边写边改，最后再补文档。这样容易导致需求不清晰、代码和文档对不上。
|
||||
|
||||
而 SDD 的思路正好相反：**先把需求写成规范文档，并且把规范文档当作代码的唯一真相来源**。
|
||||
|
||||
你可以把规范文档理解为 “项目宪法”，它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码，确保产出完全符合预期。
|
||||
|
||||
|
||||
|
||||
为什么 SDD 越来越受重视？
|
||||
|
||||
因为 AI 生成代码的质量直接取决于上下文的清晰度，而不仅仅是依靠提示词技巧。一个清晰的规范文档能比任何 Prompt 黑魔法更有效地减少错误。
|
||||
|
||||
SDD 的典型工作流程：
|
||||
|
||||
1. Constitution（制定准则）：定义项目的基本原则、代码规范、性能标准
|
||||
2. Specify（编写规范）：描述要做什么功能、为什么做、用户需求是什么
|
||||
3. Clarify（澄清疑问）：让 AI 提出结构化问题，明确边界情况和错误处理
|
||||
4. Plan（制定方案）：确定技术栈、系统架构、数据模型、API 接口
|
||||
5. Tasks（拆解任务）：把计划拆解成可执行的任务列表，标注依赖关系和优先级
|
||||
6. Implement（执行实现）：AI 按照任务列表生成代码，人类验证
|
||||
|
||||
|
||||
|
||||
2025 年 9 月，GitHub 发布了开源的 [Spec Kit](https://github.com/github/spec-kit) 工具包，帮助开发者在 AI 编程中实践 SDD 方法论。它支持 Claude Code、GitHub Copilot 等主流编程工具，通过一套斜杠命令引导你完成上述流程。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -442,10 +617,16 @@ MCP（Model Context Protocol）是 Anthropic 在 2024 年底推出的开放标
|
||||
|
||||
|
||||
|
||||
在 Vibe Coding 中，MCP 让 AI 能够更方便地获取项目上下文，提高代码生成的准确性。
|
||||
MCP 的核心价值在于 **标准化**。开发者不需要为每个 AI 工具单独开发连接器，只需要按照 MCP 标准开发一次，就能被所有支持 MCP 的 AI 工具使用。目前 Claude Code、Cursor、Windsurf 等主流 AI 编程工具，以及各种网页 AI Agent 应用都已经支持 MCP 协议。
|
||||
|
||||
|
||||
|
||||
在 Vibe Coding 中，MCP 让 AI 能够连接更多外部工具和数据源，大大扩展了 AI 的能力边界。比如通过 Figma MCP，AI 可以直接读取设计稿并生成对应的网页代码；通过 GitHub MCP，AI 可以直接操作代码仓库、创建 PR；通过数据库 MCP，AI 可以查询和分析业务数据。
|
||||
|
||||
|
||||
|
||||
💡 想要发现更多好用的 MCP 服务？可以访问 [鱼皮 AI 导航 - MCP 大全](https://ai.codefather.cn/mcp)，持续更新优质 MCP，帮你重塑 AI 工作流。
|
||||
|
||||
|
||||
|
||||
## AI 输出相关
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
# Fish Skin's Vibe Coding Zero-Basics Tutorial
|
||||
|
||||
Hi everyone, I'm programmer Fish Skin.
|
||||
|
||||
Nowadays, Vibe Coding has taken the internet by storm. Not only programmers but also designers, product operators, and even people with no technical background are using Vibe Coding to realize their ideas, creating products with AI and monetizing them.
|
||||
|
||||
To help everyone keep up with the times, I've worked tirelessly to create a [**"Vibe Coding Zero-Basics Tutorial"**](https://ai.codefather.cn/vibe), completely free and open-source!
|
||||
|
||||
With thousands of images and hundreds of thousands of words, combined with my two and a half years of AI programming experience + project development experience + product monetization experience, my goal is simple: **to help anyone quickly master Vibe Coding, even with zero background, and rapidly develop and launch their own products for profit.**
|
||||
|
||||
|
||||
|
||||
Let me be bold and say that this free tutorial surpasses 90% of paid Vibe Coding content out there, given the amount of time I've invested in it.
|
||||
|
||||
- Tutorial Documentation Open Source Address: https://github.com/liyupi/ai-guide
|
||||
- Tutorial Online Reading Address: https://ai.codefather.cn/vibe
|
||||
|
||||
Feel free to Star, bookmark, and share it with your friends!
|
||||
|
||||
|
||||
|
||||
## What is Vibe Coding?
|
||||
|
||||
Simply put, **Vibe Coding is chatting with AI in plain language and letting AI write code for you**. You don’t need to remember any syntax; just clearly articulate your needs, like "Help me create a budgeting page," and AI will generate it for you. Programming becomes as natural as chatting—that’s the charm of Vibe Coding.
|
||||
|
||||
## Why Learn Vibe Coding?
|
||||
|
||||
In the past, learning programming took months, but with Vibe Coding, you can get started in just a few days. Think of an idea today, and you can bring it to life today—boosting productivity by tenfold!
|
||||
|
||||
After learning Vibe Coding, you can quickly create tools to enhance office efficiency, develop apps to solve everyday problems, and turn your creative ideas into real, profitable products.
|
||||
|
||||
## What’s in This Tutorial?
|
||||
|
||||
While there are many AI programming tutorials online, they are often too fragmented, focus only on tools without methods, or lack practical examples.
|
||||
|
||||
This leads to a patchwork approach—learning one trick here and there—making it hard to systematically master Vibe Coding.
|
||||
|
||||
That’s why I stepped in!
|
||||
|
||||
This tutorial covers every aspect of Vibe Coding. From zero basics => creating your first project in 10 minutes => mastering various AI programming tools => hands-on AI projects => mastering core AI programming techniques => running through the entire product monetization process. Plus, it’s packed with AI programming learning resources, an AI knowledge encyclopedia, and a troubleshooting manual to help you excel in Vibe Coding and meet various needs.
|
||||
|
||||
|
||||
|
||||
I’ve carefully structured the content to allow you to follow a seamless learning path or quickly find what suits you best.
|
||||
|
||||
- **Basics Must-Read**: Helps you quickly understand Vibe Coding and get hands-on, creating your first project in 10 minutes.
|
||||
- **Programming Tools**: Helps you choose the right AI programming tools, including AI model selection, no-code AI platforms, AI agent platforms, AI code editors, AI command-line tools, IDE plugins, and more.
|
||||
- **Project Practice**: Guides you step-by-step from 0 to 1 to create real, usable products, covering personal tools, AI apps, full-stack apps, mini-programs, and more.
|
||||
- **Experience & Tips**: Helps you improve Vibe Coding efficiency and quality, including core principles, dialogue engineering, context management, hallucination handling, code quality assurance, and more.
|
||||
- **Product Monetization**: Teaches you how to make your product valuable, covering demand analysis, technology selection, architecture design, profit models, SEO optimization, self-media operations, and more.
|
||||
- **Programming Learning**: Advanced content for those who want to dive deeper into programming, including learning paths, knowledge encyclopedias, resource collections, MCP development, interview prep, and more.
|
||||
- **Resource Treasure Trove**: A collection of practical resources, including tool directories, prompt templates, AI concept guides, Vibe Coding FAQs, and more.
|
||||
|
||||
|
||||
|
||||
This tutorial isn’t a dry pile of theory but is centered around practical application. It’s packed with project cases and plenty of screenshot examples, guiding you step-by-step as you learn by doing, truly mastering Vibe Coding.
|
||||
|
||||
|
||||
|
||||
## Who is This Tutorial For?
|
||||
|
||||
**1) Anyone Who Wants to Use AI to Boost Efficiency**
|
||||
|
||||
If you’ve ever wanted to learn programming but were deterred by complex syntax and confusing concepts; or if you have great ideas and want to quickly develop and launch your own products; or if you just want to use AI to enhance daily office efficiency and create tools to reduce repetitive tasks. With Vibe Coding, you can get started in just a few days—programming as naturally as chatting.
|
||||
|
||||
**2) Programmers Looking to Boost Efficiency**
|
||||
|
||||
If you’re a traditional programmer, tired of repetitive code and ready to throw your keyboard. With Vibe Coding, boosting productivity tenfold is no longer a dream. The experience tips and project practices in this tutorial will help you quickly advance to become a Vibe Coding expert.
|
||||
|
||||
**3) Entrepreneurs Looking to Monetize Products**
|
||||
|
||||
If you want to turn your ideas into profitable products, this tutorial not only teaches you how to make products but also how to make them valuable. From demand analysis to profit models, from SEO optimization to self-media operations, I’ll share my experience of creating 10+ self-developed products and growing from 0 to 2 million followers.
|
||||
|
||||
|
||||
|
||||
## Where to Start Learning?
|
||||
|
||||
**Zero-Basics Beginners**
|
||||
|
||||
- Day 1: Read the Basics Must-Read, understand Vibe Coding, and create your first project.
|
||||
- Week 1-2: Learn AI programming tools + complete a few simple projects.
|
||||
- Afterward: Learn experience tips and product monetization as needed.
|
||||
|
||||
**With Programming Background**
|
||||
|
||||
- Day 1: Quickly go through the basics and complete the quick-start tutorial.
|
||||
- Week 1: Learn mainstream AI programming tools and try refactoring previous projects.
|
||||
- Afterward: Focus on advanced techniques to improve dialogue and context management.
|
||||
|
||||
Practice is the best teacher. No matter your background, make sure to Vibe more projects during your learning process, encountering and solving problems in practice—this is the most effective way to learn.
|
||||
|
||||
|
||||
|
||||
## Final Words
|
||||
|
||||
I’ve always believed that sharing knowledge is mutually beneficial.
|
||||
|
||||
This tutorial is completely free and open-source, hoping to help more people open the door to Vibe Coding.
|
||||
|
||||
However, as it’s written by one person, there may be shortcomings, and I’ll continue to update and improve it.
|
||||
|
||||
**If this tutorial helps you, I hope you can give it a like or Star ⭐️ to show your support!**
|
||||
|
||||
Don’t hesitate—open the tutorial now, and in 10 minutes, you’ll have your first project. Join Fish Skin on this Vibe Coding journey! 🛫
|
||||
|
||||
📖 Tutorial Documentation Open Source Address: https://github.com/liyupi/ai-guide
|
||||
|
||||
🌐 Tutorial Online Reading Address: https://ai.codefather.cn/vibe
|
||||
|
||||
🎬 Author’s Video Collection: https://space.bilibili.com/12890453
|
||||
|
||||
💬 Feedback & Discussion: Feel free to ask questions in the [AI Navigation Community](https://ai.codefather.cn)
|
||||
|
||||
## Welcome to Contribute
|
||||
|
||||
This tutorial is open-source, and everyone is welcome to help improve it!
|
||||
|
||||
If during your learning process you:
|
||||
|
||||
- Find typos or awkward phrasing
|
||||
- Have better image examples or project cases
|
||||
- Want to introduce new AI tools
|
||||
- Discover new Vibe Coding techniques
|
||||
- Have useful prompt templates to share
|
||||
- Or any ideas to make the tutorial better
|
||||
|
||||
Feel free to submit a PR (Pull Request) directly on GitHub. Let’s polish this tutorial together and help more people learn Vibe Coding!
|
||||
Reference in New Issue
Block a user