开发一个游戏站页面就是那么简单
共 1959 字阅读需 4 分钟
前面的文章：
提到出海新手快速上线一个游戏站的流程。今天，我们简单演示一下怎样通过Claude Code快速开发一个HTML静态页面的游戏站。
我们以去年4月份突然爆火的“Cosmos Persona”人格测试小游戏为例：
首先，我们按照流程注册好域名并把域名的Nameservers切换到Cloudflare；接着，我们可以轻松在Github上找到这个测试游戏的来源：
https://iseej.github.io/CosmosPersona/
确认这个游戏允许通过iframe加载到我们的网站中。
接着，我们需要准备一下“Cosmos Persona”这个关键词的网站的文案，你可以参考：
工具站都长同一张脸？我怎样用1个Prompt生成2.0落地页？
这篇文章，通过ChatGPT的深度研究准备好这个测试游戏的文案。
现在，我们可以正式让Claude Code开始帮我们开发一个专业的游戏站静态页面。
第1步：把首页文案整理成Markdown文件
把“Deep Research”生成的首页文案修改成Markdown文件的时候，你可以让AI帮你修改，但我一般手动修改，工作量并不大，注意要把H1、H2、H3和列表等内容严格修改成Markdown对应的格式：
H1标题的前面加上“# ”，并且有且只有一个；
H2标题的前面加上“## ”；
H3标题的前面加上“### ”；
列表的前面加上“- ”；
等等，大家可以查一下Markdown文件的相关知识，重点标记好H1、H2、H3这些标题即可。
另外，我还喜欢在文件的顶部加上这个网站首页的SEO相关要素，比如“Title”、“Description”等，这样有助于接下来AI修改网页内容的时候把这些非常重要的SEO相关要素一并添加到页面中，这一点非常重要！
准备好Markdown文件后，我把它命名为“HomePage.md”，放在项目的 “/Tasks/”目录中（你也可以使用其它名字，放在其它目录）。
第2步：通过AI编程工具开发网站首页
接下来，我们开始让Claude Code在按照Markdown文件中的内容修改网站首页，与此同时，我们给它规定一下网站的风格：
请你扮演一名资深的Web开发工程师和SEO专家，熟悉HTML、Javascript 和Tailwind语法和SEO优化。现在，我已经准备好网站首页的所有文案内容，请你按照 /Tasks/HomePage.md 文件中的文案，Step by Step把开发一个完整的HTML + JS +CSS的网站首页。注意严格按照文件中的文案内容，UI 风格采用有现代感和娱乐感的风格，色调请参考这个网站 https://iseej.github.io/CosmosPersona/ 的色调。
由于首页文案内容比较多，过了好一会儿，Claude Code修改好了代码：
第3步：分离CSS和JS代码
由于我们发现Claude Code把CSS和JS代码写在HTML页面中，这不利于后续扩展页面时复用CSS和JS代码，因此，我们让它做以下代码分离：
请你把css代码分离放在 /css/main.css 文件中，把js代码分离放在 /js/main.js 文件中，方便后续添加其它页面时复用。
如果Claude Code一开始给你的代码已经做好分离，那这个步骤跳过。
很快，Claude Code完成了代码分离：
<table><tbody><tr><td></span>
</span>
第4步：添加iframe窗口加载游戏
接下来，我们让Claude Code帮我们添加一个iframe窗口，用于加载在Github上找到的对应游戏：
Claude Code很快帮我们完成iframe窗口的相关代码，并自行调整好样式：
第5步：检查首页内容并做完善
接下来，检查一下他修改后的首页内容是否与Markdown文件中的内容相符，不符的地方提示它修改完善：
Claude Code按照我们的要求做了完善。
接下来，不要忘记修改一下网站的Logo。我准备了Logo图标，放在“/images/”文件夹中，并把favicon.ico图标放在根目录中。然后，让Claude Code把网站的Logo和Icon修改成我们给定的图标：
第6步：生成网站的sitemap.xml、robots.txt和llms.txt文件
最后，记得生成后续上线后有利于搜索引擎的sitemap.xml、robots.txt和llms.txt文件：
最终，Claude Code帮我们完成了一个专业的游戏站页面：
>由 [Circle 阅读助手](https://circlereader.com) 生成