Communitygithub.com

figma-to-pure-css

Utilisez cette compétence lorsque l'utilisateur demande à générer un fichier HTML/CSS autonome à partir de Figma, sans aucun JavaScript (pas de balise <script>), en utilisant uniquement du <style> interne pur et des images/SVG. Idéal pour les modèles A4/impression, PDF, newsletters e-mail, webviews sandboxées ou systèmes interdisant les scripts.

Qu'est-ce que figma-to-pure-css ?

Cette compétence guide un agent pour convertir une maquette Figma en un **fichier HTML unique (Single-File)**, **utilisant uniquement une balise `<style>` interne et des images/SVG**, **sans aucune balise `<script>`**. Elle est parfaitement optimisée pour l'affichage navigateur et l'**impression A4 / export PDF sans décalage**. La compétence repose sur des contraintes strictes : zéro script, tout CSS dans une seule balise `<style>`, gestion des images (bitmap dans `assets/` et SVG inline), utilisation de CSS Grid/Flexbox au lieu de coordonnées absolues, et déclaration de tokens de design dans `:root`. Un point crucial est le respect des dimensions A4 réelles (595.28pt × 841.89pt soit 210mm × 297mm) avec des règles anti-décalage pour l'impression : utilisation de l'unité `pt` ou `mm`, barres de pied/page en `width:100%` et `position: absolute`, activation de l'impression des couleurs d'arrière-plan via `print-color-adjust: exact`, et blocs `@page` et `@media print` obligatoires. La compétence suit un processus en 5 étapes : lecture des données Figma, téléchargement des ressources, construction du HTML avec `<style>` pur, test de l'impression (Print Preview avec Playwright), et audit de conformité 1:1. Les plateformes cibles incluent les impressions A4, les PDF, les email templates, les webviews et les systèmes sans JavaScript.

Compatible avec~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
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Aperçu

Depuis le README du skill

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

Documentation

Compétence Figma vers CSS Pur Fichier Unique (Zéro Script & Tout-en-Un)

Cette compétence guide l'Agent pour convertir une maquette Figma en 1 fichier HTML autonome unique (Single-File), utilisant uniquement la balise <style> interne et des images/SVG, absolument AUCUNE balise <script>, parfaitement optimisé pour l'affichage navigateur et l'impression A4 / export PDF aux proportions parfaites sans décalage de marge.

1. Objectif & Périmètre d'application

Utilisez cette compétence lorsque :

  • L'utilisateur demande à générer du HTML/CSS sans script (No-Script / Zero-JS).
  • Le besoin est d'exporter le tout dans 1 seul fichier HTML (All-in-one HTML).
  • Le modèle d'interface sert pour : Impression de documents / Contrats A4 (Print to PDF), formulaires d'assurance/indemnisation, modèles d'email HTML, intégration Webview dans une application mobile bloquant JavaScript, ou CMS/Sandbox haute sécurité interdisant les scripts.

