MarkupGenMarkupGen
文档资源博客应用场景对比
登录免费转换
文档

MarkupGen 用户指南

将 Figma 设计转换为生产可用代码所需了解的一切 — 功能、套餐、限制,以及如何获得最佳效果。

本页内容

1. 欢迎使用 MarkupGen2. 快速上手3. 核心功能4. Figma 转代码工作流程5. 输出质量6. 支持的语言7. 套餐与价格8. 额度、用量与限制9. 账户与订阅10. 安全与隐私11. 故障排查12. 最佳实践13. 常见问题14. 功能限制15. 术语表16. 快速上手速查表
简介

欢迎使用 MarkupGen

MarkupGen 是什么、适合哪些人使用,以及它的独特之处。

什么是 MarkupGen?

MarkupGen 是一个将 Figma 设计转换为生产可用前端代码的平台。配套的 Figma 插件会导出你正在处理的画框,MarkupGen 会将其转换为 HTML 和 CSS —— 在付费套餐下,还可以转换为 React、Vue、Svelte 或 Angular 组件。内置的双模式编辑器(代码编辑器加上点击即改的可视化编辑器)让你在导出之前对结果进行精修。

适用人群

适合不想手动把设计稿逐一转成代码的前端开发者和自由职业者、需要快速把客户设计稿转换成可用页面的小型代理机构,以及需要构建能在 Gmail、Outlook 和 Apple Mail 中正常显示的 HTML 邮件模板的任何人。

它解决的问题

手动将 Figma 文件转换成可用的标记代码既重复又容易出现细微错误。MarkupGen 的基础转换基于一套可预测的规则引擎,由你的 Figma 图层命名和 Auto Layout 设置驱动,因此同一份设计每次转换的结果都是一致的。在此基础上,还叠加了一组聚焦的 AI 功能 —— 用于交互性、响应式变体、质量评分和一键修复 —— 精准地用在 AI 真正能带来价值的地方。

主要使用场景

  • 将单个 Figma 画框或组件转换为独立的 HTML 页面。
  • 生成能在桌面端和移动端自适应的响应式落地页。
  • 生成带内联样式的 HTML 邮件模板,以兼容各类邮件客户端。
  • 将设计导出为 React、Vue、Svelte 或 Angular 组件,用于你自己的代码库(付费套餐)。
  • 使用 Templates 构建可复用起点的个人或团队素材库。
新手引导

快速上手

从创建账户到查看你生成的第一个页面。

  1. 1

    创建账户

    一键使用 Google 账号注册,或使用邮箱和密码注册。使用邮箱注册需要完成一次快速验证检查,并确认邮箱后才能登录。

  2. 2

    登录

    使用与注册时相同的方式登录。连续 5 次密码输入错误将导致账户被锁定 15 分钟 —— 你可以随时使用“忘记密码”功能通过邮箱重置密码。

  3. 3

    浏览控制台

    控制台会显示“从 Figma 创建”按钮、你的项目数量与平均 AI 质量评分、Quick Convert 快捷入口,以及你最近更新的项目。

  4. 4

    了解工作区

    每个项目都归属于一个 Workspace —— 供你和团队成员共享的空间。在项目内部,你可以在 Code Editor(所有套餐均可使用)和 Visual Editor(Starter、Pro、Business)之间切换。

  5. 5

    创建你的第一个项目

    从 Figma Community 安装 MarkupGen 插件,在 Figma 中打开它,选择一个画框或组件,然后点击 Export & Send。

    一个新项目会出现在你的 MarkupGen 控制台中。

  6. 6

    运行你的第一次转换

    打开新项目并点击 Generate Code。你可以观察进度,MarkupGen 会连接你的设计数据、分析图层、提取图片,并生成 HTML/CSS。

    一个可用的 HTML/CSS 页面,以及自动生成的 0-10 分质量评分。

  7. 7

    查看结果

    使用 Code 标签页查看拆分视图的 HTML/CSS/JS 编辑器,或使用 Preview 面板查看 Desktop(1280px)、Tablet(768px)和 Mobile(375px)视图。

  8. 8

    导出代码

    任何套餐都可以下载纯 HTML/CSS 代码。付费套餐可以导出单个框架组件,或将所有框架一次性打包为 ZIP。

