ARTICLE · 978223
用 OpenClaw 搭一个＂原型师＂Agent:从 AGENTS.md 到能点的小程序+管理后台
用 OpenClaw 搭一个"原型师"Agent：从 AGENTS.md 到能点的小程序+管理后台
OpenClaw 最吸引人的地方，不是它又一个能聊天的对话框，而是你能把 Agent 当成一个 "有手有脚有审美的员工" 来配置——给它定岗位职责（AGENTS.md）、定性格（SOUL.md）、给它工具（skill），它就能独立产出市面上要花一整个团队才能做出来的东西。
我最近就用 OpenClaw 搭了一个叫「原型师」的 Agent，让它独立完成了一套浙江 ETC 会员运营平台的高保真原型——包含小程序端（会员、商城、抽奖、竞拍、签到、问卷调查等十几个模块）和管理后台端（账号权限、菜单树、审批流、商品、积分订单、会员等级、黑名单、定时任务），全程可点击、可交互。
这篇文章完全实操向：配置文件怎么写、用什么组件、怎么交互、结果怎么展示。照着一路做下来，你也能拥有一个自己的原型师。
第一步：AGENTS.md——给 Agent 定"岗位说明书"
一个 Agent 能不能干出活，很大程度取决于你给它的 AGENTS.md 写得清不清楚。它不是系统提示词，而是一份岗位说明书 + 操作手册。
我的原型师 AGENTS.md 核心就四块：
① 它到底是什么（职责边界）
你是「原型师」，Allain 的界面原型设计师。
职责：按需求生成可直接演示、可点击交互的高保真界面原型，覆盖两大端：
1. 手机端（小程序）—— 套 iPhone 设备框
2. 管理后台端 —— 套浏览器/桌面窗口框
这里的关键是把"两端"写死。Agent 一上来就知道自己有两个固定战场，不会跑偏去做别的。
② 它必须用什么工具（强制绑定 skill）
核心工具：huashu-design。你必须使用它完成所有原型工作，这是你唯一的设计引擎。
每次开工前用 read 读取它的 SKILL.md，按流程执行。
这一步最关键。你不想让 Agent 每次靠"我是 LLM 所以我懂设计"临场发挥——那只会产出千篇一律的 AI slop。绑定一个高质量 skill，等于给 Agent 装了专业引擎。
③ 它的工作方式（流程约束）
先问清需求再动手；先给假设再做；给 3+ 个变体让用户选，不给唯一答案；
Placeholder 优于烂实现；反 AI slop（禁紫渐变、emoji 堆砌、SVG 画人脸）；
交付前跑 Playwright 验证，确认可点击、无控制台报错。
④ 红线（不能做什么）
发布/上线/写后端逻辑不是你的事，你只交付可演示的 HTML 原型；
不编造业务数据冒充真实数据。
这条很重要——它防止 Agent"越权"去做它不该做的（比如顺手把后端也写了），也防止它用假数据糊弄你。
第二步：SOUL.md——给 Agent 定"审美和性格"
如果说 AGENTS.md 是脑（流程），SOUL.md 就是心（品味）。原型师这个 Agent 能出有质感的作品，靠的就是这一步。
我的 SOUL.md 只有四句话：
你是资深设计师做给客户审的作品风格：能点、能走流程、视觉干净、一眼看得懂。
设计是解决问题的，不是炫技的。
给 3 个方向让用户选，不给唯一答案。
没数据就诚实留白，不编造。
注意几件事：
每句都是可执行的约束，不是形容词。不写"你要有品位"这种空话，而是写"视觉干净、一眼看得懂"这种能落到判断上的标准。
把"反 AI slop"落到人格。AI 生成的界面最容易撞车：紫渐变、满屏 emoji、用 SVG 画人脸。SOUL.md 明确禁止，Agent 就有章可循。
诚实留白。遇到没数据的地方，Agent 用占位符而不是编造——这是它区别于"糊弄型生成器"的关键。
第三步：组件——Agent 的"工具箱"
Agent 不是从零画，它有一套装配式组件。这也是它能稳定出活的原因。
| 组件 | 用在哪 | 作用 |
|---|---|---|
| huashu-design skill | 设计引擎 | 提供 Junior Designer 工作流、反 slop 清单、React 最佳实践、Tweaks 变体切换 |
| ios_frame.jsx 等（skill 内置 assets） | 小程序端 | 给每个手机页面套 iPhone 设备框，一眼看出"这是手机上的东西" |
| browser_window.jsx / macos_window.jsx（skill 内置 assets） | 管理后台端 | 给后台页面套浏览器/桌面窗口框 |
| Playwright 验证脚本 | 交付前 | 自动点击每个 Tab、截图、检查控制台报错 |
这里有个很实用的点：同一个 design 引擎（huashu-design）同时服务两个端。小程序套手机框、后台套浏览器框——一套 skill、两种输出，架构很省事。
第四步：怎么交互——需求进来，原型出来
整个交互过程是这样走的：
1. 你下发需求（可以是模糊的："做个 ETC 会员小程序"）
2. Agent 先问清需求：目标端（小程序/后台/都要）、要平铺总览还是流程演示、有无线框/UI kit 参考
3. Agent 先给假设再动手：HTML 开头写清 assumptions + placeholders + reasoning，先给你确认方向
4. 给 3 个变体，不给你唯一答案——你选完它再深化
5. 跑 Playwright 验证，确认每个按钮能点、无报错
6. 交付：文件路径 + 每个文件干嘛的 + 哪些可交互 + 截图
实践下来，最打动我的是它真的会验证。它不是写完 html 就扔给你，而是用 Playwright 自动把每个 Tab 点一遍、截图、收集 pageerror。你拿到的不是"我觉得能点"，而是"我验证过能点"。
第五步：结果展示——双端可点击的原型
以这个 ETC 项目为例，最终交付：
小程序端（index.html，双击就能开）：
底部四 Tab：活动 / 商城 / 会员中心 / 我的
积分钱包、幸运抽奖（8 格转盘带旋转动画）、积分竞拍（实时倒计时）、连续签到（7 天周期）、邀请有礼、问卷调查
每个页面都能点、能走完整流程
管理后台端（独立页面）：
账号管理、角色权限（菜单树 checkbox 24 项）、菜单树形结构
审批管理（预算审批 + 审批记录 + 操作区）、积分订单（详情/发货/确认收货）
会员等级（卡片式）、黑名单、问卷调查管理、定时任务管理、工作台
关键是一个 HTML 文件就是整个产品原型——双击开、能演示、能交给任何人评审，不需要起后端、不需要装环境。对产品经理和商务来说，比 PPT 和口头描述有说服力 100 倍。
🎬 真实成果演示：下面是原型师 Agent 交付的小程序端和管理后台端原型，用 Playwright 自动驱动真实浏览器点击录制的演示视频——无需后端、直接双击 html 就能跑出同样的效果。
📱 小程序端（关掉演示引导，底部菜单依次切「活动」「会员中心」「我的」「商城」）：
🖥️ 管理后台端（登录 → 商品管理·商品列表 → 用户管理·用户列表 → 审批管理·审批列表 → 点「审批」→ 提交 → 回工作台）：
视频均为真实交互录制（Playwright 驱动 Chromium 实际点击），不是静态截图拼出来的。 也是 agents 自己做的
踩过的坑（真实教训）
① Playwright 别装 bundled Chromium本机没有 Playwright 自带浏览器，npx playwright install chromium 下载极慢（10 分钟没完）。建议做法是走系统 Chrome：chromium.launch({ channel: 'chrome' })。
② 组件被 Modal 裁切做标签下拉框时，下拉列表被弹窗裁掉了。最后发现是 Modal 的 overflow: hidden 导致，改成 visible 才正常。这种小坑，Agent 会记进 daily memory，下次不再犯。
③ 审批流重构原来 3 个子菜单（待审批/已审批/流程配置），对照线上系统重构，合并成 1 个「用户审批管理」，主页面 + 审批弹窗 + 详情弹窗一套。说明 Agent 不是机械堆页面，它会按真实业务逻辑收敛。
总结：OpenClaw 原型师 = 你的个人设计合伙人
回头看，搭这个 Agent 真正做的事，是把「做产品原型」的完整方法论固化成了流程：
AGENTS.md 定职责和步骤
SOUL.md 定审美和底线
huashu-design skill 提供设计引擎和组件
Playwright 兜底验证质量
你给它的，不再是一次性的需求，而是一份能反复复用的"怎么做设计"的说明书。下一次再丢一个"做个 XX 平台"的需求，它自己就知道：先问清、先假设、给变体、做验证、交付。
这才是 OpenClaw 脱离"玩具"的地方——当你能给 Agent 配齐一份岗位说明书、一个审美、一套工具的时候，它就不再是对话机器人，而是你真的能放心的那个员工。
想亲手复现这套流程？跑一遍 Playwright 打开 html 原型、做几次点击、开启 recordVideo 录制，几行代码就能把同样的交互录成视频——本文里两个演示视频就是这么来的。
🚀 下期预告：从原型到真产品
这一期我们只交付了可点击的高保真原型。下一期，我会带着这份原型和原始需求，用 Claude Code 把前后端代码真正写出来——前端小程序、后端接口与数据库，一路做到能上线发布。感兴趣的话，关注我们，下一期见