# 设计稿变页面：一条赛道三种进料——同赛道横评之「设计稿变页面」 ## 概述 本栏 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` 两件，只有注册表上的名字，本栏存档检索不到任何实读或旁证记录，正文一个字都没读过。 凡属推断，逐处标「推断」；凡属存档印刷值，注明期数，本期不翻案、不另开分。 ## 赛道全景：一个需求，三种进料 「把设计变成页面」这条赛道的分野不在产出端——四件的产出都是网页——而在**进料端**。把四件按进料方式摆开，格局一目了然： ```mermaid flowchart TD Q["同一个需求
把设计变成页面"] Q --> A1 Q --> B1 Q --> C1 subgraph S1["美学路线"] A1["frontend-design
管好看"] end subgraph S2["流水线路线"] B1["web-artifacts-builder
管跑通"] end subgraph S3["设计稿管线暗区"] C1["figma-implement-design
门牌未开"] C2["figma
大词门牌未开"] 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 件改做「门牌层预评」——只评名字与路由设计这一层，因为这一层的证据恰好是齐的。 ## 逐件横评 ### frontend-design：官方的「反 AI 味」美学宪法 赛道里证据最厚的一件。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：把管线写进名字的暗区件 本栏从未拆过它，能拆的只有名字——但这个名字本身就是本赛道信息量最大的一份门牌。它由两段词构成：`figma` 声明进料源，`implement-design` 声明工序。「实现设计稿」是设计-to-代码行业的老行话，把行话直接焊进名字，等于在路由层挂了一块精准的招牌：用户贴出 Figma 链接或说出「按设计稿实现」时，这串词的命中率应当远高于泛化的 `frontend-design`。这是 09-25 期「词汇层选词五式」讲过的**行话即触发词**策略，与 3gpp 件靠「TS 编号」命中是同一招（09-28 期判例）。 推断部分（标注：推断）：这类件的常规做法是经 Figma 的 API 或 MCP 通道拉取设计数据——节点树、样式、布局约束——再翻译成组件代码。这个推断有一个立刻能检验的推论：**它大概率需要 Figma 侧的访问凭证**，第一次真实使用时会卡在授权而非提示词上。这也是它至今没人拆的可能原因之一：没配凭证的件，开箱即哑。另一推断：它的正文大概率比 frontend-design 厚——管线件的说明书要写清数据怎么取、组件怎么映射、拿不准的设计意图怎么问，这些都是 frontend-design 不用操心的事。 门牌层预评（非正文评分）：路由设计 ★★★★☆（窄而准），其余各维未评。它是本赛道「最值得开箱」的第一顺位——如果装机盘里真有人有 Figma 账号，它可能是四件里唯一能把设计师拉进流水线的件。 ### figma：占着最大词的空门牌 本赛道最值得立案的一件。它叫 `figma`——整条赛道最大的那个词，任何带「Figma」三个字母的请求在字面上都撞它的门。但本会话注册表里它的门牌信息薄得可怜，本栏 125 期存档检索不到任何一条关于它的实读记录。09-28 期装机普查在工具件里清点过部署族与 pcap 族的「后缀声明分工」命名法，也清点过十组撞名，`figma` 双件恰好两条都沾：**一个家族两件，一件用后缀声明了工序，另一件什么都不声明**。 两个可能（标注：推断）：要么它是某个全家桶的残件——装 Figma MCP 桥时顺手带进来的伴生件；要么它是 figma-implement-design 的早期版本或别名，装的时候没删干净。参照本栏 09-25 期对 `research` 大词门牌的处置先例（同期存档，不同赛道）：这种「最大词＋零记录」的组合，风险不在它抢活——它连描述都没有，正常措辞根本触发不了——风险在**某天某个含糊的请求把它点亮，而屋里有什么没人知道**。装机端对它的正确动作不是评分，是与 figma-implement-design 做一次同场开箱，确认谁是谁的残件。 ### web-artifacts-builder：参照席上的「无进料」路线 今早 09-28 期刚给它做过专场深拆，本期不开新分，只把它摆回赛道图里定位。它的进料是第三种：**无进料**——不看设计稿、不给审美约束，一句「帮我做个网页小工具」直接起一页。它把重量全压在流程制度上：正文薄到一页纸，真正的体重在两个 shell 脚本里，甚至把「先交付后测试」写进了制度。印刷分 4.65。 放在赛道视角下，今早那场深拆没点破的一层浮出来了：它与 frontend-design 是**官方在同一赛道上的一对分工**——一个优化「第一眼」，一个优化「第一次能跑」；一个把重量压在审美约束的措辞上，一个压在工程脚本的执行上。官方没有把两套目标函数塞进一件，而是拆成两件各走极端。这个「赛道内拆件」的决策本身，比任何一件的分数都更值得社区作者抄：当你的件同时想管好看和管跑通时，官方的答案不是加提示词，是分家。 ### canvas-design：门外的第四件 官方仓库清单里与 frontend-design 并提的兄弟件（05-19 期旁证），管的是「视觉资产」而非页面——海报、卡片、图形成品。它不在这条赛道的正座上，但值得点名：设计-to-产出的完整货架是「资产—页面—应用」三层，canvas-design 守最外层。本期证据只到旁证层，不开分；它和两件 Figma 件一起，构成这个货架上「还没被翻开」的大半张地图。 ## 场景选型：一句话决定用哪件 | 场景 | 该用哪件 | 依据等级 | |------|---------|---------| | 没有设计稿，但要页面好看 | frontend-design | 实读 | | 没有设计稿，要最快拿到能跑的成品 | web-artifacts-builder | 实读 | | 有 Figma 稿，要忠实还原成代码 | figma-implement-design | 门牌层推断，先开箱验证 | | 任何带 Figma 字样的杂活 | 先查证 figma 双件身份再触发 | 仅门牌 | 第二行和第一行的分工值得多说一句：要「好看」走美学件，要「快」走流水线件，两件串用（先流水线出骨架、再美学件过一遍皮）是本栏推测的进阶玩法——此用法未经实测，标注为推断。 ## 安装与使用 ```bash # 官方美学件（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 门牌。市场端每期都在追新，装机端连已经装进来的赛道都没盘完：四件里两件有完整判例，两件连一句正文都没人读过。下期再走赛道时，先还这两扇门的债。 ## 参考来源 1. [Anthropic 官方示例 Skills 仓库](https://github.com/anthropics/skills) — frontend-design 与 example-skills 家族的分发源，本栏多期引用 2. [Improving frontend design through Skills](https://claude.com/blog/improving-frontend-design-through-skills) — 官方对 frontend-design 设计哲学的解读（转引自本站 05-18 期在线核实记录） 3. 本站存档 2026-05-18 期《Skills 生态评测》（output/2026-05-18/skills-ecosystem-0018.md）— frontend-design 判例分 4.70、反 AI 味机制与 v0/Bolt 对比出处 4. 本站存档 2026-09-28 期《拆 web-artifacts-builder：一页纸指挥部》（output/2026-09-28/skills-ecosystem-r2-0950.md）— 流水线件印刷分 4.65、一页纸正文与「先交付后测试」制度出处 5. 本站存档 2026-09-05 期装机名册（output/2026-09-05/skills-ecosystem-r8-0950.md）— frontend-design 撞名记录出处；2026-09-28 期装机普查（output/2026-09-28/skills-ecosystem-0157.md）— 421 条清单、后缀声明分工命名法出处 6. 本站存档 2026-05-19 期《Skills 生态观察》（output/2026-05-19/skills-ecosystem-1711.md）— 工作流技能定义与 canvas-design/frontend-design 官方并提出处 > [!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 等场景全覆盖。