Markdown + HTML + SVG + GitHub
一个下午搞定,AI帮你干活
你正在看的这个页面--翻页式、有配图、手机上也能看--就是用这套方法做出来的。
没有设计师参与,没有手写一行代码,没有花钱买服务器。
它本身就是效果证明。
接下来我要分享的,就是做出它的全套方法。如果你有一些经验想整理成手册、教程、指南--不管是给团队用的SOP还是给客户看的入门说明--这套组合拳可能对你有帮助。
前提:你已经在用某种 AI agent 工具(WorkBuddy、ColaOS、Codex、Trae等皆可),并且网络环境顺畅。
左右滑动翻页
整件事情只用四样东西。每一样我都会讲为什么需要它--不只是"怎么用"。
它们是一条自然的递进链--每一环解决前一环留下的问题。别急,我们一个一个来。
你和 AI 对话的时候,是不是经常这样:
问题出在哪?纯文字是一坨面糊。你很难一眼看出它的骨架。
所以 Markdown 的核心价值不只是"给 AI 看的输入格式",更是你审视 AI 输出的工具。
当 AI 回复你的时候,如果它用 Markdown 格式--有 # 标题、有 - 列表、有层级--你一扫就知道:结构对不对、深度够不够、有没有跑题。
来看一个对比。同样一段内容,两种写法:
客户入职流程分为三个阶段,首先需要签订合同,签完后进入账号创建阶段,我们会在一个工作日内完成,然后进入培训阶段,通常安排在第一周内,培训内容包括系统操作和常见问题处理......
# 客户入职流程 ## 1. 签约阶段 - 签订合同 - 确认付款 ## 2. 账号创建(1个工作日) - 创建系统账号 - 发送欢迎邮件 ## 3. 培训(第一周内) - 系统操作培训 - 常见问题处理
同样的信息,源码让你一眼审视结构,渲染后让读者舒服阅读。两种视角,两种价值。
这就是"审视"--Markdown 让结构显性化。
打开你的 AI agent,把下面的提示词复制给它:
请帮我用 Markdown 格式,列出"[你的主题]"的基本框架。
要求:
- 用 # 和 ## 表示层级
- 每个章节下用 - 列出3-5个要点
- 不需要写具体内容,只要框架
先输出框架让我确认结构,确认后再展开写。
把 [你的主题] 换成你自己的内容。比如"新人入职指南""客户常见问题""我的摄影后期流程"--任何你想整理的东西。
关键心法:先审结构,再填内容。不要让AI一次性全写完--你会丧失审视的主动权。
当框架确认后,让 AI 逐章展开。每章可以用这些 Markdown 元素:
## 标题 - 章节名### 小标题 - 子章节- 列表项 - 要点罗列**粗体** - 强调关键词> 引用 - 补充说明或注意事项现在请展开第一章的内容。要求:
- 保持 Markdown 格式
- 每个要点用1-2句话解释
- 如果有操作步骤,用有序列表(1. 2. 3.)
- 有专业术语的地方加一句通俗解释
三章写完,你大概率会有一个感受--翻下一页我来说。
三章 Markdown 写完,你把它读一遍。然后你会发现--
纯文字读起来累。
内容没问题。结构也对。但满屏都是字,你自己都不想看第二遍。如果你都不想看,凭什么期待别人看?
内容一样,呈现方式决定了别人愿不愿意接收。想想你平时看的公众号文章--同样的内容,有配图、有缩进、有高亮的那篇,你是不是更愿意读下去?
接下来两层:
你不需要学会它们--你只需要知道它们干什么,然后让 AI 帮你写。
HTML 不是编程语言--它是"标记语言"。什么意思?就是你在内容旁边做标记:这里是标题、那里是段落、这块要加粗。
好消息是:你不需要学 HTML。AI 会帮你写。你只需要:
你做的是"选菜"和"验收",AI 是"厨师"。
把你之前写好的 Markdown 内容(哪怕只是第一章)交给 AI:
请把下面的 Markdown 内容转成一个漂亮的 HTML 页面。
要求:
- 单文件,所有样式内嵌
- 风格简洁现代,适合手机阅读
- 用好看的字体和间距
- 加适当的颜色(不要太花哨)
内容如下:
[粘贴你的 Markdown 内容]
看到效果了?内容没变一个字,但观感完全不同。这就是"摆盘"的力量。
如果觉得字体不对、颜色不喜欢--直接告诉 AI "标题换成红色""段落间距再大一点"。它会帮你改。
页面有了,但全是文字的页面还是单调。你需要图。
传统做法:去图片网站找素材→担心版权→下载→调整大小→放进去。麻烦。
SVG 的做法:让 AI 画。
SVG 是"用代码描述的图形"。意思是--你告诉 AI "画一个表示流程的示意图",它直接写出来,不需要 Photoshop,不存在版权问题,而且放大缩小都不模糊。
你不需要会画画,也不需要学 SVG 语法。你只需要描述你想要什么图,AI 来实现。
请用 SVG 画一个简单的流程图,展示以下步骤:
1. 写内容(红色方块)
2. 做页面(蓝色方块)
3. 发布上线(黄色方块)
要求:
- 三个方块横排,中间用箭头连接
- 方块下面写步骤名称
- 风格简洁,蒙德里安风
- 输出纯 SVG 代码
试试改描述——“把三个方块改成圆形”“加一个第四步”——AI 会即时修改。你会发现：调整一张图比写一段话还快。
没有素材可找？让 AI 画。没有版权能用？让 AI 画。这就是 SVG 的自由。且它永远不会糊——放大多少倍都清晰。
现在你有了 HTML 文件,在自己电脑上打开没问题。但它只存在于你的硬盘里--别人看不到,而且万一文件丢了就没了。
GitHub 是什么?简单说:一个免费的「文件存放+展示」平台。全球最大的开源社区,所有人都把自己的作品放在这里。
它对你有三个实际用处:
GitHub 免费把你的 HTML 变成一个真实网址。发链接给任何人就能看。不用买服务器,不用懂运维。
GitHub 上有无数人做好的模板、组件、工具。看到喜欢的页面?复制链接给 AI 说"照这个风格来"--不用重复造轮子。
每次修改都被记录。想回到上一版?随时可以。而且还有一个"绿点日历"让你看到自己的产出轨迹。
去 github.com 注册一个账号。邮箱验证完就行,免费的。
确保网络环境顺畅。
注册好之后,让 AI 帮你建第一个"仓库"(Repository):
我已经注册好了 GitHub 账号,用户名是 [你的用户名]。
请一步步指导我创建第一个仓库(Repository),要求:
- 仓库名叫 my-manual(或你喜欢的名字)
- 设为 Public(公开)
- 勾选 "Add a README file"
请告诉我在哪里点、点什么,每一步都配截图描述。
仓库建好了,现在把你的 HTML 文件放进去,然后开启"展示橱窗"。
我已经创建了仓库 my-manual。现在请指导我:
1. 把我的 index.html 文件上传到这个仓库
2. 开启 GitHub Pages,让别人通过网址能访问到我的页面
请一步步说明操作路径(在哪里点击什么按钮)。
https://你的用户名.github.io/my-manual/ 的网址这是 GitHub 最被低估的用法--不只是放自己的东西,更是拿别人做好的东西。
搜 GitHub,找到一个你喜欢的模板。把链接给 AI:"照这个风格帮我改成我的内容。"
搜 GitHub,找到别人调好的配色方案。直接拿来用。
找到别人做好的导航组件,复制代码给 AI 说"把这个加到我的页面里"。
关键操作:当你看到喜欢的东西,把它的 GitHub 网址复制给 AI,说"参考这个来做"。AI 会去看那个仓库的代码,然后帮你实现类似的效果。
GitHub 的核心能力之一是版本管理--每次你推送更新,它都会保存一个"快照"。这意味着:
就像写文档时的"撤销"功能,只不过它能撤销到任何时间点。
每次推送更新(哪怕改了一个错别字),那天就会亮一个绿点。三个月后回头看,你能清楚地看到:什么时候开始的?中间在做什么?进度如何?
对非技术人士来说,这可能是第一次有一个「可视化的产出记录」--而且别人也能看到。未来有人想了解你在做什么,这就是最好的名片。
你的手册已经在线了。内容有了,排版有了,还能访问了。但--质量能不能再上一个台阶?
想象一下这个场景:你写了一份产品说明,然后分别找了--
现实里这要花多少钱、找多少人?
Skill 就是"AI 的专家外挂"。
有人把自己最擅长的事情--写作、排版、检查语法、优化结构--打磨成了一个"技能包",然后说:"来,免费拿去用。"
这是开源世界最动人的事情之一。你不需要认识那个人,不需要付费,你的 AI 装上这个 Skill 之后,就像多了一个帮手的专业视角。
不同的 AI agent 工具安装 Skill 的方式略有不同,但核心逻辑一样:找到→安装→使用。
我想给你安装一个 Skill 来提升写作质量。
请帮我找一个适合"检查文档结构和措辞"的 Skill,
并告诉我怎么安装和使用它。
或者,如果你已经知道想要什么:
请帮我搜索并安装一个前端设计相关的 Skill。
安装后,用它来审视我当前的 HTML 页面,给出改进建议。
Skill 是累积的--装得越多,你的 AI 助手越"全面"。就像一个团队在不断扩招专家。
现在让我们把四把钥匙串在一起,看完整的从想法到上线的路径:
注意那条红色虚线--这是一个循环。Skill 给出的建议可能让你回去改 Markdown 结构,或者调整 HTML 呈现。每一轮循环,质量上一个台阶。
但记住:先发布,再迭代。不要追求一步到位。60分的东西先上线,比100分的东西永远在本地强。
如果你从头开始,以下是一次完整的对话流:
我要做一份"[主题]"的在线手册。
请先用 Markdown 帮我列出整体框架(章节 + 每章要点)。
不要写具体内容,只要骨架让我审视。
→ 审视结构,提出修改意见。可能来回2-3轮。
框架确认。请逐章展开内容,先写第一章。
保持 Markdown 格式,每章写完我确认后再写下一章。
→ 逐章确认,保持掌控。
所有内容确认完毕。现在请把它转成一个完整的 HTML 网站。
要求:
- 翻页式或长滚动式均可(你判断哪个更适合)
- 配上 SVG 示意图
- 适合手机阅读
- 输出文件结构:index.html + css/style.css + js/app.js
→ 验收视觉效果,提修改意见。
页面完成。请帮我把这些文件上传到我的 GitHub 仓库 [仓库名],
并开启 GitHub Pages,让我拿到在线访问地址。
手册做出来了,接下来你可能会想:
隔一段时间回来加一章、改个措辞。GitHub 会记录每一次更新。你的手册是活的,不是一次交差的。
同一套方法可以做任何东西:团队SOP、课程笔记、产品文档、个人博客。每个新仓库就是一个新项目。
在 GitHub 上搜你感兴趣的关键词。看看别人怎么做的。找到喜欢的?Fork 一份(就是复制到你自己那里),然后让 AI 帮你改成自己的。
把网址分享出去。收集反馈。"哪里看不懂?""哪里想了解更多?"--然后迭代。这就是"用作品说话"。
你已经有了工具链和方法论。剩下的只是"做"。
还记得第一页说的吗?
"你正在看的这个页面--翻页式、有配图、手机上也能看--就是用这套方法做出来的。"
现在你走完了整条路,回头看看这个教程本身:
这个教程本身就是方法的产物。如果它看起来还不错--那这套方法就是有效的。
现在轮到你了。