硅基铁匠丙午年 · 独立刊物
← 返回全部文章
技术与 AI约 9 分钟

我用 Claude + Codex，零基础做了个《三十六计》网站

一个不会写代码的人，如何在一个下午用 AI 做出可访问的《三十六计》静态网站，并用 GitHub Pages 免费上线。

一个不会写代码的人，怎么在一个下午，把“我想做个三十六计网站”变成一个真能打开的在线网站？

我刚做完一个小项目：把《三十六计》整理成纯静态网站，里面有古文正文、注音注释、白话译文、按语解析和水墨风配图。成品已经上线，可以直接访问：

https://dorabc.github.io/sunzi/

项目代码也放在 GitHub：

https://github.com/dorabc/sunzi

这篇记录不讲玄学，只讲可复刻的过程：哪个环节用哪个 AI 、对它说什么、踩了哪些坑。

先说分工

这次我主要用了三类工具。

  • Claude Code：负责拆需求、写网页、写数据、调试、提交 Git 、部署 GitHub Pages 。它能读写文件、执行命令、操作 Git，更像一个能动手的工程助手。
  • 图像模型：负责出图。可以用 ChatGPT 图像生成、即梦、 Midjourney 等。配图这件事，要交给真的图像模型。
  • Codex CLI：适合处理大段代码诊断、长任务和工程排查。但我这里踩过一个坑：不要让它假装自己有图像生成能力。

一句话：Claude Code 负责造站，图像模型负责画图，Codex 负责啃硬代码。工具用错了，容易白忙。

准备工作

你需要三样东西，都可以免费起步。

  1. 一个 GitHub 账号，用来放代码和托管静态网站。
  2. Claude Code，Anthropic 的命令行工具。装好后在终端输入 claude 就能对话。
  3. 一个能出图的 AI，比如 ChatGPT 图像生成、即梦或 Midjourney 。

Codex CLI 可选。它对代码任务有用，这次做网站不装也能完成。

不想装命令行也可以用 Claude 网页版或桌面版，只是自动改文件、自动部署这部分会没那么顺手。

第一步：把想法丢给 Claude

我没有写需求文档，只在 Claude Code 里说了这段话：

我要做一个中国 三十六计 的网站，要求：
1、是一个纯静态的网站
2、按章节显示，要有古文正文、难认识的字要有注音和注释，还要有相应的配图，
   你可以先生成图片的 prompt，我随后用别的工具生成图片
3、网站你要设计得漂亮、美观

第二条很关键：我一开始就告诉 Claude，图片先写 prompt，图我自己用别的工具生成。分工提前说清楚，后面就少很多误会。

Claude 没有马上开干，先问了两个问题：

  • 视觉风格选哪种：古典水墨风、现代极简、古卷轴沉浸式。
  • 每一计包含哪些内容：古文正文、注音注释、白话译文、按语解析、配图占位和 prompt 。

我选了古典水墨风，内容全选。对零基础的人来说，这种反问很有用。你不需要懂技术，只要回答选择题，就能把需求收拢到可执行范围。

第二步：让 Claude 直接把站写出来

确认风格后，Claude 自动建了项目结构：

index.html
css/style.css
js/data.js
js/app.js
images/

它还把六套 36 计的数据写进 js/data.js。每一计都有古文正文、难字注音注释、白话译文、按语、解析、历史案例和英文绘图 prompt 。

页面也一起做好了：宣纸底纹、墨色和朱砂配色、毛笔字体、卡片网格、点击弹出详情、键盘翻页、手机自适应。它边写边自检，比如校验 36 计编号是否连续完整。

这个过程给我的感觉很明确：AI 做静态网站，最适合从内容型项目开始。唐诗、菜谱、工具导航、产品说明、个人作品集，都可以用类似方式跑通。

第三步：配图 prompt 一次写齐

因为一开始就约定“图我自己生成”，Claude 在数据里给每一计配了一条英文绘画提示词。比如第一计“瞒天过海”：

Traditional Chinese ink wash painting (shuimo), aged rice paper texture.
An emperor in Tang dynasty robes feasting inside a large tent of colorful
silk curtains, unaware the entire structure rests on a fleet of war ships
crossing a misty sea. Soft ink gradients, muted indigo and ochre, vermilion
seal stamp in corner, minimalist composition with vast empty negative space,
calligraphic brushwork, fog over rolling waves.

我又让它把 36 条 prompt 单独导出成清单文件，方便批量生成图片：

把全部 36 条配图 prompt 导出成一个清单文件，每条标好对应的图片文件名。

最后项目里有一个 IMAGE_PROMPTS.md，每条 prompt 都对应 images/img-01.png 到 images/img-36.png。

第四步：别让 Codex 去“画图”

这是这次最值得记的坑。

我当时图省事，让 Codex 去“用图像工具生成图片”：

请使用你的 image_gen 工具，按这条 prompt 生成图片保存到 images/img-01.png

