<!-- title: 官方货架第二排：mcp-builder压阵 -->

## 这轮观察，回头盘官方货架的第二排

本栏的定期观察又开新一轮。前几轮的目光大多停在货架的显眼处：四个办公文档闸、造件机、被拆过一轮又一轮的新星。这轮换个走法——把官方仓库（anthropics/skills）里站在光环外面的第二排住户翻出来，一次盘七个：`mcp-builder`、`web-artifacts-builder`、`frontend-design`、`doc-coauthoring`、`internal-comms`、`slack-gif-creator`、`canvas-design`。

七个件有一个共同的底色：**第一排解决「能不能写出来」，第二排解决「写得好不好」**。四个文档闸教 Claude 生成 docx、xlsx、pdf、pptx，造件机教它造 skill，这些都是「能力件」；而第二排装的东西明显不同——工具怎么设计才好用、界面怎么写才不土、内部通报什么语气不能出现、海报怎么出图才可控。这些都是「判断力件」。官方真正在做的一门生意，是**把品味写成规则、打包上架**。本文不比各家星数与出身，这类数字变动太快，只谈定位、写法与适用边界，具体数据以各家仓库为准。

## 评测对比表

| Skill | 功能完整度（25%） | 设计质量（25%） | 实战效果（20%） | 上手难度（15%） | 社区活跃度（15%） | 加权总分 |
|---|---|---|---|---|---|---|
| mcp-builder | ★★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★★ | **4.7** |
| frontend-design | ★★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★★ | **4.4** |
| web-artifacts-builder | ★★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★★ | **4.2** |
| internal-comms | ★★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | **4.0** |
| canvas-design | ★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★ | **3.9** |
| doc-coauthoring | ★★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★ | **3.8** |
| slack-gif-creator | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | **3.7** |

## 压阵主角：mcp-builder

**定位**：教 Claude 现造一台 MCP 服务器。MCP（Model Context Protocol）是 Anthropic 在 2024 年底开放的协议，把「模型能调用的外部能力」标准化成工具、资源、提示词三件套，开放之后第二年，主要对手家也宣布接入，如今已经是 Agent 接外部系统的事实标准。mcp-builder 这个 skill 干的事，就是让 Claude 按协议规范，把一个数据库、一份内部 API、一个命令行工具，封装成可挂载的 MCP server。

**亮点**：它的价值不在脚手架——生成一个能跑的 server 骨架，任何带文档的模型都做得到。值钱的是它把「工具设计学」写成了规则：工具要少而精，不要把 API 原样翻译成五十个工具；返回给模型的结果要有可读的错误说明，而不是甩一个异常堆栈让它瞎猜；列表类返回要分页，输入要校验。这些是把「能调用的接口」变成「模型好用的工具」的隐性经验，散落在各家最佳实践里，第一次被集中钉进一份 SKILL.md。

**短板**：模板有保质期。协议和官方 SDK 迭代不慢，skill 里钉死的写法可能落后于当前版本，照抄前值得先对一眼 SDK 文档。另外它交付的是代码不是部署——server 生成后，怎么挂到客户端、怎么发版维护，仍要自己动手。

**设计要点**：这是「卖判断」类 skill 的样本。判断类 skill 的写法核心是**禁令加示例**：不说「要设计好」，而说「错误信息必须包含下一步该做什么」。规则越具体，模型越有处落脚。

## frontend-design：给审美装上方向盘

**定位**：对抗「AI 味」审美。让模型裸写前端，出来的东西千篇一律——紫色渐变、圆角卡片、安全到无聊的配色，行话里被叫作「AI slop」。这个 skill 做的事，是在写第一行代码之前，先逼出一个明确的美学方向：这是什么气质的产品，用什么字体气质、什么色彩策略、什么版式骨架，然后沿着这个方向一走到底。

**亮点**：它承认了一个行业真相——模型的默认输出是统计意义上的「平均审美」，而平均等于平庸。skill 的价值不是教模型新技术，而是用具体规则把它推离均值。要求用真实内容而不是占位文本、要求一个贯穿全局的视觉主张、禁止安全但无聊的默认值，这些约束合起来，产出和裸写是两个世界。

**短板**：品味难编码。规则写得越具体越好用，但也越容易过时——今天的「高级感」明年就可能变成新的「AI 味」。它防得住「丑得雷同」，防不住「怪得雷同」：所有使用者遵循同一套审美规则，反向制造新的趋同，这是这类件的原生悖论。

**设计要点**：审美件的代表作。它的 SKILL.md 大篇幅在描述「什么样的东西不许出现」，负面清单写满，正面空间自然打开。

## web-artifacts-builder：单文件里的工程学

**定位**：造单文件 HTML 成品。无构建步骤、无 npm install、无依赖安装，所有代码装进一个 HTML 文件，浏览器打开就能跑。适合交互演示、小游戏、数据可视化这类「要的是一个成品而不是一个工程」的场景。

