温水煮代码
作品 & 能力 · 免费下载
不写代码做网页：挑个模板，挑套配色，剩下的交给 AI
你让 AI 写个网页，它给你一堆代码，存下来一打开是白板；再让它改，它把整页重做一遍，昨天调好的今天又变回去；好不容易做出来，发给朋友，对方说「打不开」。做了一百多个页面之后，我把这三件事的答案打包成了一个桌面小工具——1.7 MB 的 exe，双击就用，免费，断网也能跑。
一、模板不是效果图，是能双击打开的成品页
117 套网页实例，每一套都是做完测过的 HTML 文件，点「打开看看」浏览器里当场就开。分五类：
- 官网 69 套 · 卖东西 20 套 · 数据报表 3 套 · 相册 / 简历 / 个人记录 12 套 · 其他 13 套
每套右上角有个满分 3 分的综合评价，不是拍脑袋打的——每个页面都在 390×844 的真实手机视口里打开量过：有没有 viewport、会不会横向滚、正文字号够不够、能点的东西够不够大、首屏是不是空的。达不到的当场扣分，扣在哪儿也写在旁边。目前 3 分 51 套、2 分 59 套、1 分 7 套。
其中 33 套配了同名 .md，写清楚这一类页面的讲究和容易翻车的地方；其余照着排版和配色学就行。
二、59 套配色，颜色已经分好角色
配色不是丢给你五个色号让你自己猜哪个当背景。每一套都分好了七个角色：主色、主色深、页面背景、区块背景、正文、辅助文字、分隔线，直接抄进提示词，AI 就知道每个色该用在哪儿。色卡来自真实色卡图，不是随机生成的调色板。
三、手机上什么样，当场就能看
九成人是在手机上看你的网页，你却在电脑上做。点一下「手机」，所有缩略图换成真机尺寸的样子；点「打开看看」，程序里直接弹一个 390×844 的窗口，页面里的媒体查询照样按 390 算。不用拿手机来回试，也不用按 F12 调设备模拟。
四、做完了，别人怎么看
这是最容易卡住的一步——代码拿到手，发不出去等于白做。工具里给了六条路，按省事程度排：
- 直接发文件：微信里把 html 发过去，对方点开就能看。大部分人要的就是这个，不用扯服务器。
- 局域网分享：开一个本机服务，程序把 IP、端口、文件名拼成完整地址一条条列好（中文文件名自动 URL 编码），再配一张二维码，同一个 Wi-Fi 扫一下就开。
- 发上网络：四条路——发我代发出永久链接、GitHub Pages、自己买服务器备案部署、云厂商的静态托管。
- 截图 / PPT / PDF：整页长图不是第一屏——先量出页面实际有多高，再按这个高度开无头浏览器拍。
几个自己比较满意的地方
- 程序里不打包任何页面：每个素材文件夹放一份
信息.json，打开时现场扫一遍。往文件夹里加东西，下次打开就出现，不用改代码不用重新打包。 - 二维码是手写的，没拉库：这程序断网也要能用，不能去 CDN 拉 qrcode 库。字节模式 + M 级纠错，版本 1~10。验的时候拿 Python 的
qrcode库逐格比矩阵，再自己写一个解码器把画出来的码读回原文——比矩阵只能证明长得一样，读回原文才说明扫得出来。46 个样例全过，顺带查出两个真 bug。 - 素材从 94.5 MB 瘦到 59 MB：删掉 375 张没被任何代码引用的图，压缩剩下的大图。删之前先把每套模板拍一遍首屏图，删之后再拍一遍逐张算像素差异；先量出「同一批文件不动、拍两遍」的基线噪声（0.17%~3.26%，轮播和动画本来每次就不一样），超出这个范围的才去人工看。