功能参考

核心功能

产品中的每一项功能、所需的套餐等级,以及它的工作原理。

Figma 插件导入

所有套餐

从 Figma 导出选中的单个画框、组件或组 —— 包括作为真实 SVG 的矢量图标、背景图片、字体以及 Auto Layout 结构。

从 Figma Community 安装插件,登录一次,选择一个画框,然后点击 Export & Send。

每次导出仅限一个画框 —— 目前尚不支持多画框或整页批量导入。

Code Editor

所有套餐

一个专业的拆分视图代码编辑器,用于编辑生成的 HTML、CSS 和 JS,支持语法高亮和自动格式化。

Visual Editor

Starter、Pro、Business

直接在实时预览上点击编辑:检查元素、拖放式样式编辑、内联文本编辑、安全的链接管理,以及带过渡动效的显示/隐藏切换。

需要有效的付费订阅,该限制在服务器端强制执行。

AI 语义元素转换

Starter、Pro、Business

使用 AI 将静态布局方框升级为真正可交互的表单控件 —— 按钮、输入框、文本域、下拉选择框。

三种精度等级:

基础

分析当前的 HTML 结构、样式以及预览图片。

增强

交叉比对原始设计以提升准确度。

深度

进行完整的结构分析,以准确分类复杂组件。

AI JavaScript 与交互组件

Starter、Pro、Business

识别常见 UI 模式 —— 滑块、轮播图、手风琴、弹窗、标签页、表单验证 —— 并为其生成可用的 JS 和 CSS 代码。

AI 响应式布局生成器

Starter、Pro、Business

将桌面端转换结果重新构建为适配其他屏幕尺寸的优化布局,并提供前后对比的并排预览。

支持两个目标方向 —— 移动端和桌面端 —— 断点可自定义配置(320-2000px)。

AI 质量评分与对比

Starter、Pro、Business

根据六项加权标准 —— 布局、间距、排版、颜色、内容和细节 —— 将生成代码与原始设计进行比对,给出 0 到 10 分的评分。

评分颜色约定

8.0–10

优秀

与原始设计几乎完全一致。

5.0–7.9

良好

整体接近,存在少量明显差异。

低于 5.0

有待改进

与原始设计存在显著差异。

智能一键代码修复

Starter、Pro、Business

针对质量评分发现的差异,应用有针对性的 AI 生成补丁,不影响代码的其余部分。

自动语法与代码校验

Starter、Pro、Business

在保存之前检查并修复生成的 HTML/CSS 语法问题。

高速优先处理

Starter、Pro、Business

更高的每分钟和每日生成限额,Business 套餐还享有更快的处理速度。

组件导出

视套餐而定 —— 详见「套餐与价格」

将生成的设计下载为纯 HTML/CSS、单个框架组件,或完整的多框架打包文件。

React(JSX/TSX)、Vue 3 SFC、Svelte 5 或 Angular Standalone,另外还提供 ZIP 打包和邮件客户端测试选项。

CSS 框架输出

视套餐而定 —— 详见「套餐与价格」

以六种风格之一生成 CSS:Vanilla、Tailwind、Bootstrap、Bulma、Materialize 或 Pico CSS。

Vanilla、Tailwind 和 Bootstrap 在所有套餐中均可使用。Bulma、Materialize 和 Pico CSS 需要付费套餐。

输出模式

Standard 模式免费;详见说明

Standard Web Page(直接转换为 Flexbox/Grid)、Responsive Layout(多屏幕流式布局),或 Email Template(适用于 Gmail、Outlook 和 Apple Mail 的内联 CSS 表格)。

