发布于 2026-08-25 · 作者 MarkupGen 团队
Figma to HTML 对比 React 对比 Tailwind：该选哪个？
MarkupGen 会把同一个 Figma 设计导出为多种格式，而"HTML"、"React"和"Tailwind"是被问到最多的三个名词。但它们并不是回答同一个问题的三个互相竞争的答案——它们回答的其实是两个不同的问题：
- 输出应该是什么样的标记？ 静态 HTML，还是 React 组件？
- 应该用什么方式做样式？ Tailwind，还是别的方式（Vanilla CSS、Bootstrap、Bulma、Materialize、Pico，或 CSS Modules）？
Tailwind 是一种样式方案，而不是 HTML 或 React 的竞争对手——你可以把 Tailwind 的类名和静态 HTML 输出搭配使用，也可以和 React 组件搭配使用。这篇指南会讲清楚每种选择到底适合什么场景，让你根据实际需求做决定，而不是凭哪个名词听起来更熟悉。
Figma to HTML/CSS——适合静态网站，以及不需要应用级交互的页面
当设计本身就是一个完整的页面、而不是更大应用中的一部分时，MarkupGen 的 Figma to HTML/CSS 转换器是正确的默认选择：营销网站、落地页、文档页面，或者类似邮件的微型站点。
适合的场景：
- 落地页和活动页面（参见 面向营销团队的 MarkupGen）
- 静态或接近静态的网站——作品集、宣传型网站、单页产品页
- 想直接部署输出结果、不需要构建步骤或框架依赖的项目
- 没有专职前端工程师、但仍需要生产可用标记的团队
真实存在的限制，不夸大：
- 输出的是静态结构和样式——任何真正的交互（表单校验逻辑、客户端状态、数据请求）之后仍需要你自己接入
- 如果这个页面其实只是更大产品中的一个屏幕，之后再手动把它接回应用框架，比一开始就用 React 导出要多做更多返工
完整的分步指南请见 如何把 Figma 设计转换为干净的 HTML 和 CSS。
Figma to React——适合产品界面、SaaS 应用和已有代码库
当设计是更大应用中的一部分、而不是一个独立页面时——比如仪表盘屏幕、设置面板、可复用的卡片组件，任何需要活在 state、props 或已有路由中的东西——MarkupGen 的 Figma to React 转换器就更合适。
适合的场景：
- SaaS 产品界面和内部工具——任何屏幕只是更大应用一部分的场景
- 设计系统中，某个组件需要在多个屏幕间复用
- 已有 React 代码库、希望新屏幕能直接接入的团队（参见 面向前端开发者的 MarkupGen）
- 设计本身已经暗示了交互/动态行为（标签页、弹窗、条件状态），从一开始就以组件形式构建会更容易的场景
真实存在的限制，不夸大： 生成的组件负责结构和样式——把它们接入真实的 props、API 数据或应用状态，仍然是你的工作。MarkupGen 是根据设计的实际结构来构建组件，而不是去猜测你的应用状态应该长什么样。关于哪些部分是自动化的、哪些仍需手动完成，完整拆解见 Figma to React：面向开发者的实用工作流。
Tailwind 到底适合放在哪里
Tailwind 并不是与 HTML 和 React 并列的第三种输出格式——它是 MarkupGen 支持的六种 CSS 样式方案之一，无论周围的标记是静态 HTML 还是 React 组件，它都可以应用。MarkupGen 的 Figma to Tailwind 转换器会根据设计中真实的 token（间距、颜色、字号级别）生成对应的工具类，而不是给出一个笼统的猜测。
在以下情况下选择 Tailwind：
- 团队已经在使用 Tailwind，希望生成的输出符合现有约定，而不是再引入第二套样式系统
- 希望生产环境的 CSS 保持精简——Tailwind 的 JIT 引擎只会输出实际用到的工具类
- 正在一个设计系统内开发，一致的间距/颜色 token 比手动命名的语义类名更重要
在以下情况下选择其他 CSS 方案：
- 想要零框架依赖、完全手动控制——参见 Figma to CSS，获得可手动编辑的普通样式表
- 团队因为其他原因已经统一使用 Bootstrap、Bulma、Materialize 或 Pico（参见 MarkupGen 支持的 6 种 CSS 框架完整对比）
- 正在把 React 组件导出到一个已经使用 CSS Modules 或 styled-components 的代码库中
对比表
| Figma to HTML | Figma to React | Figma to Tailwind | |
|---|---|---|---|
| 回答的问题 | 什么标记？（静态） | 什么标记？（组件） | 如何做样式？ |
| 最适合 | 落地页、营销网站、静态/宣传页 | SaaS 产品界面、仪表盘、可复用组件、已有 React 应用 | 以上任意场景中，想用工具类样式而非命名类样式表时 |
| 能直接部署吗？ | 能——不需要构建步骤 | 不能——需要 React 构建/打包工具 | 取决于搭配的是哪种标记 |
| 能处理交互/状态吗 | 不能——需要你自己添加 | 结构已就绪；你来接入真实的状态/props/数据 | 不适用（只是样式层） |
| 能和另外两种组合吗？ | 可与全部 6 种 CSS 框架组合，包括 Tailwind | 可与 Tailwind 或 CSS Modules 组合 | 可与 HTML 或 React 输出组合 |
按使用场景决定
- 落地页或活动页面 → Figma to HTML，如果团队偏好工具类，可选用 Tailwind 做样式
- SaaS 应用屏幕或产品界面 → Figma to React
- 静态营销网站或宣传站 → Figma to HTML
- 已有 React 应用中的新屏幕 → Figma to React，搭配该代码库已在使用的样式方案
- 团队已统一使用 Tailwind 的设计 token 工作流，但输出格式还没定 → 先按上面的标记问题选择 HTML 或 React，样式方面无论哪种都选 Tailwind
- 快速搭建第一版的初创团队，框架尚未定型 → 参见 面向初创公司和创始人的 MarkupGen——在应用框架还没决定时，Figma to HTML 通常是更快的起点
简而言之
先问"这是一整个页面，还是应用的一部分？"——这个问题回答了 HTML 还是 React。再独立地问"用工具类，还是用命名样式表？"——这个问题回答了 Tailwind（或 MarkupGen 另外五种 CSS 框架之一）是否合适。这不是一个三选一的问题，而是两个更小的选择，无论你最终选出什么组合，MarkupGen 都支持。