Communitygithub.com

cdv-bot/figma-to-pure-css

Nutze diesen Skill, wenn der Nutzer ein eigenständiges, reines HTML/CSS aus Figma ohne JavaScript (keine <script>-Tags) generieren möchte – nur mit internem <style> und Bildern/SVGs. Ideal für Druck-/A4-Vorlagen, PDFs, E-Mail-Newsletter, Sandbox-Webviews oder Systeme, die Skripte verbieten.

Was ist figma-to-pure-css?

Dieser Skill befähigt den Agenten, jedes Figma-Design in eine einzige, unabhängige HTML-Datei (Single-File) zu konvertieren, die ausschließlich internes `<style>` und Bilder/SVGs verwendet. Absolut null `<script>`-Tags (Zero-JS) sind erlaubt. Er ist speziell für A4-Druck, PDF-Export, HTML-E-Mail-Vorlagen, sandboxed Webviews in mobilen Apps oder CMS-Systeme mit strengen Sicherheitsrichtlinien optimiert. Der Skill erzwingt harte Constraints: Keine CDN-Skripte, keine inline JS-Event-Handler, kein absolutes Positioning für das Layout. Stattdessen wird ein striktes CSS-Grid/Flexbox-Layout verwendet, alle Farben, Schriftarten und Maße aus Figma werden als CSS-Variablen in `:root` definiert. Besonderer Fokus liegt auf dem A4-Druck: Maße werden in `pt` oder `mm` angegeben (nicht `px`), und eine vollständige `@page`- und `@media print`-Konfiguration sorgt für exakte 210 mm × 297 mm mit randlosem Farbbalken und farbtreuem Hintergrund. Der Skill arbeitet auf beliebigen Plattformen (Claude Code, Cursor, Codex etc.), da er nur die HTML-Erzeugung und die Playwright-basierte Druckvorschau-Prüfung beschreibt. Der Workflow umfasst fünf Schritte: Figma-Daten auslesen, Assets herunterladen, HTML mit Pure-CSS erstellen, im Browser/Playwright auf korrekte Druckansicht testen und schließlich eine 6‑Punkte-Abweichungsprüfung durchführen. So entsteht eine 1:1-konforme, JavaScript-freie HTML-Datei, die sich perfekt für druckbare Vorlagen und sichere Umgebungen eignet.

Funktioniert mit~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
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Vorschau

Aus dem Skill-README

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

Dokumentation

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

Diese Fähigkeit leitet den Agenten an, ein Figma-Design in eine einzige, unabhängige HTML-Datei (Single-File) umzuwandeln, die ausschließlich ein <style>-Tag und Bilder/SVGs verwendet und absolut KEINE <script>-Tags enthält. Optimiert für die browserübergreifende Darstellung und A4-Druck / PDF-Export im Goldenen Schnitt ohne Randverschiebung.

1. Zweck & Anwendungsbereich

Nutze diese Fähigkeit, wenn:

  • Der Nutzer ein HTML/CSS ohne Skripte (No-Script / Zero-JS) anfordert.
  • Ein einziges, in sich geschlossenes HTML-File (All-in-one HTML) erstellt werden soll.
  • Die Vorlage verwendet wird für: Dokumentendruck / A4-Verträge (Print to PDF), Versicherungs-/Schadensformulare, HTML-E-Mail-Vorlagen, eingebettete Webviews in mobilen Apps mit JavaScript-Sperre oder CMS/Sandbox mit hohen Sicherheitsanforderungen, die Skripte verbieten.

