周晓农最近一周我接了个很小的活儿：给一家本地企业做一个官网。传统做法当然是找设计师出图、切图、前端套模板，但客户预算不高、时间又紧，页面要求也简单——有首页、产品展示、关于我们、联系方式，能放视频和表单，电脑端浏览为主。这个量级的需求，让前端从零手撸HTML/CSS/JS，三五个工作日跑不掉。
所以这次我换了个思路：直接用OpenClaw（社区给它的中文昵称是"小龙虾"）的AI对话能力，让它一步步生成一套完整的HTML5企业静态电脑网站。结果比我预期顺利不少——从OpenClaw初始化完成算起，到本地预览确认页面效果，大约30分钟。整个过程我没有手写业务代码，属于很典型的零代码交付。这篇就把完整流程、提示词模板、部署路径以及中间踩过的几个坑全部摊开讲，想抄作业的直接照着做就行。
这里想先说明白一件事：用OpenClaw做网站，不是说AI能替代设计师，而是它能把"从零到有个能看的初版"这个环节压缩得极短。你要做的核心工作是清楚地告诉它"给谁看、什么行业、要哪些板块"，剩下的结构和细节它自己会补。这一点对中小企业的官网、活动页、产品落地页特别实用，预算有限又想要一个体面门面的场景，它几乎是为这种需求设计的。
1. 为什么我决定让"小龙虾"来写企业官网，而不是继续手撸HTML
1.1 传统做站流程的隐性成本
很多人觉得做一个企业静态站很简单，但真正跑过一遍流程的人都知道，花时间的从来不是HTML标签本身，而是各个环节的沟通和返工。找设计师出图要等排期，设计稿改两版基本一周没了；切图之后前端套页面，遇到响应式还要再调；等客户看到实际网页，经常又会冒出"这里LOGO再大一点""这个板块能不能换个顺序"这类修改需求。每一轮修改都是成本，对于一个总预算可能只有几千块的小项目来说，利润就是这么被磨掉的。
而且小企业官网大多功能单薄，没有什么复杂交互，用现成CMS或者页面搭建器又往往带着平台限制和强制性广告，最后交付给客户的是一套自己都说不清楚怎么维护的"黑盒"。对比之下，一个由AI对话生成的纯静态HTML5网站，结构透明、文件都在自己手里、改哪里直接改代码或者继续对话让AI改，后续维护成本低得多。我在这次项目里最大的感受是：不是AI多聪明，而是它把最容易被反复消耗的"初稿环节"变得几乎零成本，后面所有沟通都建立在看得见的实物上，效率完全不一样。
1.2 OpenClaw这类AI智能体跟普通聊天AI差在哪
光看名字容易混淆，OpenClaw不是另一个网页聊天窗口。我第一次用的时候也以为它就是套了个壳的AI对话工具，打开Control UI之后一通聊，让它"帮我写个网站"，结果发现它不止是回复文字，而是真的在本地创建了项目目录、写入了多个HTML/CSS/JS文件，甚至会把生成过程中的日志一条条列出来。
这是它和普通聊天AI最本质的区别：普通聊天AI的输出止步于对话框，你需要自己复制代码、自己建文件、自己整理目录结构；OpenClaw这类智能体能直接操控运行环境，把对话意图转化为文件操作、命令执行、工具调用。你可以让它"把产品图放到images目录下""检查一下index.html有没有语法错误""把CSS合并压缩",它是一个能落地的执行者，而不只是一个会说话的文档。
另外它的"小龙虾"昵称就来自Claw这个词，形象一点说，是长了一对钳子的AI——不仅能想，还能动手干。实际用下来，这种"能动手"的特性在做网站这种多文件、多轮修改的任务时特别重要：我不用管文件怎么组织，不用管依赖怎么声明，只需要在对话里描述需求，它在后台把杂活干完了。
1.3 什么样的网站适合用对话生成
也不是所有网站都适合让AI对话来搞，我自己试下来，边界感要清楚。目前最合适的，就是企业展示型静态站：品牌官网、产品介绍页、团队介绍、新闻列表、联系方式、落地页，这些页面基本没有后端逻辑，纯HTML5加少量JavaScript就能搞定，数据不涉及实时读写，AI生成的内容质量足够直接使用。
反过来，如果你要做电商交易、用户登录、后台管理系统，或者需要频繁增删改查的动态网站，现阶段纯靠对话生成就不太靠谱。因为这些场景涉及数据库设计、权限体系、接口安全，需要的是严谨的系统架构，而不是页面堆叠。我这边建议是：把OpenClaw当"静态站生成器加前端搭手"来用，动态部分仍然用传统技术栈来实现，两者各干各擅长的，效率最高。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 半小时跑通OpenClaw环境：Windows、Mac、服务器三条路
2.1 Windows安装：PowerShell一键脚本和它的前置条件
Windows上装OpenClaw最省事的方式是PowerShell一键脚本，我是这么操作的：先确认系统装了Node.js LTS版本，然后以管理员身份打开PowerShell，执行官方安装脚本。我第一次安装时就踩了坑，脚本跑完启动OpenClaw，直接报了一个"oneclaw node runtime not found"，翻译过来就是找不到Node运行时。
当时我还在想，明明刚装完Node，怎么会找不到？检查了一圈发现，问题出在我用的是一个便携版Node，它的路径没有写进系统PATH。OpenClaw启动时是去PATH里找node命令的，找不到就直接罢工。解决方法是重新安装官方Node.js安装包，安装时勾选自动加入PATH，装完重开一个终端窗口，再启动OpenClaw就正常了。技术上没什么难度，但这个前置条件最容易忽略，建议先跑一下node -v确认能输出版本号再装OpenClaw。
另外安装脚本可能会有网络拉取失败的情况，因为安装过程要下载运行时文件和依赖包。如果卡在下载阶段，可以先把安装脚本下载到本地，手动跑一遍，或者配置好公司的代理镜像。这不算OpenClaw本身的问题，是基础软件源的问题。
2.2 Mac mini/服务器用Docker部署
如果你用的是Mac mini、云服务器，或者单纯不想让本机环境变得太乱，Docker是更干净的方式。OpenClaw官方提供容器镜像，启动命令大概长这样：
bash复制docker run -d \
--name openclaw \
-v /path/to/openclaw-data:/root/.openclaw \
-p 3000:3000 \
openclaw/openclaw:latest
注意-v后面的路径映射，这是把容器里的配置目录挂载到宿主机，方便备份和迁移。我个人的建议是无论如何都要挂出来，不然后续想升级容器、想备份记忆数据，会发现数据全丢在容器里，迁移起来很痛苦。第一次启动后看日志，确认Control UI监听在哪个端口，然后浏览器访问http://localhost:3000就能进入操作界面。
在云服务器上部署时，记得在安全组里放行对应端口，不然外部访问不到。如果只想本机用，就绑定127.0.0.1，没必要暴露公网。
2.3 初始化与模型接入：onboard配置
无论哪种方式装好，第一次启动都会进入onboard初始化流程。这个环节核心是配置模型供应商和API Key。OpenClaw本身不内置大模型，它需要一个外部的模型接口来提供对话推理能力，你可以在onboard里选择已有的模型供应商，也可以填一个兼容OpenAI格式的自定义接口。
我这里用国产模型举例，配置项大概有这几个：接口地址（Base URL）、API Key、模型名称（Model ID）。很多人第一次就在模型名称这里卡住，比如你在供应商后台看到的是deepseek-chat，配置时顺手填了个deepseek，结果启动后一对话就报错说unknown model: deepseek。模型ID必须和供应商官方文档里的完全一致，大小写都不能错。初始化完成后，OpenClaw会把配置写入~/.openclaw目录，后面改模型可以直接改配置文件，也可以重新跑onboard。
这里提醒一句：API Key相当于你的账号密码，OpenClaw配置是存在本地的，不要把它粘到对话里让AI帮你"记住"，也不要把包含Key的配置文件发给别人。我在本地目录里专门放了一个.env文件管理这些密钥，养成好习惯能省很多麻烦。
2.4 多模型切换的正确姿势
OpenClaw支持配置多个模型，并在对话中随时切换，这个功能在实际干活的时候很有用。比如生成网站初稿时，我用的是速度和性价比优先的模型，因为量大、要求不高，快模型够用；等到做细节调试、修复杂的JavaScript逻辑时，再切到更强的模型，准确率更高，省得来回返工。
切换方式有两种：一种是在Control UI的界面上直接选，另一种是通过对话命令告诉它"切换模型到xxx"。多模型配置在初始化时就能加，也可以后期在配置文件里追加。我的建议是至少保留两个模型：一个快的跑量、一个强的攻坚，这样30分钟做站的时间预算才够从容。
3. 从一段对话到完整企业站：我用的提示词模板和提问节奏
3.1 写提示词的核心：把"设计需求"翻译成"机器可执行的结构"
很多人用AI生成网站，上来就一句"帮我做个官网"，结果得到的东西基本不能看。原因很简单：无论是OpenClaw还是其他大模型，它不知道你的客户是做什么的、给谁看、喜欢什么风格、要放哪些内容。AI不是读心术，它只能从你的描述里提取信息。
我的经验是，把提示词当成一份"设计Brief"来写，至少包含五个要素：行业、受众、页面模块、视觉方向、技术约束。不需要很长的字数，但关键信息要明确。比如"现代服务业的律师事务所官网，访客是想找律师的企业客户，需要传递专业、可靠的感觉，首页要包含律所介绍、核心业务、律师团队、联系方式，技术栈用纯HTML5+CSS+JS，不要框架"——这一句话，AI就能判断出大致的布局方向、配色感觉和内容疏密度。
3.2 第一轮对话：生成首页骨架（附完整提示词模板）
下面这个提示词是我这次项目实际用的，稍微改了改脱敏放出来，可以直接复制使用：
code复制我要做一个企业官网，行业是工业自动化设备制造，访客是采购经理和工厂负责人。
请用HTML5+CSS+JavaScript生成一个完整的首页，要求：
1. 技术约束：不使用任何前端框架，纯静态页面，文件输出到site/目录；
2. 单页结构：顶部固定导航、Banner区、核心产品三栏卡片、数据指标区、客户案例区、底部联系信息；
3. 视觉方向：蓝色主色调，体现科技感和工业感，正文用系统字体栈，整体留白充足；
4. 响应式：桌面端优先，但也兼容平板和手机，移动端导航收起为汉堡菜单；
5. 所有图片先用CSS渐变占位，等真图出来再替换；
6. 分别生成index.html、css/style.css、js/main.js三个文件。
第一次对话建议只让它做首页，贪多嚼不烂。这轮跑完，你已经有了一个单页网站的完整骨架，浏览器打开就能看到效果。这一轮大概是整个过程中耗时最长的，可能10到15分钟，因为OpenClaw要创建目录、写多个文件，中间还会根据你的描述做一些视觉上的取舍。
3.3 第二轮对话：补齐内页与表单
首页确认没问题之后，再进行第二轮对话，目标是补齐内页。我会直接告诉它：
code复制网站已经有首页了，现在继续在site/目录下生成以下页面：
1. products.html：产品中心，以卡片形式展示6个产品，点击卡片弹出产品详情弹窗；
2. about.html：公司介绍，包含发展历程时间轴和资质荣誉；
3. contact.html：联系页面，包含地图占位、联系电话、在线留言表单。
所有页面的导航和底部要与首页保持一致，新页面链接要能互相跳转。
这一轮的关键是"与首页保持一致"，否则AI会重新发挥一套风格，导致网站看起来像两拨人做的。OpenClaw有能力读取已有文件，所以它能参考首页的样式来生成新页面。表单这里我建议做得简单点，纯前端提交可以用mailto:或第三方表单服务，企业站够用了。
3.4 第三轮对话：视觉细节和响应式修补
内页全部生成之后，就到了收尾的打磨轮。这轮我通常会提这些修改：
code复制整体检查一下site/目录下的所有页面，做几件事：
1. 首页Banner区的高度在1920x1080屏幕下显得太空，压缩到原来的80%；
2. 产品卡片的hover效果加一个轻微的阴影上浮动画；
3. 导航栏在滚动超过100px时加背景色和阴影；
4. 给所有页面补上完整的title和meta description；
5. 检查一遍移动端布局，确保没有横向滚动条。
不要一次只改一个点就发一轮，把同类型的修改合并成一批，效率会高很多，也不容易让AI疲劳出错。到这一步，一个能见人的企业站基本就成型了。
3.5 提问节奏：一次只交代一件事
跟AI协作网站项目，最忌讳的就是在一条对话里堆十几个需求。"加个轮播图、改个颜色、顺便把那个弹窗逻辑修了、字体再大一点"—这种话术连人听了都头大，AI也会理解混乱。实际操作中，一次对话只围绕一个任务，比如"本轮只处理响应式布局问题"，任务结束了再说下一个。
我还会在每次换任务前简单总结一下目标："刚才首页已完成，下一步我们处理产品页，要求如下……"这种节奏控制能让AI的注意力更集中，生成质量明显稳定。OpenClaw有上下文窗口限制，越长越容易丢信息，所以我会把任务拆成小块快进快出，反正每轮对话成本很低。
4. 生成完不等于做完：本地预览、文件体检、迭代修改
4.1 生成的项目文件长什么样
对话结束之后，你会得到一套结构和传统手工开发几乎无差别的文件目录：
code复制site/
├── index.html
├── products.html
├── about.html
├── contact.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/（通常是占位）
这个结构一眼就能看懂，没有任何框架依赖，浏览器开箱即用。我可以负责任地说，对于"一次性的公司官网"这种需求，这种简单目录反而是最大的优点——你不需要懂前端构建工具，不需要跑npm install，拿到手就是能跑的页面。如果客户想找别的供应商维护，随便一个会点前端的人都能接手。
4.2 本地预览的三种方式
生成完成后第一件事是在本地浏览器里看效果，这里推荐按优先级选：
- 直接用VS Code的Live Server插件启动一个本地开发服务器，右键HTML文件选"Open with Live Server"，页面会自动在浏览器打开，改代码还能热刷新；
- 如果不想装插件，在
site/目录下跑python -m http.server 8080，然后访问http://localhost:8080； - 最省事的是直接双击HTML文件用浏览器打开，但这种方式我要泼盆冷水：它在处理
fetch请求和某些模块化脚本时会有跨域限制，企业站如果用了JavaScript动态加载数据，双击打开可能会直接报错，让你误以为是AI生成的代码有问题。
我个人的标准流程是：先双击看看基础效果，再用Live Server做正式的检查。双击能过，说明代码很干净；双击出了错也没关系，用HTTP服务跑一遍八成就是好的。
4.3 让AI改稿的对话技巧
预览过程中发现问题，记下来统一交给AI修改，但提问方式有讲究。错误的说法是："页面有点丑，帮我改好看点。"这种主观描述AI没法量化执行，它只会象征性换个颜色，结果你更不满意。正确的说法应该像这样：
code复制index.html的Banner区域，h1标题字号在桌面端是48px，我想改成64px，同时把背景渐变的两个颜色从#1a1a2e和#16213e换成#0f172a和#1e3a8a，按钮间距上下增加8px。
具体的数字、颜色值、文件路径都给出来，AI才能精准执行。不要嫌这些说得太细，这是在把你的审美翻译成它能执行的指令。如果有视觉调整不好描述的，也可以截个图发给它描述图片内容，但纯文本的精确指令依然是最高效的。
4.4 移动端适配与HTML5视频的浏览器兼容细节
企业站经常会放宣传视频，这里有一个很多人忽略的坑：不同浏览器对HTML5播放器的支持程度不一样。视频文件本身建议提供MP4格式，编码用H.264+AAC，这个组合在桌面端的浏览器里兼容性最好；WebM格式虽然体积更小，但在部分旧版Safari上可能会黑屏。
自动播放更是一个需要小心的地方，浏览器普遍限制带声音的视频自动播放，代码里要写成muted autoplay loop playsinline，先静音再自动播放才不会被拦下来。还有，尽量给<video>标签加一个controls属性和一个poster封面图，避免首屏加载时出现一大块黑色区域。这些细节AI生成代码时往往会简化处理，你就得在对话里主动提一句"视频标签要兼容，包含muted、playsinline、poster"。
移动端适配也建议在预览时用浏览器开发者工具的响应式模式逐页过一遍，重点看导航折叠是否正常、表格和图片有没有撑破容器。OpenClaw生成的页面基本会带基础的响应式样式，但不同模型生成的细节程度差距很大，检查这一步不能省。
5. 交付与上线：静态站部署的轻量路径
5.1 静态站为什么适合这种快速交付
如果你做过需要服务器和数据库的网站，就会知道部署是件多麻烦的事：买服务器、配环境、开数据库、处理安全问题。而静态网站的全部内容就是一堆HTML/CSS/JS文件，任何能托管静态文件的地方都能运行，这带来三个直接好处：打开速度快，因为不需要服务端渲染和数据库查询；安全性高，没有可以被注入的后端逻辑；托管成本极低，甚至免费。
对于AI生成的这类企业站，静态部署是天然匹配的。你不需要在客户服务器上安装任何运行时，把文件往上一传，域名解析一配，网站就上线了。
5.2 四条部署路径横向对比
根据客户的不同情况，我整理了四条部署路径，各有适用场景：
| 部署方式 | 适合场景 | 成本 | 上手难度 | HTTPS |
|---|---|---|---|---|
| GitHub Pages | 轻量演示、个人项目 | 免费 | 低 | 自动 |
| Netlify / Vercel | 快速交付、想要预览分支 | 有免费额度 | 低 | 自动 |
| 云服务器 + Nginx | 企业正式站、已有服务器 | 服务器费用 | 中 | Let's Encrypt 免费证书 |
| 对象存储 + CDN | 高并发、大流量场景 | 按量付费 | 中 | 可配置免费证书 |
对大多数小企业官网，我推荐用Netlify或GitHub Pages，几分钟就能上线，还能自动签发HTTPS证书。把site/目录整个拖到Netlify的部署页面上，等它跑完，你就能拿到一个HTTPS的线上地址，整个过程可能只有两分钟。如果客户已经有云服务器，那就把文件用Nginx直接托管，配置思路很简单：
nginx复制server {
listen 80;
server_name example.com;
root /var/www/site;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
这个配置的核心是try_files规则，它保证用户访问/about这样的路径时，Nginx能找到对应的about.html文件，而不是报404。
5.3 域名、HTTPS与上线前的最后一轮检查
绑定域名通常就是加一条CNAME或A记录，然后到托管平台后台填上去，等待解析生效。HTTPS在Netlify这类平台上是自动的，在云服务器上可以用Let's Encrypt的免费证书，也可以使用云平台提供的免费证书服务，完全不需要为了一个小企业站去买昂贵的证书。
上线前我习惯做一次最终检查，清单包括：所有页面title和meta description是否补全、导航和页脚的联系方式是否正确、视频是否都能播放、表单提交是否配置成功、图片占位有没有被替换。这轮检查建议对照手机端再扫一遍，很多客户就是拿手机打开网站看的。
6. 我实际踩过的坑：Control UI打不开、模型报错、文件删除失败
6.1 Control UI did not start的排查链路
控制台打不开是OpenClaw新手最容易遇到的第一个问题。首次安装完成，终端显示服务启动了，但浏览器访问页面转圈或直接提示"Control UI did not start"，这时候不要慌，按顺序排查：
第一步看启动日志。终端里通常会有完整的日志输出，如果只有一行简单的报错，用--verbose参数重新启动，会看到更详细的错误信息。第二步检查端口占用。OpenClaw默认监听某个本地端口，这个端口可能被其他程序占了，在命令行执行端口查看命令，比如Windows下netstat -ano | findstr :3000，如果发现有PID占用，结束那个进程再重启OpenClaw。第三步确认访问地址。如果用了Docker部署，记得访问的是宿主机映射的端口，而不是容器内部端口；云服务器还要检查安全组是否放行。第四步用无痕窗口访问，排除浏览器缓存或插件干扰。
按这个链路走，80%的问题能在五分钟内定位。我遇到的一次其实就是日志里写了"端口被占用"，但我一开始没看日志，白折腾了好一会儿。
6.2 "agent failed before producing a reply"与"unknown model"
这个报错有两种常见原因。一种是"unknown model: xxx"，意思是模型ID写错了。模型ID是一个严格的标识符，它不像人类语言可以模糊理解，多一个字母少一个横杠都不行。比如某个模型在供应商文档里叫deepseek-chat，你就必须一字不差填这个，填deepseek就会报错。处理方式很简单：打开供应商控制台，把模型名称完整复制过来，粘贴到OpenClaw配置里。
另一种情况是API Key配置正确但请求仍然失败，这通常和权限、余额、接口地址有关。比如接口地址多了一个斜杠、API Key少了前缀、或者账号没有调用这个模型的权限，都会让请求在产生回复之前就中断。排查时把配置逐项和供应商文档核对一遍，基本能找到问题。经验法则：任何"agent failed before reply"的报错，都先检查模型三件套——接口地址、API Key、模型ID，而不是去改代码。
6.3 删除.openclaw目录时EBUSY
有一次我为了彻底重置配置，想把~/.openclaw整个目录删掉重来，结果Windows直接报错：EBUSY: resource busy or locked, unlink，翻译过来就是目录被某个进程锁住了。这是因为OpenClaw的服务进程还活着，占用了里面的日志文件和配置锁。
解决思路是先把OpenClaw完全退出：关闭Control UI所在的浏览器标签、停掉终端里运行的进程，如果有托盘图标也要退出。然后打开任务管理器，把残留的node进程结束掉。如果还不行，检查一下本地是不是开着OneDrive之类的同步盘，它会把目录锁住，暂停同步再删除就顺了。这个坑不深，但碰到的时候挺烦，尤其是你急着重新初始化环境的时候。
6.4 文档读取失败的三种投喂方式
OpenClaw读取不了文档，通常不是它能力不够，而是你的资料没给到位。我第一次让它参考公司介绍PPT生成官网文案时，直接把一个.pptx文件拖进对话，它说读不了。后来我摸出三种靠谱的方式：
第一种是路径投喂。把文档放到OpenClaw的工作目录下，然后在对话里告诉它"请参考workspace里的company_intro.docx内容"，它能直接读取并提取信息。第二种是内容粘贴。如果文档不大，直接把核心文字复制进对话，这种方式最稳定。第三种是Skill封装。OpenClaw支持自定义Skill，你可以写一个专门读取某种文件格式并提取文本的Skill，以后遇到类似文档直接调用，一次配置长期复用。
6.5 Active Memory：把品牌偏好沉淀下来，下次不用重复说
这也是OpenClaw一个很有意思的能力：Active Memory，长期工作记忆。我以前每次开新项目都要重新告诉AI"客户主色是什么、域名是什么、导航要几个栏目"，后来发现可以把这些信息写进记忆里，OpenClaw会在后续对话中自动调用。
我用它沉淀三类信息：客户品牌的视觉规范，比如主色、辅助色、字体偏好；项目的技术约束，比如"所有页面必须纯静态、不引入框架"；以及交付要求，比如"生成完成后要自动检查页面间链接是否有效"。这样一来，再开一个类似的企业网站项目，开头只需要一句"基于现有记忆，给新的客户生成一个官网"，它能直接推荐出与之前项目一致的风格框架，省掉了大量重复沟通成本。长期用下来，OpenClaw会越来越懂你的干活习惯，这才是它比临时用聊天AI生成几个页面更值钱的地方。
最后说点实在的。OpenClaw（小龙虾）这类工具目前最舒服的用法，不是让人完全不用动脑，而是把重复性最高的"从零搭一个能看的静态站"这一步压缩到半小时内。我个人体会是：提示词里写清楚"给谁看、什么行业、什么风格、要哪些模块"，AI产出的东西远比一句"帮我做个官网"要靠谱；生成之后的本地预览和改稿环节，才是真正拉开体验差距的地方。如果你想提高效率，建议从第一次对话就保留会话记录，下次改版本直接说"基于上次的项目，把主色换成……"，整个流程的复用成本会低到让你上瘾。