Email Template 模式无法还原旋转、非标准混合模式或阴影/模糊效果 —— 这些效果会被简化或转换为图片形式的光栅化处理。

Templates

从 Free(有限)到 Business(无限)

将你自己的任意项目标记为可复用的 Template,并在工作区的可搜索素材库中展示。

深入解析

Figma 转代码工作流程

如何端到端地准备、转换和检查一份设计稿。

干净的 Figma 输入,干净的代码输出

这不只是一句鼓励的话 —— 引擎本身就是这样运作的。语义化 HTML 标签、无障碍标签以及标题层级,都是直接从你的 Figma 图层命名和 Auto Layout 结构推断而来的。一个命名清晰、Auto Layout 使用一致的文件,其转换效果会明显优于一个充斥着未分组图形、使用“Rectangle 4”这类默认命名的文件。

准备你的 Figma 文件

按图层的实际内容命名 —— 例如“Header”“Add to Cart Button”“Hero Image” —— 而不是使用 Figma 自动生成的名称。尽可能使用 Auto Layout:使用了 Auto Layout 的画框会直接转换为 CSS Flexbox,未使用的则会以固定尺寸方框的形式导出。让每个画框的图层数量明显低于约 2,000 层、渲染面积低于 120 megapixels —— 将较大的设计拆分成多个较小的画框。

导入

导出通过 Figma 插件完成,每次导出一个画框、组件或组。目前还无法一次性导入多个画框或整个页面 —— 请将每个画框转换为单独的 MarkupGen 项目。

配置选项

选择你的输出模式(Standard Web Page、Responsive Layout 或 Email Template)、CSS 框架(所有套餐均可使用 Vanilla、Tailwind 和 Bootstrap;付费套餐可使用 Bulma、Materialize 和 Pico CSS),以及导出资源的图片格式(Original、PNG、AVIF、WebP 或 JPG)。

检查生成的 HTML

引擎会根据你的图层名称推断并生成真正的语义化标签 —— header、nav、main、footer、aside、article、section —— 标题层级则根据字号和字重推断。纯图标按钮会获得真实的 ARIA 标签,内容图片会获得描述性的 alt 文本,装饰性或矢量图片则会正确地设置空 alt 并附带 aria-hidden。

检查 CSS

使用了 Auto Layout 的画框会转换为 Flexbox,并保留对应的 gap、padding 和对齐方式。未使用 Auto Layout 的画框则会保留 Figma 文件中的固定像素尺寸和位置。

响应式行为

基础转换会以固定尺寸镜像你的 Figma 画框 —— 它并不会自动实现响应式效果。如果需要能在各种设备上自适应的布局,请选择 Responsive 输出模式,或使用 AI Responsive Layout Generator(支持移动端和桌面端两个方向)。

排版、颜色、间距、图片与图标

标题层级根据字号和字重推断。颜色直接读取自你的 Figma 填充色。间距遵循 Auto Layout 的 gap、padding 和对齐方式,未使用 Auto Layout 时则保留固定位置。图片会按你选择的格式导出;图标会尽可能提取为真实的 SVG,具有复杂填充或蒙版的图标则会以 PNG 合成图的形式光栅化。

组件、布局与约束

导出过程中会读取 Figma 组件和组件集,但 MarkupGen 目前不会为每个 Figma 组件重建一个共享的、可复用的组件定义 —— 每次转换都是一个独立的页面或片段。布局来源于 Auto Layout 和绝对边界框;Figma 的约束设置(左右固定、缩放)目前不会被读取或还原。

语义化 HTML、无障碍与 SEO

语义化 HTML 和无障碍功能是真实已实现的功能,前文和「核心功能」中都有说明。SEO 输出不包含在内 —— MarkupGen 不会为生成的代码添加页面标题、meta 描述、Open Graph 标签或结构化数据。请在将输出集成到你的项目后自行添加这些内容。

