1. 从零到上线一个纯AI制作官网的完整复盘先说说这个项目的来龙去脉。前段时间我需要给一个叫《钢铁洪流》的项目做一个官网时间紧、预算少、要求还不低——要能看、要能跑、要能直接部署上线。手头没有前端团队也没有现成的模板能直接套于是我决定全程用AI来完成主力工具是Opus5配合Claude系列模型部署走Cloudflare Pages。从写第一行提示词到网站正式可访问前后大概花了两个晚上。这篇文章就是把这整个过程拆开揉碎讲清楚包括我怎么选工具、怎么设计提示词、怎么处理AI生成的代码、怎么部署、踩了哪些坑以及如果你也想走这条路有哪些地方可以少走弯路。这篇文章适合几类人看一是想快速搭一个静态官网但没有前端基础的朋友二是已经在用AI写代码、但还没跑通生成到部署完整链路的人三是对AI辅助开发感兴趣、想看看实际效果到底怎么样的从业者。我不会只讲AI很厉害这种空话而是把每一步的操作、参数、判断依据都摆出来你能直接照着做。核心关键词先摆在这Opus5、AI生成网站、Claude、Cloudflare Pages、AI编程。这几个词贯穿全文后面每个环节都会围绕它们展开。2. 为什么选这套技术栈工具选型背后的逻辑2.1 模型选择为什么是Opus5而不是别的市面上能写代码的模型不少我最终选Opus5作为主力原因很实际。第一是长上下文理解能力一个官网涉及HTML结构、CSS样式、JavaScript交互三大部分如果模型记不住前面写的东西后面就会自相矛盾。Opus5在处理这种跨文件、跨模块的连贯性上表现明显更稳。第二是代码风格的一致性我试过用其他模型生成同一个页面里命名风格能混三种改起来比重写还累。第三是对模糊需求的还原度我给的提示词并不是逐行规格说明而是偏描述性的Opus5能比较准确地猜到我要的视觉效果。这里要说明一点模型选择没有绝对标准我选Opus5是基于这个项目的具体需求。如果你做的是纯后端逻辑可能另一个模型更合适如果你要的是极简落地页轻量模型也够用。关键是先明确你的项目复杂度再匹配模型能力别一上来就上最重的。2.2 部署方案Cloudflare Pages为什么比传统方案省事部署这块我对比过几种方案。传统做法是买服务器、配环境、传文件、配域名解析一套下来没半天搞不定还得处理证书、缓存这些琐事。Cloudflare Pages的优势在于它把静态托管这件事做到了极简你只需要把代码推到Git仓库或者直接上传构建产物它自动帮你处理CDN分发、HTTPS证书、自定义域名绑定。对于官网这种纯静态内容完全够用而且免费额度对个人项目来说绰绰有余。我实测下来从代码写完到线上可访问Cloudflare Pages这条链路大概十分钟就能跑通。相比之下如果走传统虚拟主机光是等DNS生效就可能要几小时。当然如果你的官网需要服务端渲染或者数据库交互那Pages就不合适了得换别的方案。但对于《钢铁洪流》这种展示型官网Pages是最优解。2.3 工作流设计AI生成加人工把关的配合方式整个工作流我设计成三段AI生成初稿、人工审查调整、部署上线。这里的关键是不要指望AI一次生成完美代码也不要自己从头改到尾。我的做法是让AI先生成一个能跑起来的完整版本然后我逐块检查发现问题就针对性地让AI改那一块而不是让它重写整个文件。这样既保留了AI的效率又保证了最终质量可控。具体来说我会把页面拆成几个独立模块导航栏、首屏展示区、内容区块、页脚。每个模块单独生成、单独验证最后再拼起来。这样做的好处是某个模块出问题不会影响其他部分排查起来也快。这个思路在后面实操部分会详细展开。3. 提示词工程怎么让AI一次生成可用的代码3.1 提示词的结构化写法很多人用AI写代码效果不好问题往往出在提示词太随意。我总结了一个结构实测下来生成质量明显提升角色设定 项目背景 技术要求 输出格式 约束条件。这五块缺一不可。拿《钢铁洪流》官网的首屏举例我的提示词大概是这样组织的先告诉模型你是一个资深前端工程师擅长做游戏/军事题材的视觉页面这是角色设定然后说明这是一个叫《钢铁洪流》的项目官网风格要硬朗、有力量感主色调偏暗这是项目背景接着提技术要求用纯HTMLCSS原生JS不引入任何框架响应式适配移动端这是技术要求再指定输出完整的单文件HTMLCSS写在style标签里这是输出格式最后加约束不要用外部图片链接用CSS渐变和几何图形做视觉元素这是约束条件。这套结构的好处是模型不会自由发挥跑偏生成的东西基本能直接用。我试过不加约束条件结果模型给我塞了一堆外链图片和字体部署后加载慢还容易挂。3.2 关键参数的传递技巧提示词里有些参数必须明确传递否则AI会按默认值来出来的效果可能完全不是你要的。我整理了一个必传参数清单参数类型说明示例配色方案主色、辅色、背景色主色深灰#1a1a1a强调色橙红#e63946字体风格字体族和字重无衬线标题700正文400布局方式栅格或弹性布局12列栅格移动端单列交互效果悬停、滚动动画按钮悬停变色区块滚动淡入适配断点响应式断点768px、1024px、1440px把这些参数写进提示词AI生成的代码基本不需要大改。我踩过的坑是一开始只说了要响应式结果AI给的断点设置很随意移动端显示错位后来明确指定断点值才解决。3.3 迭代式生成不要一次要太多这是我最想强调的一点不要试图用一条提示词生成整个网站。我一开始就是这么干的结果AI生成的代码又长又乱改都没法改。后来改成迭代式每次只生成一个模块生成完立刻在浏览器里看效果满意了再生成下一个。迭代式生成的另一个好处是你可以在后续提示词里引用前面生成的内容。比如生成完导航栏后下一个提示词可以说参考上面导航栏的配色和字体生成首屏展示区这样风格自然统一。如果一次性生成模型很难保证各模块风格一致。4. 实操全流程从空白文件到线上可访问4.1 环境准备与工具清单开始之前你需要准备这些东西一个能访问AI模型的账号我用的是Claude系列Opus5作为主力、一个代码编辑器VS Code就够、一个Git仓库账号GitHub或Gitee都行、一个Cloudflare账号。这些全部免费不需要绑卡。这里插一句关于Cloudflare Pages是否需要绑卡的问题我实测下来纯静态托管是不需要的免费额度完全够个人官网用。只有当你用到某些高级功能时才可能需要升级。所以放心用别被一些说法吓到。工具装好后建一个空文件夹里面放一个index.html这就是你的起点。不需要npm、不需要构建工具纯静态项目就是这么简单。4.2 生成导航栏与首屏第一个提示词我用来生成导航栏。具体内容如下你是一个资深前端工程师。请为一个叫《钢铁洪流》的项目官网生成导航栏。 要求 - 纯HTMLCSS不用框架 - 左侧是项目名称右侧是导航链接首页、介绍、特色、联系 - 深色背景文字浅色悬停时链接变橙红色 - 移动端折叠成汉堡菜单 - 输出完整代码CSS写在style标签内生成后我直接在浏览器打开看发现汉堡菜单的交互逻辑有点问题点击没反应。我把问题描述给AI它很快给出了修正版。这里的心得是AI生成的交互代码一定要实测尤其是JS部分看起来对不代表跑起来对。首屏展示区我用类似的提示词生成重点强调视觉冲击力。我让AI用CSS渐变做了一个类似钢铁质感的背景加上大标题和一句标语整体效果比我预期的好。这里有个技巧如果你对视觉效果有具体想法可以用参考某某风格来描述比如参考军事题材游戏的加载页风格AI能比较准确地还原。4.3 内容区块与页脚的处理内容区块我拆成了三块项目介绍、特色展示、联系方式。每块单独生成生成时都带上参考前面已生成部分的配色和字体这句话保证风格统一。特色展示那块我让AI做了卡片式布局每张卡片有图标、标题、描述。图标我没用图片而是让AI用CSS画了简单的几何图形这样加载快、不依赖外部资源。这个做法强烈推荐尤其是官网这种对加载速度有要求的场景。页脚相对简单就是版权信息和几个链接。但这里有个细节要注意页脚的年份最好用JS动态获取而不是写死。我让AI加了这段逻辑这样以后不用每年手动改。4.4 本地验证与细节打磨所有模块生成完后我在本地做了完整验证。验证清单包括桌面端和移动端显示是否正常、所有链接是否可点、悬停效果是否生效、滚动是否流畅、有没有控制台报错。这一步不能省我就是在这一步发现移动端某个区块溢出的问题及时让AI修了。打磨阶段我做了几件事调整了区块间距让页面呼吸感更好统一了按钮样式之前不同模块生成的按钮略有差异加了滚动淡入动画让页面更有层次。这些调整都是通过针对性提示词让AI完成的没有手写代码。5. 部署上线Cloudflare Pages实操步骤5.1 代码推送到Git仓库部署第一步是把代码推到Git仓库。我在项目文件夹里初始化了Git提交了所有文件然后推送到GitHub的一个新仓库。这一步没什么技术含量但要注意仓库里不要放敏感信息虽然静态官网一般没有但养成习惯总是好的。推送完成后你的代码就在云端了接下来Cloudflare Pages会从这个仓库拉取代码进行部署。5.2 Cloudflare Pages配置详解登录Cloudflare后进入Pages服务选择连接到Git授权后选中你刚才推送的仓库。配置项有几个关键点构建命令纯静态项目留空即可因为不需要构建输出目录填根目录或者你放index.html的目录环境变量静态项目不需要配置完成后点部署Cloudflare会自动拉取代码并发布。第一次部署大概一两分钟完成后会给你一个xxx.pages.dev的临时域名可以直接访问。这里有个实测经验如果部署后页面样式丢失大概率是路径问题。检查一下CSS和JS的引用路径是不是用了绝对路径改成相对路径就好了。我第一次部署就遇到这个问题排查了十分钟才想起来。5.3 自定义域名绑定临时域名能用但官网总得有个正式域名。在Pages项目设置里找到自定义域添加你的域名然后按提示在域名DNS里加一条CNAME记录指向Pages提供的地址。等DNS生效后HTTPS证书Cloudflare会自动签发不需要你手动配置。整个过程我实测下来从添加域名到能正常访问大概花了十几分钟主要是等DNS生效。这里提醒一句域名解析生效时间因服务商而异有的几分钟有的可能要几小时耐心等就行不是配置错了。6. 踩坑实录与常见问题排查6.1 AI生成代码的典型问题用AI生成代码我遇到最多的问题有这么几类。第一类是样式冲突不同模块生成的CSS类名重复导致样式互相覆盖。解决办法是生成时要求AI给类名加模块前缀比如导航栏用nav-开头首屏用hero-开头。第二类是JS逻辑不完整比如汉堡菜单只写了展开没写收起这种必须实测才能发现。第三类是响应式断点不一致有的模块用768px有的用800px导致某些尺寸下显示错乱统一断点值就能解决。下面这张表是我整理的高频问题速查问题现象可能原因解决方法页面样式全丢资源路径错误改用相对路径移动端布局错乱断点不统一统一断点值交互无反应JS逻辑缺失让AI补全逻辑部署后404输出目录配置错检查Pages配置加载缓慢引用了外部资源改用CSS实现视觉6.2 部署环节的坑部署环节我踩的坑主要是路径和缓存两个。路径问题前面说了缓存问题是这样的你更新了代码重新部署但浏览器还是显示旧版本。这是因为浏览器缓存了旧文件。解决办法是在Cloudflare Pages里清除缓存或者给资源文件加版本号。我后来养成的习惯是每次更新后强制刷新浏览器CtrlShiftR确认效果。还有一个坑是大小写敏感。本地Windows系统文件名不区分大小写但部署到Linux环境后区分。我有一次把Index.html写成大写本地能跑部署后404。这个坑很隐蔽建议统一用小写文件名。6.3 独家避坑心得分享几个文档里不会写的经验。第一生成代码时让AI加注释尤其是JS部分这样你排查问题时能快速定位。第二保留每个模块的生成记录万一改坏了可以回退到之前的版本。第三部署前在本地用不同浏览器测一遍我遇到过某个效果在Chrome正常但在其他浏览器异常的情况。第四不要频繁重新生成整个文件改哪块让AI改哪块避免引入新问题。7. 后续扩展与个人体会这个官网目前已经稳定运行后续我还打算做几件事。一是加一个简单的博客模块用Markdown写内容AI辅助生成页面二是接入访问统计看看哪些内容受欢迎三是优化加载速度把CSS和JS做一下压缩。这些都可以继续用AI来完成思路和这次一样。最后分享一个我在这个项目里体会最深的点AI不是替代你思考而是放大你的执行力。整个过程中判断用什么工具、怎么设计提示词、怎么验证结果、怎么排查问题这些都需要人来决策。AI负责的是把想法快速变成可运行的代码省掉的是重复劳动不是判断力。所以别指望扔一句话就出来一个完美网站但也别低估了这套工作流的效率——我两个晚上做完的事传统方式可能要一周。如果你也想试试建议从一个最简单的落地页开始跑通生成、验证、部署这个完整链路再逐步加复杂度。跑通一次之后后面就是复制经验的事了。