Communitygithub.com

cdv-bot/figma-to-pure-css

Use esta skill sempre que o usuário solicitar a geração de HTML/CSS autônomo, em arquivo único, a partir do Figma, com ZERO JavaScript (sem tags <script>), usando apenas <style> interno e imagens/SVGs. Ideal para templates A4 para impressão, PDFs, newsletters por e-mail, webviews em sandbox ou sistemas que bloqueiam scripts.

O que é figma-to-pure-css?

Esta skill transforma designs do Figma em um único arquivo HTML independente, contendo todo o CSS em uma tag <style> interna e imagens/SVG incorporados ou referenciados localmente, sem absolutamente nenhuma tag <script> ou manipuladores de eventos inline JavaScript. O diferencial está nas regras rígidas de impressão A4/PDF: todas as dimensões são convertidas para unidades pt ou mm, garantindo que o layout ocupe exatamente 210mm × 297mm sem desvios, com barras de rodapé/cabeçalho que se estendem por 100% da largura. A skill suporta Figma, navegadores (incluindo Print Preview) e geração de PDF via Playwright, seguindo um processo de 5 etapas que inclui extração de dados do Figma, download de assets, construção do HTML+CSS puro, verificação de impressão e auditoria de fidelidade visual.

Funciona com~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
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Prévia

Do README da skill

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

Documentação

Figma para CSS Puro em Arquivo Único (Zero Script e Tudo em Um)

Esta skill orienta o Agente a converter designs do Figma em 1 único arquivo HTML independente (Single-File), usando apenas tag <style> interna e imagens/SVG, absolutamente SEM qualquer tag <script>, perfeitamente otimizado para exibição em navegadores e impressão A4 / exportação de PDF com proporção áurea e sem desalinhamento de margens.

1. Propósito e Escopo de Aplicação

Use esta skill quando:

  • O usuário solicitar a criação de HTML/CSS sem usar script (No-Script / Zero-JS).
  • For necessário exportar tudo em 1 único arquivo HTML (All-in-one HTML).
  • O template de interface for usado para: Impressão de documentos / Contratos A4 (Print to PDF), formulários de seguro/sinistros, Email Template HTML, incorporação em Webview de aplicativos móveis com JavaScript bloqueado, ou CMS/Sandbox de alta segurança que proíbe scripts.

