大家双节快乐！
这个假期我没有只做一个小工具，而是用 TraeCode 做了一整套作品——为一场 60 分钟的校园 Vibe Coding Workshop 准备的全部材料：
- 
1 份 10 页 HTML-PPT：里面嵌了 7 条「复制即用」的完整提示词；
- 
7 个能直接玩的双节小应用：全部单 HTML 文件、零依赖、零配置，手机浏览器打开就用；
- 
1 个像素风落地页：把 PPT 和 7 个作品按演示顺序串成一场完整演出。
一、作品一览（8 件）
| # | 作品 | 解决的假期问题 | 技术看点 |
|---|---|---|---|
| 01 | Workshop HTML-PPT | 零基础同学 60 分钟内从装工具到带作品回家 | 10 页键盘翻页，内嵌 7 条完整提示词 |
| 02 | 盛世华诞·烟花许愿 | 国庆氛围拉满 + 送出专属祝福 | Canvas 粒子烟花、Web Audio 音效、输入名字放金色专属烟花 |
| 03 | AA 出游记账本 | 多人出游的糊涂账 | 贪心算法给出转账次数最少的结算方案，一键复制结算单 |
| 04 | 厦门美食私藏指南 | 朋友来厦门不知道吃啥 | 本地人视角 20 家老店，按早/午/晚/宵夜/甜品 5 类筛选 |
| 05 | 2048 手机即玩版 | 高铁、排队打发时间 | 触屏滑动 + 撤销一步 + 最高分本地保存 |
| 06 | 双节电子贺卡 | 给亲友送双节祝福 | 中秋/国庆双主题、3 套封面、随机祝福语、全屏放映截图即发 |
| 07 | 中秋博饼 | 闽南中秋团圆游戏 | 六骰入碗自动判状元对堂、多人轮流记分、规则表+合成音效 |
| 08 | 双节假期打卡清单 | 8 天长假怕虚度 | 出行/团圆/假期/节日四类清单、完成度进度条、全勾触发满屏烟花 |
01 是演讲，02–08 是互动作品，落地页把它们按 1 → 8 的顺序串了起来。
二、灵感来源：一个真实的分享场景
10 月 4 日我要在厦门大学翔安校区做一场 TRAE on Campus · Vibe Coding Workshop，听众是零编程基础的同学。我的目标是：现场每个人「复制一段提示词 → 跑出一个能玩的作品 → 还能直接发帖参加社区活动」。
所以选题直接对齐本次活动的四个方向，并做了厦门本地化：
-
出行旅游 → AA 出游记账本、2048（高铁排队场景）
-
团圆聚会 → 双节电子贺卡、中秋博饼（闽南中秋保留节目，厦大同学的 DNA）
-
假期效率 → 双节假期打卡清单
-
节日氛围 → 盛世华诞·烟花许愿
-
额外加了一张厦门美食私藏指南：乌糖沙茶面、1980 烧肉粽、黄则和花生汤、八婆婆烧仙草……把自己吃了十几年的老店做成一张城市名片
没有认领评论区需求，属于按自己真实场景的自主创作～
三、创作过程：三步全程在 TraeCode 里完成
Step 1｜先用 TraeCode 做 HTML-PPT，把提示词当课件内容
没有用传统 PPT 软件，直接让 TraeCode 生成单文件 HTML 幻灯片，用上了插件市场的HTML-PPT插件和Goal模式，使用的是假期折扣的Seed-2.1-Pro模型（省积分又高效）
使用此插件帮我： 制作一个主题为“Vibe Coding Workshop 4 中秋国庆”的活动宣讲HTML PPT，主要内容包含如下： 1. 参考复刻图一制作封面 2. 引导大家用电脑下载TraeCode并领取学生认证福利： https://www.trae.cn/ ，参考图片二 3. 给大家完整演示一个用TraeCode制作一个符合国庆节日主题的一个小作品（单HTML的形式就行，你自己帮我想一个），或者从 https://mp.weixin.qq.com/s/BVdnK6Qu4V72zNZZQXkm1w 中任选几个。 4. 从 https://mp.weixin.qq.com/s/BVdnK6Qu4V72zNZZQXkm1w 中或者 【中秋国庆VibeCoding】你出题，我来做，用 TraeCode 做个节日小应用 中挑选4到8个适合新手小白上手TraeCode氛围编程的中秋国庆双节同庆的小作品（单HTML形式为主），并提供完整的提示词。 5. 活动引流1，引导大家参加 https://mp.weixin.qq.com/s/BVdnK6Qu4V72zNZZQXkm1w 尾部的十一活动，活动的完整文案和要求要完全体现； 6. 活动引流2，引导大家进一步迭代作品，参加线上论坛的 【中秋国庆VibeCoding】你出题，我来做，用 TraeCode 做个节日小应用 活动，并明确给出线上论坛活动的奖品。 7. 祝大家双节假期快乐的结尾页面
Step 2｜逐一用 TraeCode 把 7 个案例跑出来
每个作品都是同一个套路：一段结构化提示词发给 TraeCode → 生成单 HTML 文件 → 浏览器预览 → 提几轮迭代意见 → 定稿，单个作品大约 2–3 轮对话。
以现场演示的《盛世华诞·烟花许愿》为例，发给 TraeCode 的提示词原文是：
请用原生 HTML + CSS + JavaScript（Canvas）做一个国庆主题互动烟花网页《盛世华诞·烟花许愿》，单 HTML 文件、资源全部内联。场景：深蓝夜空，右上方一轮带光晕的满月与闪烁星星，下方是天安门与城市天际线剪影；页面中部显示「喜迎国庆 77 周年」和副标题「月满中秋 · 家国同庆」。交互：1）点击或触摸夜空任意位置发射烟花，爆炸粒子带重力、拖尾和渐隐，配 Web Audio 合成的轻微燃放声；2）每 8 秒自动绽放一轮，并随机显示祝福词（国庆快乐、花好月圆、山河锦绣、国泰民安）；3）输入名字点「许下心愿」，一束金色专属烟花打出「xxx 祝祖国生日快乐」；4）手机横竖屏都自适应。配色用中国红 + 鎏金 + 月白。
7 条提示词我总结出一个通用公式：
技术约束（原生三件套 / 单 HTML / 资源内联 / 无后端无注册）
＋ 场景与氛围（什么人、在什么情境下用）
＋ 功能清单（编号列出，不遗漏）
＋ 交互细节（触控区 ≥44px、几步完成、声音与动画反馈）
＋ 数据与适配（localStorage、手机竖屏、底部安全区、横竖屏）
＋ 视觉风格（配色、字体、质感）
约束写得越具体，一次成型率越高。剩下的多是微调，比如「自动绽放间隔从 5 秒改成 8 秒」「横屏时输入框不要挡住副标题」这种一两轮就收工。
成品效果：点击夜空任意位置烟花升空绽放，输入名字「小明」点许愿，一束金色烟花打出「小明 祝祖国生日快乐」——这也是我现场要演示的高光时刻。
Step 3｜用 TraeCode 做落地页，把 PPT 和作品串成「一场演出」
作品散在七个文件夹里不利于现场演示，于是最后让 TraeCode 做了 index.html 导航页：
-
像素风首屏：纯 SVG 手绘厦大翔安校区夜景——嘉庚红燕尾脊、鎏金屋檐、湖面倒影、满月和红灯笼，JS 定时在空中放像素烟花，离线也有节日氛围；
-
8 段式演示流：「1 开场 PPT → 2 烟花 → 3–5 出行三件套 → 6–8 双节三件套」流程条，点击直达对应区块；
-
窗口式内嵌：开场 PPT 以 16:9 iframe 首屏直接加载，其余作品懒加载；每个窗口带「全屏」和「新标签页打开」；
-
会场离线可用：像素字体（Cubic 11 中文 + Press Start 2P 英文）下载到本地
assets/fonts/，断网演示也不掉字体； -
另外还有 scrollspy 顶部导航、阅读进度条、回到顶部，并适配了
prefers-reduced-motion。
验收：Goal模式下TraeCode会使用浏览器控制自行测试，人工可以在TraeCode测试完之后才验收即可~
四、其余作品速览
- AA 出游记账本：记一笔只需选付款人、填金额、勾选分摊人；自动算人均，用「最大应付 ↔ 最大应收」贪心匹配给出转账笔数最少的结算方案，还能一键复制结算单发群里；数据存 localStorage。
- 厦门美食私藏指南：20 家店按早餐/午餐/晚餐/宵夜/甜品饮料分类，每家带一句话点评、必点菜和价格区间，顶部分类标签横向筛选，暖黄+米白暖色调。
- 2048：4×4 棋盘触屏滑动 + 键盘双操作，移动合并动画、当前分/最高分、达成 2048 可继续、死局判定、重新开始和撤销上一步。
- 双节电子贺卡：选主题（中秋月圆：满月桂花孔明灯 / 国庆盛典：烟花红旗金粉）→ 3 选 1 封面 → 填称呼、正文、署名 → 全屏放映；「换一句」随机祝福语，文字可编辑，截图就能发亲友。
- 中秋博饼：红木碗六颗骰子，掷骰有滚动动画和合成骰子声/欢呼声；按闽南规则自动判功名（状元插金花、六勃红、对堂、三红、四进、二举、一秀）并高亮，支持多人轮流记分，内置完整功名规则与奖品表。
- 双节假期打卡清单：出行（证件车票行李）、团圆（聚餐全家福月饼）、假期（早起运动读书电影）、节日（赏月升旗烟花）四类预置项，可增删；顶部假期完成度百分比 + 今日完成数，全部打勾触发满屏烟花。
五、几点心得
-
给好上下文能发挥意向不到的效果：我很满意它给出的几个案例和HTMLPPT，这些都是给Seed-2.1-Pro合适的截图和活动链接。
-
单 HTML 文件是 Vibe Coding 的最佳载体：零构建、零配置，双击即玩、随聊随发，传播成本几乎为零。
-
Seed-2.1-Pro高效便宜：国庆期间一折只要0.08倍率的积分消耗，多模态能力和复杂工作处理能力在线！
