来了，朋友们！

用 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 那种左边聊天右边只有一个预览窗口，他们右边做了一个无限画布。
除了展示你优化的不同历史版本的网页之外，还有各种网页构建所需要的上下文，这部分是永久的。
即使 Agent 的上下文超了，这部分信息也会一直存在，完成了卡帕西说的永久上下文。

如何又快又省的用 Edit 模式对项目进行修改

首先是一些基本样式的修改，你可以点击画布下面这个鼠标的图标，开启Edit 模式，就可以选中页面上的元素。
选中之后聊天窗口就会出现一个 CSS 属性的编辑组件，就可以直接编辑对应的文本、颜色对其方式等内容，编辑完点保存就行。
解决用文字描述不知道该怎么说的问题，由于直接把内容传入了 AI，所以可以精准的找到位置大幅节省 Token 消耗。
另外你会发现，选中的元素不止有上面的可视化修改区域，在输入框上面也回填了，如果上面的元素没有你想要修改的部分也可以打字描述。

然后 Edit 模式还不止可以选择网页元素，你还可以选择 Assets 部分的元素。
比如我这里可以选中网页标题，再选中 Assets 中我上传的猫猫头像，两个部分就都回填到了输入框里面，这时候你就可以将图片快速添加到指定位置了，我还让他给图片加上了圆形遮罩。
这样是不是比你吭哧瘪肚描述要好多了。

最后一个技巧，我们需要介绍一个概念“设计变量”，你是不是以为网页中所有元素的颜色、大小甚至描边粗细都是单独写的样式。
其实很多时候为了一致性和协作在正常写前端程序的时候都会将这些样式多封装一层，类似下面图片。比如描边颜色一般会指向这个变量名称而不是具体的颜色色值。
这样我们修改整个系统所有页面的描边颜色的时候就不需要一个一个改了，直接把映射表里的色值改掉，整个系统都会生效。
但是大部分编码 Agent 就是单独写的样式，所以随着你越该越多，模型丢三落四的现象就会越来越严重，需要传入的上下文也越来越长，直接导致上下文管理失败或者丢失需要改的部分。

Trickle AI 内置设计变量，我们在修改样式的时候直接让他改变量的值就可以了，不需要查询这个多个页面的样式文件，就能修改多个页面的元素样式。
了解了这个以后你用这种提问方式就可以频繁修改网页样式而不用担心过多的 Token 消耗和上下文占用。

你也可以让他拆分和新建设计变量，我这里原来导航的分割线和卡片描边共享一个变量，但是我不想他们是一个颜色，所以这个时候就可以要求他将分割线颜色和卡片描边颜色的变量分开分别设置。
这期间只涉及到设计变量的文件，所以消耗的 Token 非常少，这也是为什么我改了六十多个版本只花了几百积分的原因。

来让页面更美观吧

基本能力搞定以后，我优化了一堆首页的设计细节，比如更改卡片圆角、整体配色、增加顶部导航以及为网页增加移动端适配等等，基本用的都是之前说的 Edit 模式加上修改设计变量的方式。

除了排版字体之外的更改外，主要是三个地方的更改。
首先是在社交媒体展示这里，让他从原来中规中矩的图标加链接，变成了 hover 上去以后会倾斜和出现弥散投影的卡片。
我就只跟 Trickle AI 说 hover 会倾斜，并且加投影，没想到他的倾斜角度和投影样式搞得这么好，还加上了缓动效果。

然后感觉这个白色背景有点单调，于是就让 Trickle AI 给北京加上了浅紫色的点阵效果，重新把整个页面内容变为一张卡片，只需要跟他说点阵的圆点大小和颜色就行。

最后重点的来了，在作者这里我想要用一个炫酷的方式展示我的所在地，直接选了一个叫 COBE 的 3D 地球组件。
我们只需要跟他说用 CDN 引用组件，然后说一下组件放到哪里就行，带上组件文档的示例代码就搞定了，你可以在这里查看（http://t.cn/A6FJONgr）示例代码。

到这里我们的整个网站就搞定了，这个教程里面除了基本的创建，我主要在教你如何修改以及如何增加常见的网页能力，希望你看完的时候能有所收获。
Trickle AI 通过 Magic Canvas 以及样式修改跟左侧输入框的联动以及优秀的上下文工程和设计系统跟 AI 的结合，除了大幅提高了 Agent 的能力以外还大幅降低了现在开发 Agent 最大的成本问题。
而且设计系统跟组件库以后还会有更大的发展和更多的能力，带来更大的网络效应。