GLM-5「全栈长任务」实测：3小时复刻TikTok视频生成SaaS

先说结论：AI 编程可能真的进入到下一个 Level 了。

昨晚，我看完了 GLM-5 的发布文档。官方甚至没有过多宣传"写网页好不好看"，而是把重点放在了 Agentic（智能体能力）、Long-Horizon Task（长程任务）和 System Engineering（系统工程）上。

他们宣称：这个模型能像资深架构师一样，自主拆解系统级需求，在长达数小时的自动化任务中，保持上下文连贯。

有大 V 说比 Claude Opus4.6还好用？？我心想这么离谱的吗？

说干就干，我决定开启一个产品开发的大型实验：让它帮我从零构建一个 TikTok UGC 视频生成 SaaS 平台。

注意，这可不是做一个 Demo 网页那么简单。

要做一个能商用的 SaaS 平台，你需要考虑的问题是指数级增长的：

前端：Next.js 15 的 App Router 架构怎么搭？
后端：Python FastAPI 服务怎么写？
数据库：PostgreSQL 的表结构怎么设计？行级安全（RLS）怎么配？
任务调度：视频生成要几分钟，怎么做异步队列？怎么做轮询？
鉴权：手机号验证码、JWT Token、用户积分系统怎么扣费？

这根本不是一个"写代码"的问题，这是一个"系统架构" 的问题。

以前我觉得，除非我有一个 5 人的开发团队，否则这事儿没戏。

但这次，我只用了 GLM-5。

为什么要选这个题目？

最近字节跳动的 Seedance 2.0 模型发布，TikTok Shop 的机会肉眼可见。

我之前热衷于分享各种 n8n 工作流，教大家怎么捏视频。

但最近我意识到一个很反常识的事实：跨境电商的老板们根本不想学什么工作流。

他们只关心 ROI。

视频成本是 5 毛还是 5 块？一天能不能跑 1000 条？有没有现成的平台让我点一下就生成？

于是我得出一个结论：在 AI 时代，授人以渔，不如授人以「鱼」

想通了这一点，我打算直接做一个 TikTok UGC 视频生成网站：用户上传图片，系统自动生成带货视频，直接把「鱼」端到用户面前。

跑完后，我发现，AI编程可能真的进入到下一个 Level 了

插句题外话，老实说，GLM-5昨天速度好慢。。一问朋友才知道，涌入了10 倍用户量。。

今天还给 Coding plan直接干售罄了？？

看来意识到这点的不止我一个，幸亏我老早就推荐买了。。这样看下来也算是一笔很值的投资了哈哈哈

不过大家都在抢算力，搞到我从早跑到晚，当然中间我还踩坑了，后面跟大家说

如果正常跑的话，高低也得花个3小时才能把整个项目跑完了。

可以先看下我给的提示词，你就知道这个过程的含金量了，我采用的是 SDD（规格驱动开发）的模式，要求它严格按照"调研 -> 架构 -> 开发"的流程走：

markdown 复制代码

# Role & Objective
你现在的角色是 **OpenClaw 首席系统架构师**。我们需要构建一个 **TikTok UGC 视频生成平台**（类似 https://www.xxx.com/），帮助跨境电商卖家降低 AI 视频生成的门槛。

你需要采用 **"规格驱动开发 (Spec-Driven Development, SDD)"** 的方法论，严谨地执行"调研 -> 架构 -> 开发"的全链路流程。

# Context & Methodology
参考以下技术架构标准（请以此为执行标准，而非普通的代码生成）：
1.**Lane Planning**：在开始写代码前，必须先建立 `/.lane` 目录，通过文档定义需求（The WHAT）、架构（The HOW）和任务（The DO）。
2.**技术栈**：
   - 前端：Next.js 15 (App Router), Tailwind CSS (复刻目标网站风格).
   - 后端/数据库：Supabase (Auth, Postgres, RLS).
   - 异步任务：Trigger.dev (用于处理耗时的视频生成任务).
3.**工作流**：逆向工程 neobund.com -> 数据库设计 -> 后端逻辑 -> 前端实现。

# Execution Plan (Step-by-Step)

请严格按照以下 4 个阶段执行任务。每完成一个阶段，请向我汇报并等待确认，再进入下一阶段。

