概述

本期是本栏的赛道横评轮，选的赛道是「让 Claude 做界面与视觉」。样品全部来自官方仓库 anthropics/skills 的示例技能集，一共四件：frontend-design（审美）、web-artifacts-builder（工程）、canvas-design（艺术）、webapp-testing（质检）。这四件都出自官方之手、装法相同、服务同一件事，但 SKILL.md 的写法却是四种极端范式——一份纯戒律、一套创作仪式、一个脚手架、一张决策树。把它们摆在一起逐项对比，等于官方亲自示范了一堂「技能写法课」：同一件事，提示词可以有四种完全不同的组织方式。

赛道全景：四件各守一道工序

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 写法差异才格外有信息量。

评测对比表

说明：四件同属官方示例仓库，随 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 范式对照

把四件摆齐，真正的价值浮出来了。同一官方仓库、同一赛道，官方自己就用了四种完全不同的提示词架构：

三条可带走的写法经验：

1. 判断密集型任务用戒律型。凡是「好坏靠品味」的活（设计、写作），负面清单比正面描述有效——「别用 Inter」远比「用好字体」可执行，官方连「别连续两代收敛到同一款安全字体」都写到了。
2. 创作型任务可以拆角色。canvas-design 证明了 SKILL.md 可以编剧本：让同一个模型先当评论家写宣言，再当艺术家执行，中间用「大师工艺」话术和预埋差评抬高标准。
3. 有脚本的技能要学会保护上下文。web-artifacts-builder 和 webapp-testing 的共同点是逻辑下沉到脚本、提示词只留流程和警告，webapp-testing 更进一步把「禁止读源码」写成了明文——上下文窗口是技能时代最贵的资源。

串起来就是一条产线

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["交付：单文件产物"]

官方例仓的排布本身就暗示了「做界面」的推荐工序：先定视觉语言，再用戒律约束实现，然后工程化打包，最后真机验证。而「测试后置」是写进说明书的明取舍——先交付再看，出了问题测试员随时进场返修。这条产线也解释了为什么四件技能的写法不同：工序位置决定了信息形态，创意端靠戒律和仪式，工程端靠脚手架和决策树。

安装方式

四件都在官方仓库中，安装共用一套命令，拷贝对应技能目录即可：

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 仓库 — 本文四件技能均出自该仓库的示例技能集，随官方 example-skills 插件分发
2. frontend-design、web-artifacts-builder、canvas-design、webapp-testing 四份 SKILL.md 原文 — 本文所有引文与流程描述均出自第一手文本（各技能目录下 SKILL.md）
3. skills.sh — Skills 生态站 — 可查技能热度榜单与安装量，用于追踪官方与社区技能的动向

[!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 等场景全覆盖。