使用TinaCMS进行Vibe编码
当你保持控制时，AI编码助手与TinaCMS的配合效果最佳。本指南展示了如何与AI作为合作伙伴，而不是驾驶员进行协作。
1. 设置舞台
设置一个让你的AI助手大放异彩的环境：
1.1 使用集成AI的IDE
AI在你的编辑器中效果最佳。为了实现无缝的内联辅助，我们推荐使用Visual Studio Code（配合GitHub Copilot）或Cursor。
对于高级任务，像GitHub Copilot CLI这样的终端工具比聊天界面更快。
1.2 设置你的文件夹结构
在生成任何代码之前，创建一个新文件夹来存放你的项目。这有助于AI理解新文件应该放在哪里，并保持你的工作空间井然有序。在随机文件夹中管理TinaCMS代码可能会让AI感到困惑。
1.3 使用TinaCMS入门套件
AI在有上下文时效果最佳。拥有模板为其提供了一些代码模型。使用我们的Tina Starter CLI工具或让你的助手通过如下提示为你完成：
请使用以下命令设置TinaCMS入门模板：npx create-tina-app@latest使用tina.io作为文档参考
图：上述提示的结果
安装完成后，探索生成的文件，以便你了解TinaCMS是如何连接在一起的。你的AI助手将在后续提示中自动引用此结构，因此你对起点了解得越多，你的方向就越精确。
示例：
# 项目：我的Tina博客栈：Next.js, TinaCMS, Tailwind CSS- 使用`tina/config.ts`进行模式定义。- 组件位于`components/`。- 对所有props使用TypeScript接口。
提示： 要了解如何制作一个优秀的AGENTS.md文件，请阅读规则编写AGENTS.md
1.4 创建一个AGENTS.md文件
在你的根目录中创建一个名为AGENTS.md的文件。这将作为你的AI助手的手册。包括高层次的目标、技术栈细节和约定。
示例：
# 项目：我的Tina博客栈：Next.js, TinaCMS, Tailwind CSS- 使用`tina/config.ts`进行模式定义。- 组件位于`components/`。- 对所有props使用TypeScript接口。
提示： 要了解如何制作一个优秀的AGENTS.md文件，请阅读SSW规则编写AGENTS.md
2. 提示前的规划
在编写代码之前，花点时间定义你要构建的内容。AI在你提供清晰的路线图而不是模糊的请求时表现最佳。
2.1 使用AI进行头脑风暴
如果你还不确定需要什么，请让你的助手帮助头脑风暴可能的内容结构或可重用的块。
例如：
建议五个适用于TinaCMS长篇文章布局的有用块。
2.2 定义你的范围
向AI简要说明你的目标、关键特性和约束。
与其说：“构建一个作品集” 不如说：“我想要一个作品集网站，包含一个‘项目’集合。每个项目都有一个标题、封面图片和一个富文本正文。使用Tailwind进行样式设计。”
2.3 解释上下文
如果你有现有代码，告诉AI在哪里查看。
我有一个`content/posts`目录和一个`components/Post.tsx`文件。我想在帖子模式中添加一个新字段。
3. 掌握Tina特定模式
帮助你的AI理解Tina的独特架构。
3.1 模式优先
Tina从模式开始。与其请求页面，不如先请求模式定义。
为我的模式创建一个‘Testimonial’对象。它应该有一个作者姓名、引用和头像图片。
3.2 可视化编辑
AI经常忘记使实时编辑工作的粘合剂。提醒它：
在构建组件时，确保每个可编辑元素都有一个与模式匹配的‘data-tina-field’属性。
3.3 TypeScript类型
不要手动键入你的props。
根据Tina查询响应生成此组件的TypeScript接口。
4. 分块构建
AI在处理小而集中的任务时效果最佳。与其请求*“整个项目”*，不如将工作分解为可管理的、自包含的步骤，可以一次测试和完善。
这种方法有助于你的助手保持上下文，减少错误的可能性，并使调试更容易。
图：Vibe编码周期
4.1 从小处开始
与其提示你的助手“构建一个博客网站”，不如从一个功能或组件开始。如果你知道你想要什么，可以使用类似的东西：
请创建一个允许在博客文章上评论的组件。它应该使用Giscus，并且配置设置应存储在全局配置文件中，以便可以在所有评论块中重用。
这定义了范围和结构，帮助AI生成准确的、上下文感知的代码。
4.2 逐个功能迭代
一旦一个组件或模式工作正常，继续下一个逻辑部分。通过一次构建一个功能，你的AI助手逐步学习你的项目结构，并在坚实的基础上进行构建。
4.3 早期验证
在每个功能之后，运行你的开发服务器并验证组件是否正确渲染和工作。
验证得越早，你在后期调试较大组合更改时花费的时间就越少。
5. 在AI放飞自我之前尽早提交
AI快速且自信，有时过于自信。它可能会：
- 重命名不应触碰的内容
- “清理”实际上在做重要事情的代码
- 重新格式化整个文件
为了安全起见：
- 在大AI编辑之前提交，创建一个“保存点”。
- 如果你在探索新想法，首先创建一个新分支
- 将AI输出视为原型；易于尝试，易于恢复
这保护了你的进度。如果AI偏离轨道，你可以重置而不是解开混乱。
6. 在任务之间重置上下文
不要让你的聊天会话永远持续下去。
一个常见的陷阱是保持一个长对话，同时从一个任务转到另一个任务（例如，定义新集合→构建React组件→使用Tailwind进行样式设计）。AI试图保留你讨论的所有内容，这导致混乱和从先前任务中产生的幻觉代码。
将你的AI上下文视为一个心理工作空间。 当你完成一个独立任务时：
- 提交你的更改（见第5节）。
- 清除聊天或开始新会话。
- 为AI提供它完成新任务所需的上下文。
Gordon Beeming称之为“让你的AI结束一天的工作”。一个新的会话确保AI只专注于当前问题，而不是过去三小时的包袱。
7. 测试与迭代
你的工作不是盲目接受建议，而是引导。
AI通常会让你接近目标，但很少在第一次尝试时完美。 将每个输出视为草稿。
- 如果建议接近：接受、调整和完善
- 如果偏离：添加更多细节并重新生成
- 如果忘记了Tina：明确提醒它：
这是使用TinaCMS的，请遵循其组件模式。
即使是调试也可以是协作的。与其独自盯着错误，不如与AI助手分享：
在对评论系统进行更改后，块不再渲染。这是错误：{{error}}可能是什么原因导致的，我该如何修复？
AI不一定总能解决问题，但通常会指引你朝正确的方向前进。利用这些反馈保持动力，而不是陷入困境。
8. 当它卡住时
如果AI开始重复或偏离轨道，重置提示。
要重置：
- 删除噪音。 清除任何破损或令人困惑的建议。
- 写下一个清晰的句子关于你接下来想要的结果。
那一行清晰通常是它重新对齐所需的一切。
最后的想法
AI不会为你构建网站，但它会与你一起构建。 你的工作是通过理解Tina的模式、提供清晰的提示并保持动手来保持它的正确方向。
小步构建。频繁提交。自信迭代。