基于 Agent Skills 的 UI 重构实践：从 Demo 到主题化界面的升级之路

稀

绿龙2026年01月22日约 5 分钟

（✨年终技术征文倒计时4️⃣天，速戳上图了解详情🔍）

从一个小 Demo 开始

最近正在读《百万富翁快车道》，里面有个观点是通过工作收入 & 投资复利，要实现财富自由需要非常久的时间，于是心血来潮，用 AI 做了一个积蓄模拟器（完全开源，欢迎来试试看），看看自己未来收入的变化。初版的 UI 大概长这个样子：

非常典型的 AI 风，对吧，既不高级也不吸睛，与金融财富类网页的主题调性也相去甚远。为此，我尝试引入 「Agent Skills」 对页面进行重构，优化后的 UI 效果如下：

重构后的界面不仅美观度显著提升，风格也与金融财富的主题高度契合。那么，「Agent Skills 究竟是什么？」 我又为何选择它来完成本次 UI 重构工作？接下来将逐一解答。

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：https://github.com/anthropics/skills
企业级 Skills：https://github.com/mrgoonie/claudekit-skills
https://github.com/ComposioHQ/awesome-claude-skills
Copilot 官方 Skills：https://github.com/github/awesome-copilot/tree/main/skills

目前，Claude Code、Codex、GitHub Copilot 等主流 AI 编码工具均已支持 Skills 标准，但这类工具大多需要付费使用，部分还存在网络访问限制。

重构之旅：基于 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 按照既定流程启动工作：