【中秋国庆 VibeCoding】挡箭锦囊 —— 工资/对象/婚房/孩子；30 张牌，你能秒杀我？！

SuS · 2026 年9 月 29 日 02:22

一、做了什么

《挡箭锦囊》—— 一页纯离线的网页。双击就能开，断网能用，不用注册、不联网，数据只存在你自己的手机上。整个作品就是一个 html 文件，可以直接存进手机主屏。

它把国庆饭桌上最怕的五类追问——工资 / 对象 / 婚房 / 孩子 / 混得怎么样——做成 30 张可以抽的牌：

正面是一句「礼貌但不撒谎」的挡箭话术；
翻过来是「真心话」版 —— 嘴上说的和心里想的，都给你；
抽到想留着用的，点「收进锦囊」，明年中秋打开还在；
另外附一张「我今年过得还行」小卡片：填 6 个空，一键生成一张红头文件图，导出 PNG 直接发家族群。长辈不一定会扫码，但一定会点开群里的那张图 —— 这样每家就不用再重复解释一遍了。

三层材质是这次最花心思的地方：红金 = 场面话，素纸 = 真心话，白文件 = 报平安。 三种材质各管一件事，翻面的瞬间，「嘴上」和「心里」的落差是看得见的。

二、灵感来自哪条评论

来自活动帖第 152 楼 @Doro 的许愿：

我想要一个【亲戚问答通关卡】，用来解决【国庆回家被连珠炮追问：工资多少、有对象没、啥时候买房、什么时候要孩子，答也不是不答也不是，随便一句又怕长辈不高兴】的问题。最好能有【按"工资/对象/婚房/孩子/混得怎么样"分类，每题给一句礼貌但不撒谎的挡箭话术，再配一个"真心想答"版本；顺便把今年的情况一次性填成一张『我今年过得还行』小卡片，二维码扫一下长辈就能看到，省得每家重复解释一遍；还能记下今年谁问了什么、我怎么答的，明年中秋不用重新想】。

原评论：【中秋国庆VibeCoding】你出题，我来做，用 TraeCode 做个节日小应用 - #152，来自 Doro

还原度对照

五类追问 × 挡箭话术 / 真心想答版 —— 完全命中，30 张牌
「我今年过得还行」小卡片 —— 保留，形态由「二维码页」改为「生成一张图直接发家族群」。长辈不一定会扫码，但一定会点开群里的那张图。
记下今年谁问了什么、明年复用 —— 没做。想要的话在这条帖子下面说一声，我加进去。

三、解决了什么假期问题

答也不是、不答也不是 → 30 张牌给的不是「怼回去」，是「礼貌地不撒谎」。抽到哪张用哪张。
每家都要重复解释一遍 → 一张红头文件图发进家族群，一次说清。
明年还得重想一遍 → 抽到的牌收进锦囊，存在本机，明年中秋直接翻。

四、运行效果

抽一张 → 牌飞出落定 → 翻面

01-封面-抽牌翻面

点「收进锦囊」，牌飞进列表

02-收进锦囊-牌飞进列表

「嘴上 / 心里」的落差 —— 左边素纸是真心话，右边红金是挡箭话术：

「我今年过得还行」导出的红头文件（1080×1440）：

窄屏（手机）下的版式：

在线体验：https://dangjian-jinnang.pages.dev/ —— 点开就能玩（Cloudflare 域名可能需代理；打不开就直接下载附件 挡箭锦囊.html，双击打开，断网也能用）。

五、TraeCode 创作过程

先说一句：/Superpowers真的很好用！！！！！！

↑我是怎么几乎从零开始项目的？

↑我想到了个好方向！怎么应用的？

↑开始工作（跑了两个小时…）

↑ 终端里跑两个验收脚本：8/8 通过 与 261/261 通过

选题阶段先做查重，不先写代码。 把活动标签下的 62 件作品、板块里 89 条帖子全量拉下来逐条比对，确认「亲戚追问 → 怎么回话」这一块是 0 命中 —— 三件涉及亲戚的作品，全都停在「该叫他什么」这一步，没有人往下走一步，去问「他问我什么、我怎么答」。
先定设计文档，再动手。 定了三层材质、三列版式，以及一条硬规矩：CSS 里一个 px 都不许出现。缩放基准全部由视口比例派生，宽屏 / 堆叠 / 矮横屏三档各自成套，判定交给 JS —— 样式表里一个字面像素都不留。所以从超宽屏缩到手机竖屏，是同一套比例在走，缩到哪一档都不散。
预览即导出源。 红头文件用一块固定 1080×1440 的 canvas 同时充当预览和导出源，只有一个渲染器 —— 结构上就不可能出现「预览和导出的图不一样」这种事。
写了两个验收脚本（开发期工具，不随作品发布）：
- verify.mjs —— 静态验收 8 项：CSS 零 px、零外链、30 张牌齐全、文案完整性、单文件体积……
- probe-layout.mjs —— 用无头浏览器实测版面 261 项 / 12 个视口：从手机竖屏、矮横屏到平板、笔电、宽屏、超宽屏，都不溢出，卡面文字不越界，画布恒为 3:4……
修 bug 也留证据。 录 GIF 的时候发现「收进锦囊」的飞牌动画压根没播 —— 用 DevTools 协议的探针直接问页面，拿到连续十次采样恒为 opacity=0.2 left=598 w=43（一次没变），定位到是 FLIP 写法少了一次强制样式刷新；补一行 void g.offsetWidth; 之后，变成 left 126→598、width 352→43、opacity 0.99→0.21 的连续变化。这条飞行才真正看得见。