## 概述 本期是本栏的赛道横评轮，选的赛道是「让 Claude 做界面与视觉」。样品全部来自官方仓库 anthropics/skills 的示例技能集，一共四件：`frontend-design`（审美）、`web-artifacts-builder`（工程）、`canvas-design`（艺术）、`webapp-testing`（质检）。这四件都出自官方之手、装法相同、服务同一件事，但 SKILL.md 的写法却是四种极端范式——一份纯戒律、一套创作仪式、一个脚手架、一张决策树。把它们摆在一起逐项对比，等于官方亲自示范了一堂「技能写法课」：同一件事，提示词可以有四种完全不同的组织方式。 ## 赛道全景：四件各守一道工序 ```mermaid flowchart TD A["官方界面赛道四件套"] --> B["canvas-design"] A --> C["frontend-design"] A --> D["web-artifacts-builder"] A --> E["webapp-testing"] B --> B1["静态艺术：海报封面"] C --> C1["产品前端：网页应用"] D --> D1["工程打包：单HTML"] E --> E1["交付质检：真机实测"] ``` 值得先说破一层关系：这四件不是抢生意的对手，更像是官方故意拆开的四道工序——canvas-design 管视觉基调，frontend-design 管审美执行，web-artifacts-builder 管构建交付，webapp-testing 管上线前验证。但正因为功能相邻，它们的 SKILL.md 写法差异才格外有信息量。 ## 评测对比表 | 技能 | 功能完整度(25%) | 设计质量(25%) | 实战效果(20%) | 上手难度(15%) | 社区活跃度(15%) | 总评 | |------|------|------|------|------|------|------| | frontend-design | ★★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | 4.6 | | web-artifacts-builder | ★★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★★★ | 4.4 | | webapp-testing | ★★★★ | ★★★★★ | ★★★★ | ★★★ | ★★★★★ | 4.3 | | canvas-design | ★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★★★ | 4.0 | 说明：四件同属官方示例仓库，随 Claude 版本统一维护，社区活跃度一项同分；上手难度分数越高代表越容易上手。 ## 逐件拆解 ### ① frontend-design：一份纯戒律，专治 AI 味 **定位**：官方审美守门员。全篇没有一行代码、没有一个脚本，只有两块内容：开工前的设计思维流程，和一组美学戒律。 **亮点**：它逼模型在写码之前先做四个判断——用途、基调、约束、记忆点，并且要求「选一个极端」：要极简就到底，要繁复就到顶，关键是意图明确而非强度堆叠。戒律部分的负面清单极其锋利：点名禁用 Inter、Roboto、Arial 和系统字体，点名禁写「白底紫渐变」，甚至禁止连续多代作品都收敛到 Space Grotesk 这一个安全牌上。动效部分也给了可执行的判断而不是空话——「一次编排好的页面加载、配合 animation-delay 错峰入场，比散落的微交互更有效」。最妙的证据在仓库另一头：紫渐变和 Inter 这两个坑，在 web-artifacts-builder 里被官方自己又复述了一遍。同一个仓库内部交叉引用同一批禁区，等于官方盖章承认这是最高频的翻车点。 **短板**：纯提示词赌的是模型自觉，没有产物规范，也没有「什么算 production-grade」的验收标准——它划禁区很凶，但不负责检查你有没有踩线。 **范式**：戒律型。 ### ② canvas-design：先写宣言，再动笔 **定位**：四件里最另类。它不做网页，产出只限 .md、.pdf、.png，做的是海报、封面、艺术页这类静态视觉作品。 **亮点**：写法是四件里最罕见的两段式接力。第一步，让 Claude 给一个虚构的艺术运动写宣言：起一个「Brutalist Joy」式的运动名，写四到六段设计哲学，明确要求「为一场艺术运动写宣言，下一阶段就是把宣言做成作品」。第二步，拿着这份宣言上画布执行，成品的构成是九成视觉、一成文字。细节里全是狠活：宣言必须反复强调成品要「看起来被顶级匠人耗时无数小时打磨」，这句话在文中以不同措辞出现了至少四五次；画布阶段甚至内置了一句用户口吻的硬话——「用户已经说了：还不够完美，必须是博物馆级」——用一句预埋的差评强制二刷精修。它还要求把主题做成「暗扣」：像爵士乐手在即兴里引用另一首歌，懂的人会心一笑，不懂的人照样享受音乐。 **短板**：不做任何交互产物；什么时候该用它而不是 frontend-design，边界全靠用户自己判断。 **范式**：仪式型（角色接力 + 话术施压 + 强制二刷）。 ### ③ web-artifacts-builder：提示词瘦身，脚本来扛活 **定位**：唯一重工程的一件。技术栈直接写死：React 18 + TypeScript + Vite + Parcel 打包 + Tailwind + shadcn/ui，四十多个 shadcn 组件预装，路径别名配好。 **亮点**：SKILL.md 本身极短，真本事全在两个脚本里。`init-artifact.sh` 一键初始化项目，连「Node 18+ 兼容性自动检测并钉住 Vite 版本」这种边界都处理了；`bundle-artifact.sh` 把整个应用打成单个 HTML，所有 JS、CSS、依赖全部内联，产物可以直接丢进 claude.ai 对话当 artifact 分享。流程说明书里还有一个很清醒的产品判断：测试是可选项，「先别测，尽快让用户看到成品」——把首屏延迟当敌人，测试后置到用户提出或出问题再说。审美则只留一段简短警告：避免过度的居中布局、紫渐变、统一圆角和 Inter 字体，大方向外包给戒律。 **短板**：审美指导单薄，和 frontend-design 之间没有显式衔接，单装这一件容易产出「工程合格、气质平庸」的东西，两件同装才完整。 **范式**：脚手架型。 ### ④ webapp-testing：把测试写成决策树 **定位**：质检员。用原生 Python Playwright 脚本实测本地 Web 应用。 **亮点**：SKILL.md 开头就是一棵决策树——静态 HTML？直接读文件找选择器。动态应用？服务起了没有？没起就上 `with_server.py` 托管（支持 backend + frontend 双服务器同起，端口探测齐备）；已经起了就走「侦察-再行动」四步：进页面、等 networkidle、截图或查 DOM 侦察、拿真实选择器动手。全文最值得抄的是它的上下文经济学：明确写着这些脚本是「供你直接调用的黑盒，而不是读进上下文窗口的东西」——先跑 `--help` 看用法，禁止一上来就通读源码污染窗口。最常见的坑（没等 networkidle 就去查 DOM）被写成 ❌✅ 对照，一眼记住。 **短板**：四件里上手门槛最高——要会写一点 Python，本地得有 Playwright 环境；headless 模式是硬性约定。 **范式**：决策树型。 ## 核心发现：四种 SKILL.md 范式对照 把四件摆齐，真正的价值浮出来了。同一官方仓库、同一赛道，官方自己就用了四种完全不同的提示词架构： | 范式 | 代表 | 本质 | 适合抄给谁 | |------|------|------|------| | 戒律型 | frontend-design | 负面清单划禁区，零代码 | 审美、文风、规范类技能 | | 仪式型 | canvas-design | 拆角色接力 + 施压话术 + 强制二刷 | 创作产出类技能 | | 脚手架型 | web-artifacts-builder | 提示词当说明书，逻辑进脚本 | 有构建打包流程的技能 | | 决策树型 | webapp-testing | 分叉开头 + 黑盒脚本 + ❌✅对照 | 分支多、易错的流程类技能 | 三条可带走的写法经验： 1. **判断密集型任务用戒律型**。凡是「好坏靠品味」的活（设计、写作），负面清单比正面描述有效——「别用 Inter」远比「用好字体」可执行，官方连「别连续两代收敛到同一款安全字体」都写到了。 2. **创作型任务可以拆角色**。canvas-design 证明了 SKILL.md 可以编剧本：让同一个模型先当评论家写宣言，再当艺术家执行，中间用「大师工艺」话术和预埋差评抬高标准。 3. **有脚本的技能要学会保护上下文**。web-artifacts-builder 和 webapp-testing 的共同点是逻辑下沉到脚本、提示词只留流程和警告，webapp-testing 更进一步把「禁止读源码」写成了明文——上下文窗口是技能时代最贵的资源。 ## 串起来就是一条产线 ```mermaid flowchart TD S["需求进站"] --> P["canvas-design 立基调"] P --> F["frontend-design 立审美"] F --> W["web-artifacts-builder 构建"] W --> K["bundle 打成单HTML"] K --> T["webapp-testing 起服实测"] T -->|不通过| F T -->|通过| D["交付：单文件产物"] ``` 官方例仓的排布本身就暗示了「做界面」的推荐工序：先定视觉语言，再用戒律约束实现，然后工程化打包，最后真机验证。而「测试后置」是写进说明书的明取舍——先交付再看，出了问题测试员随时进场返修。这条产线也解释了为什么四件技能的写法不同：工序位置决定了信息形态，创意端靠戒律和仪式，工程端靠脚手架和决策树。 ## 安装方式 四件都在官方仓库中，安装共用一套命令，拷贝对应技能目录即可： ```bash git clone https://github.com/anthropics/skills # 将仓库内对应技能目录拷贝到本地技能目录 cp -r <技能目录>/frontend-design ~/.claude/skills/ cp -r <技能目录>/canvas-design ~/.claude/skills/ cp -r <技能目录>/web-artifacts-builder ~/.claude/skills/ cp -r <技能目录>/webapp-testing ~/.claude/skills/ ``` 更省事的路子：Claude Code 用户直接启用官方 example-skills 插件，四件全部随插件就位，零拷贝。 ## 推荐排行榜 - **只装一件**：frontend-design。收益最直接——此后所有前端任务都过一遍审美闸，「AI 味」是当前模型做界面最常见的病，这份负面清单是最对症的药。 - **做可分享 Demo**：web-artifacts-builder。从零到单 HTML 产物一条龙，四十多个预装组件兜底。 - **交付前要证据**：webapp-testing。愿意付 Python 环境成本的人，换来的是「实测通过」而不是「应该没问题」。 - **要海报和视觉页**：canvas-design。静态艺术这个需求只有它接。 - **想学写技能**：按需偷师——学戒律抄 frontend-design，学上下文经济学抄 webapp-testing，学多角色编排抄 canvas-design。 ## 结语 这一轮横评的结论有点反直觉：四件技能谁最强不是重点，重点是官方用同一个仓库示范了「一个提示词文件可以有四种骨架」。选型只看任务性质——品味活用戒律，创作活用仪式，工程活用脚手架，易错流程用决策树。读者下次动手写自己的 SKILL.md 时，先问自己一件事：我的任务是在做判断、做创作，还是在跑流程？答案定了，骨架也就定了。 ## 参考来源 1. [anthropics/skills — Claude 官方 Skills 仓库](https://github.com/anthropics/skills) — 本文四件技能均出自该仓库的示例技能集，随官方 example-skills 插件分发 2. frontend-design、web-artifacts-builder、canvas-design、webapp-testing 四份 SKILL.md 原文 — 本文所有引文与流程描述均出自第一手文本（各技能目录下 SKILL.md） 3. [skills.sh — Skills 生态站](https://skills.sh) — 可查技能热度榜单与安装量，用于追踪官方与社区技能的动向 > [!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 等场景全覆盖。