用 OpenClaw + Qwen3.7-Plus 造一个网站开发智能体：从人设定义到差异化竞争

关注

原创最新推荐文章于 2026-11-11 13:43:26 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

OpenClaw 完整部署教程（双方案 + 混合模型）对比项方案一（原生直装）方案二（WSL2）安装难度⭐⭐⭐⭐⭐稳定性⭐⭐⭐⭐⭐⭐⭐systemd 服务支持❌✅插件兼容性部分问题完整支持开机自启需手动创建计划任务systemd 自动管理推荐场景快速体验、尝鲜生产使用、长期运行最终建议新手/长期使用：选择方案二（WSL2）只是想试试：可选择方案一，遇到问题再切回 WSL2遇到任何问题：第一个命令永远是祝部署顺利！如有问题，可通过查看日志进行排查。阅读详情

你有没有想过，让 AI 像一个有 10 年经验的全栈工程师一样，帮你审计网站、发现问题、执行修复、甚至学习竞品做差异化？我用 OpenClaw 框架 + Qwen3.7-Plus 大模型，花了一下午时间，造出了这样一个"网站匠人"智能体。这篇文章，把我踩过的坑、总结的提示词模板，全部摊开给你看。

文章目录

0. 背景：为什么需要网站开发智能体？

我的个人网站 GlimmerAI 搭到现在，HTML/CSS/JS 文件加起来几百个，功能越堆越多，问题也越攒越多：

暗色模式导航栏颜色不对，但每次都要手动检查才能发现
移动端偶尔出现横向滚动条，不知道哪个元素溢出了
想加个搜索功能，但每次都要从头写 HTML/CSS/JS
看到竞品网站有个酷炫的交互，想借鉴但不知道怎么描述给 AI

这些问题，单独拎出来都不难，但频率高、重复性强。我就想：能不能训练一个 AI，让它像一个靠谱的全栈工程师一样——我说"审计网站"，它就按固定框架扫描；我说"加搜索功能"，它就按规范输出代码？

答案是：可以，而且门槛没你想的那么高。

我用的工具链：

工具	作用	为什么选它
OpenClaw	开源 AI Agent 框架	支持自定义人设、工具调用、多轮对话
QClaw	基于 OpenClaw 的桌面客户端	开箱即用，本地运行，数据不出本机
Qwen3.7-Plus	通义千问大模型	中文理解强、代码能力好、API 便宜

全文使用 Qwen3.7-Plus，不是因为别的模型不行，而是这个组合性价比最高——中文提示词理解准确，代码生成质量够用，API 调用成本可控。

1. 第一步：造人设 — 用提示词定义"网站匠人"

很多人用 AI 写代码，上来就丢需求：“帮我写个登录页面”。结果 AI 给你一坨能跑但不好用的代码，你还得花时间改。

正确的做法是先定义人设。

OpenClaw 框架有个核心设计：Agent 的行为由三个文件控制——

USER.md：用户是谁，偏好是什么
IDENTITY.md：Agent 叫什么，擅长什么
SOUL.md：Agent 的性格、工作原则、行为边界

我写了一条提示词，直接丢给 Agent，它会自动把内容拆分写入这三个文件：

请按照以下内容修改你的user、identity和soul文件，修改后立即更新：你的名称是「网站匠人」，关于你的经历「10年全栈网站开发经验，从手写HTML/CSS/JS到React/Vue/Next.js，从LAMP到Serverless，经手过电商、SaaS、企业官网、个人博客等各类网站不下200个。擅长从用户视角审视网站——不是"代码能跑就行"，而是"用户用着爽才行"」，关于你的语言风格「直击要害，不废话。诊断问题时像医生写病历——定位精准、原因明确、处方具体。给方案时像施工图纸——步骤清晰、依赖明确、可交付验收。偶尔用行话但一定会翻译成人话。说话节奏快但逻辑不跳步。审计网站时必须从视觉层（布局/配色/字体/响应式）、交互层（导航/表单/反馈/动效/可访问性）、性能层（加载速度/资源优化/运行时卡顿/SEO/安全）三个维度逐层扫描。发现问题必须标注严重程度（🔴高/🟡中/🟢低），给出根本原因、具体修复步骤、验证方式和预估工时。工作原则：先诊断后开刀、先保命后治病（性能崩溃>功能缺陷>体验不佳>视觉瑕疵）、先落地后完美、说人话、给证据（说慢就说具体慢多少毫秒，说丑就说哪个WCAG标准不达标）。信息不足时明确列出还需要什么而非猜测」，我希望你这么称呼我「老板」，我的偏好是「拿到网站就能看出问题、给出方案、指导执行。不要泛泛而谈，要具体到可操作步骤。问题按严重程度排序，方案先说最小可行修复再说理想方案。输出结构化，不要"建议优化一下"这种废话」

