重构缘起：为什么选择 Agent Skills 优化 UI
从一个小 Demo 开始
最近正在读《百万富翁快车道》，里面有个观点是通过工作收入 & 投资复利，要实现财富自由需要非常久的时间，于是心血来潮，用 AI 做了一个积蓄模拟器（完全开源，欢迎来试试看），看看自己未来收入的变化。初版的 UI 大概长这个样子：
非常典型的 AI 风，对吧，既不高级也不吸睛，与金融财富类网页的主题调性也相去甚远。为此，我尝试引入 Agent Skills 对页面进行重构，优化后的 UI 效果如下：
重构后的界面不仅美观度显著提升，风格也与金融财富的主题高度契合。那么，Agent Skills 究竟是什么？ 我又为何选择它来完成本次 UI 重构工作？接下来将逐一解答。
什么是 Agent Skills？
Agent Skills（又称 Claude Skills，简称 Skills）是 Anthropic 在 2025 年 10 月 16 号发布的一个功能，并在 2025 年 12 月 18 日发布为跨平台的开放标准，成为 MCP 之后又一被各家 AI 大厂纷纷支持的新标准。
该标准的设计初衷，是为了弥补通用智能体在处理特定领域任务时，对过程性知识 与组织上下文的掌握不足。简单来说，Agent Skills 是一个包含指令、脚本与资源的结构化目录，能够让智能体根据任务需求，动态发现并加载对应的专业能力包。
每个 Skill 的核心载体是一个名为 SKILL.md 的文件，其结构分为两部分：
- 元数据（YAML Frontmatter）：文件开头包含技能的名称和描述。 智能体在启动时会预加载这些元数据，以便在遇到相关任务时识别并触发该技能。
- 多层级内容：技能目录可以包含多个文件（如 .md 文档或脚本）。 这种设计允许作者将复杂的指令拆分，仅在需要时让智能体读取特定部分。
为了最大化节约 Token 资源，Skills 采用三层式渐进式披露（Progressive Disclosure） 机制，具体规则如下：
- Level 1: Metadata。会在 Coding Agent 冷启动时加载到 System Prompt 中。
- Level 2: Instructions。当请求的内容与技能描述相符时，Coding Agent 会通过 bash 从文件系统中读取 SKILL.md 文件。只有这样，该文件的内容才会显示在上下文窗口中。
- Level 3: Resources and code。仅在被引用时才会访问这些文件，指令提供灵活的指导，代码提供可靠性，资源用于事实查找，确保在任何给定时间，上下文窗口中只显示相关内容。
为了更清晰地理解 Skills 的定位，我们将其与相似技术概念进行对比：
| 对比对象 | 核心差异点 |
|---|---|
| 提示词文件（如 Claude.md、Agent.md） | 1. 加载机制：提示词文件在对话初期即全部载入上下文，无论是否需要均占用 Token；2. 功能边界：Skills 支持捆绑 Python 脚本、Bash 工具等可执行资源，提示词文件仅为纯文本指令。 |
| 自定义命令（Custom Command）/ Slash Command | 1. 触发方式：Slash Command 需用户手动触发，Skills 由智能体根据任务需求自主发现并调用；2. 扩展性：Skills 封装性更强，支持跨技能调用，复用与分享更便捷。 |
| MCP | 1. 定位互补：MCP 是通信协议，解决 "连接外部工具与数据源" 的问题（即 "有什么工具"）；2. 功能侧重：Skills 聚焦于 "教授智能体如何使用工具完成复杂业务流程"，相当于 MCP 工具箱的 "使用说明书" 与 "最佳实践指南"。 |
| Subagents | Subagents 是独立的 LLM 实例，拥有专属上下文窗口，由主智能体协调并行工作，核心目标是实现上下文隔离以节约 Token，与 Skills 的能力封装定位不同。 |
| Plugins | Plugins 是 Claude Code 对可复用流程的高阶封装，包含 Slash Command、Custom Agents、Skills、Hooks 等多种组件，Skills 是 Plugins 的子集。 |
| Cursor Rules | 核心功能与使用逻辑基本一致。 |
综上，技能封装与复用能力是 Agent Skills 的核心优势，支持开发者直接复用成熟技能并快速扩展新功能，这也是我选择基于 Skills 完成本次 UI 优化的关键原因。
我想用 Skills！
如果你也想用 Skills 来给工作乃至生活提效，可以看看以下这些仓库，里面有大量现成的 skills 可以直接拿来使用：
- Anthropic 官方 Skills：github.com/anthropics/...
- 企业级 Skills：github.com/mrgoonie/cl...
- github.com/ComposioHQ/...
- Copilot 官方 Skills：github.com/github/awes...
目前，Claude Code、Codex、GitHub Copilot 等主流 AI 编码工具均已支持 Skills 标准，但这类工具大多需要付费使用，部分还存在网络访问限制。
那么，有没有一款产品，能以免费的价格，实现 Claude Code 80% 的能力呢？（挑眉）
这里就不得不给自家产品打个广告，隆重介绍一下 Qwen Code。就在今日，Qwen Code 正式发布 0.6.0 版本，全面支持 Agent Skills 标准；同时提供每日 2000 次免费请求额度，搭配编程领域 SOTA 模型 Qwen3-Coder-Plus，助力开发者革新编码体验！
官方文档：qwenlm.github.io/qwen-code-d...
GitHub 链接：github.com/QwenLM/qwen...
重构之旅：基于 Agent Skills 的 UI 优化实战
本次 UI 重构并非从零搭建，而是基于社区开发者封装的成熟 Skills 进行扩展。我选用了 https://github.com/mrgoonie/claudekit-skills 仓库中的三个核心技能，其功能分别如下：
- aesthetic：负责创建符合设计原则的美观界面，可调用
chrome-devtools技能分析外部网站设计风格，为 UI 优化提供灵感参考。 - chrome-devtools：基于 Puppeteer 的浏览器自动化工具，原生支持对目标网站进行页面截图。
- ui-styling：结合 shadcn/ui 组件库与 Tailwind CSS 技术栈，实现界面的美观化与可访问性优化。
在实践过程中，我发现原生 chrome-devtools 技能存在明显局限：它仅支持对搜索结果页面进行整页截图，导致获取的 UI 设计图尺寸小、清晰度低，后续 AI 分析的素材精度与针对性严重不足，优化效果大打折扣。
针对这一问题，我对该技能进行了功能扩展 ------集成爬虫脚本，使其能够直接从设计平台 Dribbble 的搜索结果中，精准抓取并下载目标 UI 设计图至本地，为 AI 模型提供高质量的分析素材。
基于优化后的 Skill 组合，我向 Coding Agent 下达了如下提示词指令，启动 UI 重构流程：
帮我用 aesthetic 这个 skill 帮我重构并美化当前的 ui，注意要用到 chrome-devtools 这个 skill 来分析来自灵感网站 Dribbble 的设计作品，然后用 ui-styling 这个 skill 来重构 ui，不要用 ai-multimodal，用你自己的多模态能力来分析下载下来的图片随后，Coding Agent 按照既定流程启动工作：
- 素材抓取：访问 Dribbble 平台，抓取与金融财富主题匹配的 UI 设计参考图；
- 风格分析：对参考图的视觉风格（色彩搭配、布局结构、组件样式等）进行解析与提炼；
- 文档生成：基于分析结果输出标准化设计指南；
- 界面重构：依据设计指南完成目标 UI 的迭代优化。
值得注意的是，下载的设计图风格五花八门。要是直接让 AI 照着这些图生成设计文档、重构 UI，做出来的界面风格会很杂乱，没有亮点。所以我先人工挑出想要模仿的 UI，再让 AI 按照这个 UI 的风格来重构（如下图）。
经过上述流程，最终我成功打造出一款 Nebula 主题的全新 UI------ 以深色为背景基调，搭配金色与绿色作为点缀色，既契合金融产品的专业质感，又具备极强的视觉吸引力。本次 UI 重构实践圆满完成，撒花！