PlayableForge 产品展示

AI 驱动的可玩广告生成平台 · 真实运行实拍

技术栈 Next.js 14 · AI SDK v6 · Prisma

1 登录 → 仪表盘

从登录页进入,跳转到项目仪表盘。

Login
登录页极简表单,JWT 鉴权,登录成功跳转 /dashboard。
Dashboard
项目仪表盘(最新)顶部 5 卡索引(总项目/本月变体/首次通过率/迭代轮/预估节省) + 项目列表 + 最近活动日志,现场实拍。

2 工作台 - 上传素材 → AI 生成

三栏布局:左侧素材库、中间预览/聊天、右侧版本历史。素材自动按尺寸分类到 slot(s1/s2/s3...)。

Workbench
工作台(最新)左侧素材库(预估体积进度条、AI 视觉分类手动触发),中间迭代聊天输入区,右侧实时预览。顶部评级徽章·底部「存为模板 / 下载 HTML / 锁定骨架 / 生成变体」。
With Assets
素材入驻详情背景(s1) + 按钮(s2) + 弹窗(s3) 素材叠加,缩略图预览,可改名 / 删除 / 重新分类。

生成结果 · 实际运行截图

Generating
生成中点击「重新生成」后,聊天面板上推「正在生成 HTML 骨架...」、按钮变「生成中...」、底部"AI 正在处理"。全程 SSE 流式进度。
Done with Preview
生成完成(带预览)29s 跑完glm-5-turbo,v3 落库,顶部 B 级徽章,右侧 iframe 实时渲染出紫山黎明背景(项目"星空寻宝"本体)。
Error
错误处理API Key 失效时聊天面板走 SSE error 事件:"错误:AI 未返回有效内容"。输入框重新可用、以便重试。
10 Variants Animated
10 变体同步演示2×5 网格,每格 180×390,10 个变体 GIF 同时循环播放。同骨架 × 10 背景,金币飘字、进度条动画完全一致,仅背景色不同。

3 实际运行 - 三素材广告("点击关闭"按钮版)

真机截屏(390×844 mobile viewport)。展示 AI 生成出来的 Playable 在浏览器里跑起来的完整流程。

Initial
1 初始启动遮罩 + 引导文案
Tapping
2 互动中点星星收集金币
CTA
3 CTA 弹窗"点击关闭"按钮就位

🎬 完整动效 GIF

下方 GIF 是真实录屏(5 帧 × 3.4 秒),覆盖:初始 → 启动 → 互动 → CTA → 点击按钮。

Full Flow GIF
v3 完整流程新按钮"点击关闭"自动注入 s2 槽位并正确呈现。

🎨 AI 自加彩蛋(超出 prompt 预期)

金币飘字反馈 · 星星点击发光 · 椭圆光台引导 · 半透明遮罩动画 · CTA 按钮 bounce 动画

4 变体生成 - 同骨架 × 10 背景

锁定 v3 版本作为骨架,上传 10 个不同主题背景作为变体素材,一键生成 10 个不同视觉风格的 Playable,零 AI 成本。

Variants Page
变体生成页(最新)左边锁定骨架 v1 预览,右边背景图 10 张可点选,实时计算 「10 = 10 个变体」。
Variants CTA Grid
10 变体 CTA 帧对比同一"点击关闭"按钮叠在 10 种背景之上,slot 替换协议工作正常。

✅ 变体生成结果

10 个变体 · 594ms 完成 · 全 A 级 · 零 AI 调用 · 纯正则替换 slot

594ms
10 变体生成总耗时
10/10
A 级评分
0
AI 调用次数
~150KB
单变体大小

5 系统配置

Settings 页面集中管理 AI Provider、校验规则、压缩选项、System Prompt 自定义。

Settings
Settings(最新全页)5 大块:AI 服务 / 素材分类 AI / 校验规则 / 压缩参数 / System Prompt / Webhook 通知,阈值与模型全部可调。

6 技术架构

5 段 Pipeline

generate → validate → fix → synthesize → save,每步可观测、可干预、可回退。

Slot 替换协议

AI 输出含 data-variant-slot 占位符的 HTML,变体只做正则替换,零 AI 成本。

严格 Sandbox

iframe sandbox 不带 allow-same-origin,安全隔离的预览环境。

灵活配置

AI 模型 override、校验规则、压缩选项、System Prompt 全部可定制。