它回复得很像成功：已经生成 PNG，1536×1024，1.7MB 。打开一看，画面像 PPT 里拖出来的几何色块，完全没有水墨质感。

后来翻运行日志才发现，我当时使用的 Codex 命令行 agent 没有图像生成工具。它写了一段 Python/Pillow 代码，用矩形、线条、弧线硬拼出一张图，再加一点模糊和噪点，最后告诉我“完成了”。

类似代码大概长这样：

d.rectangle(...)
d.line(...)
d.arc(...)
base = base.filter(ImageFilter.GaussianBlur(0.25))
base.save('images/img-01.png')

这个坑有三层教训。

第一，生图该交给图像模型。 Codex 擅长写代码、跑任务，但不能默认它会画图。

第二，AI 会绕路完成任务。它没能力时，可能会用别的方式凑一个结果，并报告成功。关键产出要自己打开看。

第三，如果确实要让命令行工具批量生图，就要给它真实的图像 API 能力，比如 OpenAI 图像接口，并明确禁止用 Pillow/PIL 自己画。

可以把规则写死：

必须调用 OpenAI 图像 API 生成。
禁止用 Pillow/PIL 等任何代码自己绘制图形。

第五步：正确的生图方式

最后我采用了最简单的方法：拿 Claude 写好的 36 条 prompt，去图像模型里出图。

两条路都可以：

  • 最省事：打开 ChatGPT，把英文 prompt 一条条贴进去，下载图片。
  • 要批量：用 OpenAI 图像 API，或者用即梦、 Midjourney 等支持批量流程的工具。

出好的图按 img-01.png、img-02.png 一直到 img-36.png 命名，放进项目的 images/ 文件夹。网站逻辑已经写好：图在就显示图，图不在就显示水墨占位图。所以图片可以慢慢补，不影响网站先上线。

同一句 prompt，代码拼图和图像模型差别很大。前者只是几何图形，后者才有水墨笔触、迷雾、留白和朱砂印章。

第六步：用 GitHub Pages 免费上线

网站做好后，我让 Claude Code 继续处理部署：

提交代码到 GitHub，我要使用 GitHub Pages 访问我的项目

它自动完成了初始化提交、推送到 GitHub 、启用 Pages 。中间撞到一个典型问题：GitHub 提示当前套餐不支持对这个仓库启用 Pages 。

原因很简单：仓库是私有的。免费版 GitHub Pages 对私有仓库有限制。

我的处理方式是把仓库改成 public 。改完之后，Claude 启用 Pages，等待构建，验证线上页面返回正常。几分钟后，网站就能访问了：

https://dorabc.github.io/sunzi/

公开仓库意味着代码和图片所有人可见。展示类网站没问题；如果项目里有隐私内容，就不要这么做，可以换 Cloudflare Pages 、 Vercel 等托管方式。

第七步：上线后继续改

上线后，我发现首屏那枚“兵者诡道”红色印章在某些屏幕宽度下挡住正文。处理方式很简单：截图发给 Claude，再加一句话：

这个“兵者诡道”挡住后面的字了

Claude 很快定位到 CSS 定位问题，把印章移到角落，并在窄屏自动隐藏。改完提交推送，网站很快自动更新。

后来 36 张图都生成完，我告诉它“所有图片都生成完了”，它又帮我提交、推送、等待重新部署，并验证线上图片能打开。

复刻清单

想复刻的话，可以按这个顺序来。

  1. 注册 GitHub，装好 Claude Code 。
  2. 对 Claude 说清楚：做什么主题、纯静态、要哪些内容、图自己生成、页面要好看。
  3. 回答 Claude 的风格和内容选择题，让它建站并写完整内容。
  4. 让 Claude 把配图 prompt 导出成清单。
  5. 不要用 Codex CLI 假装生图，拿 prompt 去 ChatGPT 、即梦、 Midjourney 等图像模型出图。
  6. 图片按 img-XX.png 命名，放进 images/。
  7. 让 Claude 提交到 GitHub，并启用 GitHub Pages 。
  8. 如果遇到 Pages 权限问题，检查仓库是否需要改成 public 。
  9. 后续改 bug，直接截图加一句话，让 Claude 定位和修。

这次最大的收获

不会写代码并不等于做不出网站。关键是把任务拆开，把不同环节交给合适的工具。

Claude Code 适合动手搭项目、写内容、调试和部署。图像模型适合画图。 Codex 适合处理代码重活，但关键产出要验收，尤其不要把“生成图片”这种能力想当然地塞给它。

这次做完之后，我对 AI 工具的判断更实际了：它们像一组分工不同的同事，不能当魔法按钮用。会指挥，会验收，会在出错时追日志，一个下午就能把脑子里的想法变成可访问的网站。

成品：

https://dorabc.github.io/sunzi/

项目地址：

https://github.com/dorabc/sunzi

来源：https://github.com/dorabc/sunzi