2. Zwingende Grundsätze (Hard Constraints)

  1. Absolut 0 <script>-Tags (Strict Zero-Script):

    • VERBOTEN: <script src="https://cdn.tailwindcss.com"></script> oder irgendein CDN-Skript.
    • VERBOTEN: Inline-<script>-Tag zur Tailwind-Konfiguration oder zur JavaScript-Ausführung.
    • VERBOTEN: Inline-JS-Event-Handler wie onclick="...", onload="...".

  2. Das gesamte CSS befindet sich vollständig in einem internen <style>-Tag:

    • Der gesamte CSS-Code wird im <style>-Tag innerhalb des <head> der .html-Datei platziert.
    • Kein externer CSS-Import (außer Google Fonts, wenn der Nutzer Figma‑Standard-Schriften benötigt).

  3. Bild- & Vektorverwaltung:

    • Bitmap-Bilder (PNG/JPG/WebP): Herunterladen in das interne Verzeichnis assets/<slug>/ und einbinden via <img src="assets/<slug>/bildname.png" alt="..." />.
    • Vektor-Icons / Logos: Bevorzugt direkt als Inline-<svg> oder <img src="assets/<slug>/icon.svg">.

  4. Keine absoluten Canvas-Koordinaten:

    • Verboten: position: absolute; top: ...px; left: ...px; für das gesamte Layout-Gerüst.
    • Zwingend: CSS Grid und Flexbox für einen natürlichen Layout-Aufbau.

  5. CSS-Variablen & Design Tokens:

    • Alle aus Figma extrahierten Farben, Größen und Schriften im :root-Selektor deklarieren: 
      :root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

  6. A4-DRUCK- & PDF-EXPORT-STANDARD 100% (ANTI-DRIFT A4 PRINT RULES):

    • Grundsätzliche Einheit von Figma für A4-Format:
      • Ein A4-Artboard in Figma hat immer die standardmäßigen Druckmaße: $595,28 \times 841,89$ PostScript-Punkte (pt), exakt $210\text{mm} \times 297\text{mm}$ (ISO 216).
      • VERBOTEN: Direkte Übertragung der Figma-Maße in px (z.B. width: 595.28px). Bei 96 DPI des Webs entsprechen $595,28\text{px}$ nur $157,5\text{mm}$ (nur $75%$ einer A4-Seite), was in der Druckvorschau zu einer Schrumpfung und einem weißen Rand von $52,5\text{mm}$ rechts führt.
      • ZWINGEND: Einheit pt (oder mm) für alle Größenangaben, Schriftgrößen, Padding, Margin. A4-Rahmen auf width: 595.28pt (oder 210mm) und height: 841.89pt (oder 297mm) setzen.
    • Footer & Header Bar 100% randlos:
      • Footer- oder Header-Farbbalken zwingend mit width: 100%; in Kombination mit position: absolute; bottom: 0; left: 0; right: 0; setzen, statt width: 595.28px/pt fest zu definieren – so wird der Balken immer von linkem bis rechtem Papierrand vollflächig abgedeckt.
    • Hintergrundfarben drucken aktivieren:
      • -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; für *, *::before, *::after und in @media print deklarieren.
    • @page- und @media print-Block zwingend: 
      @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. Beispielstruktur einer Single-File-HTML-Datei (Pure CSS A4 Print Ready)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Seitentitel / Formular</title>
  
  <!-- Optional: Google Fonts, falls Figma spezielle Schriften benötigt -->
  <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. GRUNDLEGENDES 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. BASIS-BODY: Bildschirmdarstellung */
    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-RAHMEN (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;
    }

    /* Fußleiste randlos 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. A4-DRUCK- & PDF-KONFIGURATION GEGEN VERSCHIEBUNG */
    @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>
  <!-- Semantisches HTML5: Keinerlei <script>-Tags -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- Aus Figma konvertierter Layout-Inhalt -->
    </div>
    <footer class="footer-bar">
      <!-- Fußleiste randlos 100% -->
    </footer>
  </main>
</body>
</html>

4. 5‑Schritt-Ausführungsablauf (Pure CSS Single-File)

  1. Schritt 1 (Figma-Daten auslesen): get_figma_data aufrufen, um Layer-Struktur, Auto-Layout, Schriftarten, Farben und Maße zu extrahieren. A4-Format erkennen ($595,28\text{pt} \times 841,89\text{pt}$).
  2. Schritt 2 (Ressourcen herunterladen): PNG/JPG-Bilder und SVGs in assets/<slug>/ speichern.
  3. Schritt 3 (HTML + Pure <style> aufbauen):
    • Das gesamte CSS im <style>-Tag der HTML-Datei schreiben.
    • Einheit pt (oder umgerechnet mm) verwenden, width: 100% für randlose Fußleiste.
    • Sicherstellen, dass zu 100% KEIN <script>-Tag eingefügt wird.
  4. Schritt 4 (Browser starten & Druckprüfung):
    • HTML-Datei über lokalen Server oder File-URL öffnen.
    • Bildschirmansicht prüfen.
    • Zwingend Druckvorschau prüfen: Mit Playwright emulateMedia({ media: 'print' }) oder PDF-Export via page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }), um zu verifizieren: exakt 1 Seite (1/1), keine Randverschiebung, Fußleiste randlos 100%.
  5. Schritt 5 (6‑Punkte-Abweichungsprüfung): 1:1-Übereinstimmung prüfen, CSS im <style>-Tag anpassen, bis 100% Übereinstimmung erreicht ist.

Verwandte Skills

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