年终总结总被说挺全面，我用AI把它做成一屏一屏能滑的年度报告网页

年底那阵子，组里发通知要交年终述职，我心里咯噔一下。

打开公司那个传了不知道多少手的PPT模板，标题写着「2024年度个人工作总结」，底下四个小标题：工作回顾、亮点成果、不足反思、明年计划。我对着它坐了小二十分钟，一个字没敲。

不是没东西写。这一年干的事塞了满脑子，项目、客户、半夜改方案，可一旦往那四个框里塞，立马变成一锅粥，自己读着都犯困。

述职会那天更绝。

前面一个同事PPT做得规规矩矩，念到第三页，我瞄了眼老板，人已经低头回微信了。

轮到我，心想完了这不比他强到哪去，念完全场安静两秒，老板来了句「嗯，挺全面的」，直接翻篇（就这？就三个字？）！

挺全面的（这四个字我现在想起来还是想找个地缝钻进去）。

那天晚上我刷手机刷到一堆人在晒网易云年底那个听歌报告，一屏一屏往下滑，「这一年你听了28560分钟，超过了98%的用户」，我边刷边截图，一口气刷到十二点。

我当场就有点不服气：一个听歌软件都能把「你今年听了多少歌」做得让人想转发，你敢信，我一年真刀真枪干的活，愣是就配一句「挺全面」打发。

我寻思，这事能不能自己也整个活，不为别的，就图一口气。

一开始想过找做设计的朋友帮我搓一个，私信打到一半又删了，为个年终总结欠人情，不值当，太丢面儿。

后来发现现在的AI编程工具能直接「你说人话它写代码」，不用我懂什么HTML，这活儿我扔给了Codex。

建了个专门的文件夹，先拿它试了句最没营养的话，「在当前文件夹里建一个hello.html，里面只放一行超大的字生产线已就绪，背景深色，文字居中亮色」，回车没两分钟，双击打开，一整屏黑底中间那行字亮闪闪的，给我看乐了。

数据我提前理了一下：三个能拿得出手的大数字，全年交付47个项目、服务1200个客户、带教5个新人；四个季度各挑一件事；年度关键词想了半天定成「扛事」；外加一个彩蛋数据，那年我微信回复「收到」回了892次。

数据凑齐，我把要求一股脑撂给它：单页HTML的「我的年度报告」，手机上要能一屏一屏往下滑，深蓝到深紫的科技感渐变；第一屏封面居中大标题；往下三屏各放一个超大数字KPI，下面配一行小字；再一屏成长时间线，四个节点；再一屏正中一个巨大的年度关键词；最后一屏留个彩蛋句子，加一句「2025，继续」。全部写在一个report.html里，不要外部依赖，我能直接双击打开。

发过去等它写。写完那份report.html，我双击打开的一瞬间整个人愣住了，这也太像回事了吧，笑死！

数字还嫌小，我又说那个47再放大一倍，几乎占满半屏；背景加一点缓慢浮动的光点，科技感别整花了；数字出现的时候从0滚上去，带点开奖的感觉。

它是真听话，一版一版改，我刷新一次爽一次，跟个甲方似的在那儿指点江山。

中途也不是没翻车。有一回我存完文件双击打开是一片白屏，啥都没有，我截图发过去说了句「我把代码存成html打开是白屏，我没改过任何代码，检查一下哪里出了问题，直接给我修好后的完整版本」，它嘀咕两句又重写一版，第二次才正常。

最后一屏我又多嘴加了句：黑底，中间一句话慢慢淡入「别人眼里我是流水账，我自己知道我扛了多少」，下面接「2025，继续」。就这一屏，后来成了转发最多的地方，情绪这东西是真管用。

手机上验的时候又发现字太小、滑动不跟手，找它说字号整体放大三成，滑动改成一滑就整屏吸附，顶部底部有白边帮我处理下安全区域，这一圈折腾完，从头滑到尾终于顺了。

述职会那天我先甩了张长图暖场，会一散把在线链接扔进群，当场就有人回「这不比PPT带劲多了」！老板扫了一眼，说了句「这个发我一份」（我当场差点没绷住）。

我站在那儿，脸上绷着没事人的表情，脚底下差点没蹦起来（内心已经开始蹦迪了）！

组里三个同事第二天私聊我：「这个你怎么做的，能不能也给我整一个」！一开始我还挺得意挨个帮，做到第三个我就有点崩溃了（每次都得重新描述一遍，我人都要说秃噜皮了）。

偷懒的法子是复制一份改名字，可弄到第三份我自己都看晕了，索性让它把姓名、数字这些会变的东西都挪到最上头，剩下那一坨代码我压根没细看，反正跑得起来就行。