哪些因素会影响准确度,以及如何获得最佳输出

Figma 图层命名质量是影响语义化和无障碍输出效果的最大因素,其次是 Auto Layout 的使用情况、画框复杂度,以及你的设计是否使用了所选输出模式能够还原的效果(尤其是 Email Template 模式无法还原旋转、混合模式或阴影效果)。

预期效果

输出质量

哪些由 MarkupGen 控制,哪些取决于你的输入,以及会衡量哪些指标。

MarkupGen 负责的部分

  • 转换引擎与语义标签推断逻辑
  • 无障碍标签与 alt 文本的生成
  • AI 评分、修复、响应式与 JS 相关功能层(付费套餐)

由你的输入决定的部分

  • Figma 图层命名质量
  • Auto Layout 的使用情况
  • 画框复杂度与效果使用情况

准确度与视觉还原度

由 AI Quality Score(付费套餐)自动衡量:涵盖布局、间距、排版、颜色、内容和细节,评分范围为 0-10 分。没有单独的全局准确度百分比 —— 质量高低取决于具体设计。

HTML 结构与语义

真实的语义化标签和标题层级,取决于你的 Figma 图层命名的描述性程度。

CSS 质量与可维护性

使用了 Auto Layout 的画框基于 Flexbox,其余则采用固定定位。可维护性取决于你选择的 CSS 框架、类命名风格以及图层命名。

响应式行为、无障碍与 SEO 就绪度

响应式布局需要通过选择 Responsive 输出模式来启用。无障碍功能包括真实的自动生成 ARIA 标签和 alt 文本。不包含 SEO 元数据 —— 请在导出后自行添加。

本地化

支持的语言

界面支持十种语言。

English、Tiếng Việt、Français、中文(简体)、日本語、हिन्दी、Italiano、Español、ไทย 以及 Русский。默认语言为英语;应用不会根据浏览器语言自动切换,因此分享的链接始终会以指定的语言打开。

在 Settings → Language 中切换你的界面语言。MarkupGen 会按原样转换你 Figma 图层中的文本内容 —— 功能是否可用完全取决于你的套餐,而与界面语言无关。

商业信息

套餐与价格

以下所有数字均直接来自计费配置。

功能FreeStarterProBusiness
价格$0$10 / 月$20 / 月$100 / 月
代码生成次数5 次 / 月50 次 / 天150 次 / 天1,000 次 / 天
新建项目数10 个 / 月100 个 / 天300 个 / 天2,000 个 / 天
生成速度限制2 次请求/分钟10 次请求/分钟20 次请求/分钟60 次请求/分钟,更快的 AI 模型
CSS 框架Vanilla、Tailwind、Bootstrap全部 6 种框架全部 6 种框架全部 6 种框架
Visual Editor不包含包含包含包含
AI 质量评分与修复不包含包含包含包含
组件导出仅 HTML / CSS一次一种框架全部框架 + Export Studio全部框架 + Export Studio
支持服务社区支持邮件支持优先邮件支持专属一对一支持

所有付费套餐仅支持按月计费 —— 没有年付选项。除法律另有规定外,费用不可退款。可通过 Stripe 或 Lemon Squeezy 使用银行卡支付,也可通过 SePay 使用越南银行转账二维码即时支付。

Free 套餐

最适合用来试用产品或偶尔进行一次性转换:每月 5 次 AI 辅助转换、纯 HTML/CSS 下载,以及 Vanilla、Tailwind 或 Bootstrap CSS。不包含 Visual Editor、AI 质量评分和框架导出功能。

付费套餐

Starter 适合独立开发者和自由职业项目。Pro 为需要同时处理多个客户项目的专业人士和小型代理机构提供完整的 Export Studio 套件。Business 为团队提供最高的用量额度和最快的处理速度。当你达到生成上限、需要 Visual Editor 或质量评分,或需要真正的框架组件而非原始 HTML 时,就可以考虑升级。

