Figma to Pure CSS Single-File Skill (Zero-Script & All-in-One)

Kỹ năng này hướng dẫn Agent chuyển đổi thiết kế Figma thành 1 tệp HTML độc lập duy nhất (Single-File), chỉ dùng thẻ <style> nội bộ và hình ảnh/SVG, tuyệt đối KHÔNG chứa bất kỳ thẻ <script> nào, tối ưu hoàn hảo cho hiển thị trình duyệt và in ấn A4 / xuất PDF chuẩn tỉ lệ vàng không lệch lề.

1. Mục đích & Phạm vi áp dụng

Sử dụng kỹ năng này khi:

Người dùng yêu cầu tạo HTML/CSS không dùng script (No-Script / Zero-JS).
Cần xuất file tất cả gói gọn trong 1 file HTML duy nhất (All-in-one HTML).
Mẫu giao diện dùng cho: In ấn tài liệu / Hợp đồng A4 (Print to PDF), biểu mẫu bảo hiểm/yêu cầu bồi thường, Email Template HTML, nhúng Webview trong App di động bị chặn JavaScript, hoặc CMS/Sandbox bảo mật cao cấm script.

2. Các nguyên tắc bắt buộc (Hard Constraints)

Tuyệt đối 0 thẻ <script> (Strict Zero-Script):
- CẤM: <script src="https://cdn.tailwindcss.com"></script> hoặc bất kỳ CDN script nào.
- CẤM: Thẻ <script> inline cấu hình Tailwind hay chạy JavaScript.
- CẤM: Các thuộc tính inline JS event handlers như onclick="...", onload="...".
Tất cả CSS nằm trọn vẹn trong 1 thẻ <style> nội bộ:
- Toàn bộ mã định dạng CSS đặt trong thẻ <style> nằm trong <head> của tệp .html.
- Không import CSS từ bên ngoài (trừ Google Fonts nếu người dùng cần font chuẩn Figma).
Quản lý Hình ảnh & Vector:
- Ảnh bitmap (PNG/JPG/WebP): Tải về thư mục nội bộ assets/<slug>/ và gọi qua thẻ <img src="assets/<slug>/ten-anh.png" alt="..." />.
- Biểu tượng vector / Icon / Logo: Ưu tiên nhúng trực tiếp dạng Inline <svg> hoặc <img src="assets/<slug>/icon.svg">.
Không dùng toạ độ Canvas Absolute:
- Cấm dùng position: absolute; top: ...px; left: ...px; cho khung layout tổng thể.
- Bắt buộc dùng CSS Grid và Flexbox để tạo cấu trúc bố cục tự nhiên.

CSS Variables & Design Tokens:

Khai báo toàn bộ màu sắc, kích thước, font trích xuất từ Figma tại :root:

:root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

QUY CHUẨN IN ẤN A4 & XUẤT PDF CHUẨN 100% (ANTI-DRIFT A4 PRINT RULES):
- Bản chất đơn vị Figma đối với khổ A4:
  - Artboard A4 trong Figma luôn có kích thước chuẩn in ấn: $595.28 \times 841.89$ điểm đồ họa (PostScript Points - pt), tương đương chính xác $210\text{mm} \times 297\text{mm}$ (ISO 216).
  - CẤM: Gán trực tiếp số đo Figma sang px (ví dụ width: 595.28px). Ở 96 DPI của web, $595.28\text{px}$ chỉ bằng $157.5\text{mm}$ (chỉ chiếm $75%$ trang A4), dẫn đến việc Print Preview A4 ($210\text{mm}$) bị co rút và để lại khoảng trắng lệch $52.5\text{mm}$ ở lề phải.
  - BẮT BUỘC: Dùng đơn vị pt (hoặc quy chuẩn mm) cho toàn bộ thông số kích thước, cỡ chữ, padding, margin. Khung A4 đặt width: 595.28pt (hoặc 210mm) và height: 841.89pt (hoặc 297mm).
- Footer & Header Bar tràn viền 100%:
  - Dải màu chân trang (footer) hoặc thanh tiêu đề (header) bắt buộc đặt width: 100%; kết hợp position: absolute; bottom: 0; left: 0; right: 0; thay vì đặt width: 595.28px/pt cố định, đảm bảo dải màu luôn phủ kín $100%$ từ mép giấy trái sang tận mép giấy phải.
- Bắt buộc bật chế độ in màu nền (Print Background Colors):
  - Khai báo -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; ở *, *::before, *::after và @media print.
