夜雨聆风第五篇里，我把 Markdown 转成了能放进公众号的 HTML。
流程跑通后，一个问题马上出现：文章能看，但不像自己的号。
我想做一套固定模板，又不会从零写 HTML 和 CSS。
很多人会走两个极端：要么先去学前端；要么直接让 AI“做一个高级、有科技感的模板”。
前者门槛高，后者常常只得到一份看起来不错、却接不进现有项目的代码。
后来我把这件事拆成了三步：先找到自己真正想要的模板，再把它做成公众号 HTML，最后把转换流程固定下来。
做模板之前，最容易犯的错，是直接让 AI 写代码。
但如果你自己都没想清楚页面要长什么样，AI 只能按它理解的“好看”给你一版。
你也许会得到一个页面，却很难得到一套以后愿意持续使用的风格。
找参考有两条常见路。
第一条是去设计网站找。搜索“公众号排版”“科技风编辑页”“深色阅读页”这类关键词，重点不只是看颜色，还要看标题怎么突出、正文留白多不多、重点内容放在哪里。
第二条是参考你平时愿意读完的公众号。
不要整篇照搬，而是拆着看：标题是居中还是左对齐？正文一屏大概有多少字？引用、列表和加粗怎样提示读者？
我走的是第三条路：和 AI 对话。
我先不要求它写页面，而是让它给我出几套设计图。比如黑金、蓝紫、暗绿，分别放进同一段示例文章里。
设计图必须包含标题、正文、小标题、强调文字和引用块；只看色卡，判断不出长文读起来累不累。
然后再根据画面逐步调整：背景要深一点还是浅一点？标题要不要边框？重点内容用颜色、边线还是底色？正文在手机上会不会太亮？
这个阶段不需要定下每一个 CSS 数值，只要把“我觉得好看”变成一张能确认的图。
先确认视觉方向，再开始写代码。
这样，AI 后面拿到的不是一句“帮我做得高级一点”，而是一个可以对照的结果。
小结：先用参考或设计图说清“想要什么”，再进入页面制作。
设计图确认后，我把它交给 AI，让它生成实际页面。
这里我没有一上来就要求“输出公众号 HTML”。
我先让它按普通网页格式把页面做出来，在浏览器里预览。网页环境更容易看出布局、颜色、标题层级和整体阅读感是否符合设计图。
第一版通常只能说明视觉方向对不对，不能直接拿去发公众号。
公众号文章有自己的限制。
读者大多在手机上看；有些 CSS 写法在公众号编辑器里未必稳定；文章也不是一张海报，必须能容纳长标题、连续段落、列表、引用和链接。
所以，接下来要把网页格式调成文章格式。我重点让 AI 处理四件事：
- 页面宽度
：以手机阅读为主，控制正文宽度和左右留白，避免一行字太长或内容贴边； - 标题处理
：主标题要足够醒目，但长标题换行后也不能挤成一团；小标题要让读者一眼看出结构； - 段落处理
：正文的字号、行高和段后间距要适合连续阅读，不能只顾截图好看； - 重点内容处理
：加粗、引用、列表、代码和关键结论，都要有稳定的视觉层级，不能每种元素都抢正文的注意力。
这一步不必要求 AI 一次写完。
拿设计图和浏览器效果对照，哪里偏了，就明确告诉它改哪里。
例如，“正文太亮”比“整体不对”更容易执行；“小标题和正文区分不够”也比“再有层次一点”更有用。
设计图负责告诉 AI 要长成什么样，实际文章格式负责保证它真的能读。
小结：网页预览用于确认视觉，公众号格式调试解决真实阅读与兼容问题。
HTML 模板做好了，事情还没有结束。
如果每次转换文章，都要重新贴设计图、解释规则、提醒它标题怎么处理、重点内容怎么显示，那只是把手工排版换成了另一种手工操作。
我接着把模板和 Markdown 转 HTML 的规则封装成 Skill。
它不再重新设计页面，而是读取已经确认的 Markdown：识别标题、段落、加粗、列表、引用和链接，再按固定模板生成 HTML。
这样，分工就清楚了：
Markdown 负责内容； HTML 模板负责样式； Skill 负责把两者稳定地接起来。
封装后不能直接宣布完成。
我会找一篇真实文章做实测，重点检查长标题会不会溢出、连续段落会不会太密、加粗和引用能不能正常显示、粘贴到公众号后样式有没有丢。
发现问题，就回到对应位置微调：内容结构不对，改 Markdown；样式不舒服，改模板；转换规则有遗漏，改 Skill。
每次只改一类问题，再重新转换测试。
这样最后得到的，不是一张只适合演示的漂亮页面，而是一套能持续使用的文章发布流程。
不会从零写模板，不等于只能接受现成样式。
你只需要先选定自己真正想要的风格，再让 AI 把设计落到页面上，最后把重复动作固定下来。
人决定风格，模板保存规则，Skill 负责重复执行。
后续持续更新 AI 编程实战技巧。
往期文章请查看：公众号历史文章合集
关注本号，不错过 AI 编程干货，转发收藏，开发遇到问题随时翻阅。