## Phase 1: 侦察与逆向工程 (Reconnaissance)
1. 使用你的 `playwright-mcp`工具 
调用我目前 macbook 在用的真实、有用户状态的 chrome 浏览器（用户是bggg63177@gmail.com）去访问网站 https://www.xxx.com/ 调研一下，输入手机号1847 和密码 Aso 来登录。 操作浏览器点击网站的多个页面，并且通过截屏方式留存图片

接着，参考以下参数，调用智谱 bigmodel 的视觉模型 glm-4.6v 用视觉能力去分析图片

=== glm-4.6v ===
curl -X POST \
  https://open.bigmodel.cn/api/paas/v4/chat/completions \
  -H "Authorization: Bearer 836a7db496194bc9a85633c57ac4a96" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "glm-4.6v",
    "messages": [
      {
        "role": "user",
        "content": [
          {
            "type": "image_url",
            "image_url": {
              "url": "https://cloudcovert-1305175928.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87grounding.PNG"
            }
          },
          {
            "type": "text",
            "text": "Where is the second bottle of beer from the right on the table?  Provide coordinates in [[xmin,ymin,xmax,ymax]] format"
          }
        ]
      }
    ],
    "thinking": {
      "type":"enabled"
    }
  }'
======

2.**深度调研**：
   - 分析 Landing Page 的文案、价值主张和视觉层级（H1, H2, CTA 按钮位置）。
   - 尝试理解其业务流程：用户如何上传图片？有哪些输入项（风格、时长、文案）？输出是什么？
   -**视觉分析**：虽然你不能直接"看"截图，请通过分析 HTML/CSS (DOM 结构、Tailwind 类名、计算样式) 来推断其配色方案 (Hex Code)、圆角风格、组件布局。
3.**产出物**：在当前目录下生成 `research.md`，包含：
   - 核心功能列表 (User Stories)。
   - 视觉设计规范 (Color Palette, Typography, Spacing)。
   - 推断的数据结构 (Schema Inference)。

## Phase 2: 架构与泳道规划 (Architecture & Planning)
1. 创建目录 `/.lane/plans/`。
2. 编写以下核心文档（不要直接开始写代码，先写文档）：
   -**`spec.md`**：详细的需求规格说明书。定义用户从"注册"到"下载视频"的完整路径。
   -**`data-model.md`**：设计 Supabase 的数据库结构。必须包含 `profiles`, `projects` (存储视频任务), `assets` (素材) 等表，并明确定义 RLS (Row Level Security) 策略。
   -**`architecture.md`**：系统架构图。描述 Next.js 如何通过 Server Actions 写入 Supabase，并触发 Trigger.dev 的异步任务。
3.**产出物**：上述三个 Markdown 文件。

也就是说根据前面的分析和需求场景，生成文件
- 要包含前端网站是什么样的，可以直接复刻前面说的网站，并且倒推出，后端python需要什么？？用 fastapi 来写服务
- 包括数据库结构设计，可以先用Supabase（你可以调用浏览器用我的谷歌账户来注册Supabase，然后新建项目）
- 还要包含用户的注册与登录。
- 就是要完整的一个可以用的。

## Phase 3: 后端基础设施 (Backend Infrastructure)
1.**Supabase 初始化**：
   - 生成 Supabase 的 SQL Migration 文件（基于 `data-model.md`）。
   - 编写 TypeScript 类型定义（数据库 Types）。
2.**异步任务编排 (Trigger.dev)**：
   - 规划 `generate-video` 的任务逻辑（模拟调用 AI 视频接口，因为我们暂时没有真实 Key，先写 Mock 逻辑但保持架构真实）。
   - 实现"轮询"或 Webhook 回调机制来更新 Supabase 中的任务状态。

## Phase 4: 前端复刻与集成 (Frontend Implementation)
1. 初始化 Next.js 项目。
2.**组件复刻**：根据 Phase 1 的视觉规范，使用 Tailwind CSS 构建高保真的前端页面。
   - 重点复刻：Dashboard 仪表盘、上传区域、视频结果展示卡片。
3.**联调**：将前端表单连接到 Supabase 和 Trigger.dev。