- Khối @page và @media print bắt buộc:
```
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
  }

  .a4-page {
    width: 210mm !important;
    height: 297mm !important;
    min-width: 210mm !important;
    min-height: 297mm !important;
    max-width: 210mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
  }
}
```

3. Cấu trúc mẫu tệp HTML Single-File (Pure CSS A4 Print Ready)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tiêu đề Trang / Biểu mẫu</title>
  
  <!-- Optional: Google Fonts nếu Figma yêu cầu font đặc thù -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap" rel="stylesheet" />

  <style>
    /* 1. RESET CƠ BẢN */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* 2. DESIGN TOKENS */
    :root {
      --color-primary: #0E4E96;
      --color-accent: #F58220;
      --color-text: #111827;
      --color-text-muted: #6B7280;
      --color-bg: #FFFFFF;
      --color-border: #231F20;
      --font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* 3. BASE BODY: Hiển thị đẹp trên màn hình */
    body {
      font-family: var(--font-family);
      color: var(--color-text);
      background-color: #E2E8F0;
      margin: 0;
      padding: 24px 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      -webkit-font-smoothing: antialiased;
    }

    /* 4. KHUNG A4 CHUẨN (595.28pt x 841.89pt = 210mm x 297mm) */
    .a4-page {
      position: relative;
      width: 595.28pt;
      height: 841.89pt;
      min-width: 595.28pt;
      min-height: 841.89pt;
      background-color: var(--color-bg);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      box-sizing: border-box;
      overflow: hidden;
      margin: 0 auto;
    }

    .page-content {
      position: relative;
      z-index: 2;
      width: 532.96pt;
      margin: 0 auto;
      padding-top: 21.97pt;
    }

    /* Thanh chân trang tràn viền 100% */
    .footer-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 19.63pt;
      background-color: var(--color-primary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28.94pt;
      box-sizing: border-box;
      z-index: 10;
    }

    /* 5. CẤU HÌNH IN ẤN A4 & XUẤT PDF CHỐNG LỆCH */
    @page {
      size: A4 portrait;
      margin: 0;
    }

    @media print {
      html, body {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        overflow: hidden !important;
      }

      .a4-page {
        width: 210mm !important;
        height: 297mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;
        max-width: 210mm !important;
        max-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
      }
    }
  </style>
</head>
<body>
  <!-- Semantic HTML5: Không bất kỳ thẻ <script> nào -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- Nội dung layout chuyển đổi từ Figma -->
    </div>
    <footer class="footer-bar">
      <!-- Thanh chân trang tràn viền 100% -->
    </footer>
  </main>
</body>
</html>

4. Quy trình thực thi 5 bước (Pure CSS Single-File)

Bước 1 (Đọc dữ liệu Figma): Gọi get_figma_data bóc tách cấu trúc layer, Auto-Layout, font, màu và kích thước. Nhận diện khổ A4 ($595.28\text{pt} \times 841.89\text{pt}$).
Bước 2 (Tải tài nguyên): Tải ảnh PNG/JPG và SVG vào assets/<slug>/.
Bước 3 (Dựng HTML + Pure <style>):
- Viết toàn bộ CSS trong thẻ <style> của file HTML.
- Áp dụng hệ đơn vị pt (hoặc quy đổi mm), dùng width: 100% cho footer bar tràn viền.
- Đảm bảo 100% KHÔNG chèn thẻ <script>.
Bước 4 (Khởi động Browser & Kiểm định In ấn):
- Mở file HTML qua máy chủ cục bộ hoặc file URL.
- Kiểm tra giao diện màn hình (Screen view).
- Bắt buộc kiểm tra Print Preview: Dùng Playwright emulateMedia({ media: 'print' }) hoặc xuất PDF bằng page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) để kiểm chứng: đúng 1 trang duy nhất (1/1), không lệch lề, footer tràn viền 100%.
Bước 5 (Kiểm toán sai lệch 6 điểm): So sánh độ khớp 1:1, tự sửa CSS trong <style> cho đến khi đạt độ khớp 100%.

cdv-bot/figma-to-pure-css

What is figma-to-pure-css?

Ask in your favorite AI

Preview

Documentation

Figma to Pure CSS Single-File Skill (Zero-Script & All-in-One)

1. Mục đích & Phạm vi áp dụng

2. Các nguyên tắc bắt buộc (Hard Constraints)

3. Cấu trúc mẫu tệp HTML Single-File (Pure CSS A4 Print Ready)

4. Quy trình thực thi 5 bước (Pure CSS Single-File)

Related Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me