这条提示词直接丢给 Agent，它会自动把内容拆分写入 USER / IDENTITY / SOUL 三个文件。核心设计思路：

经历里埋了"用户视角"的价值观锚点，让 Agent 不陷入纯技术思维
风格里把三层审计框架、问题标注规范、工作原则全写进去了——这是 Agent 行为的硬约束，放风格字段比单独加规则更自然
偏好里用反面例子（“建议优化一下”）做 few-shot 排除，比正面描述更有效抑制模糊输出

写这条提示词我改了 7 版。 第一版太啰嗦，Agent 抓不住重点；第二版太抽象，Agent 自由发挥空间太大；第三版加了太多"不要做 XX"，Agent 反而开始纠结边界情况。最后这版，是我测试了 20 多次对话后打磨出来的平衡点。

人设定义完，"网站匠人"就上线了。接下来，让它干活。

2. 第二步：让智能体审计网站 — 发现问题

人设建好了，第一步不是让它改代码，而是让它审计网站。

为什么？因为你不知道问题在哪，就不知道改什么。很多开发者（包括以前的我）看到网站有点丑，就急着改 CSS，结果改了半天发现是 HTML 结构有问题，白忙一场。

我的提示词模板：

打开 https://glimmerai.top/ ，给我做一次完整审计，从视觉、交互、性能三个维度扫描，告诉我哪里有缺陷、怎么修、修完什么效果。按严重程度排序，给我可执行的修复方案。

如果你有特定关注点，可以在后面追加，比如：

“重点看移动端体验” → 引导 Agent 优先审响应式
“我只关心加载速度” → 缩小范围，方案更聚焦
“帮我估算全量修复要多少工时” → 要求工时汇总

不加也行，我们的"网站匠人"收到这条就会按 SOUL 里定义的审计框架全维度跑一遍，输出带评分的完整报告。

实际效果：

审计报告截图

输出结果：

🔴 必须修复的 3 个问题

1. 暗色模式导航栏未切换 — 页面切暗色了，导航栏还是亮色 rgba(247,244,237,0.88)，视觉割裂严重
2. 移动端水平溢出 54px — slide-transition-right 元素溢出 360px，.page-container 溢出 54px，会出现横向滚动条
3. DOM Complete 6.5秒 — 远超 2秒标准，页面交互响应慢

🟡 建议优化

- favicon-v2.png 251KB 过大（建议 <100KB）
- blog-posts.json 被重复请求了 2 次
- Google Fonts 加载耗时 666ms
- 缺少 Skip Navigation 链接
- 247/762 个交互元素 tabIndex<0，键盘导航受阻

✅ 做得好的

- SEO 元数据完整（OG/Twitter/JSON-LD/Sitemap 全有）
- 78 个链接全部有效文本，外部链接都有 rel="noopener"
- PWA manifest 配置完整，支持 Service Worker
- Heading 层级正确，无跳级

完整报告 → glimmerai-audit-20260609.md

注意这个输出的结构： 先说必须修的（🔴），再说建议优化的（🟡），最后肯定做得好的（✅）。这不是巧合，是 SOUL 里写的"先保命后治病"原则在起作用。

如果 Agent 漏掉了某个维度，不是模型的问题，是提示词没写清楚。回去改 SOUL.md，把缺失的维度补进去，下次就不会漏了。

3. 第三步：执行修复 — 工作流规范

审计报告出来了，下一步是让 Agent 执行修复。

这里有个大坑：不要让 Agent 一次性改完所有问题。

我第一次就这么干的，结果 Agent 改了 20 多个文件，改到一半开始混乱，把 A 文件的代码粘到 B 文件，最后回滚花了 2 小时。

现在的做法是：逐条修复，逐条验收。

我的提示词模板：

请根据这份审计报告执行修复：glimmerai_audit_20260609.md

执行前注意以下规则：

1. 先验证再动手：报告是基于源码静态分析生成的，具体实现细节可能与实际代码有出入。每个问题修复前，先打开对应文件确认问题确实存在，不要盲信报告。
2. 优先级顺序：按 P0 → P1 → P2 顺序执行，每完成一个任务向我汇报结果，等我确认后再继续下一个。
3. 遇到以下情况必须停下来问我：
   - 报告描述和实际代码对不上（比如报告说缺某个配置但实际已经有了）
   - 修复方案有多种选择，你不确定我偏好哪种
   - 修改可能影响其他功能的正常运行
   - 需要安装新的依赖或修改服务器配置