**亮点**：对「无构建」的偏执是它最值钱的约束。前端工具链的复杂性——打包器、依赖树、版本冲突——全部被砍掉，产物因此可分享、可托管、可随时打开。它的 SKILL.md 积累的是「单文件里怎么组织多组件」的土办法：模块怎么划、状态怎么管、常见运行时错误怎么避。这些经验单靠模型自己摸索，要走不少弯路。

**短板**：天花板锁死在 artifact 形态。真项目迟早要路由、要持久化、要后端，走到那一步它就退出，把位置让给正规工程。对已经活在 npm 世界里的熟手，这些约束甚至是倒退——它的目标用户是「要成品不要工程」的人。

**设计要点**：它和 mcp-builder 是一对镜像：一个教「依赖越少越好」，一个教「封装越规整越好」。选哪个，取决于你要交付的是演示还是系统。

## doc-coauthoring：把代笔变成共创

**定位**：把「一起写文档」立成有阶段的流程。不是一键生成三千字，而是先弄清意图、再给结构、再出稿、再按反馈逐轮迭代——每一步都留出用户拍板的路口。

**亮点**：它处理的是人机共创里最容易被忽略的权责问题：**文档是用户的，Claude 只是代笔**。多数写作场景翻车，不是文笔不行，而是模型一口气跑到底、用户失去掌控。分阶段推进、每步可回退，把主导权留在人手里，这是它比「帮我写个文档」这类裸提示高明的地方。写规格、写方案、写长文档，过程越正式它越有用。

**短板**：流程感偏重。随手写个便签、改段邮件，走它的全套流程反而比直接对话慢。它管的是「成文过程」，不管「内容对错」——事实核查不归它，用它写的文档照样需要校对事实。

**设计要点**：「卖流程」的代表。它的 SKILL.md 把共创拆成显式阶段，每个阶段定义输入、输出与退出条件——这是工作流类 skill 的标准骨架。

## internal-comms：教模型说「人话」

**定位**：写公司内部文体——全员公告、变更通知、状态更新、故障复盘通报。内部文体和对外公关是两个物种：读者是同事，套话会被当场识破。

**亮点**：它吃准了内部写作的分寸感：语气要像人不像公关稿，坏消息要直说不遮掩，背景要给足但别注水。这些是通用写作 skill 不会教的细节，也正是内部通报最容易翻车的地方——员工对「我们深知大家对此非常关注」这类句式的耐受度是零。skill 把「哪些话不许出现」写成了硬规则，产出立刻从广播稿变成同事说话。

**短板**：深度绑定英文企业文化的低语境表达——直接、坦白、带点自嘲。这套分寸搬到中文职场要重新校准，中文内部通报有自己的格式传统和措辞禁区，直接套用会水土不服。另外模板味控制不好的话，全员邮件会越长越像一个腔调。

**设计要点**：「语气件」的代表。它证明了一件事：语气这种最虚的东西，也能靠禁令清单写得可执行。

## slack-gif-creator：窄赛道，全链路

**定位**：给 Slack 造表情动图。需求极窄：一张能在 Slack 里当 custom emoji 或频道表情用的 GIF。但链路一点不窄——逐帧渲染、合成动图、压体积、卡着平台的尺寸与文件大小上限出活，一步都不能省。

**亮点**：小而完整。这类「窄而全」的件是货架上最容易被低估的品种：多数人一年用不上一次，但用上一次就实打实省下一小时。手搓一张达标表情的实际工序相当琐碎——尺寸要卡、帧数要控、体积要压、循环要顺滑——skill 把整条工序写全，模型就不用在参数上试错。

**短板**：平台绑定。Slack 改一版表情规范，skill 就得跟着改；换了 Discord 或飞书，上限和口味又是另一套。它的实用半径被平台圈死，这是所有平台件的宿命。

**设计要点**：「卖链路」的代表。窄赛道 skill 的写法要诀就一条：**把链路写到一步不省**。工序断在任何一处，产出就废在那一处。

## canvas-design：用代码出海报

**定位**：海报与视觉设计件，路线是代码出图（PNG/PDF），不走生成模型抽卡。尺寸、留白、字距、栅格，全部由代码说了算。

**亮点**：确定性是它对生成式路线的碾压点。改一个参数重出一张，不用重掷骰子；文字排版尤其稳——生成模型写长段落必出错字，代码排版永远不会。它的 SKILL.md 把设计原则（栅格、对比、视觉层级、色彩纪律）翻译成可执行的出图指令，等于给 Claude 发了一本速成版平面设计手册。

**短板**：代码画图的天花板在几何与排版。要照片质感、插画质感、品牌质感，还是得出门找生成模型——两条路线是互补不是替代。另外它默认使用者懂一点设计语言，「层级」「呼吸感」这些词对纯小白仍有理解成本。

