Openclaw小龙虾0代码开发网站,实操踩坑教程

防止迷路，请点击上方蓝色字 AI陆的研习社 ->右上角三个点… -> 设为星标⭐

我们的口号是：

AI打工我躺平，周报它写我刷屏。方案它改我追星，功劳它攒我躺赢。

让我们普通人抓住AI的红利

最近我一直在折腾小龙虾，就想着让它帮我干活，我自己当个赛博奴隶主，哈哈

在上次文章里我不是说了嘛，我正在尝试让小龙虾自动写网站代码，结果碰到了小龙虾失忆的问题。

没想到这坑是一个接着一个，这段时间赛博奴隶主没当上，纯给AI擦屁股去了，搞得我文章都没时间写。

这不，最近刚从一个坑里爬出来，就赶紧写下来给同学们分享一下我的踩坑经验。

这次我碰到的是小龙虾没法自己调试自己写的网站代码的问题，对于有claude code使用经验的同学来说，这个事情有点不可思议。

有相关开发经验的同学可能会说，我自己安装在电脑上的小龙虾和claude code之类的工具，只要安装了playwright、chrome devtools之类的MCP，不就可以调试网页了？

这话没错，问题在于AI工具调用这类MCP的时候，它会自动打开浏览器进行代码调试。而我之前把小龙部署在一个没有图形界面的云服务器上，这也是大部分同学的小龙虾的运行环境。

这意味着就算我们把浏览器安装上去，浏览器也无法运行起来，也就没法调试代码了。

关于这个难题，我查阅了很多资料，然后我发现业界早就有针对这种情况的解决方案了，那就是使用“无头浏览器”。

“无头浏览器”这种东西在AI出现以前就存在了，它被广泛应用于爬虫和网页自动化测试领域。“无头浏览器”运行的时候不会出现我们常见的浏览器界面，也就不需要图形环境的支持。

然后我又惊喜地发现，playwright其实自带无头浏览器，这可真的是太妙了，直接给了成套的工具。

剩下的事情就比较简单了，把playwright的全套工具部署到服务器上就行了，立竿见影，问题直接解决。

这下子卡点解决了，小龙虾开发网页的工作流程也就基本跑通了。

接下来让我回到今天的标题内容，给同学们展示一下用小龙虾写网页的整个流程。

我们第一步要做的是和AI讨论，直接提出需求，让它给出实现的方案。

以下步骤的具体细节受不同大模型的影响，可能差别很大，但大致的流程和思路是通用的。

我的需求词是image background remover，我想根据这个开发一个网站，你认为我应该怎么做？

这次我运气比较好，也可能是我用的AI（Qwen3.5plus）比较给力，一下子就给出了基本让我满意的方案，只需要稍稍调整一下就行。

我选方案A，网站我想部署在cloudflare，不需要云存储，图片直接缓存在内存中即可，AI模型使用remove.bg API

方案我们自己审核一下，没有问题的话就可以进行下一步了，让AI写一份最小可行产品（Minimum Viable Product）文档，把具体的需求确定下来，让AI可以“按图施工”。

你先根据刚才我们讨论的结果，写一份MVP需求文档

由于我使用飞书和小龙虾进行交谈，所以AI会直接调用飞书的功能，把文档保存到了飞书上，我们可以直接点击链接查看该文档

文档比较长，我只截了一部分。

这部分如果有问题，我们可以回退到上一步，继续和AI讨论详细的设计方案。

接下来我们需要建立编程项目的专属目录，还要让AI检查一下当前的开发环境是否符合开发要求

我需要你帮我新建一个project目录，专门用来存放编程项目；然后新建一个imageBackgroundRemover目录，用来存放当前项目。然后我需要你帮我把当前项目推送到github上，检查一下当前的系统和openclaw，确定一下你需要学习什么skill，需要我为你提供什么协助和资源

关于创建github仓库，AI给出的步骤不能说不对，但是比较低效。其实AI可以直接通过工具在github建立仓库，因此我提出了相关要求。

这里我犯了一个安全上的小错误，大家也要小心，任何时候都不要让AI直接读取到账号密码，github有专门的github cli工具可以供AI调用。

GitHub CLI安装完毕后，AI会尝试调用该工具，中途会给出一个用于授权的链接，我们直接点击，进入手动授权流程

授权很简单，把红色框中的一次性代码填进去就可以

授权完成后，记得告知AI，让它进行下一步工作

小龙虾的内部提示词策略比较激进，所以它准备直接把网页推送到服务器上，问题是我们还没有对网页进行调试，怎么能直接就拿来用呢，我马上阻止了AI的这种行为。

关于小龙虾的行为模式，它的设计哲学是先干再想，对于简单的事务，这样子确实比较高效，但对于程序开发之类的复杂工作，这种行为模型就不太合适，同学们需要仔细把控。

