01

第一次测试：脑图输入，AI给了我一份“功能清单”

我拿了一个真实项目的脑图作为输入。这个脑图是客户整理的，按功能模块罗列了需求。

调用新技能后，OpenClaw 先是理解了脑图结构，然后输出：

• 一份完整的功能清单

• 页面流程图

• 以及……它试图生成线框图图片

是的，最初我在技能里设定的输出格式是图片。因为我当时用的是支持图片生成的大模型套餐，心想直接出图多爽。

结果图是出来了，但问题一大堆：

1. 图片模糊：分辨率很低，像是被压缩了无数次。

2. 排版混乱：按钮和文字叠在一起，完全没法看。

3. 中英文混杂：明明输入是中文，输出的图片里却大量出现英文占位符。

试了几次，换了不同描述方式，依然如此。我意识到：当前大模型的图片生成能力，还不足以产出可用的产品原型图。

02

转向HTML/Vue风格：输出可交互的“假界面”

既然图片不行，那就换个思路。我更新了技能，把输出格式从“生成图片”改为“生成HTML/Vue代码”。这样，AI输出的是一个网页文件，打开就是可浏览的线框图界面，还能带一点交互效果。

这个转向立刻见效。更新后的技能再次运行，OpenClaw 直接产出了一个HTML文件。虽然样式朴素，但布局清晰、功能点对应准确，已经可以用于内部评审和工作量评估了。

03

规范入场：从“能看”到“符合设计语言”

但是，生成的页面风格很“素”——没有品牌色、没有统一的间距、组件样式随意。如果拿给客户演示，显得不够专业。

于是我在技能里加入了 设计规范。具体做法是把三类规范文档放进 reference/ 文件夹：

• UI设计规范：主色调、字体、圆角、阴影、间距等。

• 组件规范：按钮、表单、卡片、弹窗的标准样式。

• 文案规范：提示语、标签、按钮文字的写法要求。

然后更新 skill.md，强制要求“生成HTML时必须严格遵循reference目录下的规范”。

再次运行，输出的页面焕然一新：配色统一、组件一致、文案规范。终于像个能拿出手的原型了。

04

区分Pad端和Web端：一个关键的转折点

这个项目有两个终端：

• Pad端：面向机构用户（真正的终端使用者）

• Web端：面向运营人员（后台管理）

两者的功能、布局、交互逻辑完全不同。但我最初给技能的脑图是按功能模块罗列的，没有区分终端。结果AI把所有功能混在一起，生成了一套“四不像”的页面。

怎么办？

我换了一种输入方式：不再直接丢脑图，而是先用自然语言把需求分层描述清楚。例如：

“Pad端面向机构用户，核心功能是：自然人贷前列表、自然人详情、企业异动。Web端面向运营，核心功能是：用户管理、预警规则、消息推送。”

然后分别描述两个端的关键页面和用户路径。

这样处理后，AI正确理解了两个端的不同定位，分别生成了两套HTML线框图——一套移动端风格的Pad界面，一套后台风格的Web界面。

核心经验：AI不擅长从混乱的原始材料中提取“隐性结构”。你需要先做一层提炼，把端、角色、核心流程拆解清楚，它才能精准输出。

05

踩坑与心得：AI是副驾驶，不是驾驶员

回顾整个过程，有几个重要体会：

1. 核心决策必须由人做

AI可以帮你扩展、润色、补充细节，但功能边界、用户角色、终端划分这些关键决策，不能丢给它。你给得越清晰，它做得越对。

2. 规范要“喂”进去，它才能遵守

不要指望AI知道你们公司的设计规范。把规范文档放在 reference/ 里，并在提示词中强制要求遵守，它才会照做。

3. 输出格式要务实

图片生成现阶段还不成熟，HTML/Vue是更实用的选择。生成的代码可以导入Figma或直接作为演示原型。

4. 技能是可以迭代的

我的原型技能从第一版到最终版，迭代了4次：纯提示词 → 加规范 → 改HTML输出 → 区分多端。每次迭代都让结果更接近需求。

06

产品经理的新能力：设计AI技能

通过这一周多的实践，我越来越觉得：产品经理未来的核心竞争力，不只是画原型、写文档，更是“设计AI技能”的能力。

• 你可以把团队的设计规范封装成技能，新人直接调用就能产出符合标准的高保真原型。

• 你可以把竞品分析方法论封装成技能，输入两个产品名，自动输出对比报告。

• 你甚至可以把某个资深同事的评审风格封装成技能，让AI模拟他的视角来审查你的方案。

自定义Skill，就是给AI代理装上“行业大脑”。而产品经理，天然最适合做这件事——因为我们懂业务、懂流程、懂用户，也懂如何把模糊需求变成可执行的指令。

07

写在最后

从踩坑版本到跑通Pad/Web双端规范输出，我花了将近一周。过程中有过挫败（图片生成那会儿真想放弃），但最终看到AI按我的规范生成两套可用的HTML线框图时，那种感觉就像亲手带出了一个能干的实习生。

如果你也在用OpenClaw，不妨试试搭建你自己的原型技能。从一个小场景开始，比如“生成登录页线框图”，然后逐步迭代。

AI不会取代产品经理，但会用AI的产品经理，一定会取代不会用的。

往期精选

AI实战：用OpenClaw Skill自动生成原型线框图（上）

自定义技能保姆级教程：让OpenClaw学会你的团队规范，还能“复活”同事

手把手教你给飞书装一个“AI管家”：OpenClaw接入全攻略

手把手教你安装OpenClaw并接入飞书：产品经理的AI探索笔记

作者提示：个人观点，仅供参考