来了，朋友们！

用 Trickle ai 把 Vibe Coding 玩到了新高度，总结了一套帮你生成完整产品又快又好又省钱的方案。

内容有点长，原文 6000 字，收藏后面看也行，这里只发基础的部分，功能添加部分还是看评论原文吧。

文章具体内容包括：

1. 首次提示词书写方式的改变
2. Trickle AI Magic Canvas 的强大能力，永久上下文
3. 又省钱的用 Edit 模式对项目进行修改
4. 为网页创建数据库和上传数据
5. 利用外部组件增加网页美观度
6. 免费为网页增加搜索功能
7. 网页上线后的设置-SEO 优化、域名绑定、数据分析

开始之前我们先来看一下，我 Vibe Coding 的结果（fragments.guizang.ai）。

一个 AIGC 周刊的信息聚合网站，里面会有过去两年我收集到的所有 AI 产品、关键论文和文章、关键的事件记录，支持搜索支持分类检索，还包含一个后台来执行一些数据上传和同步的工作。

我一直想把两年来的AIGC周刊内容做成网页，每篇内容变成卡片，方便检索和回顾AI发展历程。
以前用AI开发这种网站很难，数据库、样式优化、分类搜索、域名、SEO和数据分析都很麻烦。
Trickle AI之前没有一款Vibe Coding产品能解决这些问题，Framer也太复杂。但现在只花一个下午和6美元就能搞定全部需求

首先是第一次提示词

按我原来的原则需要第一次就把提示词写的非常详细和准确，因为大部分的编码 Agent 改几次就很容易超出上下文，损坏项目。
Trickle AI 用上下文工程和优化方案一定程度上解决了问题，样式修改消耗的积分非常少。
只需要在刚开始的时候大致描述清楚最主要的页面和功能就可以了。

当然第一次肯定是不符合你的需求的即使他再漂亮，所以我们接下来就面临修改内容和样式的问题。
以往很多 Vibe Coding Agent 你几乎只能用文字去描述想要修改的部分，但是 Trickle AI 提供了非常丰富的方式让你去修改和保证生成效果。

介绍一下 Trickle AI Magic Canvas

不同于其他 Agent 那种左边聊天右边只有一个预览窗口，他们右边做了一个无限画布。
除了展示你优化的不同历史版本的网页之外，还有各种网页构建所需要的上下文，这部分是永久的。