「响应式检查」Skill 使用检查清单：用前、用中、用后
「响应式检查」是前端工程师的高频任务。它的输入通常是页面地址，期望得到的是问题截图与修复建议。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。
把下面的清单保存下来，每次使用或修改「响应式检查」技能时过一遍。
编写时
- description 写清做什么、什么时候用
- 输入写明需要页面地址，并要求缺信息先提问
- 步骤为编号列表：设定断点、逐一截图、标出溢出与遮挡、给出样式修改
- 输出写明问题截图与修复建议的结构
- 约束包含领域底线与不可逆操作的处理方式
- 长资料拆到参考文件
上线前
- 6 类测试输入全部通过
- 权限按最小范围配置
- 技能文件中没有密钥和真实个人信息
- 有负责人和变更记录
每次使用时
- 输入材料已脱敏或确认可以交给所用平台
- 观察智能体是否加载了技能
- 查看“需人工确认”清单
- 对照原始材料抽查关键信息
- 风险较低，但输出仍需快速过目再使用
使用后
- 记录明显的问题样例
- 输出被大幅修改时，分析原因并考虑改技能
- 定期检查平台更新是否影响技能
每一步的快速核对
- 设定断点
- 逐一截图
- 标出溢出与遮挡
- 给出样式修改
准备一份好范例
在技能的参考资料里放一份你认可的问题截图与修复建议范例，往往比多写十条规则更有效。好范例应当：
- 来自真实工作，但已去除个人信息和敏感数据
- 体现团队习惯的结构、措辞和详略程度
- 包含一处“需人工确认”的标注示范，让智能体学会如何表达不确定
- 篇幅适中，不要比平时的产出长太多
范例不必多，一到两份即可；太多范例反而会让智能体机械模仿某一份的细节。
每一步要产出什么
把每一步的中间产出写清楚，智能体就不容易跳步，人也方便定位问题：
- 设定断点：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
- 逐一截图：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
- 标出溢出与遮挡：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
- 给出样式修改：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
最后一步之后，再把这些中间结果汇总成问题截图与修复建议。中间结果可以折叠或省略展示，但在技能指令中要求智能体“先完成再汇总”，能明显减少遗漏。
领域注意事项
「响应式检查」属于前端与界面领域，使用者多是前端工程师，工作环境通常是浏览器、组件库与设计稿。这个领域最重要的一条底线是：视觉与交互结果要在真实浏览器里确认。
建议把这条底线原样写进技能的约束部分，而不是指望智能体自己意识到。同时，在团队内部明确：智能体给出的问题截图与修复建议只是初稿或建议，最终由谁签字确认、出了问题由谁负责。
延伸阅读
- 响应式检查 · MCP 服务 版
- 响应式检查 · n8n AI Agent 版
- 响应式检查 · 快速上手
- 状态管理重构 · 检查清单
- 浏览器兼容检查 · 检查清单
- 智能体Skills 分类：625 个技能 × 32 个角度
说明：文中的配置、代码与目录结构均为示意，用于说明思路；各平台的入口、字段名与能力会更新，落地前请以对应官方文档为准。示例中的数据与场景为虚构，不代表真实案例。