参考信息

额度、用量与限制

MarkupGen 不使用积分式的额度系统 —— 而是按套餐使用简单的生成次数计数。

  • 计算方式 —— 每执行一次“Generate Code”操作,即消耗生成额度中的一个单位。
  • 重置周期 —— Free 套餐按自然月重置;所有付费套餐均按天重置。
  • 结转 —— 不支持结转;未使用的额度不会累积到下一周期。
  • 过期机制 —— 额度只会在每个周期重置,不会在周期中途过期。

项目创建额度

项目创建额度与生成额度是相互独立的,且始终恰好是同周期生成限额的两倍(例如,Free 套餐:10 个项目/月;Pro 套餐:300 个项目/天)。如果你的项目数量恰好达到上限,仍然可以再保存一个项目以确保不会丢失工作成果 —— 但该项目会被置于 Quota Locked 状态,在你升级套餐或周期重置之前无法生成代码。删除项目不会释放当期的额度。

单次导出限制 
Figma 画框图层数量每次导出约 2,000 个图层
Figma 画框导出面积约 120 megapixels
单次导出总上传大小50 MB
插件上传超时时间3 分钟
自定义 AI 指令长度3,000 个字符
管理你的账户

账户与订阅

你可以自行更改哪些内容,以及计费方式是如何运作的。

账户设置

在 Settings 中,你可以编辑个人资料、修改密码(即使你是使用 Google 账号注册的也可以 —— 你可以在这里首次设置密码)、管理套餐和账单,以及切换界面语言。

升级套餐

在 Pricing 页面进行升级。升级会立即生效,并按比例计费。

降级套餐

在 Settings → Billing 中,可以安排降级到更低的付费套餐,该变更会在当前计费周期结束时生效,且不提供部分退款。Starter 套餐没有更低的付费套餐可供降级。

取消订阅

如需取消订阅,请联系 support@markupgen.com。如果你使用的是 Pro 或 Business 套餐,也可以在此期间通过 Settings → Billing 安排降级到更低的付费套餐。

账单与支付

可通过 Stripe 或 Lemon Squeezy 使用银行卡支付,也可通过 SePay 使用越南银行转账二维码即时支付(有效期 15 分钟)。

退款

除法律另有规定外,所有费用均不可退款。也没有单独的退款保证。

账户删除

目前还没有自助式的“删除我的账户”按钮。你可以随时通过发送邮件至 support@markupgen.com 来申请删除你的账户及其数据。

信任与安全

安全与隐私

本节内容总结自 MarkupGen 的隐私政策、使用条款及身份验证设计。

收集哪些数据

你的姓名、邮箱和账户凭证,以及你明确导出的特定 Figma 画框 —— MarkupGen 并不具备对你整个 Figma 账户的常驻访问权限。基本技术数据(IP、浏览器、设备)通过 Cookie 收集。

你的设计与生成的代码

你导入的 Figma 设计和内容的权利归你所有。MarkupGen 不会使用你的私有设计为其他客户训练 AI 模型。

数据保留与删除

在你的账户处于活跃状态期间,或出于法律、财务或安全方面的需要,数据会被保留。你可以随时通过 support@markupgen.com 申请删除。

账户安全

密码会经过哈希处理;登录和注册都需要通过 CAPTCHA 验证;连续 5 次登录失败会导致账户被锁定 15 分钟;使用密码登录的账户需要进行邮箱验证。目前尚不支持双因素身份验证和活跃会话管理。

第三方服务

银行卡支付使用 Stripe 和 Lemon Squeezy,越南银行转账使用 SePay,使用情况分析使用 Google Analytics。

帮助与常见问题

故障排查

按类别整理的问题、可能原因与解决方法。

转换问题

Generate Code 按钮变灰或操作被拒绝。

