1. 从一句“官网搞定”说起这个项目到底在做什么先把背景交代清楚。这个项目的标题是《钢铁洪流》官网搞定纯AI制作Opus5操刀。关键词里出现了 Opus5、AI、Claude、CF、Pages 这几个词。把这些信息拼在一起能还原出这样一个场景有人想给一个叫《钢铁洪流》的项目做一个官网整个制作过程没有手写一行前端代码而是把需求交给 AI 模型这里用的是 Opus5属于 Claude 系列模型的一个版本由它生成页面代码最后部署到 Pages 这类静态托管服务上中间可能还借助了 CFCloudflare的 CDN 和域名解析能力。《钢铁洪流》这个名字听起来像是一个游戏、一个模组、或者一个偏硬核的军事题材内容项目。不管它具体是什么官网这类站点的需求其实高度一致一个能展示项目介绍、核心特色、截图或视频、下载入口、更新日志的落地页。传统做法是找模板、改样式、调响应式一套下来少说也要一两天。而这个项目的核心卖点就是——全程 AI 生成人只负责提需求和验收。我先把这类项目的完整链路拆开讲后面再逐段深入。整条链路大致是明确官网要放哪些板块 → 用结构化的提示词让 AI 产出 HTML/CSS/JS → 本地预览并迭代修改 → 把代码推到代码托管平台 → 用 Pages 服务做静态部署 → 绑定自定义域名并配置 CDN 加速。每一步都有坑尤其是“纯 AI 制作”这个前提下提示词的质量直接决定成品质量。这篇文章适合几类人看一是完全不懂前端、但想快速给自己的项目做个官网的人二是已经会用 AI 写代码、但总感觉生成结果“差口气”的人三是想搞清楚静态站点部署全流程、把 AI 生成和托管服务串起来的人。我会把每一步的意图、参数、踩坑点都讲透你照着做基本能复现一个同级别的官网。需要提前说明的是下面涉及的具体模型版本、托管平台名称都是基于这个项目标题和关键词透露的信息做的合理还原。不同平台的操作界面会变但底层逻辑是通用的你换成任意同类服务都能套用。2. 为什么“纯AI制作官网”这件事现在真的可行了2.1 静态官网的技术门槛本来就不高很多人对“做官网”有心理阴影觉得那是前端工程师的活。但你要真拆开看一个项目官网的本质是什么就是一堆静态资源一个 HTML 文件描述结构一个 CSS 文件控制样式可能再加一点 JS 做交互比如滚动动画、导航栏收起、图片轮播。它没有后端逻辑不查数据库不处理用户登录本质上就是“一张会动的海报”。这种页面的技术栈极其简单甚至可以用单文件搞定。正因为简单它才特别适合交给 AI。AI 模型在训练时见过海量的落地页代码对“导航栏 Hero 区 特性卡片 页脚”这种经典结构烂熟于心。你只要把需求描述清楚它产出的代码质量往往比一个刚入行的前端还稳定因为它不会忘记写 meta viewport也不会漏掉响应式断点。2.2 Opus5 这类模型在长代码生成上的优势关键词里点名了 Opus5。在 Claude 系列里Opus 一直是能力最强的那一档主打复杂推理和长上下文。放到官网制作这个场景它的优势体现在两个地方。第一是长输出稳定性。一个完整的官网 HTML 动辄几百上千行很多模型写到后面就开始“偷懒”要么省略重复结构要么把 CSS 写乱。Opus 级别的模型在长代码生成上的一致性明显更好能从头到尾保持结构完整。第二是对设计意图的理解。你如果说“做一个军事风格的官网深色背景金属质感带一点故障艺术的味道”普通模型可能只会给你一个黑底白字。而强模型能理解“金属质感”意味着渐变、边框高光、噪点纹理“故障艺术”意味着文字错位、扫描线效果。这种从自然语言到视觉语言的映射能力是“纯 AI 制作”能出效果的关键。2.3 CF Pages 这套组合解决了部署难题代码生成只是第一步做完还得让别人能访问。关键词里的 CF 和 Pages 指向的就是部署环节。Pages 类服务的特点是你只要把代码推到代码仓库它自动构建、自动发布、自动给你一个可访问的域名还自带全球 CDN。CF 则提供了域名解析、缓存、防护这些能力。这套组合对“纯 AI 制作”的人来说太友好了——你不需要买服务器不需要配 Nginx不需要懂运维。整个部署过程可以压缩到“推代码 → 等两分钟 → 拿到网址”这么简单。这也是为什么现在个人项目做官网的门槛被拉到了历史最低。提示静态托管服务的免费额度对个人官网来说通常绰绰有余但要注意构建次数和带宽的限制流量突然暴涨时可能触发限流正式对外推广前最好确认一下额度规则。3. 提示词怎么写AI 才能一次生成能用的官网这是整个项目里最核心的环节也是最容易翻车的地方。我见过太多人丢一句“帮我做个官网”就指望 AI 吐出成品结果拿到的代码要么结构混乱要么样式全无。问题不在模型在提示词。3.1 把“官网”拆成具体的板块清单AI 不会读心。你说“做个官网”它只能猜。正确的做法是先把官网的板块列出来越具体越好。以《钢铁洪流》这种项目为例一个合格的落地页至少包含顶部导航栏Logo、几个锚点链接介绍、特色、下载、更新Hero 首屏项目名大标题、一句 slogan、一个主行动按钮项目简介区两三段文字说明这是什么核心特色区三到六个卡片每个配图标和短描述媒体展示区截图或视频占位下载/入口区明显的按钮页脚版权、社交链接你把这七块写进提示词AI 就有了明确的骨架。它不需要猜只需要填肉。这一步的投入产出比极高多写五行需求能省掉半小时的返工。3.2 用“视觉关键词”代替模糊描述“好看一点”“高级一点”这种词对 AI 毫无意义。你要给它可执行的视觉指令。比如配色主色 #0A0E14近黑强调色 #FF4D00橙红辅助色 #8B949E灰字体标题用无衬线粗体正文用系统默认字体栈质感深色背景 细微噪点 卡片边框发光动效首屏文字淡入上移卡片 hover 时轻微上浮这些描述每一条都能直接翻译成 CSS。你给得越具体生成结果越接近你脑子里的画面。我个人的习惯是在提示词里直接附上一段参考色值模型对十六进制颜色的理解非常准确。3.3 明确技术约束避免生成“跑不起来”的代码还有一个常被忽略的点你得告诉 AI 用什么技术。否则它可能给你一个依赖 React 的版本而你根本不会配构建环境。对于“纯 AI 制作、直接部署”的场景最稳妥的约束是单个 HTML 文件CSS 和 JS 内联不依赖任何外部框架和构建工具图标用内联 SVG不引外部图标库响应式用原生 CSS 媒体查询这样生成的代码双击就能在浏览器打开也能直接丢到 Pages 上。少一层依赖就少一个出错的地方。3.4 一个可直接复用的提示词模板把上面几点整合起来我常用的提示词结构是这样的请生成一个单文件 HTML 官网主题是《钢铁洪流》。 要求 1. 结构包含导航栏、Hero 首屏、项目简介、核心特色4个卡片、 媒体展示、下载入口、页脚。 2. 视觉风格深色军事风背景 #0A0E14强调色 #FF4D00 卡片带边框发光标题粗体。 3. 动效首屏文字淡入上移卡片 hover 上浮。 4. 技术约束CSS 和 JS 全部内联不依赖任何外部库 图标用内联 SVG响应式适配移动端。 5. 所有文案用中文项目名《钢铁洪流》出现在导航和首屏。这个模板你换个项目名、换个配色就能直接用。实测下来Opus 级别的模型对这种结构化提示词的响应非常稳定基本一次就能出可用的初版。4. 从生成到上线本地预览与迭代的实操细节拿到 AI 生成的代码只是开始真正决定成品质量的是后面几轮迭代。这一步很多人偷懒直接把初版就部署了结果上线后发现移动端错位、按钮点不动再回头改就很麻烦。4.1 本地预览的正确姿势把 AI 给的代码保存成index.html直接双击用浏览器打开就行。但这里有个细节如果你后续要加图片、字体这些外部资源用file://协议打开会遇到跨域限制。更稳妥的做法是在文件所在目录起一个本地服务。如果你装了 Python一行命令就够python -m http.server 8000然后在浏览器访问http://localhost:8000。这样所有资源都走 HTTP 协议不会再有跨域问题。如果你用 Node 环境npx serve也是同样的效果。这一步不复杂但能帮你提前发现很多资源加载的问题。4.2 用浏览器开发者工具做响应式检查预览的时候一定要打开开发者工具F12切到设备模拟模式把常见尺寸都过一遍375px手机、768px平板、1440px桌面。重点看三个地方导航栏在小屏下有没有正确收起或换行Hero 区的大标题会不会溢出屏幕卡片在窄屏下是不是变成了单列AI 生成的响应式代码大部分时候是对的但偶尔会在某个断点出问题。比如它可能写了media (max-width: 768px)但你的平板正好是 768px就落在了边界外。这种问题肉眼一看就知道改起来也快。4.3 迭代修改的提示词技巧发现问题后不要重新生成整个文件那样会丢掉之前调好的部分。正确的做法是把问题描述清楚让 AI 只改局部。比如当前代码在 375px 宽度下Hero 区标题溢出屏幕。 请只修改相关的 CSS让标题在小屏下自动缩小字号并换行 不要改动其他部分的代码。“只修改相关部分”这句话很关键。不加这句模型可能顺手把整个文件重写一遍你之前手动微调的地方就全没了。我一般会把当前完整代码贴回去再附上修改要求这样模型有完整上下文改出来的结果最准。4.4 手动微调哪些地方最划算有些细节 AI 很难一次到位但手动改起来只要几秒钟性价比极高。我通常会检查这几处检查项常见问题手动修改方式页面标题默认是 “Document”改title标签favicon缺失浏览器显示默认图标加一行link relicon锚点跳转点击导航没反应确认href#id和元素id对应按钮链接指向#空链接换成真实下载地址页脚年份写死旧年份改成当前年份或动态生成这几处加起来不到五分钟但能让官网的完成度提升一个档次。尤其是 favicon 和页面标题是别人打开标签页第一眼看到的东西不能马虎。5. 部署到 Pages把代码变成可访问的网址代码调好了接下来就是让它上线。这一步用 Pages 类服务整个流程可以做到几乎零配置。5.1 代码托管平台的选择与准备Pages 服务通常和代码托管平台绑定。你需要先把代码推到一个仓库里。如果你还没有账号注册一个就行免费账户足够用。创建仓库时注意两点仓库名尽量用英文避免特殊字符可见性选公开或私有都行Pages 服务对两者都支持。把index.html推上去的方式有很多。会用 Git 的话命令行三步走git init git add index.html git commit -m init site git remote add origin 你的仓库地址 git push -u origin main不熟悉命令行的直接用网页版上传文件也可以。对于单文件官网来说网页上传反而更快。5.2 开启 Pages 服务的关键设置代码推上去之后进到仓库的设置页面找到 Pages 相关的选项。这里有几个关键配置构建来源选择从分支部署指定main分支和根目录构建方式如果是纯静态 HTML不需要构建步骤直接发布自定义域名可以先跳过用默认域名测试保存之后平台会自动开始构建和发布。通常一两分钟内就能拿到一个可访问的网址。这个网址的格式一般是用户名.github.io/仓库名或者平台自己的域名格式。注意首次部署后如果访问显示 404先别慌。等几分钟再刷新构建和 CDN 生效需要时间。如果十分钟后还是 404检查一下文件是不是在仓库根目录以及文件名是不是严格叫index.html大小写敏感。5.3 绑定自定义域名与 CDN 加速默认域名能用但不够专业。如果你有自己的域名可以在 Pages 设置里绑定。流程是在设置里填入域名 → 平台给你一个 CNAME 记录值 → 你去域名服务商那里添加这条解析记录 → 等待生效。这里就用到 CF 的能力了。把域名的 DNS 解析托管到 CF好处是解析生效快、自带 CDN 加速、还能顺便开启缓存和基础防护。配置的时候注意CNAME 记录的主机名填www或根域名代理状态小云朵建议开启这样流量走 CDNSSL/TLS 模式选“完全”或“完全严格”确保端到端加密生效时间通常在几分钟到几小时之间取决于 DNS 缓存。可以用dig或在线 DNS 查询工具确认解析是否已经指向正确。5.4 部署后的验证清单上线不等于完事还得验证。我每次部署完都会过一遍这个清单桌面浏览器打开检查布局和动效手机浏览器打开检查响应式和点击区域点击所有导航锚点确认跳转正常点击所有按钮确认链接有效查看页面源代码确认 meta 描述和标题正确用不同网络环境访问确认 CDN 生效这套流程走下来一个能拿得出手的官网就算真正上线了。整个过程如果顺利从写提示词到上线半天时间足够。6. 纯 AI 制作官网的几个真实坑与应对前面讲的都是顺风顺水的流程但实际操作中一定会遇到问题。我把几个高频坑列出来都是我自己踩过或者见别人踩过的。6.1 生成代码“看起来对跑起来错”最常见的情况是 AI 生成的 HTML 结构没问题但 CSS 选择器写错了导致样式不生效。比如它给卡片写了.card类但 HTML 里用的是classcards一个字母之差样式全丢。这种问题在浏览器里一眼能看出来——页面变成纯文本堆叠。排查方法很简单打开开发者工具看元素的样式面板如果某个样式没生效检查选择器是否匹配。修复的时候直接把不匹配的地方告诉 AI让它统一命名。6.2 移动端布局在真机上和模拟器不一致模拟器里看着好好的真机上一打开就错位。这通常是因为模拟器没有考虑真实设备的字体缩放、安全区域刘海屏这些因素。应对办法是在 CSS 里加上安全区域适配body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }另外移动端浏览器地址栏会占用高度用100vh做全屏 Hero 区时可能被截断。更稳的写法是用100dvh动态视口高度或者干脆用min-height而不是固定高度。6.3 部署后样式丢失的缓存问题有时候本地预览一切正常部署后样式却乱了。八成是缓存问题。CDN 会缓存静态资源如果你更新了文件但 CDN 还在返回旧版本就会出现“代码是新的样式是旧的”这种诡异现象。解决办法有两个一是等缓存过期通常几分钟到几小时二是在 Pages 或 CF 的控制台手动清除缓存。更彻底的做法是给资源加版本号比如style.css?v2这样每次更新都会强制拉取新文件。6.4 AI 生成的文案需要人工过一遍模型生成的文案有时候会有“AI 味”——用词空泛、句式重复、缺乏具体信息。比如它可能写“本项目拥有卓越的性能和出色的体验”这种话放在任何项目上都成立等于没说。我的做法是AI 负责结构和样式文案我自己重写。把项目真实的特点、数据、亮点填进去。官网的说服力最终来自内容不是来自动效。这一点在“纯 AI 制作”的项目里特别容易被忽略。7. 这套方法能复用到哪些场景把《钢铁洪流》官网这套流程抽象出来它其实是一套通用的“AI 生成 静态部署”方法论。只要你的需求是“做一个展示型页面”都能套用。7.1 个人作品集与简历页做设计的、写代码的、做自媒体的都可以用这套方法快速搭一个作品集页面。提示词里把“核心特色卡片”换成“作品展示网格”把“下载入口”换成“联系方式”其余流程完全一样。部署到 Pages 上就是一个永久可访问的个人主页。7.2 产品落地页与活动页如果你在做一个新产品或者办一场活动需要一个临时落地页这套方法比找模板快得多。改改配色、换换文案半小时就能上线。而且因为是纯静态的访问速度极快不用担心服务器扛不住流量。7.3 文档站与说明页开源项目、工具软件经常需要一个说明页。用 AI 生成一个带侧边导航的文档结构部署到 Pages 上比用现成的文档框架还轻量。尤其是内容不多的时候单文件方案反而更清爽。7.4 快速原型验证有时候你只是想验证一个页面的视觉效果不想投入太多时间。用 AI 生成一版部署上去发给别人看反馈。不满意就改提示词重新生成迭代成本极低。这种“先上线再优化”的思路比在本地反复纠结高效得多。8. 我在实际操作中总结的几条经验最后分享几条我个人在这类项目里反复验证过的经验都是些文档里不会写、但实际用起来很管用的东西。第一条提示词里永远加上“响应式适配移动端”。不加这句AI 有相当概率只给你桌面版布局移动端打开就是横向滚动条。加上之后它会主动写媒体查询。第二条生成代码后先别急着改先完整看一遍。很多人拿到代码就开始调样式结果改到一半发现结构有问题前面的功夫全白费。先通读一遍确认结构合理、命名统一再动手微调。第三条部署前一定要在手机真机上测一次。模拟器再准也不如真机。尤其是按钮的点击区域在手机上手指点起来和鼠标点起来完全是两回事。按钮高度建议不低于 44px这是移动端的通用可点击尺寸标准。第四条保留一份“干净版”代码。迭代过程中很容易把代码改乱留一份初始版本改崩了可以随时回退。用 Git 的话每次大改之前 commit 一次出问题直接 reset。第五条别追求一次完美。官网这种东西上线之后根据反馈再改比在本地憋大招高效得多。先上线一个 80 分的版本然后根据真实访问数据去优化那 20 分这才是正确的节奏。这套流程我用了很多次从最初的磕磕绊绊到现在基本能稳定产出核心就一句话把 AI 当成一个执行力很强但需要明确指令的搭档你负责想清楚要什么它负责快速做出来。剩下的就是不断迭代。