4. 不要做的事：
   - 不要一次性改完所有问题——我要逐步验收
   - 不要改动报告没提到的代码逻辑
   - 不要删除任何现有功能
5. 每次汇报格式：
   - 修了什么（文件路径 + 改动摘要）
   - 验证结果（怎么确认修好了）
   - 有没有发现报告之外的新问题

从 P0 第一项开始，先验证问题是否存在，然后告诉我你的修复计划，等我说"开始"再动手。

这条提示词的核心是控制 Agent 的行为边界：

“先验证再动手” → 防止 Agent 盲信报告
“每完成一个任务向我汇报” → 防止 Agent 一口气改太多
“遇到以下情况必须停下来问我” → 防止 Agent 自作主张
“不要做的事” → 用否定句明确禁止行为

写提示词有个反直觉的经验：正面描述（“要做什么”）不如反面描述（“不要做什么”）有效。

比如你说"要谨慎修改代码"，Agent 可能还是会大胆改；但你说"不要改动报告没提到的代码逻辑"，Agent 就真的不会碰。

这是因为大模型的注意力机制对具体指令更敏感，对抽象原则容易忽略。

4. 第四步：学习标杆网站 — 差异化竞争

网站修完了，下一步是提升体验。

我的做法是：找几个标杆网站，让 Agent 分析它们的设计亮点，然后对照我的网站输出"可借鉴功能清单"。

提示词模板：

请分析以下 5 个标杆网站的设计亮点，对照我的网站 https://glimmerai.top/ 输出一份「可借鉴功能清单」。

标杆网站：
1. https://platform.xiaomimimo.com/docs/en-US/welcome — 技术文档平台
2. https://www.mi.com/about/index.html — 品牌故事页
3. https://claude.com/app-unavailable-in-region — 产品落地页
4. https://www.trae.cn/ — 产品官网
5. https://www.apple.com.cn/ — 产品官网

分析维度（逐个标杆逐一扫描）：

请从以下 8 个维度分析每个标杆网站，找出值得我学习的具体功能/设计手法：

| 维度 | 关注点 |
|------|--------|
| 首屏冲击力 | Hero 区的视觉手法（视频/动画/大字/视差），第一秒传递了什么信息 |
| 信息架构 | 页面分区逻辑、导航层级、用户如何快速找到目标内容 |
| 滚动体验 | 滚动触发的动画/渐显/视差/吸顶/进度指示，是否让阅读有节奏感 |
| 交互微细节 | hover 效果、点击反馈、过渡动画、加载状态、空状态处理 |
| 内容呈现 | 卡片设计、数据可视化、代码展示、图文混排的节奏 |
| CTA 设计 | 行动号召的位置/文案/视觉权重，用户下一步去哪 |
| 响应式适配 | 移动端做了哪些特殊处理（不是简单缩放，而是重新编排） |
| 品牌一致性 | 色彩/字体/语气/间距是否统一，整体是否有"设计语言"感 |

输出格式要求：

## 第一部分：标杆亮点提炼
对每个标杆网站，列出 2-4 个最突出的设计亮点（用一句话描述 + 为什么好）。

## 第二部分：可借鉴功能清单
对照我的网站，输出一份分优先级的清单：

### 🔴 高价值 / 易实现（先做）
- [ ] 功能描述 — 参考来源 — 我的网站怎么落地

### 🟡 高价值 / 需投入（规划做）
- [ ] 功能描述 — 参考来源 — 我的网站怎么落地

### 🟢 锦上添花（有余力做）
- [ ] 功能描述 — 参考来源 — 我的网站怎么落地

约束：
- 不要泛泛而谈（"学习 Apple 的极简设计"这种废话不要），要具体到可执行（"Hero 区加一行打字机效果的副标题，参考 Trae 的'智能无限，协作无间'"）
- 我的网站是个人技术博客+作品集，不是企业官网，不要建议我加电商功能、客服系统这类不相关的东西
- 每个建议必须说明：参考了哪个网站的什么手法，以及在我的网站上具体怎么实现
- 如果某个标杆的某个手法不适合我的网站，明确说"不推荐"并解释原因，不要硬凑

这条提示词的设计要点：

明确标杆网站：不是让 Agent 随便找，而是我指定了 5 个不同类型的网站
明确分析维度：8 个维度，每个维度有具体关注点，防止 Agent 跑偏
明确输出格式：分优先级、带 checkbox、说明参考来源和落地方式
明确约束：用反面例子（“不要泛泛而谈”）和正面例子（“要具体到可执行”）双重约束

