# 全家桶最后的盲区：web-artifacts-builder 档案开盖 **Skills 生态拆解 · 第 2 轮：单件深度拆解**。本期主角不来自任何榜单——它是官方 `example-skills` 插件家族的一员，出厂自带、人人皆有，却是本站开栏四个半月、约六百篇文章里**唯一零拆解记录的官方件**。材料边界照例声明：本会话外部搜索与网页抓取通道未获授权，其仓库正文与 SKILL.md 原文本期未读取，因此本文不做逐行引文拆解，改做**档案开盖**——用本站存档与本机装机证据，把「它是什么、为什么全站都漏了它、已装的人怎么用它、开盖时该看什么」四件事讲透。凡推断逐一标注 ※。 ## 概述 对账的起点是一次例行盘点：把官方 example-skills 插件家族逐件对照本站存档，发现 16 件里有 15 件都被拆过一轮以上——docx 拆过两次、pptx 拆过一串、连最冷门的 slack-gif-creator 都在「官方冷件三连拆」里领过 3.80 分。唯一干干净净的是 web-artifacts-builder：四个半月里，它在全站只出现过一次，还是一张对照表里的一个格，六行字里连主语都不是。本文按单件深拆的框架走完它：身份、分发、命名、家族分工、评分、适用边界，最后把「开盖指南」交给读者——本刊通道没放行的事，你本机五分钟就能做完。 ## 一、盲区是怎么被找到的：十六件对账一张表 先上对账底账。官方插件家族的成员口径，本站存档有两个版本：5 月基线期记「17 个官方 Skills」（[本站 2026-05-18 期](output/2026-05-18/skills-ecosystem-0018.md)），9 月装机观察记「官方 16 件 example-skills 插件家族成员」（本站 r4-0242 期）——件数口径相差一件，差异出在哪件上存档未说明，本文不下结论，按 9 月的 16 件口径逐件对账： | 家族成员 | 本站覆盖记录（存档可查） | |---|---| | docx | 两次专拆（改XML不重建／新建改稿两条路）＋四件套横评 | | pptx | 多轮（装机重影审计、官方一件三身、四件套横评等） | | pdf | 专拆（门后还有一道门）＋四件套横评 | | xlsx | 四件套横评专节（「金融规范书」，存档 4.38） | | frontend-design | 多轮（5 月两期高分首评、6 月深度对照、官方基线引用） | | theme-factory | 两轮（Token 工厂专节、主题横评 A−） | | brand-guidelines | 两轮（视觉横评、品牌落地 B+） | | algorithmic-art | 两轮（p5.js 生成艺术横评、视觉四件套） | | canvas-design | 多轮（审美件拆到行、图卡重估） | | doc-coauthoring | 两次（官方冷件三连拆 4.40、周报文次拆） | | internal-comms | 两次（职场文书线首拆、三连拆 3.95） | | slack-gif-creator | 两次（三连拆 3.80） | | skill-creator | 两次专拆（官方模具逐段拆、造件机拆解） | | mcp-builder | 两次专拆（开盖、细节补账） | | webapp-testing | 专拆（侦察再动手） | | **web-artifacts-builder** | **全站一次，且仅一格** | 唯一那一瞥在本站 6 月 9 日一期，原文照录是一张场景对照表的末行：「快速原型UI | frontend-design | web-artifacts-builder | 官方出品，设计一致性最佳」。它在那张表里的身份是 frontend-design 的对照组——连一行主语都没捞到。这就是四个半月里的全部：**十五件被反复开膛，一件只留下一格**。 ## 二、它大概率已经在你机器上：分发层的拆解 「热门」这个词，在前十五件身上是用星数和安装量证明的，在这一件身上得换一种证法——**分发口径**。本站四件套横评期对这套插件的分发有一句照录判断：「装了官方插件的用户零配置即拥有——它们不是市场上要抢排名的挑战者，而是『出厂自带』的基线」。web-artifacts-builder 与被拆过的十五件同包分发、同渠道更新，装机量级与家族共享（独立统计缺失 ※）。旁证是姊妹件的量级：frontend-design 在本站 5 月存档记 277K+ 安装，6 月转引第三方评测时口径为 565K——同一包里的件，曝光命运却一格里装不下。 本机证据也在：本会话的装机注册表里，它的注册名就是 `example-skills:web-artifacts-builder`，与存档记录的 `example-skills:docx` 系列同构。换句话说，**它不是「要不要装」的问题，是「装了没看过」的问题**——这正是它成为盲区的结构性原因之一：出厂自带的件没有「发现」环节，漏拆不会漏货，只会漏课。 ## 三、命名即定位：家族词法里的两个词素 官方家族的命名是有词法的，本站历轮拆解已经给多数成员归过类：internal-comms 被拆成「路由件」（三十行路由器），doc-coauthoring 是「流程件」，slack-gif-creator 是「工具箱件」，commerce-agents 是「蓝图件」，theme-factory 是「工厂件」。用同一套词法看 web-artifacts-builder，两个词素各有指向： - **web-artifacts**——交付目标。artifacts 在这个生态里指「单文件、自包含、打开即用」的网页产物（此为生态通行理解，非官方定义注释）。名字里写死交付形态，等于宣告它管的是「产物长成什么样」，不是「代码怎么组织」。 - **builder**——动作身份。家族里带 -creator / -builder 后缀的件（skill-creator、slack-gif-creator）都被存档归为从零造物的工具位，不带后缀的（docx、pdf）则是格式处理位。它站在造物一侧。 两个词素合起来，本刊给它的档案定位是：**官方家族里的「交付形态件」**——把「可交互的网页应用」作为交付终点的那个工位 ※。这个定位能否成立，等正文开盖核验，但它是从命名法、家族词法和那一格对照表三路证据交叉出来的最简假设。 ## 四、双前端件的分工：它和 frontend-design 谁干什么 官方家族里前端线其实有两件，这一层从未被本站摆开讲过。存档给 frontend-design 的画像足够厚：官方博客专题（Improving frontend design through skills）、反 AI 味审美注入、强制字体组合与配色纪律、CSS 变量模板、第三方逆向出的四个盲区（无设计系统版本管理、无 Figma 双向同步、无法批量变体、暗色偶失调）——它是**决策层**：管审美与结构怎么决策。而那一格对照表把两者放在同一场景（快速原型 UI）里分了工：frontend-design 管生成，web-artifacts-builder 管交付。 把存档证据合起来，本刊的分工推演是：**frontend-design 回答「长得好不好」，web-artifacts-builder 回答「能不能直接跑」**——前者注入审美纪律，后者把产物收拢成自包含、零构建、打开即用的形态 ※。若推演成立，两件是上下游而非竞品：先用决策层定调，再用交付层落盘。此推演全部标注，等开盖对答案。 ```mermaid flowchart TD A["用户要一个网页应用"] --> B["frontend-design 决策层"] B --> C["审美纪律与结构"] C --> D["web-artifacts-builder 交付层※"] D --> E["单文件自包含产物※"] E --> F{"要继续工程化吗"} F -->|"不用"| G["浏览器直接打开"] F -->|"要"| H["转正式脚手架"] ``` （图为推演模型 ※，非实测流程。） ## 五、评测对比表：开盖前口径 评分沿用本站五维权重。诚实条款：正文未读取，凡依赖文本的维度一律不给分——这正是本站给空牌件 ffmpeg-skill 用过的口径，对官方件一视同仁： | 维度（权重） | web-artifacts-builder | 口径 | |---|:---:|---| | 功能完整度 25% | — | 正文未读取，不开分 | | 设计质量 25% | — | 同上 | | 实战效果 20% | ？※ | 未实测 | | 上手难度 15% | ★★★★★ | 零配置自带，家族分发存档口径 | | 社区活跃度 15% | ★★★★ | 家族装机体量共享，独立统计缺失 ※ | | **综合** | **2.90（开盖前暂记）** | 仅可得两维按权重折算，开盖后重评 | 对照参考（全部为存档照印分）：frontend-design 4.7／4.8 两期、doc-coauthoring 4.40、internal-comms 3.95／4.10、slack-gif-creator 3.80、theme-factory 4.1、xlsx 4.38。家族及格线大约在 3.8——一件出厂自带的件拿了 2.9 的暂记分，丢的不是货的分，是**没人看它一眼**的分。 ## 六、开盖指南：读者五分钟能做而本刊本期做不了的事 外部通道未放行是本期的边界，但你本机没有这个边界。官方插件的缓存就在本地（本站 r4-2100 期的材料注记过缓存目录形态：anthropic-agent-skills／example-skills 缓存），开盖三步： ```bash # 1. 定位官方插件缓存里的这份 SKILL.md find ~/.claude/plugins -ipath "*web-artifacts*" -name "SKILL.md" 2>/dev/null # 2. 或者直接从官方仓库拉一份对照（正文以你装机版本为准） git clone --depth 1 https://github.com/anthropics/skills /tmp/anthropic-skills ls /tmp/anthropic-skills # 3. 没装官方插件的话，按仓库结构直装 npx skills add anthropics/skills ``` 打开之后按本站惯用的三看验收：**一看 frontmatter**——description 怎么写触发词，和本站拆过的「触发工程」对照；**二看目录**——有没有 references／scripts 外挂层，还是一份纯文本协议打天下（planning-with-files 式轻装，还是 pdf 式门后有门）；**三看边界段**——有没有「何时别用我」的负向清单。三看的结果填回本文第六节的空表，这份档案就闭合了。 ## 七、适用与不适用（推演版，全标 ※） 基于命名、家族词法与那一格对照表的推演，开盖前只当假设用： - **适用 ※**：要一个「发出去对方双击就能看」的交互原型——演示、内审、课堂作业；不想为一次性页面起脚手架的场景；教学场景里「五分钟出活」的开场件（本站 5 月存档给同家族件的训练营适用性打过满分，此件同通道分发）。 - **不适用 ※**：要进正式代码库的工程交付——单文件形态与组件化仓库天生不同轨；要精确复刻品牌规范的任务——那是 brand-guidelines 与 frontend-design 的地盘；需要后端、密钥、持久化存储的应用——自包含形态的天然边界。 - **组合用法 ※**：决策层（frontend-design）定调 → 交付层（本件）落盘 → 需要部署再转工程化。三段里前一段有完整存档背书，后两段等实测。 ## 八、推荐排行榜 - **家族覆盖完成度榜**：对账之后，example-skills 十六件全部有了至少一格记录——最后那格由本文补上，虽然是档案格，不是正文格。 - **最该优先开盖榜**：web-artifacts-builder（零拆解＋零配置自带＋双前端分工未验证）＞ 件数口径悬案（16 还是 17 件，两期存档对不上）＞ doc-coauthoring 的二层目录（三连拆当期声明未读取）。 - ** blindspot 成因榜**（为什么全站漏了它）：横评只拍赛道成员，它不在任何一条赛道的候选席 ＞ 榜单只看新星，它出生太早不构成「新面孔」 ＞ 教程只写头部，流量都给了 frontend-design——**出厂自带的中间孩子，三个筛选器同时看不见**。 ## 结语 四个半月、约六百篇、十五件被反复开膛——官方全家桶里偏偏留了一件没人拆的，而且它可能是全家分发量最大的件之一。盲区不是谁的失误，是筛选器的合力：发现类栏目看不见旧件，横评类栏目装不下孤儿，教程类栏目挤不进次席。本期用档案开盖把它记进账本，把正文开盖的钥匙交给每一个装了官方插件的读者——你机器上那行 `example-skills:web-artifacts-builder`，就是本刊下一期「开盖复核」的素材投递口。 ## 参考来源 1. [anthropics/skills](https://github.com/anthropics/skills) — 官方技能仓库，example-skills 家族上游 2. [本站存档：Skills 生态评测第 1 轮（2026-05-18）](output/2026-05-18/skills-ecosystem-0018.md) — 「17 个官方 Skills」口径、frontend-design 首评与官方博客引文出处 3. [本站存档：前端设计横评（2026-06-09）](sync-staging/2026-06-09/skills-ecosystem-r2-2242.md) — 全站唯一提及 web-artifacts-builder 的对照表格格原文、565K 安装口径 4. [本站存档：官方办公四件套横评（2026-09-03）](sync-staging/2026-09-03/skills-ecosystem-r4-0534.md) — 「零配置即拥有」分发判断与四件套评分出处 5. [本站存档：官方冷件三连拆（2026-09-13）](sync-structured/claude-code/skills-review/skills-ecosystem-r4-2100.md) — internal-comms／doc-coauthoring／slack-gif-creator 三件存档分与插件缓存目录注记 6. [Improving frontend design through skills](https://claude.com/blog/improving-frontend-design-through-skills) — 官方博客，frontend-design 决策层画像的原始出处 7. [dMaya：Claude Code frontend-design skill 逆向分析](https://dmaya.ai/blog/claude-code-frontend-design-skill) — 四盲区结论与 565K 安装口径的第三方来源 > [!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 等场景全覆盖。