【生活娱乐赛道】干架研究所 Argue — AI 辩论竞技场

TRAE AI 创造力大赛 【大赛初赛专区】
1

TRAE Friends - TRAE AI 创造力大赛・南京站 活动

因为刮台风就没有去现场了，不用再报名就挺好的，先交个demo作业

一、Demo 简介

是什么： 干架研究所 · Argue 是一个基于网页的 AI 辩论竞技场——用户接入自己的大模型 API，与一整队 AI 辩手在虚拟大礼堂里唇枪舌剑，最后由 AI 裁判当场出具一份煞有介事的《干架鉴定报告》。

面向谁：

  • 喜欢抬杠、辩论、思辨的"键盘侠"和表达欲旺盛的用户
  • 想用 AI 锻炼表达逻辑、临场反应的职场人和学生
  • 寻找有趣 AI 应用场景、想体验多 Agent 协作的技术玩家

主要功能：

  1. 自定义模型接入 — 填写 API Key 与 Base URL，一键拉取可用模型列表（兼容 OpenAI 格式），Key 仅保存在本地浏览器，绝不外传。

    image
    image2545×1162 129 KB

  2. 大礼堂沉浸式辩论现场 — 3D 透视的虚拟礼堂舞台，正反两方多名辩手同台对峙，主屏显示辩题与倒计时，AI 发言采用流式打字机效果逐字蹦出，紧张感拉满。支持文字输入与语音发言两种交互方式。

    image
    image1920×967 138 KB

  3. 铁面 AI 裁判 + 《干架鉴定报告》 — 三轮交锋（开篇立论→自由辩论→总结陈词）结束后，AI 裁判基于全场对话记录逐项打分（逻辑严密度、论据说服力、临场反应），出具带"本所判定"印章的胜负鉴定书，并附翻盘建议与骚话点评，截图发群即可实锤"专业干架"。

    image
    image2532×1168 202 KB

二、Demo 创作思路

灵感来源：
项目灵感来自一个再日常不过的场景——网上冲浪时，总能看到网友为鸡毛蒜皮的小事吵得不可开交，却谁也说服不了谁。我们就想：既然 AI 什么都能聊，能不能让 AI 来当"专业陪练"和"铁面裁判"？把日常的抬杠，升级成有规则、有裁判、有仪式感的辩论竞技。

想解决的问题：

  • 痛点 1：想练辩论/表达，但找不到水平相当、又愿意陪练的对手。AI 正好可以 24 小时随时上场。
  • 痛点 2：现有 AI 聊天工具大多是一问一答，缺乏"对战感"和"竞技张力"，用户难以沉浸。
  • 痛点 3：很多人想接入自己的大模型（GPT、Claude、DeepSeek 等），但配置门槛高，缺少一个开箱即用的对战外壳。

为什么做这个方向：
我们观察到 LLM 在"多 Agent 协作"和"角色扮演"两个方向上都已成熟，但市面上把两者结合做成"可玩产品"的并不多。辩论是一个天然的"多 Agent 协作 + 评判"场景：正反方多名辩手 + 一个裁判，恰好可以让多个 AI 角色同台竞技。同时，"干架"这个略带反差幽默的概念，天然具备社交传播属性——没人会拒绝一张写着"本所判定：反方胜"的鉴定报告发到群里。

品牌调性上，我们刻意把"吵架"包装成"学术研究"——Slogan「专业干架，理论支持」、印章式 logo、煞有介事的"鉴定报告"文书，这种反差幽默是产品的灵魂，也是它能在生活娱乐赛道脱颖而出的记忆点。

三、Demo 体验地址

  • 在线体验链接（外网访问）： 干架研究所

    线下活动时间有限，Demo只做大致演示

四、TRAE 实践过程

整个 Demo 从 0 到 1，完全使用 TRAE 完成。开发遵循「Spec → 原型 → 开发」的工程化流程，TRAE 的 Spec 模式帮我把模糊的产品想法拆解成了可执行的需求文档和任务清单。

关键开发流程

步骤 1：用 TRAE Spec 模式生成需求文档
在 TRAE 中描述产品想法后，TRAE 自动生成了完整的 spec.md（品牌定位、需求场景、Acceptance Criteria）、checklist.md（验收清单）和 tasks.md（任务依赖图），把"做个 AI 辩论游戏"这个模糊想法，拆成了 6 个 Task、20+ 个 SubTask 的可执行计划。

image
image2563×1375 337 KB

image
image2547×1349 345 KB

image
image2537×1358 353 KB

3587068320290864:49ab6ec57055d4261edf9cde3ee8e1c5_6a5338af4541ba5ce9454f9b.6a5338af4541ba5ce9454f9e.6a5338af4541ba5ce9454f9c:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 14:48:15)

步骤 2：基于 Spec 生成 HTML 原型
确认 Spec 后，让 TRAE 先行交付静态 HTML 原型。TRAE 一次性生成了包含首页、辩论现场、鉴定报告三大界面的完整原型，包含 3D 透视礼堂、打字机动画、印章式胜负判定等所有视觉细节，可直接用浏览器打开预览。

image
image2555×1348 259 KB

1
11920×909 185 KB

3587068320290864:49ab6ec57055d4261edf9cde3ee8e1c5_6a5338af4541ba5ce9454f9b.6a533aac4541ba5ce9454fcf.6a533aac4541ba5ce9454fce:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 14:56:44)

步骤 3：迭代视觉与交互细节
基于原型反馈，让 TRAE 调整了多处细节：品牌色系（干架红 + 印章金的反差搭配）、AI 辩手发言时的脉冲呼吸动画、麦克风语音输入的波形反馈、鉴定报告的双栏评分对比等。

image
image2560×1360 312 KB

3587068320290864:8da3f5b23330ece9a1035d7a8a171628_6a5338af4541ba5ce9454f9b.6a533df94541ba5ce9454ffb.6a533df94541ba5ce9454ff9:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 15:10:49)

image
image1920×1029 205 KB

五、踩坑与心得

踩坑 1：3D 透视礼堂的 CSS 适配
为了让辩论现场有"坐在第 3 排看舞台"的沉浸感，用了 perspective + rotateY 给左右两方辩手做透视倾斜。但移动端窄屏下两队会被挤压重叠，最终通过媒体查询动态降低旋转角度（26° → 18°）解决。

踩坑 2：打字机效果的性能
最初用 setTimeout 递归实现逐字输出，长文本时掉帧明显。改成 setInterval + 索引递增后流畅许多，后续正式版计划改用 requestAnimationFrame 进一步优化。

心得：先 Spec 后编码，是真香
一开始也想直接让 AI 写代码，但发现需求一变就要推倒重来。用 TRAE 的 Spec 模式先把品牌、功能、验收标准固化下来，再让 AI 按 Task 推进，返工率大幅下降，产品方向也不容易跑偏。这次 Demo 的视觉风格之所以统一，很大程度上归功于 Spec 里提前写死了品牌调性（“反差幽默的学术风”）和配色变量。

心得：反差幽默是最好的传播货币
"干架研究所"这个名字自带话题性，配上"专业干架，理论支持"的 Slogan 和印章式鉴定报告，用户天然会有截图发群的冲动。做生活娱乐类产品，调性记忆点比功能堆砌更重要。

这次分享的就是一个从"想抬杠"到"做出可玩原型"的真实过程。原型阶段已跑通完整视觉与交互演示，正式 Next.js 版本正在按 Task 推进中，欢迎评论区交流抬杠心得 :microphone: