当"设计稿即代码"已成红海，一股更激进的潮流正在崛起——零稿出页。用户不交付 Figma 文件、不提交设计稿、甚至不写一行需求文档，仅凭一句自然语言，引擎就要从无到有地长出一张完整可渲染的前端界面。本期聚焦"UI生成 / 组件开发 / 样式设计"三栈，实测七款主流引擎：从 Anthropic 官方的 web-artifacts-builder、frontend-design，到打通设计稿源的 figma-implement-design，再到统管色彩字体的 theme-factory、brand-guidelines、canvas-design，以及把生成与测试焊死的 develop-web-game。我们发现：决定"零稿出页"成败的，不是某一家引擎的全面碾压，而是"美学内核—生成脚手架—样式系统—设计源接入—验证闭环"五段链路的咬合程度。本文给出按变现、按教学、按开箱即用的三套榜单。
| 引擎 | 定位 | 来源 | 功能完整度 | 上手难度 | 变现潜力 | 训练营适用 | 社区活跃 | 综合分 |
|---|---|---|---|---|---|---|---|---|
| web-artifacts-builder | 单文件多组件应用生成 | anthropics/skills（官方） | ★★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★★★ | 4.6 |
| frontend-design | 去 AI 味美学内核 | claude.com 插件（官方） | ★★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | 4.5 |
| figma-implement-design | 设计稿转生产代码 | Figma MCP | ★★★★★ | ★★★ | ★★★★★ | ★★★ | ★★★★★ | 4.3 |
| theme-factory | 主题 token 系统 | anthropics/skills（官方） | ★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★★ | 3.7 |
| canvas-design | 设计哲学静态视觉 | anthropics/skills（官方） | ★★★ | ★★★★ | ★★★★ | ★★★ | ★★★★ | 3.6 |
| brand-guidelines | 品牌视觉规范系统 | example-skills（官方） | ★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.4 |
| develop-web-game | 生成—测试闭环 | davila7/claude-code-templates | ★★★★ | ★★★ | ★★★ | ★★★★★ | ★★★★ | 3.7 |
评分口径：星级为 1–5；综合分按权重（功能 25% / 上手 20% / 变现 25% / 训练营 15% / 社区 15%）加权折算。
anthropics/skills，SKILL.md 明确其为"一套用于构建精巧、多组件 claude.ai HTML 工件的工具集"。/plugin 启用后即可触发。claude-artifacts-builder 等第三方克隆，官方版的优势在于"多组件 + 工程化初始化"而非裸吐代码；劣势是强约束了技术栈（React/Tailwind/shadcn 三件套），Vue、Svelte 阵营无法直接享用。claude.com/plugins/frontend-design，配套博客《Improving frontend design through Skills》。/plugin 市场安装 frontend-design。Koomook/claude-frontend-skills、wilwaldon/Claude-Code-Frontend-Design-Toolkit，官方版胜在权威性与持续更新；第三方往往更激进（自带配置生成器），适合想"加料"的进阶玩家。与 theme-factory 的分工是：前者管"判断与规则"，后者管"成套 token 落地"。help.figma.com 有权威指南），figma-implement-design 技能负责把节点转成生产代码。claude mcp add 接入；触发场景含 Figma URL、node ID、design-to-code。arinspunk/claude-talk-to-figma-mcp（社区双向通信）、builder.io 方案，官方 MCP 在"读"端最稳；"写回 Figma"仍是短板。anthropics/skills/theme-factory，SKILL.md 自述"为幻灯片等工件应用一致、专业样式的工具集"。chunkytortoise 企业版（主打品牌一致性视觉系统），官方版轻量易上手，企业版更适合多项目治理。需注意它在幻灯片场景的描述较强，纯前端页面场景需自行迁移。anthropics/skills/canvas-design。algorithmic-art（p5.js 代码生成交互艺术）相对——前者是静态印刷物，后者是代码生成；与 baoyu-infographic（结构化信息图）相比，canvas-design 更偏"艺术调性"而非"信息传达"。brand-guidelines。theme-factory 互补——theme-factory 给"现成主题"，brand-guidelines 帮你"造自己的主题体系"，二者常串联使用。davila7/claude-code-templates 仓库的 develop-web-game（SKILL.md 在 GitHub 公开）。render_game_to_text 把画面渲染成文本供审查 → 查控制台错误。它强制要求"单一画布 + 暴露 window.render_game_to_text"，让测试回路可自动化。web-game-developer 等只管"生成游戏"的技能，它多了一条"测试与文本回放"的腿，迭代稳定性远胜。mindmap
root((零稿出页<br/>前端UI生成生态))
UI生成层
web-artifacts-builder<br/>单文件多组件应用
canvas-design<br/>设计哲学静态视觉
develop-web-game<br/>生成-测试闭环
组件开发层
figma-implement-design<br/>设计稿转生产代码
figma MCP<br/>设计上下文接入
样式设计层
frontend-design<br/>去AI味美学内核
theme-factory<br/>主题token配方
brand-guidelines<br/>品牌视觉规范
决策三问
有稿吗<br/>有→figma链 / 无→零稿引擎
要静态还是可交互
要单次还是可治理品牌
frontend-design（美学内核）+ web-artifacts-builder（生成脚手架）+ theme-factory（样式落地）—— 三者串联，覆盖"判断—生成—美化"，是零稿场景下性价比最高的官方组合。
零稿出页不是单点工具的竞赛，而是链路的比拼。美学内核决定下限，生成脚手架决定上限，样式系统决定一致性，设计源接入决定专业度，验证闭环决定迭代稳定性。 官方五件套（frontend-design / web-artifacts-builder / theme-factory / canvas-design / brand-guidelines）已把"无稿"场景铺平；当用户带着 Figma 走来，figma-implement-design 接管头部专业市场；而 develop-web-game 提醒我们：能自我验证的生成，才是真正可交付的生成。选型的关键不是"哪个最强"，而是先问三句话——有没有稿？要静态还是可交互？要一次性作品还是要长期可治理的品牌系统？ 答案落定，引擎自然浮现。
[!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 等场景全覆盖。