Habilidad Figma a CSS Puro en Archivo Único (Cero Scripts y Todo en Uno)

Esta habilidad guía al Agente para convertir diseños de Figma en 1 único archivo HTML independiente (Single-File), usando solo etiquetas <style> internas e imágenes/SVG, absolutamente SIN ninguna etiqueta <script>, optimizado perfectamente para visualización en navegador e impresión A4 / exportación a PDF con proporciones adecuadas y sin desviaciones de márgenes.

1. Propósito y Ámbito de Aplicación

Usa esta habilidad cuando:

El usuario solicite generar HTML/CSS sin scripts (No-Script / Zero-JS).
Sea necesario exportar todo empaquetado en 1 único archivo HTML (Todo en uno).
La plantilla de interfaz se utilice para: Impresión de documentos / Contratos A4 (Print to PDF), formularios de seguros/reclamaciones, plantillas de correo HTML, incrustación en Webviews de apps móviles con JavaScript bloqueado, o CMS/Sandbox de alta seguridad que prohíben scripts.

2. Reglas Obligatorias (Restricciones Estrictas)

Cero absoluto etiquetas <script> (Strict Zero-Script):
- PROHIBIDO: <script src="https://cdn.tailwindcss.com"></script> o cualquier CDN script.
- PROHIBIDO: Etiquetas <script> inline para configurar Tailwind o ejecutar JavaScript.
- PROHIBIDO: Manejadores de eventos inline JS como onclick="...", onload="...".
Todo el CSS completo dentro de 1 etiqueta <style> interna:
- Todo el código de formato CSS se coloca en una etiqueta <style> dentro de <head> del archivo .html.
- No importar CSS externo (excepto Google Fonts si el usuario necesita la fuente estándar de Figma).
Gestión de Imágenes y Vectores:
- Imágenes bitmap (PNG/JPG/WebP): Descargar a la carpeta interna assets/<slug>/ y referenciar con <img src="assets/<slug>/nombre-imagen.png" alt="..." />.
- Iconos vectoriales / Iconos / Logos: Priorizar incrustación directa como Inline <svg> o <img src="assets/<slug>/icono.svg">.
No usar coordenadas absolutas de Canvas:
- Prohibido usar position: absolute; top: ...px; left: ...px; para el marco de diseño general.
- Obligatorio usar CSS Grid y Flexbox para crear una estructura de diseño natural.

Variables CSS y Tokens de Diseño:

Declarar todos los colores, tamaños y fuentes extraídos de Figma en :root:

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

ESTÁNDARES DE IMPRESIÓN A4 Y EXPORTACIÓN A PDF AL 100% (REGLAS ANTI-DESVIACIÓN A4):
- Naturaleza de las unidades de Figma para formato A4:
  - El artboard A4 en Figma siempre tiene el tamaño de impresión estándar: $595.28 \times 841.89$ puntos gráficos (PostScript Points - pt), equivalente exactamente a $210\text{mm} \times 297\text{mm}$ (ISO 216).
  - PROHIBIDO: Asignar directamente las medidas de Figma a px (por ejemplo width: 595.28px). A 96 DPI de la web, $595.28\text{px}$ equivale solo a $157.5\text{mm}$ (ocupa solo el $75%$ de una página A4), lo que provoca que la Vista Previa de Impresión A4 ($210\text{mm}$) se encoja y deje un espacio en blanco descentrado de $52.5\text{mm}$ en el margen derecho.
  - OBLIGATORIO: Usar la unidad pt (o el estándar mm) para todos los parámetros de tamaño, fuente, padding, margin. El marco A4 se define con width: 595.28pt (o 210mm) y height: 841.89pt (o 297mm).
- Barra de pie de página y encabezado al 100% de ancho:
  - La franja de color del pie de página (footer) o la barra de título (header) debe configurarse con width: 100%; junto con position: absolute; bottom: 0; left: 0; right: 0; en lugar de usar un width: 595.28px/pt fijo, asegurando que la franja de color cubra siempre el $100%$ desde el borde izquierdo hasta el borde derecho del papel.
- Obligatorio activar el modo de impresión de colores de fondo (Print Background Colors):
  - Declarar -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; en *, *::before, *::after y @media print.
- Bloques @page y @media print obligatorios:
```
@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. Estructura de Plantilla de Archivo HTML Único (CSS Puro Listo para Impresión A4)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título de Página / Formulario</title>
  
  <!-- Opcional: Google Fonts si Figma requiere fuentes 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. TOKENS DE DISEÑO */
    :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: Visualización atractiva en pantalla */
    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. MARCO A4 ESTÁNDAR (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 pie de página al 100% de ancho */
    .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. CONFIGURACIÓN DE IMPRESIÓN A4 Y EXPORTACIÓN PDF ANTI-DESVIACIÓN */
    @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: Sin ninguna etiqueta <script> -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- Contenido del diseño convertido desde Figma -->
    </div>
    <footer class="footer-bar">
      <!-- Barra de pie de página al 100% de ancho -->
    </footer>
  </main>
</body>
</html>

4. Proceso de Ejecución en 5 Pasos (CSS Puro y Archivo Único)

Paso 1 (Leer datos de Figma): Llamar a get_figma_data para extraer la estructura de capas, Auto-Layout, fuentes, colores y tamaños. Identificar el formato A4 ($595.28\text{pt} \times 841.89\text{pt}$).
Paso 2 (Descargar recursos): Descargar imágenes PNG/JPG y SVG en assets/<slug>/.
Paso 3 (Construir HTML + <style> puro):
- Escribir todo el CSS dentro de la etiqueta <style> del archivo HTML.
- Aplicar el sistema de unidades pt (o conversión a mm), usar width: 100% para la barra de pie de página que se extiende al borde.
- Asegurar el 100% de NO inserción de etiquetas <script>.
Paso 4 (Iniciar navegador y verificar impresión):
- Abrir el archivo HTML a través de un servidor local o URL de archivo.
- Verificar la vista en pantalla (Screen view).
- Obligatorio verificar la Vista Previa de Impresión: Usar Playwright emulateMedia({ media: 'print' }) o exportar PDF con page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) para comprobar: exactamente 1 página única (1/1), sin desviaciones de márgenes, pie de página al 100% de ancho.
Paso 5 (Auditoría de desviaciones en 6 puntos): Comparar la coincidencia 1:1, corregir el CSS dentro de <style> hasta alcanzar el 100% de coincidencia.

cdv-bot/figma-a-css-puro

¿Qué es figma-a-css-puro?

Preguntar en tu IA favorita

Vista previa

Documentación

Habilidad Figma a CSS Puro en Archivo Único (Cero Scripts y Todo en Uno)

1. Propósito y Ámbito de Aplicación

2. Reglas Obligatorias (Restricciones Estrictas)

3. Estructura de Plantilla de Archivo HTML Único (CSS Puro Listo para Impresión A4)

4. Proceso de Ejecución en 5 Pasos (CSS Puro y Archivo Único)

Skills relacionados

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me