# 谁替你出界面：前端四件横评 ## 本期范围与口径 这一轮做同赛道对比：**「让 Claude 出界面」赛道**——用户一句"给我做个页面/海报/演示"，接活的到底是哪几个 Skill，它们的 SKILL.md 分别用什么思路把这个活接住。 先交代统计口径：本期样本取自本机 Claude Code 装机清单（每个 Skill 的挂载形态在清单里可见）与 Anthropic 官方 skills 渠道。因本期环境未能访问第三方计数服务，**社区活跃度一项按分发渠道定性打分，未引用任何 Star 数与下载量**；凡本期未能核验的细节，正文一律标注。这也是这个栏目一贯的对账规矩：拿不到的数，宁可空着，不编。 装机对账时一个现象先说：本机清单里和"把想法变成可视成品"沾边的 Skill 命名超过二十个——pptx 系五件、slides 系两件、出图系六七件、图表系五六件。但**真正落在"网页/前端界面"这个细分方向的，只有四件**。这个赛道窄，但恰好是四种完全不同的 SKILL.md 写法，横评价值反而最高。 ## 赛道地图 ```mermaid mindmap root((表达层产出)) 页面与网页工件 frontend-design web-artifacts-builder 平面海报 canvas-design 演示幻灯 frontend-slides pptx系 交互玩具 develop-web-game ``` 本期横评锁定上图的左半边：页面与网页工件两件、平面一件、幻灯一件，共四件。 ## 评测对比表 | 维度 | 权重 | frontend-design | web-artifacts-builder | canvas-design | frontend-slides | |------|------|------|------|------|------| | 功能完整度 | 25% | ★★★★ | ★★★★ | ★★★★ | ★★★ | | 设计质量 | 25% | ★★★★★ | ★★★★ | ★★★★ | ★★★ | | 实战效果* | 20% | ★★★★ | ★★★★ | ★★★ | ★★★ | | 上手难度 | 15% | ★★★★★ | ★★★★ | ★★★★ | ★★★ | | 社区活跃度** | 15% | ★★★★★ | ★★★★ | ★★★★ | ★★ | | **加权总分** | — | **4.55** | **4.00** | **3.80** | **2.85** | \* 实战效果为本期基于 SKILL.md 工作方式的设计推演，非实测跑分。 \*\* 活跃度按分发渠道定性：官方插件随主渠道分发 > 官方示例仓库 > 本地社区件。 一个前置证据，来自装机清单本身：`frontend-design` 在本机以 `frontend-design:frontend-design` 形态挂载——冒号前缀说明它是**独立插件**；`canvas-design` 与 `web-artifacts-builder` 挂在 `example-skills:` 前缀下——它们住在官方示例技能包里；`frontend-slides` 没有前缀，是独立安装的社区件。**挂载形态即分发地位**，这个信号比任何榜单都硬。 ## 第一名：frontend-design —— 全生态最狠的"负面清单" **定位**：不搭脚手架、不建工程，只管一件事——让 Claude 写出来的前端**不像 AI 做的**。它假设工程结构由别人管（脚手架件、或用户自己的仓库），自己死守审美这一层。 **SKILL.md 设计**：这是本赛道、也是整个 Skills 生态里被引用最多的写法之一——**军令体负面清单**。它的结构大致三层： 1. **第一步就逼你站队**：写任何代码之前，先选一个大胆的、极端的美学方向并坚持到底。"极端的选择，好过平庸的选择"是它整篇的题眼。 2. **负面清单占大头**：点名禁掉 AI 味的默认动作——Inter/Roboto/Arial/system-ui 不许当主字体（要选有性格的展示字体）、紫色渐变、默认蓝、四平八稳的均匀卡片布局、为动而动的渐入动画。清单越具体，模型越没有退路。 3. **正面指令给出口**：字体要有当下感、留白是内容的一部分、动效只服务叙事、颜色是氛围不是装饰。 这个写法聪明在**把"品味"翻译成了"禁令"**。模型不是不会好看，是默认路径太滑向均值——负面清单的作用是把滑向均值的每条斜坡都拆掉。 **短板**：它刻意不管工程。想要一个能跑的项目结构，得另请高明；而它的禁令在用户已有设计规范（design system）时需要整段让位——SKILL.md 对这个让位场景的着墨偏少。 **适配**：任何"正式产品页、落地页、作品集"场景的必备底层。装它不亏。 ## 第二名：web-artifacts-builder —— 薄正文、重脚本 **定位**：为"单文件网页工件"场景设计的脚手架件：React 18 + Tailwind + shadcn/ui，最终产出一个自包含的 HTML 文件。对应的是 Claude 这类"工件（artifact）"运行环境里即开即用的网页成品。 **SKILL.md 设计**：如果说 frontend-design 是"军令体"，这件就是另一极——**正文薄，重活全外包**： 1. **SKILL.md 本身只做路由**：判断需求形态、指路，真正的初始化交给一个配套脚本（建工程、装依赖、铺好组件目录一气呵成）。 2. **组件清单即能力清单**：正文附一张 shadcn/ui 可用组件表（手风琴、对话框、下拉、警告条等），模型按单取料，不发明轮子。 3. **图标与细节有规定动作**：图标统一走 lucide，JSX 写法针对单文件运行环境做了裁剪。 这是典型的**"Skill 是调度员，脚本是施工队"**分层——SKILL.md 越短，上下文窗口越省，行为越稳定。对一个高频执行的件，这个取舍是对的。 **短板**：技术栈锁死在 React + Tailwind + shadcn；产出的"单文件工件"形态适合演示与轻应用，离生产工程（路由、状态管理、构建链）有明确距离。想要 Vue/Svelte 或者真实仓库的，它帮不了。 **适配**：快速出可交互 demo、内部工具原型、教学示例。 ## 第三名：canvas-design —— 平面件的"原则课"写法 **定位**：产出 PNG/PDF 成品的平面设计件——海报、封面、视觉图。它与前两件之间有一条清晰的**介质分界线**：前两件交 HTML，它交位图/文档。 **SKILL.md 设计**：第三种写法——**设计原则课 + 迭代审稿**。正文花大篇幅讲颜色层次、排版网格、视觉焦点的通用原则，然后要求产出后自我审查、迭代修改，而不是一次出稿。负面清单少量存在，但主基调是"教原则，让模型自己推导"。 **对比之下**，这恰是三种流派的分野：frontend-design 用**禁令**压均值，web-artifacts-builder 用**脚本**锁动作，canvas-design 用**原则**养判断。禁令见效最快但泛化最差，脚本最稳但最僵硬，原则最慢但迁移性最好——三种写法没有对错，取决于这个 Skill 管的活**方差有多大**。平面设计的方差比"出页面"小（介质、尺寸、元素都更收敛），所以原则课写法在它身上成立。 **短板**：一次出稿的"第一眼惊艳度"依赖模型自身审美水位，弱模型上原则课可能不如直接喂禁令。 **适配**：封面图、活动海报、社交配图。若你需要的是页面而非平面，它和前两件不构成竞争关系。 ## 第四名：frontend-slides —— 命名即定位的本地件 **定位**：从命名与本机挂载形态看，这是一件用前端技术栈做演示幻灯的社区件。**坦白说明：本期未能核验其仓库正文，以下仅据装机清单的命名与位置判断，置信度低。** **清单级观察**：它的名字是"前端 + 幻灯"的直接拼合——这类命名在生态里属于"功能自解释"派，好处是触发直观，坏处是和 pptx 系（五件）、knowledge-to-slides 形成一个拥挤的近义区：同一个"做 PPT"的意图，本机就有至少七件可接。**命名自解释的代价是撞车**——用户说"做个演示"，路由给谁，取决于七件各自的 description 怎么写，而这不是名字能解决的。 **给分说明**：因为正文未核验，各维度全部给保守分。它排在末位更多反映"本期可见信息量"，不必然反映成品质量——这是本表的诚实边界。 ## 三种写法，一张路由图 把四件放进同一条请求链，谁接什么活一目了然： ```mermaid flowchart TD A["用户要一个界面"] --> B{"要什么形态"} B -->|"网页工件"| C["web-artifacts-builder"] B -->|"正式产品页"| D["frontend-design"] B -->|"海报平面"| E["canvas-design"] B -->|"演示幻灯"| F["frontend-slides"] C --> G["脚本铺工程"] D --> H["先定美学方向"] G --> I["单文件HTML"] H --> I E --> J["原则课出图"] F --> K["前端栈排页面"] ``` 注意这张图里没有互相替代关系：**frontend-design 和 web-artifacts-builder 理论上可以串联**——先由脚手架件铺工程，再由审美件定方向。装机清单里两者独立存在，目前没有一件把"脚手架 + 反AI味"合成一体，这是赛道上一个明显的空位。 ## 安装与使用 ```bash # 官方件通用装法（示例件在官方 skills 仓库） git clone https://github.com/anthropics/skills # 把需要的技能目录拷进用户级技能目录 cp -r skills/ ~/.claude/skills/ # skills.sh 口径的安装器（具体命令以官网页面显示为准） npx skills add / # frontend-design 本机为插件形态挂载，走插件渠道安装/更新即可 # frontend-slides 为本机已有社区件，无需额外安装 ``` 装完用 `/skills` 或直接在对话里说"帮我做一个落地页"即可观察触发。验证是否挂载成功的硬信号：清单里出现对应名字。 ## 分维度排行榜 - **设计质量榜**：frontend-design ＞ web-artifacts-builder ＞ canvas-design ＞ frontend-slides。军令体负面清单是本期最佳单件设计，值得任何想写 Skill 的人抄走这个骨架。 - **开箱即用榜**：frontend-design ＞ canvas-design ＞ web-artifacts-builder ＞ frontend-slides。零依赖零配置者胜，带工程脚手架者次之。 - **工程化程度榜**：web-artifacts-builder ＞ frontend-design ＞ canvas-design ＞ frontend-slides。唯一把初始化写成可执行脚本的件。 - **综合榜**：frontend-design（4.55）＞ web-artifacts-builder（4.00）＞ canvas-design（3.80）＞ frontend-slides（2.85，低置信度）。 ## 本期结论 "出界面"这个赛道，四件正好构成一个完整的**写法光谱**：禁令驱动（frontend-design）、脚本驱动（web-artifacts-builder）、原则驱动（canvas-design）、命名驱动（frontend-slides）。前三种都是成熟模式，第四种是大多数新上架 Skill 的实际状态——名字说明一切，正文撑不起行为。 给想自己写 Skill 的读者的直接启示：**先判断你的活方差大不大**。方差小（固定栈、固定产物），学 web-artifacts-builder 把动作写进脚本；方差中（有通用原则可循），学 canvas-design 上原则课；方差大且容易被模型均值化（审美、文风），学 frontend-design 立负面清单。唯一不该学的，是只起一个好名字。 ## 参考来源 1. [anthropics/skills](https://github.com/anthropics/skills) — 官方 Skills 仓库，frontend-design、canvas-design、web-artifacts-builder 等件的源头渠道 2. [skills.sh](https://skills.sh) — Skills 分发与安装器渠道，`npx skills add` 命令口径来源 3. [skillsmp.com](https://skillsmp.com) — 2300+ Skills 可搜索目录，赛道拥挤度观察背景 4. [mcpservers.org/agent-skills](https://mcpservers.org/agent-skills) — 官方与社区精选 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 等场景全覆盖。