2. Contraintes obligatoires (Hard Constraints)

  1. Zéro balise <script> absolument (Strict Zero-Script) :

    • INTERDIT : <script src="https://cdn.tailwindcss.com"></script> ou tout script CDN.
    • INTERDIT : Balise <script> inline de configuration Tailwind ou exécution JavaScript.
    • INTERDIT : Attributs inline JS event handlers comme onclick="...", onload="...".

  2. Tout CSS dans une seule balise <style> interne :

    • L'intégralité du code CSS de mise en forme se trouve dans la balise <style> située dans <head> du fichier .html.
    • Pas d'import CSS externe (sauf Google Fonts si l'utilisateur a besoin des polices Figma standard).

  3. Gestion des images & vecteurs :

    • Images bitmap (PNG/JPG/WebP) : Télécharger dans le répertoire interne assets/<slug>/ et les appeler via la balise <img src="assets/<slug>/nom-image.png" alt="..." />.
    • Icônes vectorielles / logo : Privilégier l'encapsulation directe en Inline <svg> ou <img src="assets/<slug>/icon.svg">.

  4. Pas de coordonnées Canvas absolues :

    • Interdiction d'utiliser position: absolute; top: ...px; left: ...px; pour le cadre de layout global.
    • Obligation d'utiliser CSS Grid et Flexbox pour créer une structure de mise en page naturelle.

  5. Variables CSS & Tokens de design :

    • Déclarer toutes les couleurs, tailles, polices extraites de Figma dans :root : 
      :root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

  6. RÈGLES D'IMPRESSION A4 & EXPORT PDF 100% CONFORME (ANTI-DÉCALAGE) :

    • Nature des unités Figma pour le format A4 :
      • Un plan de travail A4 dans Figma a toujours la taille d'impression standard : 595,28 × 841,89 points graphiques (PostScript Points - pt), soit exactement 210mm × 297mm (ISO 216).
      • INTERDIT : Convertir directement la mesure Figma en px (ex. width: 595.28px). À 96 DPI du web, 595,28px ne correspond qu'à 157,5mm (seulement 75% de la page A4), ce qui fait que l'aperçu avant impression A4 (210mm) est rétréci et laisse un espace blanc décalé de 52,5mm dans la marge droite.
      • OBLIGATOIRE : Utiliser l'unité pt (ou la norme mm) pour tous les paramètres de taille, police, padding, margin. Le cadre A4 doit être défini avec width: 595.28pt (ou 210mm) et height: 841.89pt (ou 297mm).
    • Barre de pied & en-tête débordant à 100% :
      • Les bandes de couleur de pied de page (footer) ou de barre d'en-tête (header) doivent impérativement être définies avec width: 100%; et position: absolute; bottom: 0; left: 0; right: 0; au lieu d'une largeur fixe width: 595.28px/pt, garantissant que la bande de couleur recouvre toujours 100% du bord gauche au bord droit du papier.
    • Activation obligatoire de l'impression des couleurs d'arrière-plan :
      • Déclarer -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; sur *, *::before, *::after et dans @media print.
    • Blocs @page et @media print obligatoires : 
      @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. Structure modèle du fichier HTML Single-File (CSS Pur Prêt pour Impression A4)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Titre de la page / Formulaire</title>
  
  <!-- Optionnel : Google Fonts si Figma requiert des polices spécifiques -->
  <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 DE BASE */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* 2. TOKENS DE DESIGN */
    :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. CORPS DE BASE : Affichage optimal à l'écran */
    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. CADRE A4 STANDARD (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;
    }

    /* Barre de pied débordant à 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. CONFIGURATION D'IMPRESSION A4 & EXPORT PDF ANTI-DÉCALAGE */
    @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 sémantique : aucune balise <script> -->
  <main class="a4-page" id="print-page">
    <div class="page-content">
      <!-- Contenu de la mise en page converti depuis Figma -->
    </div>
    <footer class="footer-bar">
      <!-- Barre de pied débordant à 100% -->
    </footer>
  </main>
</body>
</html>

4. Processus d'exécution en 5 étapes (CSS Pur Fichier Unique)

  1. Étape 1 (Lire les données Figma) : Appeler get_figma_data pour extraire la structure des calques, Auto-Layout, polices, couleurs et dimensions. Identifier le format A4 (595,28pt × 841,89pt).
  2. Étape 2 (Télécharger les ressources) : Télécharger les images PNG/JPG et SVG dans assets/<slug>/.
  3. Étape 3 (Construire HTML + <style> pur) :
    • Écrire tout le CSS dans la balise <style> du fichier HTML.
    • Appliquer le système d'unités pt (ou conversion en mm), utiliser width: 100% pour la barre de pied débordant à 100%.
    • Garantir 100% AUCUNE insertion de balise <script>.
  4. Étape 4 (Lancer le navigateur & Vérifier l'impression) :
    • Ouvrir le fichier HTML via un serveur local ou une URL de fichier.
    • Vérifier l'affichage à l'écran (Screen view).
    • Vérification obligatoire de l'aperçu avant impression : Utiliser Playwright emulateMedia({ media: 'print' }) ou exporter en PDF avec page.pdf({ format: 'A4', margin: { top: 0, bottom: 0, left: 0, right: 0 }, printBackground: true }) pour valider : exactement 1 seule page (1/1), pas de décalage de marge, pied de page débordant à 100%.
  5. Étape 5 (Audit d'écart en 6 points) : Comparer la conformité 1:1, ajuster le CSS dans <style> jusqu'à atteindre une conformité à 100%.

Skills associés

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