Hướng dẫn Sử dụng MarkupGen
Tất cả những gì bạn cần biết để chuyển thiết kế Figma thành mã nguồn sẵn sàng sản xuất — tính năng, gói cước, giới hạn và cách đạt kết quả tốt nhất.
Giới thiệu MarkupGen
MarkupGen là gì, dành cho ai, và điều gì làm nên sự khác biệt.
MarkupGen là gì?
MarkupGen là nền tảng chuyển đổi thiết kế Figma thành mã nguồn frontend sẵn sàng sản xuất. Plugin Figma đi kèm sẽ xuất frame bạn đang làm việc; MarkupGen chuyển đổi nó thành HTML và CSS, và — với gói trả phí — thành component React, Vue, Svelte hoặc Angular. Bộ biên tập kép có sẵn (Code Editor và Visual Editor kéo-thả) giúp bạn tinh chỉnh kết quả trước khi xuất.
Dành cho ai
Lập trình viên frontend và freelancer không muốn tự tay chuyển từng layout từ file thiết kế, các agency nhỏ cần chuyển thiết kế của khách hàng thành trang hoạt động nhanh chóng, và bất kỳ ai cần tạo mẫu email HTML hiển thị đúng trên Gmail, Outlook và Apple Mail.
Vấn đề MarkupGen giải quyết
Chuyển file Figma thành mã nguồn bằng tay là công việc lặp đi lặp lại và rất dễ sai sót nhỏ. Phần chuyển đổi cơ bản của MarkupGen chạy trên một engine dựa trên quy tắc (rule-based), có thể dự đoán được, dựa vào tên layer Figma và thiết lập Auto Layout của bạn — nên cùng một thiết kế sẽ luôn chuyển đổi theo cùng một cách. Một nhóm tính năng AI riêng biệt được đặt thêm phía trên — cho tương tác, biến thể responsive, chấm điểm chất lượng và tự động sửa lỗi — đúng những chỗ AI thực sự mang lại giá trị.
Các trường hợp sử dụng chính
- Chuyển đổi một frame hoặc component Figma thành trang HTML độc lập.
- Tạo trang landing page responsive, hiển thị tốt trên cả desktop và mobile.
- Tạo mẫu email HTML với inline style, tương thích nhiều trình đọc email.
- Xuất thiết kế thành component React, Vue, Svelte hoặc Angular để dùng trong dự án của bạn (gói trả phí).
- Xây dựng thư viện Template cá nhân hoặc cho cả nhóm để tái sử dụng.
Bắt đầu
Từ tạo tài khoản đến xem trang được tạo ra đầu tiên.
- 1
Tạo tài khoản
Đăng ký bằng Google chỉ với 1 click, hoặc bằng email và mật khẩu. Đăng ký bằng email cần vượt qua bước xác minh nhanh và xác nhận email trước khi đăng nhập được.
- 2
Đăng nhập
Dùng đúng phương thức bạn đã đăng ký. Nhập sai mật khẩu 5 lần sẽ khóa tài khoản 15 phút — dùng "Quên mật khẩu" để đặt lại qua email bất kỳ lúc nào.
- 3
Khám phá Dashboard
Dashboard hiển thị nút Tạo từ Figma, số project và điểm chất lượng AI trung bình, khu vực Quick Convert, và các project cập nhật gần nhất.
- 4
Hiểu về Workspace
Mỗi project thuộc về một Workspace — không gian chung cho bạn và đồng đội. Trong mỗi project, bạn có thể chuyển giữa Code Editor (mọi gói) và Visual Editor (gói Starter, Pro, Business).
- 5
Tạo project đầu tiên
Cài plugin MarkupGen từ Figma Community, mở trong Figma, chọn một frame hoặc component, rồi bấm Export & Send.
Một project mới xuất hiện trên dashboard MarkupGen của bạn.
- 6
Chạy lượt chuyển đổi đầu tiên
Mở project mới rồi bấm Generate Code. Theo dõi tiến trình khi MarkupGen kết nối tới dữ liệu thiết kế, phân tích layer, trích xuất ảnh và viết HTML/CSS.
Một trang HTML/CSS hoạt động được, kèm điểm chất lượng 0–10 tự động.
- 7
Xem lại kết quả
Dùng tab Code để xem chế độ chia màn hình HTML/CSS/JS, hoặc bảng Preview để kiểm tra ở Desktop (1280px), Tablet (768px) và Mobile (375px).
- 8
Xuất mã nguồn
Tải HTML/CSS thuần ở mọi gói. Gói trả phí có thể xuất 1 framework riêng lẻ, hoặc tất cả framework cùng lúc dưới dạng gói ZIP.
Tính năng Chính
Mọi tính năng thật sự có trong sản phẩm, yêu cầu gói nào và cách hoạt động.
Nhập dữ liệu qua Figma Plugin
Xuất một frame, component hoặc group được chọn từ Figma — bao gồm icon vector dạng SVG thật, ảnh nền, font chữ và cấu trúc Auto Layout.
Cài đặt từ Figma Community, đăng nhập 1 lần, chọn một frame rồi bấm Export & Send.
Mỗi lượt xuất chỉ 1 frame — hiện chưa hỗ trợ xuất nhiều frame hoặc cả trang cùng lúc.
Code Editor
Trình soạn thảo mã chuyên nghiệp dạng chia màn hình cho HTML, CSS và JS đã tạo, có tô màu cú pháp và tự động định dạng.
Visual Editor
Chỉnh sửa trực tiếp trên màn hình xem trước: kiểm tra phần tử, kéo-thả chỉnh style, sửa text trực tiếp, quản lý liên kết an toàn, và ẩn/hiện kèm hiệu ứng chuyển cảnh.
Yêu cầu gói trả phí đang hoạt động, được kiểm tra ở phía server.
Chuyển đổi Phần tử Semantic bằng AI
Nâng cấp các khối bố cục tĩnh thành control tương tác thật — button, input, textarea, select — bằng AI.
Ba cấp độ chính xác:
Phân tích cấu trúc HTML, style hiện tại và ảnh xem trước.
Đối chiếu thêm với thiết kế gốc để tăng độ chính xác.
Phân tích toàn diện cấu trúc để phân loại chính xác các component phức tạp.
Gợi ý JavaScript & Component Tương tác bằng AI
Nhận diện các mẫu giao diện — slider, carousel, accordion, modal, tab, kiểm tra hợp lệ form — và sinh mã JS, CSS hoạt động được cho chúng.
Tự tạo Bố cục Responsive bằng AI
Tái cấu trúc bản chuyển đổi từ desktop thành bố cục tối ưu cho kích thước màn hình khác, kèm màn hình so sánh trước/sau.
Hỗ trợ 2 hướng đích — mobile và desktop — với điểm ngắt (breakpoint) có thể tùy chỉnh (320–2000px).
Chấm điểm Chất lượng AI & Đối chiếu Thiết kế
Chấm điểm mã nguồn từ 0 đến 10 so với thiết kế gốc dựa trên 6 tiêu chí có trọng số: Layout, Spacing, Typography, Color, Content và Details.
Quy ước màu sắc điểm đánh giá
Xuất sắc
Khớp gần như tuyệt đối với thiết kế gốc.
Khá
Giống thiết kế gốc nhưng còn vài điểm khác biệt.
Cần cải thiện
Có sự khác biệt đáng kể so với thiết kế gốc.
Tự động Sửa Lỗi 1-Click
Áp dụng các bản vá do AI tạo ra, đúng vào những điểm chưa khớp mà điểm đánh giá chất lượng phát hiện, không ảnh hưởng phần mã còn lại.
Tự động Kiểm tra & Vá Lỗi Cú pháp
Kiểm tra và sửa các lỗi cú pháp HTML/CSS trước khi lưu mã.
Xử lý Ưu tiên Tốc độ Cao
Hạn mức xử lý mỗi phút và mỗi ngày cao hơn, xử lý nhanh hơn với gói Business.
Xuất Component
Tải thiết kế đã tạo dưới dạng HTML/CSS thuần, 1 component framework riêng lẻ, hoặc trọn bộ nhiều framework.
React (JSX/TSX), Vue 3 SFC, Svelte 5, hoặc Angular Standalone, kèm gói ZIP và tùy chọn kiểm thử email.
Xuất theo CSS Framework
Sinh CSS theo 1 trong 6 phong cách: Vanilla, Tailwind, Bootstrap, Bulma, Materialize hoặc Pico CSS.
Vanilla, Tailwind và Bootstrap có ở mọi gói. Bulma, Materialize và Pico CSS chỉ dành cho gói trả phí.
Chế độ Xuất mã
Standard Web Page (chuyển đổi trực tiếp bằng Flexbox/Grid), Responsive Layout (bố cục linh hoạt đa màn hình), hoặc Email Template (bảng HTML với inline CSS cho Gmail, Outlook, Apple Mail).
Chế độ Email Template không tái tạo được xoay phần tử, blend mode không chuẩn hoặc hiệu ứng đổ bóng/mờ — các hiệu ứng này sẽ được đơn giản hóa hoặc chuyển thành ảnh raster.
Templates
Đánh dấu bất kỳ project nào của bạn thành Template để tái sử dụng, hiển thị trong thư viện có thể tìm kiếm cho cả workspace.
Quy trình Figma sang Mã nguồn
Cách chuẩn bị, chuyển đổi và kiểm tra một thiết kế từ đầu đến cuối.
Figma sạch → mã nguồn sạch
Đây không chỉ là lời khuyên suông — engine hoạt động đúng như vậy thật. Thẻ HTML semantic, nhãn hỗ trợ tiếp cận và cấp độ heading đều được suy ra trực tiếp từ tên layer Figma và cấu trúc Auto Layout của bạn. Một file có tên layer rõ ràng và dùng Auto Layout nhất quán sẽ cho kết quả tốt hơn hẳn so với file toàn hình khối rời rạc với tên mặc định kiểu "Rectangle 4".
Chuẩn bị file Figma
Đặt tên layer theo đúng bản chất — "Header", "Nút Thêm vào giỏ", "Ảnh Hero" — không dùng tên mặc định của Figma. Dùng Auto Layout ở mọi nơi có thể: frame dùng Auto Layout sẽ chuyển thẳng thành CSS Flexbox, còn frame không dùng sẽ xuất ra dưới dạng khối kích thước cố định. Giữ mỗi frame dưới khoảng 2.000 layer và 120 megapixel diện tích render — tách thiết kế lớn thành các frame nhỏ hơn.
Nhập dữ liệu
Việc xuất dữ liệu thực hiện qua Figma plugin, mỗi lượt xuất 1 frame, component hoặc group. Hiện chưa có cách nhập nhiều frame hoặc cả trang cùng lúc — hãy chuyển đổi từng frame thành 1 project MarkupGen riêng.
Các tùy chọn cấu hình
Chọn chế độ xuất (Standard Web Page, Responsive Layout hoặc Email Template), CSS framework (Vanilla, Tailwind, Bootstrap ở mọi gói; Bulma, Materialize, Pico CSS ở gói trả phí), và định dạng ảnh cho tài nguyên xuất ra (Original, PNG, AVIF, WebP hoặc JPG).
Kiểm tra HTML đã tạo
Engine sinh ra thẻ semantic thật — header, nav, main, footer, aside, article, section — được suy ra từ tên layer, với cấp độ heading suy ra từ cỡ chữ và độ đậm. Nút chỉ có icon nhận được aria-label thật, ảnh nội dung nhận được alt text mô tả, còn ảnh trang trí/vector nhận đúng alt rỗng kèm aria-hidden.
Kiểm tra CSS
Frame dùng Auto Layout trở thành Flexbox với gap, padding và căn chỉnh tương ứng. Frame không dùng Auto Layout giữ nguyên kích thước và vị trí pixel cố định từ file Figma.
Khả năng responsive
Bản chuyển đổi cơ bản mô phỏng đúng kích thước cố định của frame Figma — KHÔNG tự động responsive. Để có bố cục thích ứng đa thiết bị, chọn chế độ xuất Responsive hoặc dùng tính năng Tự tạo Bố cục Responsive bằng AI (hướng mobile và desktop).
Typography, màu sắc, khoảng cách, ảnh và icon
Cấp độ heading suy ra từ cỡ chữ và độ đậm. Màu sắc lấy trực tiếp từ fill trong Figma. Khoảng cách theo gap/padding/căn chỉnh của Auto Layout, hoặc vị trí cố định nếu không dùng Auto Layout. Ảnh xuất theo định dạng đã chọn; icon được trích xuất thành SVG thật khi có thể, các fill/mask phức tạp được raster hóa thành ảnh PNG ghép.
Component, bố cục và constraints
Component và component set của Figma được đọc khi xuất, nhưng MarkupGen hiện chưa tái tạo thành 1 định nghĩa component dùng chung, tái sử dụng được cho mỗi component Figma — mỗi lượt chuyển đổi là 1 trang/đoạn mã độc lập. Bố cục lấy từ thuộc tính Auto Layout và bounding box tuyệt đối; các thiết lập constraint của Figma (ghim trái/phải, scale) hiện KHÔNG được đọc hay tái tạo.
HTML Semantic, khả năng tiếp cận và SEO
HTML semantic và khả năng tiếp cận là tính năng có thật, đã triển khai, được mô tả ở trên và ở mục Tính năng Chính. Riêng SEO thì KHÔNG có — MarkupGen không thêm tiêu đề trang, meta description, thẻ Open Graph hay structured data vào mã đã tạo. Bạn cần tự thêm sau khi tích hợp vào dự án của mình.
Yếu tố ảnh hưởng đến độ chính xác và cách đạt kết quả tốt nhất
Chất lượng đặt tên layer Figma là yếu tố quan trọng nhất cho output semantic và dễ tiếp cận, tiếp theo là mức độ dùng Auto Layout, độ phức tạp của frame, và việc thiết kế có dùng hiệu ứng mà chế độ xuất đã chọn có thể tái tạo hay không (chế độ Email Template đặc biệt không tái tạo được xoay, blend mode hay đổ bóng).
Chất lượng Đầu ra
Điều gì do MarkupGen kiểm soát, điều gì phụ thuộc vào input của bạn, và điều gì được đo lường.
MarkupGen kiểm soát
- Engine chuyển đổi và các quy tắc suy luận thẻ semantic
- Sinh nhãn hỗ trợ tiếp cận và alt text
- Các lớp AI: chấm điểm, tự sửa lỗi, responsive và JS (gói trả phí)
Input của bạn kiểm soát
- Chất lượng đặt tên layer Figma
- Mức độ dùng Auto Layout
- Độ phức tạp của frame và việc dùng hiệu ứng
Độ chính xác và độ khớp thị giác
Được đo tự động bằng điểm Chất lượng AI (gói trả phí): 0–10 theo Layout, Spacing, Typography, Color, Content và Details. Không có một con số "% độ chính xác" chung cho toàn hệ thống — chất lượng phụ thuộc vào từng thiết kế cụ thể.
Cấu trúc HTML và semantic
Thẻ semantic và cấp độ heading thật, phụ thuộc vào việc layer Figma được đặt tên rõ ràng đến đâu.
Chất lượng CSS và khả năng bảo trì
Dùng Flexbox cho frame có Auto Layout, vị trí cố định cho phần còn lại. Khả năng bảo trì phụ thuộc vào CSS framework, kiểu đặt tên class bạn chọn, và cách đặt tên layer.
Khả năng responsive, tiếp cận và sẵn sàng cho SEO
Bố cục responsive là tùy chọn, bật qua chế độ xuất Responsive. Khả năng tiếp cận gồm ARIA label và alt text được sinh tự động thật. Riêng dữ liệu SEO thì không có sẵn — hãy tự thêm sau khi xuất.
Ngôn ngữ Hỗ trợ
Giao diện có sẵn ở mười ngôn ngữ.
Tiếng Anh, Tiếng Việt, Français, 中文 (简体), 日本語, हिन्दी, Italiano, Español, ไทย và Русский. Tiếng Anh là mặc định; ứng dụng không tự động đổi ngôn ngữ theo trình duyệt, để một liên kết chia sẻ luôn mở đúng ngôn ngữ dự định.
Đổi ngôn ngữ tại Cài đặt → Ngôn ngữ. MarkupGen chuyển đổi nguyên văn nội dung trong layer Figma của bạn — khả năng dùng tính năng nào hoàn toàn phụ thuộc vào gói cước, không phụ thuộc vào ngôn ngữ giao diện.
Gói cước & Giá
Mọi số liệu dưới đây lấy trực tiếp từ cấu hình thanh toán.
| Tính năng | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Giá | 0đ | $10 / tháng | $20 / tháng | $100 / tháng |
| Lượt tạo mã | 5 / tháng | 50 / ngày | 150 / ngày | 1.000 / ngày |
| Project mới | 10 / tháng | 100 / ngày | 300 / ngày | 2.000 / ngày |
| Giới hạn tốc độ xử lý | 2 lượt/phút | 10 lượt/phút | 20 lượt/phút | 60 lượt/phút, model AI nhanh hơn |
| CSS framework | Vanilla, Tailwind, Bootstrap | Đủ cả 6 framework | Đủ cả 6 framework | Đủ cả 6 framework |
| Visual Editor | Không có | Có | Có | Có |
| Chấm điểm & sửa lỗi AI | Không có | Có | Có | Có |
| Xuất Component | Chỉ HTML / CSS | 1 framework mỗi lượt | Đủ framework + Export Studio | Đủ framework + Export Studio |
| Hỗ trợ | Cộng đồng | Hỗ trợ qua Email | Hỗ trợ Email ưu tiên | Hỗ trợ riêng 1-1 |
Mọi gói trả phí chỉ tính phí theo tháng — không có gói năm. Phí không được hoàn lại trừ khi pháp luật yêu cầu. Thanh toán bằng thẻ qua Stripe hoặc Lemon Squeezy, hoặc chuyển khoản QR ngân hàng Việt Nam tức thì qua SePay.
Gói Free
Phù hợp để dùng thử sản phẩm hoặc chuyển đổi đơn lẻ thỉnh thoảng: 5 lượt chuyển đổi có AI mỗi tháng, tải HTML/CSS thuần, CSS theo Vanilla, Tailwind hoặc Bootstrap. Không có Visual Editor, chấm điểm AI hay xuất framework.
Gói trả phí
Starter phù hợp với người làm tự do và dự án cá nhân. Pro thêm trọn bộ Export Studio, phù hợp cho freelancer chuyên nghiệp và agency nhỏ chạy nhiều dự án khách hàng cùng lúc. Business có hạn mức cao nhất và xử lý nhanh nhất cho đội nhóm. Nên nâng cấp khi bạn chạm hạn mức tạo mã, cần Visual Editor hoặc chấm điểm chất lượng, hoặc cần xuất component framework thật thay vì HTML thuần.
Hạn mức & Giới hạn Sử dụng
MarkupGen không dùng hệ thống credit kiểu điểm số — chỉ đếm số lượt tạo mã theo từng gói.
- Cách tính — mỗi lượt "Generate Code" tính là 1 đơn vị trong hạn mức tạo mã.
- Chu kỳ reset — gói Free reset theo tháng dương lịch; mọi gói trả phí reset mỗi ngày.
- Chuyển tiếp — không có; hạn mức chưa dùng không được cộng dồn sang kỳ sau.
- Hết hạn — hạn mức chỉ đơn giản là reset mỗi kỳ, không hết hạn giữa kỳ.
Hạn mức tạo project
Tách biệt với hạn mức tạo mã, và luôn gấp đôi hạn mức tạo mã của gói trong cùng chu kỳ (VD: Free: 10 project/tháng; Pro: 300 project/ngày). Nếu bạn vừa chạm hạn mức, vẫn có thể lưu thêm đúng 1 project để không mất dữ liệu — nhưng project đó sẽ ở trạng thái Quota Locked và không tạo mã được cho đến khi bạn nâng cấp hoặc hạn mức được reset. Xóa project không giải phóng lại hạn mức trong kỳ đó.
| Giới hạn mỗi lượt xuất | |
|---|---|
| Số layer trong frame Figma | ~2.000 layer mỗi lượt xuất |
| Diện tích render của frame | ~120 megapixel |
| Tổng dung lượng tải lên mỗi lượt | 50 MB |
| Thời gian chờ tải lên từ plugin | 3 phút |
| Độ dài chỉ dẫn AI tùy chỉnh | 3.000 ký tự |
Tài khoản & Gói đăng ký
Những gì bạn có thể tự thay đổi, và cách thanh toán hoạt động.
Cài đặt tài khoản
Tại Cài đặt, bạn có thể sửa hồ sơ, đổi mật khẩu (vẫn dùng được kể cả khi đăng ký bằng Google — bạn có thể đặt mật khẩu lần đầu tại đây), quản lý gói cước và thanh toán, và đổi ngôn ngữ.
Nâng cấp gói
Nâng cấp từ trang Bảng giá. Việc nâng cấp có hiệu lực ngay lập tức, tính phí theo tỷ lệ thời gian còn lại.
Hạ cấp gói
Từ Cài đặt → Thanh toán, đặt lịch chuyển xuống gói trả phí thấp hơn, có hiệu lực khi hết chu kỳ thanh toán hiện tại, không hoàn tiền phần còn lại. Gói Starter không có gói trả phí nào thấp hơn để hạ xuống.
Hủy gói
Để hủy gói đăng ký, liên hệ support@markupgen.com. Nếu bạn đang dùng Pro hoặc Business, bạn cũng có thể đặt lịch hạ xuống gói thấp hơn từ Cài đặt → Thanh toán trong lúc chờ.
Thanh toán
Thanh toán bằng thẻ qua Stripe hoặc Lemon Squeezy, hoặc chuyển khoản QR ngân hàng Việt Nam tức thì qua SePay (hiệu lực trong 15 phút).
Hoàn tiền
Mọi khoản phí không được hoàn lại trừ khi pháp luật yêu cầu. Không có chính sách hoàn tiền riêng.
Xóa tài khoản
Hiện chưa có nút "Xóa tài khoản" tự phục vụ. Bạn có thể yêu cầu xóa tài khoản và dữ liệu bất kỳ lúc nào bằng cách gửi email tới support@markupgen.com.
Bảo mật & Quyền riêng tư
Tóm tắt từ Chính sách Quyền riêng tư, Điều khoản Sử dụng và thiết kế xác thực của MarkupGen.
Dữ liệu được thu thập
Tên, email và thông tin đăng nhập của bạn, cùng đúng những frame Figma bạn chủ động xuất — MarkupGen không có quyền truy cập thường trực vào toàn bộ tài khoản Figma của bạn. Dữ liệu kỹ thuật cơ bản (IP, trình duyệt, thiết bị) được thu thập qua cookie.
Thiết kế và mã nguồn của bạn
Bạn giữ mọi quyền đối với thiết kế Figma và nội dung bạn nhập vào. MarkupGen không dùng thiết kế riêng tư của bạn để huấn luyện mô hình AI cho khách hàng khác.
Lưu trữ và xóa dữ liệu
Dữ liệu được giữ trong khi tài khoản còn hoạt động, hoặc khi cần thiết vì lý do pháp lý, kế toán hay bảo mật. Bạn có thể yêu cầu xóa bất kỳ lúc nào qua support@markupgen.com.
Bảo mật tài khoản
Mật khẩu được mã hóa; đăng nhập và đăng ký đều yêu cầu vượt qua kiểm tra CAPTCHA; nhập sai mật khẩu 5 lần sẽ khóa tài khoản 15 phút; tài khoản đăng ký bằng mật khẩu bắt buộc xác minh email. Hiện chưa có xác thực 2 lớp hay quản lý phiên đăng nhập đang hoạt động.
Dịch vụ bên thứ ba
Stripe và Lemon Squeezy cho thanh toán thẻ, SePay cho chuyển khoản ngân hàng Việt Nam, và Google Analytics để phân tích lượt sử dụng.
Xử lý Sự cố
Vấn đề, nguyên nhân khả dĩ và cách khắc phục — chia theo nhóm.
Sự cố khi chuyển đổi
Nút Generate Code bị mờ hoặc bị từ chối.
→ Bạn đã chạm hạn mức tạo mã hoặc tạo project của gói, hoặc project đang ở trạng thái Quota Locked từ lần vượt hạn mức trước.
Chờ tới kỳ reset tiếp theo, hoặc nâng cấp gói — nâng cấp sẽ mở khóa ngay các project bị khóa.
Xuất từ Figma plugin bị lỗi hoặc hết thời gian chờ.
→ Frame vượt quá khoảng 2.000 layer hoặc 120 megapixel, hoặc quá trình tải lên vượt quá giới hạn 3 phút.
Tách frame thành các phần nhỏ hơn và xuất riêng từng phần.
Kết quả trông chung chung, nhiều thẻ div và alt text vô nghĩa.
→ Layer Figma vẫn dùng tên mặc định như "Rectangle 4" hoặc "Group".
Đặt tên layer rõ ràng rồi xuất lại.
Sự cố về kết quả xuất
Thiếu hiệu ứng xoay, đổ bóng hoặc blend mode trong bản xuất Email.
→ Trình đọc email không hiển thị tốt các hiệu ứng này, nên chế độ Email Template sẽ đơn giản hóa hoặc raster hóa chúng.
Dùng chế độ Standard hoặc Responsive nếu bạn cần giữ các hiệu ứng đó dưới dạng CSS thật.
Bố cục không thích ứng theo kích thước màn hình.
→ Bản chuyển đổi cơ bản mô phỏng đúng 1 kích thước cố định.
Chọn chế độ xuất Responsive thay vì Standard.
Sự cố đăng nhập
Không đăng nhập được.
→ Nhập sai mật khẩu 5 lần sẽ khóa tài khoản 15 phút, hoặc email của bạn chưa được xác minh.
Chờ 15 phút, hoặc kiểm tra hộp thư (kể cả thư mục spam) để tìm email xác minh.
Quên mật khẩu.
Dùng "Quên mật khẩu" ở trang đăng nhập; liên kết đặt lại có hiệu lực trong 1 giờ.
Sự cố thanh toán
Thanh toán qua chuyển khoản SePay bị treo ở trạng thái "đang chờ".
→ Mã QR hết hạn sau 15 phút.
Kiểm tra trang trạng thái đơn hàng, hoặc thanh toán lại từ đầu nếu đã hết hạn.
Thanh toán bằng thẻ bị lỗi.
→ Thẻ bị từ chối hoặc nhập sai thông tin.
Kiểm tra lại thông tin thẻ với ngân hàng, hoặc thử phương thức thanh toán khác. Liên hệ hỗ trợ nếu đã bị trừ tiền nhưng gói chưa được cập nhật.
Sự cố gói đăng ký
Không thấy nút "Hủy gói".
→ Đây chưa phải là tính năng tự phục vụ.
Gửi email tới support@markupgen.com để hủy gói.
Không có tùy chọn hạ cấp ở gói Starter.
→ Starter là gói trả phí thấp nhất.
Đây là điều bình thường — không còn gói nào thấp hơn để hạ xuống trong ứng dụng.
Sự cố tải xuống & xuất mã
Xuất framework (React/Vue/Svelte/Angular) bị khóa.
→ Xuất 1 framework riêng lẻ yêu cầu bất kỳ gói trả phí nào.
Nâng cấp lên Starter trở lên.
Export Studio bị khóa dù đã dùng gói Starter.
→ Trọn bộ tất cả framework yêu cầu đúng gói Pro hoặc Business.
Nâng cấp lên Pro.
Thực hành Tốt nhất
Những thói quen cụ thể giúp cải thiện chất lượng chuyển đổi rõ rệt.
- Dùng Auto Layout ở mọi nơi có thể — đây là yếu tố quan trọng nhất phân biệt giữa CSS linh hoạt và khối kích thước cố định.
- Đặt tên layer bằng ngôn ngữ đơn giản — "Header", "Nút Thêm vào giỏ", "Ảnh Hero" — engine đọc những tên này để chọn thẻ HTML, ARIA label và alt text.
- Nhóm các phần tử liên quan trong 1 frame Auto Layout thay vì để rời rạc, định vị tuyệt đối.
- Dùng cỡ chữ nhất quán, có chủ đích cho heading và body text — cấp độ heading được suy ra từ đây.
- Giữ ảnh nội dung và tài nguyên trang trí tách biệt rõ ràng — MarkupGen đã xử lý khác nhau cho 2 loại này trong output.
- Chọn chế độ xuất ngay từ đầu. Đừng kỳ vọng bản chuyển đổi Standard sẽ tự responsive sau đó — bắt đầu với chế độ Responsive nếu đích đến cần hoạt động tốt trên mobile.
- Tránh phụ thuộc vào constraint của Figma cho hành vi resize — chúng không được tái tạo; hãy dùng Auto Layout để đạt hiệu ứng tương tự.
- Với output email, tránh xoay phần tử, blend mode và hiệu ứng đổ bóng/mờ — chúng sẽ không hiển thị đúng trên trình đọc email.
- Luôn kiểm tra Desktop, Tablet và Mobile trong Preview trước khi xuất, và chạy điểm Chất lượng AI (gói trả phí) để biết chính xác cần sửa gì.
- Chuẩn bị tự thêm metadata SEO sau khi xuất — MarkupGen không tự sinh thẻ title, meta description hay structured data.
Câu hỏi Thường gặp
Dựa trên hành vi thực tế của sản phẩm, đã được xác minh.
Giới hạn Hiện tại
MarkupGen làm tốt điều gì, và điều gì hiện chưa làm được.
MarkupGen làm tốt điều gì
Chuyển đổi nhanh và ổn định một frame Figma có cấu trúc tốt, dùng Auto Layout, thành HTML/CSS sạch, có gắn thẻ semantic, kèm các lớp AI tùy chọn cho tương tác, responsive, chấm điểm chất lượng và tự sửa lỗi.
Điều MarkupGen chưa làm được
Tự động tái tạo dữ liệu prototype/tương tác của Figma; tuân theo hành vi resize dựa trên constraint của Figma (ghim, scale); nhập nhiều frame hoặc cả trang trong 1 lần; thêm metadata SEO vào mã đã tạo; hoặc xuất 1 định nghĩa component dùng chung, tái sử dụng được cho mỗi component Figma.
Những chỗ output có thể cần chỉnh tay
Layer Figma đặt tên chung chung hoặc không đặt tên gây ra mã chung chung; hiệu ứng thị giác phức tạp trong chế độ Email Template; tương tác vượt ngoài các mẫu mà tính năng gợi ý JS bằng AI nhận diện được.
Giới hạn kỹ thuật
Xem mục Hạn mức & Giới hạn Sử dụng để biết con số chính xác — khoảng 2.000 layer, 120 megapixel và 50 MB mỗi lượt xuất, thời gian chờ tải lên 3 phút, và giới hạn 3.000 ký tự cho chỉ dẫn AI tùy chỉnh.
Thuật ngữ
Các từ ngữ được dùng xuyên suốt tài liệu này.
- Frame
- Một khối chứa cấp cao nhất trong Figma — tương đương 1 màn hình hoặc 1 khu vực. MarkupGen xuất mỗi lượt 1 frame, component hoặc group.
- Auto Layout
- Tính năng xếp lớp tự động, responsive có sẵn của Figma; MarkupGen ánh xạ trực tiếp thành CSS Flexbox.
- Constraints
- Quy tắc resize kiểu ghim/scale có từ trước khi Auto Layout ra đời; hiện MarkupGen chưa đọc thông tin này.
- Chuyển đổi / Tạo mã (Generation)
- Một lượt chạy "Generate Code" trên 1 project — đơn vị dùng để tính hạn mức của gói bạn.
- Project
- Một lượt xuất Figma được theo dõi trên dashboard của bạn, do bạn sở hữu trong 1 Workspace.
- Workspace
- Không gian nhóm chung mà các project thuộc về; tư cách thành viên đi kèm 1 vai trò kiểm soát quyền hạn.
- Template
- Bất kỳ project nào của bạn được đánh dấu để tái sử dụng trong thư viện Templates của workspace.
- Export (Xuất)
- Tải mã đã tạo dưới dạng HTML/CSS thuần, 1 component framework riêng lẻ, hoặc trọn bộ nhiều framework.
- Subscription (Gói đăng ký)
- Gói trả phí định kỳ theo tháng của bạn — Starter, Pro hoặc Business.
- Quota Locked
- Một project được tạo sau khi bạn đã chạm hạn mức tạo project — vẫn được lưu, nhưng không tạo mã được cho đến khi bạn nâng cấp hoặc hạn mức được reset.
Tóm tắt Nhanh
Từ Figma đến mã nguồn sẵn sàng sản xuất.
- 1Cài plugin MarkupGen từ Figma Community.
- 2Chọn 1 frame sạch, đặt tên rõ ràng, dùng Auto Layout trong Figma.
- 3Export & Send từ plugin (đăng nhập 1 lần qua trình duyệt).
- 4Mở project mới trên dashboard của bạn.
- 5Chọn chế độ xuất và CSS framework, rồi bấm Generate Code.
- 6Xem lại kết quả ở Preview và kiểm tra điểm Chất lượng AI (gói trả phí).
- 7Sửa tay trong Code Editor, hoặc nâng cấp để dùng Visual Editor và Tự động Sửa Lỗi 1-Click.
- 8Xuất dưới dạng HTML/CSS, hoặc component framework nếu dùng gói trả phí, rồi tích hợp vào dự án của bạn.
Sẵn sàng tăng tốc quy trình từ thiết kế sang mã nguồn?
Bắt đầu miễn phí ngay hôm nay, hoặc nâng cấp để dùng Visual Editor, chấm điểm AI và xuất đầy đủ framework.