我用三句话把坦克世界 3D 网页版给搞出来之后,自己玩了好久,挺上头的,然后玩过的朋友反馈也挺好的。

所以我想把它分享给更多人,让大家真实感受一下顶级 AI 的开发能力!
这个时候就遇到一个问题了:
我要如何介绍这个游戏呢?没有看过我文章的人,或者没有玩过坦克世界的人,要如何快速了解这个游戏,并且快速上手呢?
所以,我就想到给它做个"官网"了!
可以在官网上做特点介绍以及新手攻略。
在"上古"时代,一个官网的价格,可能是几千块,甚至几万块,然而修修改改搞很久,做出来的效果大概率也不是太好。
现在不一样了,我们有 AI 助手,就是一句话的事情。而且能非常贴合项目主题。
说干就干,真的一句话的事情!
我的核心需求如下:
根据当前项目的源代码和配色设计一个网站/落地页,根据游戏界面进行截图和配图,然后能用比较通俗的表述,把这个游戏介绍给普通人,让新手快速上手。不要用专业术语,分块介绍!
大概就是这些描述了!
然后,很快,官网有了!
Claude 还生成了一个在线网址:
arduino
https://claude.ai/artifact/53r2iCx5BaDxMLg6HgCy9b
当然同时也在本地保存了一份,可以发布到自己的网站上!
网页效果如下:

是不是有那个味儿了? 这个设计还是可以有的!
首屏的背景图也制作好了,而且这个配色和按钮的效果也挺贴合这个主题的!
坦克数量、国家数量、天候种类、对战地图等信息都有!
第二屏说的是:这是什么?

标题为:二战坦克,真实的装甲,一局十分钟!
包含了三个手绘 SVG 图标,然后是三个小点,分别是:18 辆车五种打法、瞄弱点、看不见就打不到。
第三屏是:一场战斗

标题为:十分钟,从车库到占领
每局 600 秒。打光对面,或者在敌方基地里站满 100 点,都算赢。
三个步骤配实机截图:车库选车 → 分路推进 → 找侧面开火。
第四屏:核心机制之装甲和击穿

标题为:打穿它,而不是磨掉它
装甲透视截图 + 一张手绘示意图,讲清了等效厚度(80 mm 斜 60° ≈ 160 mm)、跳弹 70°、过穿 3 倍口径等概念。
第五屏:核心机制之视野!

标题为:整场仗,一半是在找对方
手绘示意图画出 445 米视野上限、灌木遮蔽、开火后 3 秒暴露!
第六屏:车库

标题为:18 辆车,苏德美英中
6 张重点车卡(59 式、虎式、猎豹、M18、62 式、野蜂),每张三个关键数据;下面是 18 辆车的完整阵容表,带国家色标。

第七屏:战场

标题为:每一局的地形都是新的。
四种天候的实机截图,包含了不同天气、不同季节、不同时间的地图。它是基于同一个地图来进行差异化设计的。地图不是固定的,而是每次动态生成的。 常打常新,防止老手记位置,也不会让老手觉得很枯燥。
第八屏:还有这些

标题:被打中之后,麻烦才开始
九个模块、五名乘员、起火、火炮吊射、对手三档水平、占领与防守
第九屏:准备出发

这里是提供了游戏入口,也简单介绍了游戏的核心操作。
主要的效果展示完了,我觉得真的做得挺好的。
主要是内容介绍得很全面。把整个游戏里的关键点都提出来了。
如果我要找一个小弟来做这个事情,我还得把整个项目背景告诉他,说清楚里面各种规则,然后他要自己去截图,试玩,总结,最后设计网页。 设计完了我们还需要对齐一下,想想都心累。
现在十分钟搞定!全部都是定制内容。
下面同步给大家分享一下Claude完整的开发反馈信息:

页面内容
一条纵向叙事,从"这是什么"讲到"现在就能开一局":
- 首屏 --- 黄昏草原的实机画面打底,标题 + 一句人话的定位,下面一条数据条(18 辆坦克 / 5 个国家 / 4 种天候 / 7v7·10v10 / 0 安装)
- 这是什么 --- 三个手绘 SVG 图标:18 辆车五种打法、瞄弱点、看不见就打不到
- 一场战斗 --- 三步配实机截图:车库选车 → 分路推进 → 找侧面开火
- 装甲与击穿 --- 装甲透视截图 + 一张手绘示意图,讲清等效厚度(80 mm 斜 60° ≈ 160 mm)、跳弹 70°、过穿 3 倍口径
- 视野与隐蔽 --- 手绘示意图画出 445 米视野上限、灌木遮蔽、开火后 3 秒暴露
- 坦克 --- 6 张重点车卡(59 式、虎式、猎豹、M18、62 式、野蜂),每张三个关键数据;下面是 18 辆车的完整阵容表,带国家色标
- 战场 --- 四种天候的实机截图
- 还有这些 --- 九个模块、五名乘员、起火、火炮吊射、对手三档水平、占领与防守
- 开始游玩 --- CTA + 按键speed提示
设计方向
按二战军械识别手册的气质来做,不是常见的霓虹游戏站:
暗橄榄底色配琥珀仪表灯(直接取自游戏 UI 的 #f08a24),
标题用 Big Shoulders Display 这类工业窄体配思源黑 900,
数据一律用 JetBrains Mono,分节处用瞄具密位刻度做分隔线。
文案全部从玩家视角写,不提"程序化生成""着色器"这些词。
截图怎么来的
没有用录屏截图------那样分辨率受窗口限制。
我临时起了一个本地接收服务,让游戏自己用渲染器按 2400×1350 离屏渲染,
再把画面 POST 回来存盘,最后统一压到 1600 宽。所以 12 张图都是干净的高清实机画面,没有 HUD 遮挡。
第一个版本整体来说挺好的,但是我感觉它的说教意味有点重,标题有点长,就让它改成简洁直接的陈述。
同时让它添加了一个常见问题、新手指南、更新日志!
常见问题如下:

哈哈哈。这些问题,都是它自己想的,我感觉已经比较到位了,常见的问题基本都在了!
新手指南如下:

更新日志如下:

这些信息当然也是它自动生成的!
而且随着代码和功能的修改,它会自动更新官网的信息!
这个根本不用你提醒,它很自觉。
我负责任的说,它创建这些页面的时间,绝对比我写文章还要快很多。
所以,我写文章来总结,其实是一件非常"浪费"时间的事情。
但是,我觉得还是有必要的。
一方面告诉大家我做了这个东西,另一方面给感兴趣的玩家介绍一下这个游戏,还有一点是给那些对 AI 编程感兴趣的人演示一下。
一举三得,自然不算是浪费时间了!
最新版网页,已经发布到 CF 上面域名也绑定好了:
CF 确实是"赛博菩萨",Pages 居然不限量,Worker 的免费量也比较充足。
从网页设计,到网站部署,到域名绑定,自然是全部由 Claude 代劳了! CF 有对外的接口,调用起来很丝滑。
下一篇,讲一下 AI 策略升级,实际上就是电脑 NPC 玩家的策略升级。