顺手又手痒让它换了几个配色和排版，纯粹想看看还能鼓捣出什么花样，谁看着喜欢哪个我就发哪个，也没细想过谁该配哪套。

组里那八个人的数据我一股脑丢给它，让它比着葫芦画瓢挨个生成，稀里哗啦出来一堆文件堆在文件夹里，我随手点开瞄了几眼没出大乱子就散出去了，说白了就是图省事。

彩蛋那一屏我加了个「以为结束了」的机关：先只显示两个字「完」，隔一下等你再往下滑一下，才冒出一句「骗你的，还有最后一句，辛苦了」，配点轻微撒花动效。组里有人截图发出来说被吓一跳，配文一水儿的「好家伙」（还有人问我是不是提前算好她会往下滑）！

又让它加了个滑到最后随机贴标签的功能，劳模、人形deadline终结者、会议室常驻嘉宾这种，每次刷新可能不一样。好几个同事为了抽到搞笑的标签反复刷新，把自己都整乐了，那几天群里跟过年似的（我手机振个不停）！

那个标签抽奖后来有个小毛病，有人反馈老抽到同一个，我看了半天没搞明白哪出的问题，想着回头再修，到现在也没动。

又上了两屏真图表，一条折线画全年月度产出，最高那个月自动高亮标一句「年中冲刺，单月翻倍」；一个环形饼图画精力都花哪了，中间一个大字「忙」，滑进来时扇区依次展开。领导看到那条曲线自己画出来的动画，愣了一下问我这是拿什么做的，那表情绝了！

PDF那版我本来想认真弄一份给老板归档，导出来一翻，有一屏被从中间齐齐切断，数字断成两截，想着回头修，那份断掉的PDF我到现在都没删，还躺在文件夹里。

别的部门后来有人问我要不要给他们也整一份模板，我随口应了句「有，回头发你」，到现在没发。

公司通用的那个空白模板倒是也顺手让它生成了一份，就想看看它能不能把「放数据的地方」和「样式」分得干干净净，生成完扔文件夹里就再没打开过。

那阵子我家猫倒是把键盘踩过两回（那小子跟成心的似的），报告没坏，倒是把我一个没保存的浏览器标签页给关了，气得我又开了一遍，哈哈。

折腾一圈下来，那份最早的hello.html我一直没删，文件夹里一堆report开头的东西，就它标题写得最老实。

编者按

Leo 被一句『挺全面的』噎到失眠，回头把年终总结做成了能一屏屏滑的网页，但这篇真正的干货是他做到第三份才想出来的偷懒法：把会变的数据和不变的样式彻底劈开。数据得你先备齐真的，它一个数都别替你编；备齐之后，样式那坨代码你一辈子不用看。

数据自己先备齐，再让它搭第一版

「帮我做一个单页 HTML 的年度报告，手机上能一屏一屏往下滑。第一屏封面居中大标题；往下三屏各放一个超大数字，下面配一行小字；再一屏成长时间线四个节点；再一屏正中一个巨大的年度关键词；最后一屏留个彩蛋句子。全写在一个 report.html 里，不要外部依赖，我能直接双击打开。」

数据是你的活：Leo 提前把料理好了才动手，三个拿得出手的大数字、四个季度各挑一件事、一个年度关键词、一句彩蛋，数字全是真的、他自己填的，不是让它往框里编。这类报告最忌它替你把空格填满，看着漂亮全是假的。〈把你的真实数字〉备齐再喂，它只管排版和可视化。

把会变的东西全抽到文件顶上一个 data 块

「把姓名、大数字、四个季度节点、年度关键词、彩蛋句子这些全部抽到文件顶部一个 data 配置里，加好中文注释，页面其余部分不变，自动读取这个 data 渲染，换人的时候我只改最上面那几行。」

这步回本最快：Leo 帮同事出到第三份就是靠这招脱身，数据和样式一分家，换人只改顶上那几行，底下那坨代码碰都不用碰。组里八个人的数据一股脑丢进去，比着葫芦画瓢一批就出来。想批量、想给别人套用，全靠这一下把数据和长相劈开。

最该自己动手的是情绪那一屏：最后一屏黑底那句『别人眼里我是流水账，我自己知道我扛了多少』，后来成了转发最多的地方，数字堆得再满，戳心的还是这一句。也提一句别学他留尾巴，标签抽奖的 bug、导出来从中间切断的 PDF，他都说『回头再修』然后再没动过，好玩的整完，答应同事的模板、要归档的那份，趁手别拖。