把「响应式检查」交给智能体,难点不在模型能力,而在流程是否说清楚:输入是什么(页面地址),按什么顺序处理,交付什么(问题截图与修复建议),哪些事不能做。Skill 就是把这些写下来的载体。

背景(虚构)

Mia是一名前端工程师,每周都要做几次响应式检查。过去靠复制粘贴提示词,结果不稳定。这次团队把它做成了技能,下面记录一次完整运行。

1. 发出请求

Mia在浏览器、组件库与设计稿中输入:

这是今天的页面地址,按团队的响应式检查流程处理一下。

2. 技能被触发

智能体根据技能描述判断任务匹配,加载「响应式检查」的完整指令。它先运行技能自带的脚本做预处理,确保后续分析基于准确的数据。

3. 设定断点

“设定断点”是最容易出错的环节,技能里专门写了要求,所以智能体给出了清楚的结果与理由。

4. 逐一截图

“逐一截图”是最容易出错的环节,技能里专门写了要求,所以智能体给出了清楚的结果与理由。

5. 标出溢出与遮挡

“标出溢出与遮挡”是最容易出错的环节,技能里专门写了要求,所以智能体给出了清楚的结果与理由。

6. 给出样式修改

这一步的产出会作为下一步的输入。智能体在“给出样式修改”时遇到一处含糊的信息,没有自行猜测,而是标注出来等待确认。

7. 交付与复核

智能体交付问题截图与修复建议,末尾列出两条需人工确认的内容。Mia对照原始页面地址抽查关键信息,修正一处表述后采用。

复盘:这次做对了什么

  • 步骤写在技能里,没有遗漏
  • 不确定处被标出,而不是被编造
  • 遵守了「视觉与交互结果要在真实浏览器里确认」
  • 风险较低,但输出仍需快速过目再使用

可以改进的地方

Mia发现智能体对团队内部术语理解不一致,于是在技能目录中加了一份术语表(reference.md),并在 SKILL.md 中写明“遇到术语先查表”。更多改法见定制指南。

什么时候用这个技能

  • 手头有页面地址,需要在较短时间内得到问题截图与修复建议
  • 同类任务每周出现多次,希望每次处理方式一致
  • 结果要交给同事或上级复核,需要统一的结构和清楚的依据
  • 新人接手这类工作,需要一个可以照着做的标准流程

反过来,如果只是偶尔做一次,或者任务高度依赖现场判断,直接和浏览器、组件库与设计稿里的智能体对话即可,不必专门封装成技能。

交付物结构示例

建议把问题截图与修复建议固定成下面的结构(示意),方便复核与归档:

## 结论
一句话说明最重要的发现或结果

## 主要内容
- 设定断点:……
- 逐一截图:……
- 标出溢出与遮挡:……
- 给出样式修改:……

## 依据
- 引用输入中的具体位置或数据

## 需人工确认
- ……(没有则写“无”)

结构固定之后,复核的人只要先看“结论”和“需人工确认”两部分,就能快速判断结果能否使用。

延伸阅读

说明:文中的配置、代码与目录结构均为示意,用于说明思路;各平台的入口、字段名与能力会更新,落地前请以对应官方文档为准。示例中的数据与场景为虚构,不代表真实案例。