→ 你已达到套餐的生成或项目创建上限,或者该项目此前因超额而处于 Quota Locked 状态。

等待下一次额度重置,或升级套餐 —— 升级会立即解锁被锁定的项目。

从 Figma 插件导出失败或超时。

→ 画框超过约 2,000 个图层或 120 megapixels,或上传超过了 3 分钟的时间限制。

将画框拆分成更小的部分,并分别导出。

输出结果看起来很笼统,只有普通的 div 和没有意义的 alt 文本。

→ 你的 Figma 图层仍在使用“Rectangle 4”或“Group”这类默认名称。

为图层重新命名以增强描述性,然后重新导出。

输出问题

Email 导出结果中缺少旋转、阴影或混合效果。

→ 邮件客户端无法可靠地渲染这些效果,因此 Email Template 模式会将其简化或光栅化处理。

如果需要以真实 CSS 呈现这些效果,请使用 Standard 或 Responsive 模式。

布局不会根据屏幕尺寸自适应。

→ 基础转换只会以一个固定尺寸进行镜像。

请改用 Responsive 输出模式。

身份验证问题

无法登录。

→ 连续 5 次失败会导致账户被锁定 15 分钟,或者你的邮箱尚未通过验证。

请等待 15 分钟,或检查你的收件箱(以及垃圾邮件文件夹)中是否有验证邮件。

忘记密码。

在登录页面使用“忘记密码”功能;重置链接的有效期为一小时。

支付问题

SePay 银行转账支付卡在“待处理”状态。

→ 二维码会在 15 分钟后过期。

请查看订单状态页面,如果已过期,请重新发起结账。

银行卡支付失败。

→ 银行卡被拒绝,或信息填写有误。

请与你的银行核实卡片信息,或尝试其他支付方式。如果已扣款但套餐未更新,请联系支持团队。

订阅问题

找不到“取消订阅”按钮。

→ 目前这还不是一项自助操作。

请发送邮件至 support@markupgen.com 申请取消。

Starter 套餐没有降级选项。

→ Starter 是最低的付费套餐等级。

这是正常现象 —— 在应用内没有比它更低的套餐可供降级。

下载与导出问题

框架导出(React/Vue/Svelte/Angular)功能被锁定。

→ 单框架导出需要任意付费套餐。

请升级到 Starter 或更高套餐。

即使是 Starter 套餐,Export Studio 仍处于锁定状态。

→ 全框架打包功能需要 Pro 或 Business 套餐。

请升级到 Pro 套餐。

获得更好的输出效果

最佳实践

能切实提升转换质量的具体习惯。

  • 尽可能在所有地方使用 Auto Layout —— 这是决定生成流式 CSS 还是固定定位方框的最大因素。
  • 用通俗易懂的语言命名图层 —— 例如“Header”“Add to Cart Button”“Hero Image” —— 引擎会读取这些名称来选择 HTML 标签、ARIA 标签和 alt 文本。
  • 将相关元素组合到同一个 Auto Layout 画框中,而不是让它们以自由浮动、绝对定位的方式存在。
  • 为标题和正文使用一致且有意义的字号区分 —— 标题层级正是据此推断出来的。
  • 让内容图片和装饰性素材在视觉上保持区分 —— MarkupGen 在输出中已经会对二者进行不同的处理。
  • 提前确定好你的输出模式。不要指望 Standard 模式的转换结果事后能变成响应式的 —— 如果最终页面需要支持移动端,请从一开始就使用 Responsive 模式。
  • 不要依赖 Figma 的约束(constraints)来实现调整大小的行为 —— 它们不会被还原;请改用 Auto Layout 来重建这种行为。
  • 对于邮件输出,请避免使用旋转、混合模式以及阴影或模糊效果 —— 它们无法在邮件客户端的渲染中保留下来。
  • 导出前请务必在 Preview 中检查 Desktop、Tablet 和 Mobile 视图,并运行 AI Quality Score(付费套餐)以获得具体的加权评估,明确需要修复的内容。
  • 请计划在导出后自行添加 SEO 元数据 —— MarkupGen 不会生成标题标签、meta 描述或结构化数据。
