大家好我是熊猫钓鱼欢迎大家和我一起探讨技术。希望您能点赞关注谢谢摘要国庆前夕我用华为云码道把一个中秋主题的单文件互动页改造成了国庆献礼网页零依赖、零构建1056 行 HTML 承载红金主题场景、八大交互主题升国旗、切蛋糕、限时知识问答、成就展、红色旅游时间线等、纯前端祝福贺卡和 Web Audio 现场合成的音乐音效。生成环节 23 分 47 秒完成但验收环节才是重头戏——本文从代码里实测挖出三个 AI 留下的真 bugdata-key复制粘贴撞名导致国歌入口弹出蛋糕面板、国旗默认定位被overflow:hidden舞台裁掉、中秋模板遗留的无样式元素。文章既是单文件 HTML 的实现拆解clip-path 五角星、CSS 变量孔明灯、连击倍率计分、URL 参数贺卡也是一次AI 负责 95% 的代码人负责找那 5% 的 bug的结对开发复盘。目录为什么是改不是写从中秋页到国庆页让 AI 吃透现有代码做彻底变体附码道真实生成数据23m47s / 34.5 万 token 输入 / 1056 行产物这个页面长什么样红金主题视觉、八大主题码头、集章图鉴与全屏烟花机制几个我认为值得说的实现细节3.1 五星红旗不用图片clip-path十坐标剪出五角星3.2 孔明灯SVG CSS 变量--dx每盏灯轨迹不同3.3 问答计分时间奖励 × 连击倍率封顶两倍3.4 零后端贺卡URLSearchParams拼链接传祝福3.5 Web Audio 现场合成三角波拨弦与对错音效AI 写完之后我的活才刚开始三个实测 bug 复盘data-keyyuebing撞名、被裁掉的国旗、模板尸骸结论——AI 不会替你点开页面挨个戳写在最后集齐八枚图鉴、放一场 22 个 CSS 粒子的烟花给祖国道一句生日快乐九月最后一个工作日距离国庆还有一天。我决定给祖国做一份程序员式的生日礼物一个能玩的国庆主题网页。整个开发交给华为云码道我负责提需求、挑毛病、修尾巴。这篇文章把整个过程摊开讲——包括 AI 写得漂亮的地方和它挖给自己跳的坑。华为云码道只需要对话就能开发而且直接可以对接部署到你的atomgit服务器上托管代码我觉得超神了一、引言我想开发一个页面为祖国庆生无奈专业技术不够精通所以很难做出来。但是这种活儿最适合丢给码道。它的优势从来不是从零写出一个惊艳的东西而是快速理解意图并生成代码然后按你的意图做一次彻底的变体。事实也确实如此。整个生成过程耗时 23 分 47 秒输入约 34.5 万 token输出 2.4 万 token。产物是一个 62KB、1056 行的单文件页面零依赖、零构建、双击就能跑。开发对话过程如下思考后它生成结果如下全部完成如下二、这个页面长什么样打开页面是一整片从暗红烧到正红的天空顶部一轮金色的太阳在缓慢呼吸三盏红灯笼晃晃悠悠星星在闪金色的花瓣往下落。底部是一排码头八个入口国旗、国庆蛋糕、知识问答、成就展、红色旅游、国歌、祝福墙、烟花秀。每个入口点开是一块独立的面板国旗面板里能亲手把旗升上旗杆蛋糕面板一刀切开露出75的夹心问答面板是限时十五秒的十二道国庆知识题红色旅游是一条从南湖红船铺到天安门的时间线。八个面板每逛过一个对应图标会亮起一枚小红点左上角的图鉴计数随之 1。集满八个全屏烟花。这种集章设计是从中秋版继承来的但它恰好和国庆的气质合拍——像是把逛展馆变成了游园会。三、几个我认为值得说的实现细节单文件 HTML 最怕写成一坨。这份代码的整体组织其实相当清爽一个PANELS对象管内容渲染一个bind对管事件绑定key 对 key。点码头时openPanel(key)把模板字符串灌进弹层再调对应的绑定函数。加一个新主题就是往两个对象里各加一项别的什么都不用动。五星红旗不用图片。旗面是三个div条五角星靠clip-path一刀剪出来.flag-star{width:24px;height:24px;background:#ffd700;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}十个坐标点一颗五角星。这是 CSS 里我最喜欢的那种穷聪明——不加载任何资源把形状问题变成几何题。孔明灯是点击放飞的。页面上任何地方点一下码头和弹层除外就有一盏写着国庆“爱国”“富强”中国梦的灯从点击处升起来。每盏灯是一个内联 SVG灯身上的字直接用楷体text画上去横向飘移量塞进 CSS 变量--dx动画关键帧里引用它于是每一盏灯的飞行轨迹都不一样。问答的计分有个小设计。得分不是答对就给固定分而是constbonusMath.round(S.time)*8,mult1Math.min(S.combo,9)*0.1,gainMath.round((100bonus)*mult);答得越快剩余时间的奖励越多连击越多倍率越高封顶两倍。限时 fifteen 秒的紧迫感加上连击倍率的诱惑十二道题答下来是有点上头的。答完按分数给你封爱国学员到爱国达人的头衔还能生成一条带战绩的分享链接。贺卡功能没有后端。写一句祝福、填上收卡人和署名页面把它拼进 URL 参数生成一条链接——对方打开横幅里弹出你收到一张国庆祝福。所有状态都在URLSearchParams里来回一行服务端代码都不需要。音乐是现场合成的。没有 mp3 文件点国歌按钮Web Audio 的三角波振荡器按一段音阶随机拨弦低音铺底指数衰减包络让每个音都像拨出来的而不是按出来的。答题的对错音效也是同一个路子三个上行的叮和一声短促的锯齿波哔。简陋吗简陋。但它让整个页面保持一个文件走天下我认为值。四、AI 写完之后我的活才刚开始这是我更想写的部分。码道交稿很快23 分钟。但验收的时候我在 1056 行里挑出了这么几处其一复制粘贴留下的暗伤。底部码头八个入口国歌那一项的data-key竟然也是yuebing——和国庆蛋糕撞了。点国歌弹出来的是蛋糕面板真正写好的国歌面板guoge躺在代码里永远没有人能打开它。这是复制条目时忘了改 keyAI 自己没发现我点了两下就摸到了。其二一个被裁掉的国旗。国旗默认定位在bottom: 170px旗面高 80px而演示舞台只有 210px 高、还overflow: hidden——于是旗子的上半截永远悬在舞台外面看起来像只升了一半还缺了一大块。数值在自己脑子里对一遍就能发现但 AI 没有替自己对。其三模板的尸骸。首页有一个今日一题的小盒子从旧版继承来的类名一个都没配上样式光秃秃地杵在标题下面knife切蛋糕的动画类、烟花粒子的.spark样式也有几处只写了 HTML 没写 CSS。不致命但一眼就能看出这里以前住过别人。这些坑有一个共同点都不是能力问题是验收问题。生成式 AI 对已经写出来的代码有很强的自信它不会像人一样点开每个入口挨个戳一遍。所以我的结论很简单AI 负责把 95% 的代码写完剩下 5% 的 bug 藏在 95% 的自信里得由那个真正点开页面的人去找。修的过程倒是不难——改一个data-key、调一个bottom值、给遗留元素补几行样式或者干脆删掉——前后也就十来分钟。真正花时间的是我愿意花时间去找。五、写在最后页面做完的那个晚上我把它打开点了一下夜空。一盏写着国庆的灯慢悠悠地升上去和屏幕顶上那轮金色的太阳擦肩而过。我集齐了八枚图鉴看了一场由 22 个 CSS 粒子组成的烟花。说实话比起真实的烟花差得远但它是我一行一行看着长出来的。七十五年国家的大事记是两弹一星、是四万五千公里高铁、是神舟和天宫。而我能做的就是在这些宏大的词旁边放上一个普通人亲手搭的小页面。生日快乐我的国。
