MarkupGen 支持的 6 种 CSS 框架：优缺点与如何选择

把 Figma 设计转换成代码只是决策的一半——另一半是这些代码该用什么方式来做样式。是手写纯 CSS？用 Tailwind 的 utility class？还是像 Bootstrap 或 Bulma 这样的组件库？MarkupGen 可以把设计导出为以上任意一种，但每种方案在文件体积、定制自由度，以及最终效果与原设计的还原度上各有取舍。下面是这六种框架的实用对比。

为什么这项功能被内置在 MarkupGen 里

大多数 Figma 转代码工具会把输出锁定在单一的 CSS 方案上，之后想换就得手动重建。而在 MarkupGen 中，CSS 框架是一项项目设置，而不是一次性的决定——你可以在配置面板里选择 Vanilla CSS、Tailwind、Bootstrap、Bulma、Materialize 或 Pico，AI 转换会把你的 Figma 布局重新映射到所选框架的栅格、间距和组件规范上，而不是强行输出固定的一种结果。中途改变主意也没关系，重新生成即可，结果会立刻在实时预览中更新。

纯 CSS（Vanilla CSS）

无需依赖任何库，也不用构建步骤——每一个 class 都是手写或按你的设计一比一生成的。

优点：

• 零冗余体积：输出的 CSS 只包含你的设计实际需要的样式
• 不用对抗任何框架的"既定风格"——生成的标记完全还原你的 Figma 布局
• 无需学习或配置任何东西；这些 CSS 可以在任何地方使用，包括没有打包工具的静态 HTML
• 不会和第三方样式表产生 specificity 冲突

缺点：

• 没有内置的设计 token 或 reset——间距、颜色和断点都直接写死在生成的文件里
• 设计越复杂，样式表就越大，因为没有可复用的公共 utility 层
• 如果你本身不太熟悉 CSS，导出后手动修改会比较吃力

适合场景：单页落地页、邮件模板，以及任何需要零运行时依赖、体积尽可能小的场景。

Tailwind CSS

直接在标记上应用 utility-first class（如 flex、p-4、text-slate-600），而不是维护单独的样式表。

优点：

• 与 Figma 的视觉还原度极高——间距、色彩和字号体系几乎能一比一映射到 Tailwind 的 utility 体系
• 不用纠结 class 命名；每个样式都已经和元素直接绑定
• 全站统一的响应式和状态变体（md:、hover:、dark:）
• 生态庞大——如果后续要把导出的代码接入 React 或 Vue 项目，配合度也很好

缺点：

• 标记里会带上一长串 utility class，如果你习惯语义化 class 命名，看起来会比较杂乱
• 要获得最佳效果通常需要构建步骤（PostCSS/CLI），而不是生产环境直接引入 CDN
• 如果团队此前没用过 utility-first 框架，会有一定学习曲线

适合场景：需要像素级还原、导出后还会持续迭代的产品界面和设计系统。

Bootstrap

六者中历史最悠久的一个——MarkupGen 基于 Bootstrap 5.3.3 导出，包含它的 12 栏栅格系统和完整组件集。

优点：

• 现成组件（navbar、modal、card、表单控件等）能让页面快速可用，而不只是静态样式
• 社区庞大，文档详尽，浏览器兼容性可预期
• 几乎每个前端开发者都熟悉，交接给团队毫无压力

缺点：

• 默认外观辨识度很高——想摆脱"Bootstrap 味"需要刻意做样式覆盖
• 会附带你可能用不到的组件 CSS，比按需生成的方案更臃肿
• 如果自定义样式的作用域没控制好，覆盖内置 class 容易引发 specificity 冲突

适合场景：内部工具、管理后台，以及那些更看重可用、无障碍界面而非独特视觉风格的 MVP 项目。

Bulma

一个现代化的纯 class 框架（MarkupGen 使用 Bulma 1.0.2）——不需要 JavaScript，样式完全由 CSS class 驱动。

优点：

• 默认外观简洁现代，比 Bootstrap 更容易在不做大量覆盖的情况下呈现出独特风格
• 基于 Flexbox 的栅格系统，在生成的标记里易读、易理解
• 完全不依赖 JS，如果你不需要交互组件，导出结果会非常轻量

缺点：

• 生态和社区规模比 Bootstrap 或 Tailwind 小，现成的插件和代码片段较少
• 纯 class 意味着交互组件（下拉菜单、modal 等）需要你自己编写 JS 逻辑
• 无论页面实际用到多少，都会附带完整的样式表

适合场景：需要简洁现代默认风格、但又不希望组件库限制页面结构的营销网站和内容页面。

Materialize CSS

把 Google 的 Material Design 转化为 CSS/JS 框架（MarkupGen 基于 Materialize 1.0.0 导出）。

优点：

• 开箱即用、辨识度高且经过充分验证的 Material Design 模式——card、chip、水波纹效果、阴影层级等
• 自带 JS，支持常见交互组件，而不只是静态样式
• 在视觉层级上有明确的设计主张，对没有专职设计师的团队来说能加快决策

缺点：

• Material Design 的视觉风格非常鲜明，如果你的 Figma 设计本身不遵循这套规范，就不太合适
• 更新节奏比 Tailwind 或 Bootstrap 慢，插件生态也更小
• 因为同时打包了 CSS 和 JS，体积比 Bulma、Pico 这类纯 class 框架更大

适合场景：本身就采用 Material Design 语言的仪表盘和内部应用。

Pico CSS

一个以 classless 为核心理念的框架（MarkupGen 基于 Pico v2 导出），直接为语义化 HTML 添加样式——基础样式无需任何 utility class。

优点：

• 在本文提到的所有组件式框架里体积最小——能自动为 <button>、<article>、<nav> 等语义化标签添加样式
• 内置浅色/深色主题支持，无需额外配置
• 如果标记本身已经是语义化 HTML，这是获得简洁、无障碍基线样式最快的方式

缺点：

• 组件覆盖范围有限——没有栅格系统，也没有超出 classless 样式能力之外的复杂组件
• 由于更倾向合理的默认值而非精细控制，很难对高度定制化的 Figma 设计做到像素级还原
• 大多数团队对它的熟悉程度不如 Bootstrap 或 Tailwind，上手需要多花一点时间

适合场景：文档站点、原型，以及只需要语义化 HTML 和极简 CSS 就足够的内容型页面。

一览对比

如何选择

• 需要导出结果和 Figma 文件像素级一致？ 选 Tailwind 或 Vanilla CSS。
• 需要快速搭出一个能用的界面，且不介意熟悉的默认外观？ 选 Bootstrap。
• 想要简洁现代的站点，又不想引入完整组件库？ 选 Bulma。
• 项目本身基于 Material Design 规范？ 选 Materialize。
• 只需要简洁、无障碍的语义化 HTML，几乎不需要额外样式开销？ 选 Pico。

没有放之四海而皆准的"最佳"选项——合适的框架取决于项目在导出后还会如何演进，以及最终效果需要在多大程度上还原你的原始设计。MarkupGen 支持全部六种方案，你可以按项目挑选，而不必用同一套技术栈应付所有项目。用你自己的 Figma 文件试一试，在写下第一行 CSS 之前就能看清哪种框架最适合你。