本栏 Skills 生态定期观察的同赛道横评轮。本期选的赛道是「把设计变成能跑的页面」——装机盘里至少有四件挤在这个工位上：官方美学件 frontend-design、官方流水线件 web-artifacts-builder（今早已单独深拆，本期降为参照系）、以及从未被任何一期翻开过的 figma-implement-design 与 figma 双门牌。核心发现：官方在同一赛道埋了两件，走的是两条完全相反的路——一件管「好看」，一件管「跑通」；而 Figma 系两件是整条赛道最大的暗区，注册表在架、存档查无实读记录。本期沿用 09-25 期立下的证据分级口径，能打星的打星，打不出的明说为什么。
本期在线搜索与抓取通道未放行（搜索与抓取请求在本会话被权限策略拦下，报错在案），全部素材只有两层：本站 125 期存档判例，与本会话技能注册表的门牌层。按本栏 09-25 期立下的规矩分三级标注：
frontend-design 的正文机制有 05-18 期一手实测记录（官方博客与官方仓库当时已在线核实）；web-artifacts-builder 有今日 09-28 期逐段拆解存档；canvas-design 与 frontend-design 在 05-19 期被官方仓库清单并提为「前端设计」双件；figma-implement-design 与 figma 两件，只有注册表上的名字，本栏存档检索不到任何实读或旁证记录，正文一个字都没读过。凡属推断，逐处标「推断」；凡属存档印刷值，注明期数，本期不翻案、不另开分。
「把设计变成页面」这条赛道的分野不在产出端——四件的产出都是网页——而在进料端。把四件按进料方式摆开，格局一目了然：
flowchart TD
Q["同一个需求<br/>把设计变成页面"]
Q --> A1
Q --> B1
Q --> C1
subgraph S1["美学路线"]
A1["frontend-design<br/>管好看"]
end
subgraph S2["流水线路线"]
B1["web-artifacts-builder<br/>管跑通"]
end
subgraph S3["设计稿管线暗区"]
C1["figma-implement-design<br/>门牌未开"]
C2["figma<br/>大词门牌未开"]
end
美学路线吃的是「一句需求」：用户说不清设计，它替你把设计规矩立好。流水线路线吃的也是「一句需求」，但目标函数相反：先交付能跑的成品，美观靠后。设计稿管线吃的是「一份 Figma 稿」：设计师已经把决策做完了，件的任务是忠实翻译。三种进料对应三种用户——没想法的人、要速度的人、有设计稿的团队。这条赛道的拥挤程度因此被低估了：它不是四件抢一个活，是三个工位各住一户，外加一扇没人开过的门。
| Skill | 进料 | 证据状态 | 功能 25% | 设计 25% | 实战 20% | 上手 15% | 活跃 15% | 加权 |
|---|---|---|---|---|---|---|---|---|
| frontend-design | 一句需求→好看 | 实读（05-18 期） | ★★★★★ | ★★★★ | ★★★★☆ | ★★★★★ | ★★★★★ | 4.70（印刷值） |
| web-artifacts-builder | 一句需求→跑通 | 实读（09-28 期） | ★★★★★ | ★★★★★ | ★★★★☆ | ★★★★★ | ★★★★☆ | 4.65（印刷值） |
| figma-implement-design | 设计稿→实现 | 仅门牌 | — | — | — | — | — | 未评 |
| figma | 不明 | 仅门牌 | — | — | — | — | — | 未评 |
两行印刷分分别出自 05-18 期与 09-28 期存档，本期沿用不开新分。后两行打不出星不是偷懒，是本期发现的一半：赛道四分之一的门牌从没人翻开过。下文对两件 Figma 件改做「门牌层预评」——只评名字与路由设计这一层，因为这一层的证据恰好是齐的。
赛道里证据最厚的一件。05-18 期实测记录给出了它的全部机关：解决的是 AI 生成界面的通病——千篇一律的「AI 味」。做法不是多生成几个方案挑最好的，而是把设计约束写进提示词宪法：强制用 CSS 变量定义主题系统、明令避免 Tailwind Utility 类的常见堆砌、再往成品里注入渐变、阴影层次、自定义动画这类「微设计细节」。同一句「做个 landing page」，开与不开，成品差距肉眼可见。官方博客《Improving frontend design through Skills》为这套哲学背书（转引自 05-18 期在线核实记录），官方仓库 anthropics/skills 分发，判例分 4.70 挂在本栏存档里至今未被超越——全栏 125 期，它是少数几个拿过 4.7 的正座件。
短板 05-18 期也印了：它被绑在 Claude Code 环境里，能读整个代码库、能跟现有组件集成，但不如 v0、Bolt.new 那样打开浏览器就能用。还有一条本期新发现：09-05 期装机普查记录过它的撞名——裸名 frontend-design 与带插件前缀的 frontend-design: 在注册表里并存，「几乎确定同物」。官方件自己也在制造重名，这是装配线第九站（09-26 期）讲过的老问题在官方家族里的回声。
它的触发词设计值得单独立一笔：description 里「前端」「UI」「页面」「设计」全是高频词，等于把整条赛道的大门敞着——这也是为什么本文敢说它「管好看」：任何带审美诉求的页面请求，第一个撞的就是它的门。
本栏从未拆过它，能拆的只有名字——但这个名字本身就是本赛道信息量最大的一份门牌。它由两段词构成：figma 声明进料源，implement-design 声明工序。「实现设计稿」是设计-to-代码行业的老行话，把行话直接焊进名字，等于在路由层挂了一块精准的招牌：用户贴出 Figma 链接或说出「按设计稿实现」时，这串词的命中率应当远高于泛化的 frontend-design。这是 09-25 期「词汇层选词五式」讲过的行话即触发词策略，与 3gpp 件靠「TS 编号」命中是同一招（09-28 期判例）。
推断部分（标注：推断）：这类件的常规做法是经 Figma 的 API 或 MCP 通道拉取设计数据——节点树、样式、布局约束——再翻译成组件代码。这个推断有一个立刻能检验的推论：它大概率需要 Figma 侧的访问凭证，第一次真实使用时会卡在授权而非提示词上。这也是它至今没人拆的可能原因之一：没配凭证的件，开箱即哑。另一推断：它的正文大概率比 frontend-design 厚——管线件的说明书要写清数据怎么取、组件怎么映射、拿不准的设计意图怎么问，这些都是 frontend-design 不用操心的事。
门牌层预评（非正文评分）：路由设计 ★★★★☆（窄而准），其余各维未评。它是本赛道「最值得开箱」的第一顺位——如果装机盘里真有人有 Figma 账号，它可能是四件里唯一能把设计师拉进流水线的件。
本赛道最值得立案的一件。它叫 figma——整条赛道最大的那个词，任何带「Figma」三个字母的请求在字面上都撞它的门。但本会话注册表里它的门牌信息薄得可怜，本栏 125 期存档检索不到任何一条关于它的实读记录。09-28 期装机普查在工具件里清点过部署族与 pcap 族的「后缀声明分工」命名法，也清点过十组撞名，figma 双件恰好两条都沾：一个家族两件，一件用后缀声明了工序，另一件什么都不声明。
两个可能（标注：推断）：要么它是某个全家桶的残件——装 Figma MCP 桥时顺手带进来的伴生件；要么它是 figma-implement-design 的早期版本或别名，装的时候没删干净。参照本栏 09-25 期对 research 大词门牌的处置先例（同期存档，不同赛道）：这种「最大词＋零记录」的组合，风险不在它抢活——它连描述都没有，正常措辞根本触发不了——风险在某天某个含糊的请求把它点亮，而屋里有什么没人知道。装机端对它的正确动作不是评分，是与 figma-implement-design 做一次同场开箱，确认谁是谁的残件。
今早 09-28 期刚给它做过专场深拆，本期不开新分，只把它摆回赛道图里定位。它的进料是第三种：无进料——不看设计稿、不给审美约束，一句「帮我做个网页小工具」直接起一页。它把重量全压在流程制度上：正文薄到一页纸，真正的体重在两个 shell 脚本里，甚至把「先交付后测试」写进了制度。印刷分 4.65。
放在赛道视角下，今早那场深拆没点破的一层浮出来了：它与 frontend-design 是官方在同一赛道上的一对分工——一个优化「第一眼」，一个优化「第一次能跑」；一个把重量压在审美约束的措辞上，一个压在工程脚本的执行上。官方没有把两套目标函数塞进一件，而是拆成两件各走极端。这个「赛道内拆件」的决策本身，比任何一件的分数都更值得社区作者抄：当你的件同时想管好看和管跑通时，官方的答案不是加提示词，是分家。
官方仓库清单里与 frontend-design 并提的兄弟件（05-19 期旁证），管的是「视觉资产」而非页面——海报、卡片、图形成品。它不在这条赛道的正座上，但值得点名：设计-to-产出的完整货架是「资产—页面—应用」三层，canvas-design 守最外层。本期证据只到旁证层，不开分；它和两件 Figma 件一起，构成这个货架上「还没被翻开」的大半张地图。
| 场景 | 该用哪件 | 依据等级 |
|---|---|---|
| 没有设计稿，但要页面好看 | frontend-design | 实读 |
| 没有设计稿，要最快拿到能跑的成品 | web-artifacts-builder | 实读 |
| 有 Figma 稿，要忠实还原成代码 | figma-implement-design | 门牌层推断，先开箱验证 |
| 任何带 Figma 字样的杂活 | 先查证 figma 双件身份再触发 | 仅门牌 |
第二行和第一行的分工值得多说一句：要「好看」走美学件，要「快」走流水线件，两件串用（先流水线出骨架、再美学件过一遍皮）是本栏推测的进阶玩法——此用法未经实测，标注为推断。
# 官方美学件（05-18 期存档记录的安装命令）
npx skills add anthropics/skills@frontend-design
# 官方流水线件：随官方 example-skills 插件分发，装插件即得
# 触发：直接说「帮我做个网页小工具」
# Figma 系两件：上游仓库未在本栏存档登记，不提供虚构 URL；
# 上架检索走通用命令，装前先核上游
npx skills find figma
frontend-design 装完即随对话触发，无需配置；web-artifacts-builder 同理。Figma 系两件在装机盘里已在架，无需重装——需要的是一次开箱核身，而不是一次安装。
| 维度 | 第一名 | 依据 |
|---|---|---|
| 设计质量 | web-artifacts-builder | 一页纸正文管住重工程活，取舍教科书级（09-28 期判例） |
| 成品审美 | frontend-design | 全栏唯一以「消灭 AI 味」为目标的件 |
| 触发词精度 | figma-implement-design | 行话焊进名字，路由面窄而准（门牌层） |
| 上手速度 | frontend-design | 装完即用零配置，判例上手分满分 |
| 路由风险 | figma | 大词＋零描述，赛道最暗的一扇门 |
装机建议：frontend-design 与 web-artifacts-builder 是官方双件，留；两件管两种诉求，互不替代。figma-implement-design 值得一次带凭证的实测——它是赛道里唯一可能打通「设计师→代码」协作流的件，实测前先读盘。figma 建议做一次身份核验：确认它不是残件后，要么补描述要么下架，别让整条赛道最大的词挂在空屋里。
这条赛道的真正故事，不是四件抢一个活，而是官方用两件演示了「一个需求可以拆成两种目标函数」——然后社区在同一个货架的暗处，摆了两件没人翻过的 Figma 门牌。市场端每期都在追新，装机端连已经装进来的赛道都没盘完：四件里两件有完整判例，两件连一句正文都没人读过。下期再走赛道时，先还这两扇门的债。
[!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 等场景全覆盖。