夜雨聆风需要这个skill的伙伴，可以关注，本文下面留言：好文点赞+个人VX
昨天我做了个手绘风，能在线改字的HTML文档生成器，给伙伴们的一点实战复盘。
说实话，昨天这活儿干得有点上头。
起因特别朴素——我一直在想，能不能做一个做完还能改的HTML文档？
平时用AI做图文内容，有个特别烦的事：生成完一看，标题写错了个字，或者某段话想换个说法，结果你得重新跑一遍整个生成流程。改一个字的成本，跟重做一遍差不多。
我这人懒，就想：能不能生成完之后，我直接在网页上把字改了就行？
昨天从下午搞到晚上，把这个东西从0做出来了。先看效果：
今天整理成一篇复盘，给同样想动手试试的HR伙伴们参考。不用懂代码，咱就聊思路。
这个东西到底解决了啥问题？
它叫"小黑手绘文档"——说白了就是一个手绘风格、生成完还能在线编辑的网页文档工具。
几个关键特点：
- 手绘风
：暖白纸底，手绘小装饰，页面上有个叫"小黑"的小人形象做点缀，整体看着比普通文档舒服、有温度 - 能改
：生成完不锁定。你点一下"编辑"，页面上的文字就能直接改，颜色也能换 - 能带走
：改完导出一个独立HTML文件，用浏览器打开就能看，发给谁都能用，不依赖任何平台
一句话：把"AI做图文"从一次性成品，变成了可以二次加工的半成品。
我是怎么做出来的？分享几个关键节点
别从零发明，先"借"
我没有凭空设计一套视觉风格，而是融合了两套已经跑通的设计思路：
一套是配色方案——用青蓝色标记"这是结构"，用焦橙色标记"这是重点"。另一套是个叫"小黑"的IP小人，辨识度高，放在页面上不抢戏但能点睛。
有个关键决定：双色规则贯穿所有内容。 青蓝永远代表结构，焦橙永远代表重点。这个规则一定下来，后面所有模块的视觉就统一了，不会出现这一块蓝重点、那一块橙结构的混乱。
给小白的话：做工具也好，做汇报也好，先定一套简单规则，比闷头干重要得多。
先做3屏看效果，别一上来就憋大招
这一步我觉得最值。
很多人（包括以前的我）一拿到需求就想一步到位，直接生成完整版。但这次我没这么做，先只做了3屏风格预览对比。
结果第一版用了暗色背景，我自己看着都别扭。改回暖白底加手绘风，选了"日光纸"那个方案，前后迭代了三轮才定。
如果当时直接生成了几十屏暗色版，推倒重来的成本想想都头疼。
教训就一句：先花十分钟看小样，比花两小时返工划算。
内容填进去反而最快
风格定了，剩下的就是按内容一块块填。一份完整的文档，里面包含封面、卡片、表格、图表、结尾等多种版式模块。"小黑"这个小人不是每块都放，只在有含义的地方当点睛之笔。
这部分是最顺的，因为有前面打的底，方向特别清楚。
真正的坑在测试阶段
前面都顺，折磨从测试开始。说三个给小白也能听懂的：
坑一：做了"能改"的功能，结果点进去改不了
最严重的一个。页面上明明有个编辑按钮，点了之后字还是选不中、改不动。
排查折腾了好几轮才找到原因——编辑功能被我自己的设置给关掉了。简单说就是：我在"非编辑状态"下把可编辑的标记省掉了，结果切换到编辑状态时，系统根本不认得哪些字能改。
解决办法其实特朴素：别搞那些花哨的自动判断，直接在每一段文字上老老实实标好"这段能改"。编辑开关一开，全部解锁。
这事教会我：越复杂的问题，解法往往越笨、越直接。 你越觉得"这得智能判断才行"，越容易绕进去。先用最笨的方法跑通，再想优化。
坑二：改着改着，新打的字字体不对了
这个bug很隐蔽。你在编辑框里输入中文，新打的字突然变成了另一种字体，跟原来的完全不搭。
原因是：浏览器在你编辑文字时会偷偷加一些自己的格式设定，你的统一设置管不到它，字体就乱了。
解决办法是加一道"防护"——强制规定编辑状态下所有文字必须用统一字体，不管浏览器偷偷加了啥，一律覆盖掉。
给小白的话：做这种功能，得多防着点"系统自作主张"。 不是过度设计，是实战踩出来的。
坑三：不同屏幕上看着不一样
固定尺寸的设计稿，在宽屏上有黑边，在手机上直接被裁掉一块。
最后改成了自适应——文字大小跟着屏幕自动缩放，手机上看得全，电脑上不空旷。
最后一步：封装成"技能"
bug修完，最后把它打包成了一个可以重复使用的"技能"。
为什么一定要封装？因为做完不存起来，下次就得从头来。封装好之后，下次我只用说一句话："做个XX主题的文档"，它就按同一套规范重新生成，不用我再走一遍全流程。
几个真心体会
第一，小步验证真的有用。
我在正式做完整版之前，先做了个极简测试版，只为了确认一件事：编辑功能到底能不能跑通。确认能跑了再往完整版移植。这一个动作，省了多少排查时间。
第二，工具这东西，你得防着它。
看着简单的功能，实际运行时系统会在里面搞很多小动作——偷偷改字体、改间距、套默认样式。做的时候多留一道防线，比事后排查强。
第三，测试不是最后才做的事，是贯穿全程的事。
看风格小样时在测（喜不喜欢），做测试版时在测（功能通不通），完整版出来在测（显示正不正常），封装完还要测（能不能被正确调用）。每一步都在测，每一步都可能发现问题要回退。
给想动手的HR几点建议
如果你也想做一个属于自己的小工具，不管是文档还是别的：
- 从一个真实痛点出发
——找一个你反复在做的烦心事，把它标准化 - 先做3屏小样，别上来就做完整版
——让眼睛先看到效果，比脑子里想一百遍都管用 - 用最笨的方法先跑通
——别追求花哨，能用就行 - 特别留意系统的"自由发挥"
——它比你想象的不听话 - 做完一定存起来写个说明
——不然过一周你自己都忘了怎么用
昨天晚上又整到一点，中间一度被那个编辑功能卡住差点放弃。但最后解决的那一刻，确实挺爽的。
这就是自己做工具的感觉——过程可能折磨，但做成之后那种"以后这事一句话就能搞定"的爽感，值得。
共勉。