AI给出了几个人工审核的办法

最简单的办法就是用选项1，直接把服务器上的web服务端口映射到本地，然后我们就可以在浏览器上用http://127.0.0.1:3000这个地址打开这个网页了。

好吧，不看不知道，一看吓一跳，页面虽然能够正常打开，但实在是太丑了

我估摸着大概是接入的qwen3.5plus审美有点问题，干脆帮它找了个对标网站，让它照抄别人的设计

https://removal.ai/

但是页面没有任何改变，图我就不重复放了

我怀疑AI出现了幻觉现象，又在胡说了，于是追问了一下，果然如此！！

到这一步为止，AI已经无法解决它面临的问题了，在当前系统环境下，AI没法看到网页运行的效果。

接下来我们需要安装playwright以及无头浏览器，给当前的小龙虾赋能。

步骤1：安装依赖包

我们先登录到小龙虾服务器上，然后输入这个指令

npx playwright install-deps

我的服务器是ubuntu系统，安装软件包需要输入密码授权，要注意的是，输入密码的时候，屏幕不会有任何显示和占位符，其它发行版的linux系统也是如此设计的，这点和windows系统很不一样

步骤2：配置环境变量

以下指令一条一条输入并执行

echo 'export DISPLAY=:99' >> ~/.bashrcecho 'export PLAYWRIGHT_HEADLESS=1' >> ~/.bashrcsource ~/.bashrc

步骤3：安装Playwright框架和浏览器

# 安装框架npm install --save-dev @playwright/test# 安装浏览器核心npx playwright install chrome firefox webkit

安装完后，我们可以直接用这个提示词让小龙虾测试一下是否安装成功

我已安装playwright，现在你需要用这个verify.js验证playwright是否安装成功，脚本内容如下：const { chromium } = require('playwright');(async () => {  // 启动Chromium（使用您设置的无头模式）  const browser = await chromium.launch({ headless: true });  const page = await browser.newPage();  // 访问测试页面  await page.goto('https://example.com');  // 验证页面标题  const title = await page.title();  console.log('✅ Playwright验证成功！当前标题:', title);  // 检查是否能获取页面内容  const content = await page.textContent('h1');  console.log('页面主标题:', content);  // 自动关闭浏览器  await browser.close();})();

步骤4：安装Playwright MCP

# 全局安装Playwright MCP服务器（推荐使用最新版）npm install -g @playwright/mcp@latest# 验证指令（查看版本）npx @playwright/mcp --version

安装成功的话，我们可以通过版本查看指令看到安装好的软件版本

步骤5：配置playwright MCP

这一步就可以当甩手掌柜了，直接让小龙虾替我们干

我已安装playwright MCP，现在需要你帮我配置并连接该MCP

最后测试一下，让小龙虾打开百度并截图给我们，如果成功的话，就说明刚才没有白忙活

请使用Playwright MCP打开百度并截图，并把图片发送给我核实

到此，Playwright MCP以及无头浏览器就部署成功了，接下来该让小龙虾继续帮我们调试网页

因为我研究Playwright的安装方法花了好几天时间，所以得先让小龙虾回忆一下之前的开发进度。

这里我需要提醒一下各位同学，如果你和我一样，在调试网页的中途去安装了Playwright，想要回到调试工作时，最好让AI回忆一下之前的工作。

如果同学发现自己的小龙虾把之前的干的活忘记了，那就得装记忆插件，具体可以参考这篇文章

明明昨天说的事，小龙虾扭头就忘！最简OpenClaw持久记忆配置攻略

回忆完成后，咱们继续

请继续完善前端页面，页面排版仿照https://removal.ai/，但用户注册和付费暂时不用做，你必须用playwright自行调试页面，直到它符合我提出的对标要求

这次，小龙虾终于能够看到自己写的网页了（之前写的惨不忍睹）

多亏了我们刚刚安装的playwright，AI终于能够看到自己写的一坨

经过好几轮的修改，终于把网页调试好了

这里还有个使用小龙虾的小技巧，同学们如果在过程中发现AI的低级错误，可以让它总结记录下来，放到小龙虾的长期记忆中

最后记得让小龙虾把写好的网页文件打包发送给我们，然后就可以发布网页了。

当然我们也可以让它自动帮我们发布到github或者cloudflare上，这个方法咱们下一期再探索。

最后总结一下，如果想要在没有图形界面的远程电脑上，用小龙虾开发网页，我们必须先部署playwright，让小龙虾能够通过它看到网页运行的效果。

开发网站的流程：讨论需求 （包括迭代需求）-> 撰写MVP文档 -> 创建工程目录 -> 根据MVP文档开发 -> 调试 -> 发布（手动或者让AI自动）

既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章，我们，下次再见。