黑客松 48h 行动清单 — PICO + TRAE 快速出 Demo
目标:在 48 小时内,用 AI Agent(TRAE)+ PICO CLI,跑通并打磨出一个能演示的 PICO 空间应用 demo。 核心方针:把环境配置、装包、打包、部署这些脏活全交给 AI,人只负责选方向、描述需求、验收效果。 配套笔记:开发细节见
../game-dev/pico-spatial-trae.md;Unity 路径见../game-dev/unity.md+../game-dev/blender.md。
0. 赛前 30 分钟:定方向(最重要的决策)
选错 SDK 是最大的时间杀手。按下面对照,能选 WebSpatial 就别硬上 Unity。
| 你的 demo 类型 | 选哪条路径 | 理由 |
|---|---|---|
| 信息面板 / dashboard / 轻交互展示 | 🌐 WebSpatial | 步骤最少、报错最少、无需打包 APK,几句话就跑通 |
| 需要调 PICO OS 原生空间能力 / 多窗口 | 📱 Spatial SDK | 有 Kotlin 基础再考虑 |
| 真 3D 游戏 / 物理 / 角色动画 / 复杂 XR | 🎮 Unity SDK | 会 Unity 才选,配置最重 |
黑客松铁律:demo 是给人看的,不是给自己炫技的。 48h 内 WebSpatial 能做出的”空间天气面板 + 交互”往往比半成品的 Unity 3D 游戏更能拿分。除非你的创意核心就是 3D 玩法,否则优先 WebSpatial。
1. Phase 0 · 环境准备(目标:≤ 2 小时搞定)
这是唯一”人要动手”的阶段,越早跑通越好。建议赛前就装好。
- 装 Node.js(有 npm 即可)
- 装 PICO CLI:
npm install -g @picoxr/pico-cli,验证pico-cli --help - 装 TRAE(新手用 Trae IDE 图形版,官网下载)
- 跑
pico-cli setup→ 选 Trae CLI +pico-spatial-agentic-tools插件 + 项目目录 - 退出并重开 AI Agent(让 skill/MCP 加载)
-
pico-cli doctor全绿 - 让 AI 起模拟器验证:对 TRAE 说「帮我把 PICO 模拟器起来,挂上自动重连」
⚠️ 高频坑:①setup 前 TRAE 必须先装好;②别装成开源的
trae-agent;③trae.cn脚本 403 是地域拦截,换 docs.trae.ai 命令或切网络。详见../game-dev/pico-spatial-trae.md第 3 节。
风险预案:环境卡住超过 2 小时 → 立刻改走 WebSpatial(它的 SDK/Skill 全开源,AI 直接从 GitHub 拉,依赖最少),别在 Unity 环境上耗。
2. Phase 1 · 跑通最小 Demo(目标:第一天上午,≤ 3 小时)
先让一个”什么都行”的东西在模拟器里亮起来,建立信心和闭环,再谈创意。
WebSpatial 路径(推荐)
- 让 TRAE 装 Skill(粘贴那句
add a new skill from https://github.com/webspatial/...) - 「帮我创建一个新的 WebSpatial 项目」
- 「帮我启动 dev server,让 PICO 模拟器能访问」
- 模拟器浏览器打开
http://10.0.2.2:5173→ 点「以独立应用运行」 - ✅ 看到空间里的网页 = 闭环打通
Unity 路径(仅当创意是 3D 游戏)
- Unity Hub 建 3D (URP) 项目 → 关 Editor → 项目目录打开 TRAE
- 让 TRAE 接入 PICO Unity SDK(装包 + XR Plugin Management + 切 Android + 放个旋转立方体)
- Build And Run 到模拟器,看到立方体 = 闭环打通
里程碑判定:模拟器里能看到你的东西 = Phase 1 完成。这一步没通,后面全白搭,优先保这个。
3. Phase 2 · Vibe Coding 迭代核心玩法(第一天下午 → 第二天上午)
闭环打通后进入正循环:描述需求 → AI 改 → 模拟器看 → 再描述。
- 拆解你的创意为 3~5 个”一句话能描述”的小需求,排优先级
- 每个需求单独让 TRAE 做,做完立刻在模拟器验收,再进下一个
- 每完成一个可演示的状态,记录/截图存档(demo 视频素材)
示例迭代节奏(WebSpatial 天气面板 demo):
「把页面改成一个显示北京天气的悬浮面板」 → 看效果
「加一个按钮,点了切换暗色模式」 → 看效果
「加一个 3D 模型预览区,用 WebSpatial 的 model 标签」→ 看效果
时间盒纪律:每个需求给自己设上限(如 45 分钟)。AI 一个方向卡住两次以上,就换个说法或砍掉这个需求,别死磕。黑客松拼的是完成度,不是完美度。
优先级建议(借鉴 P0/P1/P2):
- P0(必做,构成最小可演示闭环):核心交互 1 个 + 能看的界面
- P1(有时间再加):第二个交互、视觉美化
- P2(锦上添花):音效、动画、复杂 3D
4. Phase 3 · 真机验证(第二天上午,留足缓冲)
模拟器能跑 ≠ 头显能跑。务必留时间在真机上验证一次,别等到最后。
- 头显开:设置 → 通用 → 开发者模式 → USB 调试
- WebSpatial:
npm run build部署到 Vercel/Netlify 拿公网 URL,或用电脑局域网 IP;头显浏览器打开 → 「以独立应用运行」 - Spatial/Unity:让 AI/Unity 把 APK 装到头显(
pico-cli device connect或adb)→ 启动 - 戴上头显实际体验一遍,记录问题
⚠️ 关键区别:模拟器访问宿主机用
10.0.2.2;真机必须用局域网 IP 或公网域名,10.0.2.2在真机无效。
5. Phase 4 · 收尾与提交(第二天下午,雷打不动留 4~6 小时)
黑客松扣分最惨的往往不是功能,是没做完提交物。
- Demo 视频:头显内录 / 投屏录制核心流程(通常是评分权重最高的展示物)
- 介绍 PPT / 一页说明:创意是什么、解决什么、用了哪些技术(PICO SDK + TRAE AI Agent 是亮点)
- 代码 / 项目:整理好,能跑;若要求导出 AI 对话记录,导出 TRAE 会话
- 一句话 pitch 练熟:评委只给你 1 分钟
- 按赛制提交(别卡 deadline,提前 1 小时交)
6. 48h 时间轴(倒排参考)
| 时段 | 任务 | 产出 |
|---|---|---|
| 赛前 | Phase 0 环境 | 模拟器能起来 |
| Day1 上午 | Phase 1 跑通最小 demo | 模拟器里有东西亮 |
| Day1 下午 | Phase 2 核心玩法 P0 | 核心交互可演示 |
| Day1 晚 | Phase 2 继续 + P1 | 第二个交互 / 美化 |
| Day2 上午 | Phase 3 真机验证 + 修问题 | 头显能跑 |
| Day2 下午早 | 收尾 P2 + 冻结功能 | 功能定版(不再加新功能) |
| Day2 下午晚 | Phase 4 视频/PPT/提交 | 提交完成 |
功能冻结线:Day2 下午设一个”不再加新功能”的硬时间点,之后只修 bug、做提交物。这是 hackathon 最容易违背也最致命的纪律。
7. 加分技巧(拿分的巧劲)
- 讲清”AI Agent 驱动开发”这件事本身就是亮点:你没手写多少配置,是用自然语言指挥 AI 完成的——这契合”AI 重塑开发”的叙事,评委爱听
- WebSpatial 的”一份代码两种形态”是天然演示钩子:同一网址在电脑是网页、在头显点一下变空间应用,现场演示很惊艳
- 截图/录屏友好的功能优先做:能被传播、被截图的东西 = 隐性加分
- 准备一个”失败也能讲”的故事:即使 demo 不完整,把”用 AI 48h 从零到空间应用”的过程讲好,也是内容
8. 应急降级预案(时间不够时按顺序砍)
- Unity 卡住 → 立刻转 WebSpatial(损失创意但保交付)
- 真机跑不起来 → 用模拟器录 demo 视频(多数评审看视频)
- 玩法做不完 → 砍到”一个核心交互 + 能看的界面”仍是完整闭环
- 提交物来不及 → 优先保 demo 视频 + 一句话 pitch,PPT 可极简
记住优先级:能提交 > 能演示 > 功能多 > 功能完美。 倒着来必翻车。
9. 关联笔记
- 开发全流程细节:
../game-dev/pico-spatial-trae.md - Unity 基础:
../game-dev/unity.md｜3D 资产:../game-dev/blender.md - AI Agent 原理:
../ai-agent-guide/agent.md｜MCP:../ai-agent-guide/mcp.md