来了，朋友们！
用 Trickle ai 把 Vibe Coding 玩到了新高度，总结了一套帮你生成完整产品又快又好又省钱的方案。
内容有点长，原文 6000 字，希望可以提前要一下点赞，转发收藏后面看也行。
下面是详细的教程：👇
https://t.co/dxANL8FRIZ https://t.co/SipbLg6t8k
等不及施工🚧的朋友可以直接看原文，这里细节多点：
https://t.co/xNz3WqvDij
文章具体内容包括：
1. 首次提示词书写方式的改变
2. Trickle AI Magic Canvas 的强大能力，永久上下文
3. 又省钱的用 Edit 模式对项目进行修改
4. 为网页创建数据库和上传数据
5. 利用外部组件增加网页美观度
6. 免费为网页增加搜索功能
7. 网页上线后的设置-SEO 优化、域名绑定、数据分析
开始之前我们先来看一下，我 Vibe Coding 的结果（https://t.co/h2pblpIbIy）。
一个 AIGC 周刊的信息聚合网站，里面会有过去两年我收集到的所有 AI 产品、关键论文和文章、关键的事件记录，支持搜索支持分类检索，还包含一个后台来执行一些数据上传和同步的工作。 https://t.co/1B0lW7zClz
我一直想把两年来的AIGC周刊内容做成网页，每篇内容变成卡片，方便检索和回顾AI发展历程
以前用AI开发这种网站很难，数据库、样式优化、分类搜索、域名、SEO和数据分析都很麻烦
Trickle AI之前没有一款Vibe Coding产品能解决这些问题，Framer也太复杂。但现在只花一个下午和6美元就能搞定全部需求 https://t.co/X33aVhckOG
首先是第一次提示词
按我原来的原则需要第一次就把提示词写的非常详细和准确，因为大部分的编码 Agent 改几次就很容易超出上下文，损坏项目。
Trickle AI 用上下文工程和优化方案一定程度上解决了问题，样式修改消耗的积分非常少。
只需要在刚开始的时候大致描述清楚最主要的页面和功能就可以了。 https://t.co/9ew50wrOSf
当然第一次肯定是不符合你的需求的即使他再漂亮，所以我们接下来就面临修改内容和样式的问题。
以往很多 Vibe Coding Agent 你几乎只能用文字去描述想要修改的部分，但是 Trickle AI 提供了非常丰富的方式让你去修改和保证生成效果。
介绍一下 Trickle AI Magic Canvas
不同于其他 Agent 那种左边聊天右边只有一个预览窗口，他们右边做了一个无限画布
除了展示你优化的不同历史版本的网页之外，还有各种网页构建所需要的上下文，这部分是永久的
即使 Agent 的上下文超了，这部分信息也会一直存在，完成了卡帕西说的永久上下文 https://t.co/VOMAv9oxxk
如何又快又省的用 Edit 模式对项目进行修改
首先是一些基本样式的修改，你可以点击画布下面这个鼠标的图标，开启Edit 模式，就可以选中页面上的元素。
选中之后聊天窗口就会出现一个 CSS 属性的编辑组件，就可以直接编辑对应的文本、颜色对其方式等内容，编辑完点保存就行。
解决用文字描述不知道该怎么说的问题，由于直接把内容传入了 AI，所以可以精准的找到位置大幅节省 Token 消耗。
另外你会发现，选中的元素不止有上面的可视化修改区域，在输入框上面也回填了，如果上面的元素没有你想要修改的部分也可以打字描述。
然后 Edit 模式还不止可以选择网页元素，你还可以选择 Assets 部分的元素。
比如我这里可以选中网页标题，再选中 Assets 中我上传的猫猫头像，两个部分就都回填到了输入框里面，这时候你就可以将图片快速添加到指定位置了，我还让他给图片加上了圆形遮罩。
这样是不是比你吭哧瘪肚描述要好多了。 https://t.co/yx3pBCzfNw
最后一个技巧，我们需要介绍一个概念“设计变量”，你是不是以为网页中所有元素的颜色、大小甚至描边粗细都是单独写的样式。
其实很多时候为了一致性和协作在正常写前端程序的时候都会将这些样式多封装一层，类似下面图片。比如描边颜色一般会指向这个变量名称而不是具体的颜色色值。
这样我们修改整个系统所有页面的描边颜色的时候就不需要一个一个改了，直接把映射表里的色值改掉，整个系统都会生效。
但是大部分编码 Agent 就是单独写的样式，所以随着你越该越多，模型丢三落四的现象就会越来越严重，需要传入的上下文也越来越长，直接导致上下文管理失败或者丢失需要改的部分。
Trickle AI 内置设计变量，我们在修改样式的时候直接让他改变量的值就可以了，不需要查询这个多个页面的样式文件，就能修改多个页面的元素样式。
了解了这个以后你用这种提问方式就可以频繁修改网页样式而不用担心过多的 Token 消耗和上下文占用。 https://t.co/wbN8TaT58M
你也可以让他拆分和新建设计变量，我这里原来导航的分割线和卡片描边共享一个变量，但是我不想他们是一个颜色，所以这个时候就可以要求他将分割线颜色和卡片描边颜色的变量分开分别设置
这期间只涉及到设计变量的文件，所以消耗的 Token 非常少，这也是为什么我改了六十多个版本只花了几百积分的原因 https://t.co/KEEKVUhf93
为网页添加数据库
这里需要先让他初始化数据库将数据库表格的列变为我们需要的部分，比如我的卡片上面，有分类、标题、描述、更新时间以及链接。
之后他就会帮你初始化数据库而且把虚拟数据放进去，并且把数据库跟网站开始链接，数据库数据的变化会反应在网页的卡片上。 https://t.co/y0oUOHKtir
我的周刊有非常多的数据，而且数据都是非标的文章，首先，我需要把这些数据变成跟数据库的格式一样的标准化表格数据。
这时候就得找 o3 了，你们处理数据也能这么玩。
直接把文章和 Trickle AI 的数据库截图发给 o3，要求他参考图片的数据库格式把文章的内容整理成 CSV 文件，不能映射的内容不整理。 https://t.co/c8CV7vA5F2
然后我发现他们还没做数据库数据导入的功能，后来我就想能不能让他写个后台网页完成这个功能。
网页的功能就是解析我上传的 CSV 文件然后存到数据库里面，我尝试了一下，结果真的可以！
他真的写了一个后台网页，我的 CSV 文件上传上去，他就自动解析，然后更新到数据库中，真的太牛了 https://t.co/0juSYlH7ls
来让页面更美观吧
基本能力搞定以后，我优化了一堆首页的设计细节，比如更改卡片圆角、整体配色、增加顶部导航以及为网页增加移动端适配等等，基本用的都是之前说的 Edit 模式加上修改设计变量的方式。
来看一下对比： https://t.co/C85pQNuxqP
除了排版字体之外的更改外，主要是三个地方的更改。
首先是在社交媒体展示这里，让他从原来中规中矩的图标加链接，变成了 hover 上去以后会倾斜和出现弥散投影的卡片。
我就只跟 Trickle AI 说 hover 会倾斜，并且加投影，没想到他的倾斜角度和投影样式搞得这么好，还加上了缓动效果。 https://t.co/nfvrTucukl
然后感觉这个白色背景有点单调，于是就让 Trickle AI 给北京加上了浅紫色的点阵效果，重新把整个页面内容变为一张卡片，只需要跟他说点阵的圆点大小和颜色就行。 https://t.co/VU7gQXkhNJ
最后重点的来了，在作者这里我想要用一个炫酷的方式展示我的所在地，直接选了一个叫 COBE 的 3D 地球组件。
我们只需要跟他说用 CDN 引用组件，然后说一下组件放到哪里就行，带上组件文档的示例代码就搞定了，你可以在这里查看（https://t.co/Hl0S1V3l3e）示例代码。 https://t.co/OrGO57OQZR
给网页增加搜索功能
当然不能让他自己实现一个搜索，这个太复杂了，我们有免费的 Algolia 服务可以使用。
你只需要注册一个 Algolia 账号，数据链接方式选择爬虫，他会让你在网页加一个链接，这时候你发给 AI 让他加就行。
然后把他新手引导最后一部分的信息给到 Trickle AI 跟他说帮我基于这个信息用 CDN 引用的方式给网站加上 Algolia 搜索服务就行。
然后我们需要主动推送数据给 Algolia ，但推送数据需要后端服务啊 Trickle AI 又没有。
还记得我们是怎么上传数据的吗，对的后台页面，那能不能在后台页面加个功能主动触发同步呢。
可以的，你需要去 Algolia 找到写入的 API Key 提供给 Trickle AI 他就能帮你搞定。
同步数据之后就能搜索信息。 https://t.co/3NmiVBkDDP
网站上线后的设置-绑定域名、SEO、数据分析
如果你想绑定自己的域名可以在右上角Publish 弹窗这里点击 「+ Custom domain」按钮。
然后在弹窗里面点击「New domain」就行，里面会有详细的引导，直接去你域名服务商那里复制填写内容就行。 https://t.co/epqprJWzjv
然后需要设置一些 SEO 需要的信息，大致就是可以让谷歌搜索的时候可以搜到你。
还是在 Publish 按钮弹窗的 Bookmark Preview 这里点击那个铅笔图标。
需要做的首先是把里面确实的图片补一补，比如网页的图标以及预览图片，其他 SEO 部分 Trickle AI 已经帮你写好了 https://t.co/76XiSZzN0H
最后就是数据分析了，网站上线之后我们总要看一下数据怎么样，然后针对性的宣传和修改。还是在右上角Publish 弹窗这里点击 「+ Custom domain」按钮。
然后在弹窗部分就可以看到大致的数据了，你也可以点击那三个点图标，再展开的新弹窗里看到非常详细的其他数据。 https://t.co/G1pwr5gpGY
到这里我们的整个网站就搞定了，这个教程里面除了基本的创建，我主要在教你如何修改以及如何增加常见的网页能力，希望你看完的时候能有所收获。
Trickle AI 通过 Magic Canvas 以及样式修改跟左侧输入框的联动以及优秀的上下文工程和设计系统跟 AI 的结合，除了大幅提高了 Agent 的能力以外还大幅降低了现在开发 Agent 最大的成本问题。
而且设计系统跟组件库以后还会有更大的发展和更多的能力，带来更大的网络效应。
从我目前的感受来说目前的 Trickle AI 终于让前端开发 Agent 在前端功能上超过了 Framer 以及 Webflow 这种可视化建站产品。
而且解决了这类产品最大的问题，过于复杂的操作和学习成本，任何改动只需要跟 AI 说就行，他都能给你启发帮你搞定。
这是他们官方的视频介绍：
https://t.co/1zrphZDQ0i
又更新了几期周刊的数据，后面应该会长期更新，想要搜信息可以来这里 https://t.co/ABeUrLq8he
