「图标规范整理」Skill 场景实录:一次完整任务怎么跑
前端工程师经常要做「图标规范整理」这类事:统一项目中的图标来源、尺寸与命名。每次都从头写提示词,结果时好时坏;把它做成智能体 Skill,就能让智能体每次按同一套步骤执行,输出结构也更稳定。
背景(虚构)
Mia是一名前端工程师,每周都要做几次图标规范整理。过去靠复制粘贴提示词,结果不稳定。这次团队把它做成了技能,下面记录一次完整运行。
1. 发出请求
Mia在浏览器、组件库与设计稿中输入:
用图标规范整理技能处理这份图标文件,输出图标规范与清单。
2. 技能被触发
智能体根据技能描述判断任务匹配,加载「图标规范整理」的完整指令。它先运行技能自带的脚本做预处理,确保后续分析基于准确的数据。
3. 收集现有图标
智能体完成“收集现有图标”,并在中间结果里注明依据,方便Mia回看。
4. 去重
智能体完成“去重”,并在中间结果里注明依据,方便Mia回看。
5. 统一尺寸与命名
智能体完成“统一尺寸与命名”,并在中间结果里注明依据,方便Mia回看。
6. 生成使用说明
智能体完成“生成使用说明”,并在中间结果里注明依据,方便Mia回看。
7. 交付与复核
智能体交付图标规范与清单,末尾列出两条需人工确认的内容。Mia对照原始图标文件抽查关键信息,修正一处表述后采用。
复盘:这次做对了什么
- 步骤写在技能里,没有遗漏
- 不确定处被标出,而不是被编造
- 遵守了「视觉与交互结果要在真实浏览器里确认」
- 风险较低,但输出仍需快速过目再使用
可以改进的地方
Mia发现智能体对团队内部术语理解不一致,于是在技能目录中加了一份术语表(reference.md),并在 SKILL.md 中写明“遇到术语先查表”。更多改法见定制指南。
什么时候用这个技能
- 手头有图标文件,需要在较短时间内得到图标规范与清单
- 同类任务每周出现多次,希望每次处理方式一致
- 结果要交给同事或上级复核,需要统一的结构和清楚的依据
- 新人接手这类工作,需要一个可以照着做的标准流程
反过来,如果只是偶尔做一次,或者任务高度依赖现场判断,直接和浏览器、组件库与设计稿里的智能体对话即可,不必专门封装成技能。
交付物结构示例
建议把图标规范与清单固定成下面的结构(示意),方便复核与归档:
## 结论
一句话说明最重要的发现或结果
## 主要内容
- 收集现有图标:……
- 去重:……
- 统一尺寸与命名:……
- 生成使用说明:……
## 依据
- 引用输入中的具体位置或数据
## 需人工确认
- ……(没有则写“无”)
结构固定之后,复核的人只要先看“结论”和“需人工确认”两部分,就能快速判断结果能否使用。
延伸阅读
- 图标规范整理 · AGENTS.md 版
- 图标规范整理 · MCP 服务 版
- 图标规范整理 · n8n AI Agent 版
- PWA 配置 · 场景实录
- 状态管理重构 · 场景实录
- 智能体Skills 分类:625 个技能 × 32 个角度
说明:文中的配置、代码与目录结构均为示意,用于说明思路;各平台的入口、字段名与能力会更新,落地前请以对应官方文档为准。示例中的数据与场景为虚构,不代表真实案例。