细节全公开！我是如何用 AI 一天上线一个网站的
2026 年刚开年，Trae 就给每个用户都发了 600 积分，还没领到的朋友，抓紧去 Trae.ai 的官网快快去领取吧。【非广告，热心博主，纯提醒🐶】
领到了 600 积分后，大概一个月的时间就过期了，所以趁着积分还热乎，就用 Trae 的 Gemini-3-Pro 模型和 GPT-5.2 模型给自己写了一个新的网站。
接下来我会把网站的开发细节，以及 UI 是如何设计如此精美的，都给大家分享出来，相信对于大多数的读者来说，这将是一个非常不错的经验包。
文章快速阅读只需两分钟，读完以后，你的经验值就会快速 +1 +1
文章开始，先介绍背景
前几天跟一个朋友聊天的时候，聊到了视频剪辑这个领域，他现在在做的业务就是国内外各种短剧分销和视频搬运。
先解释一下短剧分销这个概念：在国内的平台上，抖音、快手、好看视频、B 站等一线平台，都上线的有短剧分销的功能。
简单来说，就是你把这个短剧的高光时刻发布到短视频平台上，用户在看到这个视频激动不已的时候，就会点击购买视频全集，此时用户的购买费用，就会有
一部分转移到了这个视频的作者手上。
想要参与短剧分销就必须有 MCN 的资质才行，对于小型的 MCN 机构来说，如果每一个短剧上线后，都自己一个一个来剪辑高光时刻的小视频，成本是相对较高的。
所以他们会有一个普遍的玩法，就是直接下载别人的视频，然后发布到自己的账号矩阵上。从而快速获取流量，然后进行盈利。
举个例子：你看到抖音这个短剧小视频剪辑的非常不错，热度也很高，那你就直接把该视频下载下来。去除水印后，添加一些特殊的动效，改变视频原比例等操作。
直接发布到自己其他平台的账矩阵上就行，以此来进行盈利。
这里涉及到两个动作：
第一：你如何在各个平台上下载一个无水印版的原视频。
第二：能否将该原视频改变比例，增加特效这个操作，直接 AI 一键完成。而不是还需要人工进行参与。
于是乎，本来Trae 的 600 积分到手后，自己正想着如何消耗掉呢，和这位朋友聊完，我就用了周末一天时间把这个网站给 Vibe Coding 出来了。
先看网站效果
主要分为五个模块：
一：抖音无水印视频下载
我们直接将抖音链接输入到网站上，然后点击新窗口打开视频，即可下载该视频的无水印版本。
二：TikTok无水印视频下载
三：B 站无水印视频下载
四： AI 智能修剪，可以一键将你所上传的视频，直接进行智能裁剪；
目前支持直接采集视频比例，以及色彩增强，智能去噪，和音频微调功能
接下来我们开始正式拆解
首先，必须的必的就是：计划先行！千万不要直接让AI直接给你干代码！
切记，对于这些顶尖模型，写代码对与他来说都是最简单的事情，但是一旦计划没对应起来，代码前面给你写糟糕了，你后面再让他来来回回修改，是非常的浪费时间的。
所以，一定要计划先行！
我们先把上面想要实现的这些初步需求，直接用 Solo Code 的 Plan 模式，全部丢给 AI，让他罗列一个实现计划。
核心步骤是：
一：让他自行调研如何实现抖音、TikTok、B 站这三个平台的视频下载无水印功能。并让他输出技术文档。
二：让他调研如何实现网站在线的视频剪辑功能。并让他输出技术文档。
三：让他自行写一个网站的功能列表，实现我们想要的需求，需要有哪些菜单和功能，并让他输出一个设计文档。
四：让他制定测试计划，这里我们自行找到一个抖音的视频链接、TikTok 的视频链接，B 站的视频链接，作为他的测试用例，让他后续开发完成功能后，自行基于该测试用例，进行测试。
这四个事项的文档确认完以后，其实已经可以让他实现自闭环了，自己开发功能自己进行测试。
这里有一个注意事项是，Solo Code 模式支持 Sub Agent，我们这里直接把 Trae 官网推荐的一些 Agent 全部给加到自己的模块当中，这样 Solo Code 会在需要的时候自主调用架构 Agent、前端 UI Agent 等各种 Agent 的能力。
等到技术文档确认后，我们人工简单审核下文档，其实前端我也看不懂，只是大概看一下，他要使用的开发语言以及要采用的框架是不是你想让他使用的即可。
这里主要是让他使用 React 框架，方便后续部署到 vercel 上，其他的我没啥特殊要求。
由于最开始，我也不知道网站到底要设计成啥样子，所以看了看 AI 给的设计文档，感觉功能该有的都有，于是全部审核通过后。
开始让 AI 正式初始化项目并编写代码。这个时候剩下的就是等待他自己干活了。
等到 AI 全部写完代码，验证完测试用例后，大概率需要耗时 1 - 2 个小时左右，原因是因为这中间会存在 AI 自行验证完成，但是你人工进行验证的时候仍然会看到异常的情况，这个时候就需要你人工进行介入，然后反复和 AI 进行功能调试，直到你人工验证通过。
我们此时看一下 AI 第一版本开发出的功能：
输入一个抖音链接，验证一下解析原视频是否成功，可以看到功能实现是没有问题的。
但是唯一的问题是什么呢，UI 界面太丑了。
UI 问题实际是最简单的问题，因为现有的网页设计，存在很多不同的设计语言：
-
有机简约主义 (Organic Minimalism)
-
瑞士设计风格 (Swiss / International Typographic Style)
-
野兽派(Brutalism) 设计语言等等
不同的设计语言，背后都有一套 UI 框架提供支撑，你需要把自己想要什么风格的网页给 AI 说清楚，他就会自行按照这套设计框架来重构你的 UI 风格。
这里在验证完 AI 功能可行后，我就直接让 AI 基于野兽派(Brutalism) 设计语言，来重新设计一下 UI 界面。
呐，设计完之后的效果就如下所示了：
紧接着耗时的部分就是项目的细节优化部分了：
一：让 AI 增加中英文切换的功能，全站所有内容均支持中英文切换。
二：让 AI 增加教程说明文档，针对不同模块的功能，分别写一个使用教程。
比如针对 TikTok 无水印视频下载的教程，这里 AI 罗列完使用教程后，会指定一个文件夹，
我们需要把对应的一些素材照片放到对应的文件夹下。比如下面的TikTok 的页面截图，就需要人工截图并放到对应的目录下。
到了这一步后呢，其实整个网站的功能已经开发的差不多了。
接下来我会再单独新开一个窗口，让 Gemini 重新扫描项目代码，帮我确认当前的实现是否符合：
一：确认抖音、TikTok、B 站这三个平台的视频下载功能，全部是运行在浏览器的环境当中，不要强依赖服务端资源。
二：确认 AI 智能修剪功能，是运行在浏览器的环境当中，不要强依赖服务端资源。
这里涉及到一个问题是，如果解析完抖音视频进行下载时，还需要请求自己的网站服务器下载视频，那对于网站的流量消耗影响太大了。
以及 AI 智能修剪功能也是一样，如果还需要视频上传到云端再进行剪辑，成本太高了，服务器是扛不住的。
所以新开一个窗口，让 Gemini 重新扫描项目代码，确认是否符合上述要求，等到一切都确认完成后，就可以直接使用 Solo 的Builder 模式，直接将网站部署到 vercel 上了。
一切就这么愉快的结束啦！
想要体验这个网站的朋友，可以直接浏览器访问：https://www.neirongshu.com
欢迎日常交流
AI 驱动团队开发是这个时代的新命题，欢迎大家加微信互相交流心得。
👉 想要进群的朋友，扫码时备注 “AI实验群”，看到消息后会第一时间拉你进群。
群定位：AI工具提效/实战经验互助
群规则：不水群、不广告、干货优先
欢迎访问该链接获取群信息：https://zhaozhihao.com/archives/KRMxDLo4
好文章值得被更多人看见！既然看到这里了，随手点个赞👍和关注，并转发给更多的朋友吧！感谢。
作者：贾克斯的平行世界、V：x_h886688
浙公网安备 33010602011771号