Communitygithub.com

cdv-bot/figma-to-pure-css

使用此技能将Figma设计转换为纯粹的、自包含的单个HTML/CSS文件，不含任何JavaScript（无<script>标签），仅使用内部<style>和图片/SVG。非常适合打印/A4模板、PDF、电子邮件简报、沙箱化Webview或禁止脚本的系统。

figma-to-pure-css 是什么？

此技能指导AI代理将Figma设计转换为一个完全自包含的单个HTML文件，严格遵守“零脚本”原则：文件中绝对不包含任何<script>标签（包括内联事件处理器）。所有CSS样式都嵌入在HTML头部的单个<style>标签中，不支持外部CSS导入（Google Fonts除外）。图像资源（PNG/JPG/WebP）可下载到本地assets目录，向量图标优先以内联<svg>或本地图片形式嵌入。该技能专门针对A4纸张打印和PDF导出进行了优化，使用pt（点）或mm（毫米）作为尺寸单位，而非像素px，以防止打印时页面偏移。它强制使用CSS Grid和Flexbox进行布局，并包含详细的A4打印样式规则，确保在打印或导出PDF时，页眉、页脚和背景颜色完全覆盖，无白色边距。典型应用包括创建保险表格、合同、发票、电子邮件模板以及任何需要在严格无脚本环境中运行的单页应用。

兼容平台~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 单文件技能（零脚本 & 一体化）

本技能指导 Agent 将 Figma 设计转换为 1 个独立的单文件 HTML，仅使用内部 <style> 标签和图片/SVG，绝对不包含任何 <script> 标签，完美优化用于浏览器显示和 A4 打印 / PDF 导出（黄金比例，无偏移）。

1. 目的与应用范围

在以下情况下使用此技能：

  • 用户要求创建无脚本（No-Script / Zero-JS）的 HTML/CSS。
  • 需要将所有内容打包到 1 个独立的 HTML 文件（All-in-one HTML）。
  • 界面模板用于：文档打印 / A4 合同（Print to PDF）、保险/理赔表格、HTML 电子邮件模板、嵌入到禁用 JavaScript 的移动端 App Webview，或禁止脚本的高安全 CMS/Sandbox。

2. 强制性原则（硬性约束）

  1. 绝对 0 个 <script> 标签（严格零脚本）：

    • 禁止：<script src="https://cdn.tailwindcss.com"></script> 或任何 CDN 脚本。
    • 禁止：内联 Tailwind 配置或运行 JavaScript 的 <script> 标签。
    • 禁止：内联 JS 事件处理器属性，如 onclick="..."、onload="..."。

  2. 所有 CSS 完全位于 1 个内部 <style> 标签中：

    • 所有 CSS 格式代码都放在 HTML 文件 <head> 中的 <style> 标签内。
    • 不从外部导入 CSS（除非用户需要 Figma 标准字体，则 Google Fonts 除外）。

  3. 图片与矢量管理：

    • 位图（PNG/JPG/WebP）：下载到内部目录 assets/<slug>/，并通过 <img src="assets/<slug>/ten-anh.png" alt="..." /> 标签引用。
    • 矢量图标 / 标志：优先以内联 <svg> 或 <img src="assets/<slug>/icon.svg"> 直接嵌入。

  4. 不使用 Canvas 绝对坐标：

    • 禁止对整体布局框架使用 position: absolute; top: ...px; left: ...px;。
    • 必须使用 CSS Grid 和 Flexbox 来创建自然的布局结构。

  5. CSS 变量与设计令牌：

    • 在 :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 打印与 PDF 导出标准（100% 防偏移 A4 打印规则）：

    • Figma 单位对于 A4 纸张的本质：
      • Figma 中的 A4 画板始终具有标准打印尺寸：$595.28 \times 841.89$ 图形点 (PostScript Points - pt)，精确对应 $210\text{mm} \times 297\text{mm}$（ISO 216）。
      • 禁止：直接将 Figma 测量值赋给 px（例如 width: 595.28px）。在 Web 的 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，确保颜色条始终从纸张左边缘覆盖到右边缘。
    • 必须启用打印背景颜色：
      • 在 *, *::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 模板结构（纯 CSS A4 打印就绪）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面标题 / 表单</title>
  
  <!-- 可选：如果 Figma 要求特定字体 -->
  <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. 基本重置 */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* 2. 设计令牌 */
    :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. 基础主体：屏幕显示美观 */
    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. 5 步执行流程（纯 CSS 单文件）

  1. 步骤 1（读取 Figma 数据）：调用 get_figma_data 提取层结构、自动布局、字体、颜色和尺寸。识别 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 文件。
    • 检查屏幕视图（Screen view）。
    • 必须检查打印预览：使用 Playwright 的 emulateMedia({ media: 'print' }) 或通过 page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) 导出 PDF 进行验证：确保正好 1 页（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