**设计要点**：它和已拆过的 algorithmic-art 是一对同门兄弟：那边是艺术向的「给随机上锁」，这边是设计向的「按规范出图」。同一条技术路线，服务两种审美意图。

## 第二排的共同生意：把判断力写成件

七个件排开，按「卖什么」能分成三类，恰好对应 skill 设计的三条路线：

- **卖判断**：mcp-builder（工具设计判断）、frontend-design（审美判断）、internal-comms（语气判断）、canvas-design（视觉判断）。写法核心是**负面清单加正面示例**——判断力没法直接塞给模型，但「不许做什么」可以写成硬规则，「该做什么」可以写成样板。
- **卖链路**：web-artifacts-builder、slack-gif-creator。写法核心是**工序一步不省**——从原料到成品的每一步都给出命令、参数与验收标准，断一步废一件。
- **卖流程**：doc-coauthoring。写法核心是**阶段化与可回退**——把连续动作切成显式阶段，每段留出人拍板的路口。

三条路线合起来看，官方货架的完整版图才浮现出来：能力件管「做得了」，判断件管「做得好」，链路件管「出得来」，流程件管「走得稳」。多数第三方 skill 挤在第一类里卷，后三类的供给仍然稀疏——想做差异化，第二排比第一排机会大。

## 选型决策图

```mermaid
flowchart TD
    A["想给Claude补一件能力"] --> B{"缺的是什么"}
    B -->|外部系统入口| C["mcp-builder"]
    B -->|网页成品| D["web-artifacts-builder"]
    B -->|界面要好看| E["frontend-design"]
    B -->|文档共创| F["doc-coauthoring"]
    B -->|内部通报| G["internal-comms"]
    B -->|表情动图| H["slack-gif-creator"]
    B -->|海报视觉| I["canvas-design"]
    C --> J["生成server后挂载"]
    D --> K["浏览器直接打开"]
    E --> K
    F --> L["成稿进评审"]
    G --> M["定稿即发送"]
    H --> N["拖进Slack可用"]
    I --> O["PNG或PDF交付"]
```

## 推荐排行榜

- **综合最强**：mcp-builder —— 判断密度最高，且踩在行业标准扩张的红利上
- **最容易出效果**：frontend-design —— 一次对话就能看出差距的件不多
- **新手最友好**：web-artifacts-builder —— 零依赖零安装，产物双击就能跑
- **最有性价比的冷门件**：slack-gif-creator —— 一年一次，一次回本
- **最需要本地化的件**：internal-comms —— 中文语境使用前先重写语气规则
- **最不该单独用的件**：doc-coauthoring —— 配合长文档场景才显价值
- **与生成模型互补**：canvas-design —— 排版与文字交给它，质感画面出门找模型

## 安装与使用

官方件的安装路径统一：仓库里每个子目录对应一个 skill，把需要的目录拷进 Claude Code 的技能目录即可自动识别；也可以直接在 Claude Code 的插件市场里装官方 example-skills 包，一次带走全部。

```bash
# 拉取官方仓库
git clone https://github.com/anthropics/skills
mkdir -p ~/.claude/skills

# 拷贝需要的 skill（以 mcp-builder 为例，其余同理）
cp -r skills路径下的mcp-builder目录 ~/.claude/skills/

# mcp-builder 产出的 server，用一行命令挂载
claude mcp add my-server -- python server.py

# web-artifacts-builder 的产物是单个 HTML，打开即用
open index.html

# slack-gif-creator 与 canvas-design 内置出图链路，按 SKILL.md 指引逐步执行即可
```

## 写在最后

这轮盘完第二排，最大的感受不是某一件多能打，而是**货架的分层逻辑**：官方在系统性地把人类协作里的软技能——审美、语气、工具品味、共创流程——一件件硬化成可分发的规则文件。第一排的能力件决定了 Claude 能做什么，第二排的判断件决定了它做得像不像个老手。对使用者，下次装 skill 前先问自己缺的是能力还是判断，别再只盯着四个文档闸；对写件的人，第二排留出的空位远比挤满的第一排多——你所在行业里那些「老手说不出口但一出手就知道」的分寸感，就是下一个 skill 的题材。

## 参考来源

1. [anthropics/skills 官方仓库](https://github.com/anthropics/skills) — 本文七件 skill 的官方出处与 SKILL.md 目录约定
2. [Model Context Protocol 官网](https://modelcontextprotocol.io/) — MCP 协议规范，mcp-builder 的技术地基
3. [Anthropic 工程博客：Equipping agents for the real world with Agent Skills](https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills) — 官方对 Agent Skills 设计理念的阐述
4. [anthropics/claude-code 仓库](https://github.com/anthropics/claude-code) — Claude Code 主仓库，skills 加载机制与 `claude mcp add` 命令说明

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)
