1. 从 SKILL.md 到 Frontend-designAgent Skills 到底解决什么问题Agent Skills 这个词在 2025 年下半年开始密集出现在开发者视野里。如果你之前只把它当成「高级一点的 prompt」那大概率会低估它的价值。我自己的理解是prompt 解决的是「这一次怎么答」而 SKILL.md 解决的是「这一类任务该怎么判断、按什么顺序执行、产出什么格式」。前者是一次性对话后者是可复用、可版本管理、可被 Agent 自动加载的能力单元。一个标准的 Agent Skill 就是一个文件夹核心是SKILL.md里面用 Markdown 写清楚三件事这个技能在什么场景下被触发、执行时遵循哪些判断规则、最终交付什么形态的结果。脚本和资源文件是可选的比如预置的 Python 处理脚本、HTML 模板、字体或参考素材。Agent 在运行时读取SKILL.md的元信息通常是 frontmatter 里的 name 和 description决定是否加载这个技能然后再读取正文指令。这套机制真正改变的是「交付稳定性」。以前你让模型写一个 Dashboard它可能这次给你 Tailwind下次给你内联样式再下次忘了响应式。而 Frontend-design 这类 Skill 把「前端设计专家」的判断固化下来先确认布局结构再输出 HTMLCSS默认带响应式断点配色遵循一套可读性规则。你得到的不再是随机发挥而是可预期的产出。这篇内容面向三类人一是刚接触 Agent Skills、想知道 SKILL.md 到底怎么写的人二是已经在用 Claude Code、Cline 这类工具想把重复工作流封装成技能的人三是想快速拿到 6 个可直接复用配置、并且能在统一 API 通道下验证调用的人。下面我会按「目录结构 配置片段 调用验证」的方式把 Frontend-design、UI-UX-PRO-MAX、Interaction-design、Skill-creator、github-skill-forge、Find-Skills 这 6 个技能逐个拆开。所有调用验证都走同一套 Key 和 Base URL避免你在多个平台之间来回切换。先给一个整体认知Skills 不是替代 MCP 的两者是互补的。MCP 解决「Agent 能连到什么外部能力」Skills 解决「Agent 在特定场景下该怎么用这些能力、按什么标准交付」。2025 年是 MCP 铺路2026 年 Skills 开始把「判断」写成系统。你要做的是把那些你反复解释、反复纠正的流程沉淀成一个SKILL.md。2. TaoToken 统一 Key 与 API 通道的前置准备在讲 6 个技能之前先把调用通道搭好。因为后面每个 Skill 的验证都需要一个稳定的模型入口如果每个技能都去配一套 Key排查问题时会非常痛苦。我的做法是统一走一个兼容 OpenAI 协议的 Base URL这样 Claude Code、Cline、Codex 这类工具都能复用同一份配置。TaoToken 的 API 地址是https://taotoken.net/api官网是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。你需要在控制台创建一个 API Key然后把它写进各工具的配置文件。注意 Base URL 不要带多余路径OpenAI 兼容模式下通常填到/api这一层即可具体拼接由客户端负责。创建 Key 的入口在控制台模型对话入口可以用来快速验证模型是否通接入文档里有各客户端的详细配置说明。如果你是长期做编码和 Agent 工作流Coding Plan 会更划算适合高频调用场景。下面给出三个最常见的配置位置你可以按自己用的工具选一个。Claude Code 的配置通常放在用户目录下的 settings 文件里关键字段是env里的ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。Cline 这类 VS Code 插件则在设置面板里填 Base URL、API Key、Model ID 三件套。Codex 用的是auth.json里面写OPENAI_API_KEY和base_url。无论哪种核心都是三件套Base URL、Key、Model ID缺一个都会报错。这里要提醒一点不要把 Key 硬编码进SKILL.md或提交到 Git 仓库。Skills 是会被 Agent 读取的文本Key 应该放在环境变量或本地配置文件里通过工具自身机制注入。我见过有人把 Key 写进技能描述里结果分享技能时直接泄露这个坑一定要避开。配置完成后先用一次最简单的请求确认通道可用再往下做技能验证。这样后面任何报错你都能快速判断是技能配置问题还是通道问题。下一节开始进入具体的可复制配置。2.1 三件套配置片段Claude Code / Cline / CodexClaude Code 的 settings 片段路径一般是~/.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: 你的_API_Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }Cline 在插件设置里对应三个输入框等价配置如下{ apiProvider: openai, openAiBaseUrl: https://taotoken.net/api, openAiApiKey: 你的_API_Key, openAiModelId: claude-sonnet-4-20250514 }Codex 的auth.json片段路径一般是~/.codex/auth.json{ OPENAI_API_KEY: 你的_API_Key, base_url: https://taotoken.net/api }三份配置里的 Model ID 要和你实际使用的模型保持一致不要照抄。填完后先跑一次连通性测试再进入技能目录搭建。3. 6 个 Agent Skills 的目录结构与可复制配置这一节是主体。每个技能我都给出目录结构、SKILL.md的关键片段以及它适合什么场景。你可以直接复制目录骨架把SKILL.md内容按自己的需求微调。注意所有技能都放在 Agent 约定的 skills 目录下Claude Code 一般是项目根目录的.claude/skills/其他工具可能是skills/以你所用工具的文档为准。3.1 Frontend-design前端设计专家目录结构frontend-design/ ├── SKILL.md ├── templates/ │ └── dashboard.html └── resources/ └── color-tokens.jsonSKILL.md关键片段--- name: frontend-design description: 当用户需要生成前端页面、Dashboard、响应式布局时使用。输出完整 HTMLCSS。 --- # Frontend Design ## 触发场景 用户描述一个页面需求包含布局、组件、数据展示。 ## 执行规则 1. 先确认布局结构导航、卡片区、图表区、列表区。 2. 输出单文件 HTMLCSS 内联在 style 标签。 3. 默认响应式移动端单列桌面端多列。 4. 配色使用 resources/color-tokens.json 中的变量。 5. 不引入外部 CDN除非用户明确要求。 ## 输出格式 先给一段布局说明再给完整代码块。我实测下来让它做「AI 产品数据分析 Dashboard左侧导航、顶部四个数据卡片、中间 7 天趋势折线图、右侧 API 调用记录列表」它会先输出布局说明再给一份带响应式的单文件 HTML。折线图用内联 SVG 或 canvas 实现不依赖外部库复制出来就能在浏览器打开。3.2 UI-UX-PRO-MAXUX 流程优先目录结构ui-ux-pro-max/ ├── SKILL.md └── templates/ ├── wireframe.md └── flow.mdSKILL.md关键片段--- name: ui-ux-pro-max description: 当用户需要完整 UX 设计流程、线框图、交互流程时使用。不直接输出代码。 --- # UI-UX Pro Max ## 执行规则 1. 先输出用户流程图。 2. 再输出信息架构。 3. 再输出线框图描述。 4. 最后给视觉建议。 5. 除非用户明确要求否则不输出代码。这个技能比 Frontend-design 更重流程。同样一个登录页需求它会给你「用户流程图 → 信息架构 → 线框图描述 → 视觉建议」四段。适合需要设计文档、需要和团队对齐的场景。如果你只想快速拿代码会觉得它啰嗦这时候换 Frontend-design 更合适。3.3 Interaction-design交互动效专精目录结构interaction-design/ ├── SKILL.md └── snippets/ ├── button-ripple.css └── error-shake.cssSKILL.md关键片段--- name: interaction-design description: 当用户需要微交互、状态反馈、过渡动画时使用。 --- # Interaction Design ## 执行规则 1. 识别需要动效的交互点点击、切换、错误、加载。 2. 每个动效给出 CSS 或 JS 实现。 3. 动画时长控制在 150ms 到 300ms。 4. 错误状态用抖动反馈成功状态用淡入。它的强项是点击动效、图标切换动画、错误状态抖动。代码直接可用动画参数调得比较舒服。我一般把它和 Frontend-design 配合用前者出结构后者补动效。3.4 Skill-creator生成 Skills 的 Skill目录结构skill-creator/ ├── SKILL.md └── templates/ └── skill-template.mdSKILL.md关键片段--- name: skill-creator description: 当用户想把重复工作流封装成可复用 Skill 时使用。 --- # Skill Creator ## 执行规则 1. 询问用户的工作流步骤。 2. 提取触发场景、判断规则、输出格式。 3. 生成标准 SKILL.md包含 frontmatter。 4. 给出目录结构建议。这个技能有点绕但很实用。你把一个重复流程描述给它它帮你封装成可复用的 Skill。比如「每次都要把 CSV 转成图表并生成报告」它会输出一份带 frontmatter 的SKILL.md骨架你补上脚本就能用。3.5 github-skill-forge检索流程固化目录结构github-skill-forge/ ├── SKILL.md └── scripts/ └── search.pySKILL.md关键片段--- name: github-skill-forge description: 当用户需要频繁检索 GitHub 仓库、文档、代码示例时使用。 --- # GitHub Skill Forge ## 执行规则 1. 把检索流程拆成关键词生成、结果筛选、摘要输出。 2. 每次检索输出仓库名、star 数、最近更新时间、适用场景。 3. 结果按相关度排序最多返回 5 条。适合需要频繁查资料的场景。它把你的检索流程固化下来下次直接调用不用每次重新描述「帮我找一下相关的开源项目」。3.6 Find-Skills发现其他 Skills目录结构find-skills/ ├── SKILL.md └── index/ └── skills-index.jsonSKILL.md关键片段--- name: find-skills description: 当用户不知道某个需求该用哪个 Skill 时使用推荐相关 Skills。 --- # Find Skills ## 执行规则 1. 解析用户需求关键词。 2. 在 skills-index.json 中匹配。 3. 返回最多 3 个推荐说明每个的适用场景。我测试问它「我想生成一个数据可视化图表该用哪个 Skill」它推荐了 3 个相关技能并说明适用场景。这个技能的价值在于降低发现成本尤其当你装了很多技能之后。4. 在统一 API 通道下验证 Skills 调用配置好技能目录后下一步是验证调用。这里的关键是技能本身不直接发请求是 Agent 读取SKILL.md后用你配置的模型通道去执行。所以验证分两层先确认模型通道通再确认技能被正确加载。先做通道验证。用 curl 发一个最小请求确认 Base URL 和 Key 可用curl https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer 你的_API_Key \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [{role: user, content: 回复 OK}], max_tokens: 16 }如果返回里有choices字段和内容说明通道正常。这一步能排除掉大部分 401 和连接问题。再做技能加载验证。在 Claude Code 里技能放在.claude/skills/下启动后输入一个触发 Frontend-design 的需求观察它是否按SKILL.md的规则先给布局说明再给代码。如果它直接给代码、没有布局说明说明技能没被加载检查目录名和 frontmatter 的 name 是否一致。Cline 的验证方式类似在对话里描述需求看它是否读取了技能文件。有些工具会在日志里显示加载了哪些技能打开日志能看到Loaded skill: frontend-design这类信息。Codex 的验证走auth.json配置的通道技能目录按 Codex 的约定放置。验证时同样先跑一次普通对话再跑一次带技能触发的对话对比输出结构差异。成功的结果长这样你输入「设计一个登录页」Frontend-design 被触发输出「布局说明 完整 HTML 代码块」代码里有响应式断点。如果输出是纯文字描述、没有代码块说明技能没生效回到目录结构检查。这里有个细节技能的description字段决定了它何时被触发。写得越具体触发越准。比如「当用户需要生成前端页面、Dashboard、响应式布局时使用」就比「前端相关」好得多。触发不准多半是 description 太泛。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来。你在配置和调用过程中大概率会遇到下面几类问题。第一类401 Unauthorized。这个最常见原因是 Key 不对或没带上。检查三件事Key 是否复制完整、请求头是否是Authorization: Bearer、Base URL 是否拼错。如果你用的是 Claude Code检查ANTHROPIC_AUTH_TOKEN是否填了Cline 检查openAiApiKeyCodex 检查auth.json里的OPENAI_API_KEY。还有一种情况是 Key 被禁用或额度耗尽去控制台确认状态。第二类local proxy failed。这个通常出现在客户端配置了本地代理端口但代理没启动或者端口被占用。检查你的工具设置里是否开了本地代理选项如果不需要就关掉直接用 Base URL 直连。如果确实需要代理确认端口和进程状态。注意不要配置任何违规的网络工具这里说的代理仅指本地开发调试用的端口转发。第三类reading choices 相关报错比如cannot read property choices of undefined。这说明返回体结构和你预期的不一样通常是 Base URL 路径拼错请求打到了非 API 端点返回了 HTML 而不是 JSON。检查 Base URL 是否多写了/v1或少写了路径。OpenAI 兼容模式下客户端一般会自动补/v1/chat/completions你只需要填到/api。第四类OAuth 相关报错。有些工具默认走 OAuth 登录流程如果你用的是 API Key 模式需要在设置里切换认证方式关掉 OAuth。Claude Code 里如果同时配了 OAuth 和ANTHROPIC_AUTH_TOKEN可能冲突建议只保留一种。第五类技能不触发。表现是你描述了需求但 Agent 没有按SKILL.md的规则输出。排查顺序目录名是否和 frontmatter 的 name 一致、SKILL.md是否在技能目录根下、description 是否覆盖了你的需求关键词、工具是否支持技能加载。有些工具需要重启才能识别新技能。第六类模型返回空内容或截断。检查max_tokens是否太小技能输出代码时容易超。另外确认 Model ID 拼写正确拼错时有些通道会返回空。把这几类对照着排查基本能覆盖 90% 的问题。剩下的看工具日志日志里通常有更具体的错误信息。6. 把技能工作流接到长期编码与 Agent 场景6 个技能配完、验证通过之后真正的价值在于把它们串成工作流。我的做法是用 Skill-creator 把重复流程封装成新技能用 Find-Skills 做技能发现用 github-skill-forge 固化检索用 Frontend-design 和 Interaction-design 出前端产出用 UI-UX-PRO-MAX 出设计文档。这套组合下来从需求到交付的路径会短很多。如果你要长期跑编码和 Agent 任务建议把调用通道固定下来用同一套 Key 和 Base URL避免多平台切换带来的排查成本。模型对话入口可以用来快速验证单个技能的输出接入文档里有各客户端的完整配置说明API Keys 页面管理你的 Key。高频编码场景可以看 Coding PlanClaude Code 相关配置在文档里也有对应章节。最后给一个实用技巧技能不是越多越好。装太多会导致触发混乱Agent 可能选错技能。我的建议是控制在 10 个以内每个技能的 description 写清楚边界定期清理不用的。技能目录本身可以纳入 Git 管理但 Key 一定要走环境变量不要提交。这样你的技能库既能版本化又不会泄露凭证。