Communitygithub.com

cdv-bot/figma-to-pure-css

將 Figma 設計轉換為獨立單一 HTML/CSS 檔案，完全不含 JavaScript，僅使用內部 <style> 與圖片／SVG，適合 A4 列印、PDF、電子報與禁止腳本的環境。

figma-to-pure-css 是什麼？

這個技能專門用來將 Figma 設計稿轉換成一份「純 CSS 單一 HTML 檔案」，完全不包含任何 `<script>` 標籤、inline JS 事件處理器或外部 JS 依賴，確保輸出檔在嚴格禁止腳本的環境（如安全沙盒、CMS、Email Template）中能正常顯示。 此技能強制使用 `<style>` 內部 CSS 與 Design Tokens（變數），並自動採用 CSS Grid 與 Flexbox 進行版面佈局，避免使用 Canvas 絕對座標。對於 A4 列印與 PDF 輸出，技能內建嚴格的抗偏移規則：以 `pt` 或 `mm` 單位設定 A4 頁面（595.28pt × 841.89pt），並包含 `@page`、`@media print` 與 `print-color-adjust` 設定，確保列印預覽與 PDF 匯出完全符合 ISO 216 標準，且頁尾、頁首橫條能 100% 滿版。 支援的流程包含：透過 `get_figma_data` 提取圖層與設計 token、自動下載資源至 `assets/<slug>/`、產生 HTML 與純 CSS、使用 Playwright 進行列印預覽與 PDF 驗證，最後執行 6 點差異比對，確保輸出與 Figma 設計完全吻合。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cdv-bot/skill-rule-clone-figma/tree/HEAD/.agents/skills/figma-to-pure-css
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

預覽

來自技能 README

figma-to-pure-css preview
figma-to-pure-css preview

說明文件

Figma 轉純 CSS 單一檔案技能（無腳本、一體成型）

此技能指導 AI Agent 將 Figma 設計轉換為僅一個獨立的 HTML 檔案，只使用內部 <style> 與圖片／SVG，絕對不含任何 <script> 標籤，完美最佳化瀏覽器顯示與 A4 列印／精準無偏移的 PDF 輸出。

1. 目的與適用範圍

使用此技能時機：

  • 使用者要求產生不使用腳本（No-Script / Zero-JS）的 HTML/CSS。
  • 需要將所有內容打包在單一 HTML 檔案（All-in-one HTML）中。
  • 介面範本用於：文件列印／A4 合約（列印成 PDF）、保險／理賠申請表、Email 範本 HTML、嵌入禁止 JavaScript 的行動應用程式 Webview，或高度安全禁止腳本的 CMS／沙盒。

2. 強制規則（Hard Constraints）

  1. 嚴格零腳本（Strict Zero-Script）：

    • 禁止: <script src="https://cdn.tailwindcss.com"></script> 或任何 CDN 腳本。
    • 禁止: 內聯 <script> 標籤設定 Tailwind 或執行 JavaScript。
    • 禁止: 內聯 JS 事件處理器屬性，如 onclick="..."、onload="..."。

  2. 所有 CSS 完全位於單一內部 <style> 標籤中：

    • 所有 CSS 格式代碼放置在 HTML 檔案 <head> 中的 <style> 標籤內。
    • 不從外部匯入 CSS（除非使用者需要 Figma 標準字型，此時可引用 Google Fonts）。

  3. 圖片與向量管理：

    • 點陣圖（PNG/JPG/WebP）：下載至內部目錄 assets/<slug>/，並透過 <img src="assets/<slug>/圖片名稱.png" alt="..." /> 引用。
    • 向量圖示／圖標：優先直接嵌入內聯 <svg> 或使用 <img src="assets/<slug>/icon.svg">。

  4. 禁止使用 Canvas 絕對座標：

    • 禁止在整體版面佈局中使用 position: absolute; top: ...px; left: ...px;。
    • 強制使用 CSS Grid 與 Flexbox 建立自然結構。

  5. CSS 變數與 Design Tokens：

    • 在 :root 中宣告從 Figma 提取的所有顏色、尺寸、字型： 
      :root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

  6. A4 列印與 100% 精準 PDF 輸出規範（ANTI-DRIFT A4 PRINT RULES）：

    • Figma 中 A4 尺寸的原則：
      • Figma 中的 A4 Artboard 始終使用標準列印尺寸：$595.28 \times 841.89$ 圖形點（PostScript Points - pt），正好對應 $210\text{mm} \times 297\text{mm}$（ISO 216）。
      • 禁止: 直接將 Figma 數值轉換為 px（例如 width: 595.28px）。在網頁 96 DPI 下，$595.28\text{px}$ 僅等於 $157.5\text{mm}$（僅佔 A4 頁面的 $75%$），導致列印預覽 A4（$210\text{mm}$）時會縮小，並在右邊留下 $52.5\text{mm}$ 的空白。
      • 強制要求: 對所有尺寸、字型大小、內距、外距使用 pt（或標準 mm）單位。A4 框架設定為 width: 595.28pt（或 210mm）與 height: 841.89pt（或 297mm）。
    • 頁尾與頁首橫條 100% 滿版：
      • 頁尾顏色條或頁首標題列必須設定 width: 100%; 搭配 position: absolute; bottom: 0; left: 0; right: 0;，而不是固定 width: 595.28px/pt，以確保顏色條從左紙邊到右紙邊完全覆蓋 $100%$。
    • 強制啟用列印背景顏色：
      • 在 *, *::before, *::after 與 @media print 中宣告 -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;。
    • 強制包含 @page 與 @media print 區塊： 
      @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. 單一 HTML 檔案範本（Pure CSS A4 Print Ready）

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>頁面標題 / 表單</title>
  
  <!-- 可選：如果 Figma 需要特定字型，可引用 Google Fonts -->
  <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 */
    *, *::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: 螢幕顯示美觀 */
    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. 標準 A4 框架 (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;
    }

    /* 滿版頁尾橫條 */
    .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. A4 列印與抗偏移 PDF 設定 */
    @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>
  <!-- 語意化 HTML5：不含任何 <script> 標籤 -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- 從 Figma 轉換的版面內容 -->
    </div>
    <footer class="footer-bar">
      <!-- 滿版頁尾橫條 -->
    </footer>
  </main>
</body>
</html>

4. 五步驟執行流程（Pure CSS Single-File）

  1. 步驟 1（讀取 Figma 資料）：呼叫 get_figma_data 解析圖層結構、Auto-Layout、字型、顏色與尺寸。辨識 A4 尺寸（$595.28\text{pt} \times 841.89\text{pt}$）。
  2. 步驟 2（下載資源）：將 PNG/JPG 與 SVG 圖片下載至 assets/<slug>/。
  3. 步驟 3（建構 HTML + 純 <style>）：
    • 在 HTML 檔案的 <style> 標籤中撰寫所有 CSS。
    • 採用 pt（或轉換為 mm）單位，頁尾橫條使用 width: 100% 以達到滿版。
    • 確保 100% 不插入任何 <script> 標籤。
  4. 步驟 4（啟動瀏覽器與列印驗證）：
    • 透過本地伺服器或檔案 URL 開啟 HTML 檔案。
    • 檢查螢幕顯示。
    • 強制檢查列印預覽：使用 Playwright 的 emulateMedia({ media: 'print' }) 或透過 page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) 匯出 PDF，驗證：確實為單頁（1/1）、無偏移、頁尾 100% 滿版。
  5. 步驟 5（6 點差異比對）：比較 1:1 吻合度，自動修正 <style> 中的 CSS，直到達到 100% 吻合。

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community