常见问题

FAQ

内容均基于已核实的产品实际行为。

Free 套餐的额度会在每个自然月初重置。付费套餐的额度每天重置。你可以随时升级套餐以立即获得更多额度。
如实说明的边界

功能限制

MarkupGen 擅长做什么,以及目前还做不到什么。

MarkupGen 擅长的事情

能够快速、可预测地将结构良好、基于 Auto Layout 的 Figma 画框转换为干净、带语义标签的 HTML/CSS,并可选叠加 AI 功能层,实现交互性、响应式、质量评分和一键修复。

目前做不到的事情

无法自动重建 Figma 原型或交互数据;不支持 Figma 基于约束的调整大小行为(固定、缩放);无法一次性导入多个画框或整个页面;不会为生成的代码添加 SEO 元数据;也不会为每个 Figma 组件导出共享的、可复用的组件定义。

可能需要手动调整的输出内容

命名笼统或未命名的 Figma 图层会生成笼统的标记代码;Email Template 模式下的复杂视觉效果;超出 AI JS 建议功能可识别模式范围的交互行为。

技术限制

具体数字请参见「额度、用量与限制」—— 每次导出约 2,000 个图层、120 megapixels 和 50 MB,上传超时时间为 3 分钟,自定义 AI 指令上限为 3,000 个字符。

术语

术语表

本指南中使用的词汇说明。

画框
Figma 中的顶层容器 —— 大致相当于一个屏幕或一个区块。MarkupGen 每次导出一个画框、组件或组。
Auto Layout
Figma 内置的响应式堆叠功能;MarkupGen 会将其直接映射为 CSS Flexbox。
约束
Figma 在 Auto Layout 出现之前就有的固定和缩放调整大小规则;MarkupGen 目前不会读取此设置。
转换 / 生成
针对某个项目执行一次“Generate Code”操作 —— 也就是你套餐额度的计量单位。
项目
在你的控制台中追踪的单次 Figma 导出,归属于你在某个 Workspace 内。
Workspace
项目所归属的共享团队空间;成员身份对应着控制权限的角色。
Template
任何被标记为可复用、并出现在你工作区 Templates 素材库中的项目。
导出
将生成的代码下载为纯 HTML/CSS、单个框架组件,或完整的多框架打包文件。
订阅
你按月自动续费的付费套餐 —— Starter、Pro 或 Business。
Quota Locked
在你已经达到套餐创建上限之后创建的项目 —— 会被保存下来,但在你升级套餐或周期重置之前无法生成代码。
一页速览

快速上手速查表

从 Figma 到生产可用代码。

  1. 1从 Figma Community 安装 MarkupGen 插件。
  2. 2在 Figma 中选择一个结构清晰、命名规范、使用了 Auto Layout 的画框。
  3. 3在插件中点击 Export & Send(通过浏览器登录一次)。
  4. 4在控制台中打开新项目。
  5. 5选择你的输出模式和 CSS 框架,然后点击 Generate Code。
  6. 6在 Preview 中查看结果,并检查 AI Quality Score(付费套餐)。
  7. 7在 Code Editor 中手动修复,或升级套餐以使用 Visual Editor 和智能一键修复。
  8. 8导出为 HTML/CSS,或在付费套餐下导出为框架组件,然后将其集成到你的项目中。

准备好加速你的设计转代码工作流了吗?

立即免费开始使用,或升级套餐以解锁 Visual Editor、AI 质量评分以及完整的框架导出功能。

免费开始查看套餐
MarkupGenMarkupGen© 2025 MarkupGen. 保留所有权利。
博客应用场景对比资源
联系我们
关于我们
使用文档
隐私政策
服务条款