This commit is contained in:
sanbuphy
2026-01-04 16:12:04 +08:00
parent 2d858d79e2
commit e53b7c0832
6 changed files with 29 additions and 24 deletions
@@ -62,7 +62,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
---
# 2. 关于提示词编写
3. **提示词一次写完好,还是拆成多步更好?**
## 1. 提示词一次写完好,还是拆成多步更好?
很多人会忍不住想直接在一个提示词里,把“做一个完整的全栈应用”一次性说清楚。事实上,当前工具已经足够强大,确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看,把工作拆成小步骤、按阶段迭代,效果往往会更好,也更不容易陷入“改不动”的死胡同。
@@ -73,7 +73,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
> “3. 最后把前后端连起来”。
> 这样能让 AI 更准确地理解你的需求并给出更可靠的输出。
2. **越清晰,越好**
## 2. 越清晰,越好
* 在 Vibe Coding 中,你写的提示词和你写的代码一样重要。提示越清晰、越具体,结果就越接近你心中所想。
* 一开始就把目标与约束条件说清楚,可以减少后续反复修改的次数,这不仅省时间,也能节省使用额度和成本。
@@ -81,7 +81,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
---
# 3. 工具总览(Vibe Coding / UIUX 工具)
### 4. AI Agent 平台
## 1. AI Agent 平台
| **Name** | **Platform** |
| --------------------------------------------- | ------------------ |
@@ -92,7 +92,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
| **[Trae](https://www.trae.ai/)** | PC |
| **[V0](https://v0.app/)** | Web-based |
### 5. AI UIUX 平台
## 2. AI UIUX 平台
| **Name** | **Platform** |
| ---------------------------------------- | -------------------- |
@@ -102,7 +102,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
---
# 4. 实战教程(Vibe Coding + UI 结合)
5. 在你准备进行 Vibe Coding 的平台聊天窗口中,输入你想要的程序描述。
1. 在你准备进行 Vibe Coding 的平台聊天窗口中,输入你想要的程序描述。
示例:
> 请构建一个带前端和后端的简单贪吃蛇(Snake)网页应用。
@@ -130,7 +130,7 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
> * 使用 DeepSeek API 生成诗歌。
> * 将 API Key 存放在 `.env` 文件中,并在 `.gitignore` 中忽略该文件。
>
6. 输入你的 DeepSeek API Key。(可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取)
2. 输入你的 DeepSeek API Key。(可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取)
1. LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息,不能公开,因此需要单独写在配置文件里。
**为什么要用 `.env` 文件,并且不要把它上传到 GitHub?**
@@ -139,8 +139,8 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
* 如果这个文件被上传到 GitHub,全世界的人都能看到你的密钥并盗用它。
* 为了安全起见,我们需要在 `.gitignore` 文件中声明忽略 `.env`,让 Git 不跟踪它。
* 这样一来,你的项目仍然可以在本机正常使用这些密钥,但不会在仓库中泄露。
7. 查看生成结果后,如果发现错误或有需要修改的地方,可以直接在聊天窗口中输入你的修改请求。
8. 如果你对页面设计不满意,也可以选择在 Figma 或 Mastergo 中重新设计界面,再把设计思路反馈给 Agent。
3. 查看生成结果后,如果发现错误或有需要修改的地方,可以直接在聊天窗口中输入你的修改请求。
4. 如果你对页面设计不满意,也可以选择在 Figma 或 Mastergo 中重新设计界面,再把设计思路反馈给 Agent。
* **示例**
@@ -170,14 +170,14 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求,在多个平台上进行实测,从初学者的角度评估它们的优劣。以下是总结。
## 1. 对比标准
2. **目标(Goal**
1. **目标(Goal**
构建一个接入 DeepSeek API 的贪吃蛇(Snake)网页应用。
3. **游戏细节(Game Details**
2. **游戏细节(Game Details**
1. 游戏通过 DeepSeek LLM API 生成诗歌。
2. 蛇吃掉的是英文单词,收集到的单词会在游戏结束后保留,并在新一局中继续使用。相同单词可以被多次收集,并分别计数。
3. 当生成一首诗后,被使用到的单词会从库存中移除。
4. **必备功能(Must-Haves**
3. **必备功能(Must-Haves**
1. 一个可运行的前端页面,包含贪吃蛇游戏(键盘控制、Canvas 渲染)。
2. 单词收集机制(单词出现在棋盘上,蛇吃掉单词后,侧栏列表更新)。
@@ -185,13 +185,13 @@ AI Agent 是一种软件系统,它能够感知环境、做出决策,并自
4. 使用 DeepSeek API 的后端(如果没有 API Key,可以先返回模拟诗歌)。
5. “生成诗歌”按钮:点击后调用后端,显示诗歌,并根据使用情况更新单词库存。
6. 对 API Key 的 `.env` 支持,以及通过 `.gitignore` 避免密钥泄漏。
5. **加分项(Nice-to-Haves**
4. **加分项(Nice-to-Haves**
1. 用户可以选择要用哪些词来生成诗歌。
2. 用户体验友好(例如侧边栏清晰展示单词列表、诗歌展示区布局合理)。
3. 为初学者在代码中加入注释,解释关键逻辑。
## 6. 编码输出对比
### 7. LovableWeb-based
## 2. 编码输出对比
### 1. LovableWeb-based
* **平台类型:** Web 端
* **主要特性与工作流:** Lovable 在集成与协作方面做得很好,它自动完成诸如连接 Supabase 数据库等初始化工作,使项目搭建过程非常顺畅。你只需描述项目需求,Agent 就会帮你把各类服务串联起来,构建好基本结构。