2. Regras Obrigatórias (Hard Constraints)

  1. Zero tags <script> absoluto (Strict Zero-Script):

    • PROIBIDO: <script src="https://cdn.tailwindcss.com"></script> ou qualquer CDN de script.
    • PROIBIDO: Tag <script> inline para configurar Tailwind ou executar JavaScript.
    • PROIBIDO: Atributos inline de eventos JS como onclick="...", onload="...".

  2. Todo CSS dentro de uma única tag <style> interna:

    • Todo o código de formatação CSS deve estar dentro da tag <style> localizada no <head> do arquivo .html.
    • Não importar CSS externo (exceto Google Fonts se o usuário precisar de fontes padrão do Figma).

  3. Gerenciamento de Imagens e Vetores:

    • Imagens bitmap (PNG/JPG/WebP): Baixar para o diretório interno assets/<slug>/ e referenciar via tag <img src="assets/<slug>/nome-da-imagem.png" alt="..." />.
    • Ícones vetoriais / Icones / Logos: Priorizar incorporação direta como Inline <svg> ou <img src="assets/<slug>/icon.svg">.

  4. Não usar coordenadas Canvas absolutas:

    • Proibido usar position: absolute; top: ...px; left: ...px; para o quadro de layout geral.
    • Obrigatório usar CSS Grid e Flexbox para criar estrutura de layout natural.

  5. Variáveis CSS e Design Tokens:

    • Declarar todas as cores, tamanhos, fontes extraídas do Figma em :root: 
      :root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

  6. PADRÃO DE IMPRESSÃO A4 & EXPORTAÇÃO DE PDF 100% CORRETO (REGRAS ANTI-DESVIO A4):

    • Natureza da unidade do Figma para o formato A4:
      • A prancheta A4 no Figma sempre tem tamanho padrão de impressão: $595.28 \times 841.89$ pontos gráficos (PostScript Points - pt), equivalente exato a $210\text{mm} \times 297\text{mm}$ (ISO 216).
      • PROIBIDO: Atribuir diretamente a medida do Figma para px (exemplo width: 595.28px). Em 96 DPI da web, $595.28\text{px}$ equivale a apenas $157.5\text{mm}$ (ocupa apenas $75%$ da página A4), resultando em uma Visualização de Impressão A4 ($210\text{mm}$) encolhida e deixando um espaço em branco de $52.5\text{mm}$ na margem direita.
      • OBRIGATÓRIO: Usar a unidade pt (ou padrão mm) para todos os parâmetros de tamanho, tamanho de fonte, padding, margin. O quadro A4 deve ter width: 595.28pt (ou 210mm) e height: 841.89pt (ou 297mm).
    • Barra de Rodapé e Cabeçalho com largura 100%:
      • A faixa de cor do rodapé (footer) ou barra de título (header) deve obrigatoriamente ter width: 100%; combinado com position: absolute; bottom: 0; left: 0; right: 0; em vez de definir width: 595.28px/pt fixo, garantindo que a faixa de cor cubra sempre $100%$ da borda esquerda até a borda direita do papel.
    • Obrigatório ativar o modo de impressão com cores de fundo (Print Background Colors):
      • Declarar -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; em *, *::before, *::after e @media print.
    • Bloco @page e @media print obrigatórios: 
      @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. Estrutura de modelo de arquivo HTML Single-File (Pure CSS A4 Print Ready)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título da Página / Formulário</title>
  
  <!-- Opcional: Google Fonts se o Figma exigir fontes específicas -->
  <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 BÁSICO */
    *, *::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. BODY BASE: Exibição bonita na tela */
    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. QUADRO A4 PADRÃO (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;
    }

    /* Barra de rodapé com largura 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. CONFIGURAÇÃO DE IMPRESSÃO A4 & EXPORTAÇÃO DE PDF ANTI-DESVIO */
    @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 Semântico: Nenhuma tag <script> -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- Conteúdo do layout convertido do Figma -->
    </div>
    <footer class="footer-bar">
      <!-- Barra de rodapé com largura 100% -->
    </footer>
  </main>
</body>
</html>

4. Processo de execução em 5 etapas (Pure CSS Single-File)

  1. Etapa 1 (Ler dados do Figma): Chamar get_figma_data para extrair a estrutura de camadas, Auto-Layout, fontes, cores e tamanhos. Identificar o formato A4 ($595.28\text{pt} \times 841.89\text{pt}$).
  2. Etapa 2 (Baixar recursos): Baixar imagens PNG/JPG e SVG para assets/<slug>/.
  3. Etapa 3 (Construir HTML + <style> puro):
    • Escrever todo CSS dentro da tag <style> do arquivo HTML.
    • Aplicar o sistema de unidades pt (ou converter para mm), usar width: 100% para a barra de rodapé com largura total.
    • Garantir 100% de NENHUMA tag <script> inserida.
  4. Etapa 4 (Iniciar Navegador e Verificar Impressão):
    • Abrir o arquivo HTML via servidor local ou URL de arquivo.
    • Verificar a interface na tela (Screen view).
    • Obrigatório verificar a Visualização de Impressão: Usar Playwright emulateMedia({ media: 'print' }) ou exportar PDF com page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) para validar: exatamente 1 página única (1/1), sem desalinhamento de margens, rodapé com largura 100%.
  5. Etapa 5 (Auditoria de desvios em 6 pontos): Comparar a correspondência 1:1, corrigir CSS dentro de <style> automaticamente até atingir 100% de fidelidade.

Habilidades Relacionadas

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