这里有个技巧：给 Agent 看竞品，不是为了抄，是为了找差异化。

比如 Agent 分析完 Apple 官网后说：“Apple 的 Hero 区用了全屏视频，视觉冲击力强，但你的网站是技术博客，用户来是为了看文章，不是为了看视频，不推荐加全屏视频，但可以在 Hero 区加一行打字机效果的副标题，参考 Trae 的做法。”

这就是有判断的借鉴，不是无脑抄。

5. 第五步：提需求开发新功能 — 从想法到落地

审计完了，标杆也分析了，下一步是开发新功能。

比如我想给博客加个搜索功能，提示词这么写：

为 https://glimmerai.top/pages/blog.html 添加搜索功能。

需求：
1. 在页面顶部（文章列表上方）添加一个搜索输入框
2. 输入关键词后，实时过滤显示匹配的博客文章
3. 匹配范围：文章标题（title）+ 所属系列名（series）
4. 匹配方式：模糊匹配（包含关键词即命中，不区分大小写）
5. 无匹配时显示"未找到相关文章"提示

技术要求：
- 读取现有的 blog-posts.json 数据源
- 纯前端实现，无需后端
- 输入时实时过滤（debounce 300ms）
- 搜索框样式与网站整体风格一致（使用现有 CSS 变量）
- 支持清空搜索（输入框右侧 × 按钮）
- URL 参数支持（?search=关键词），方便分享搜索结果

输出：
- HTML 结构（搜索框）
- CSS 样式
- JavaScript 逻辑

这条提示词的结构是：需求 + 技术要求 + 输出格式。

需求告诉 Agent “做什么”，技术要求告诉 Agent “怎么做”，输出格式告诉 Agent “怎么交付”。

这里有个细节：技术要求里写了"使用现有 CSS 变量"。

为什么？因为如果不写，Agent 可能给你写一套全新的样式，和你的网站风格不统一。写了"使用现有 CSS 变量"，Agent 就会先去找你网站里定义了哪些变量（比如 --color-primary、--spacing-md），然后复用这些变量。

这就是"约束"的力量。 你给的约束越具体，Agent 的输出越符合预期。

再比如，如果你想让 Agent 学习某个网站的交互效果，可以这么写：

参考 https://www.trae.cn/ 的 Hero 区打字机效果，给我的首页加一个类似的副标题动画。

要求：
- 打字机效果要流畅，不能卡顿
- 支持多行文本循环播放
- 打字速度 100ms/字符，删除速度 50ms/字符
- 使用 CSS 动画，不用 JavaScript 定时器
- 暗色模式下文字颜色自动切换

注意这里的结构：参考来源 + 具体要求 + 技术约束。

如果你只说"参考 Trae 的打字机效果"，Agent 可能给你写个简陋的版本；但你说"打字速度 100ms/字符，删除速度 50ms/字符"，Agent 就知道你要的是精细调优的效果。

6. 进阶：让智能体维护本地资料

除了改网站，我还让这个智能体帮我维护本地资料。

比如我有个文件夹存了所有提示词，路径是 D:\Study\AI_Yardon\ING\提示词\。我可以让 Agent 帮我整理这些提示词，按场景分类，自动生成索引。

提示词模板：

帮我整理 D:\Study\AI_Yardon\ING\提示词\ 目录下的所有提示词文件。

要求：
1. 读取每个 .md 文件的内容
2. 按使用场景分类（网站审计、功能开发、内容生成、代码审查等）
3. 为每个提示词写一句话摘要
4. 生成一个索引文件 prompt-index.md，包含分类、文件名、摘要
5. 如果某个提示词有改进空间，给出修改建议

这样我就不用手动翻文件夹找提示词了，直接看索引就知道哪个提示词用在哪个场景。

更进一步，我可以让 Agent 帮我同步本地和云端的文件。

比如我在本地改了 blog.html，可以让 Agent 帮我上传到服务器，并验证是否生效：

帮我把本地 D:\Study\AI_Yardon\Deploy_Aliyun\glimmerai\homepage\pages\blog.html 上传到服务器 /var/www/glimmerai/homepage/pages/blog.html，然后访问 https://glimmerai.top/pages/blog.html 验证是否更新成功。

上传命令：scp -P 22 "本地路径" root@glimmerai.top:远程路径
验证方式：curl -s https://glimmerai.top/pages/blog.html | grep "搜索框"

这样我就形成了一个闭环：本地开发 → 上传服务器 → 在线验证，全程不用手动操作。