Communitygithub.com

Figma to Pure CSS Single-File スキル（スクリプト無し・オールインワン）

Figma デザインから、JavaScript を一切含まない（<script> タグ無し）単一ファイルの HTML/CSS を生成します。印刷・PDF・メール・サンドボックスなどに最適。

Figma to Pure CSS Single-File スキル（スクリプト無し・オールインワン） とは？

このスキルは、Figma デザインを 100% 純粋な CSS と画像/SVG のみで構成された単一 HTML ファイルに変換するエージェント機能です。JavaScript は一切許可されず、<script> タグやインラインイベントハンドラは禁止されています。主な用途は A4 印刷テンプレート、PDF 出力、メールニュースレター、JavaScript が禁止された WebView やサンドボックス環境です。スキルは、Figma のデザイントークン（カラー、フォント、サイズ）を CSS 変数として定義し、レイアウトには CSS Grid と Flexbox を強制します。また、A4 印刷の厳格なルール（単位は pt または mm、フッターは絶対配置で端まで広げる、@page と @media print の設定）を適用し、プレビューや PDF 出力で位置ずれが発生しないよう保証します。5 段階の実行プロセス（Figma データ取得、リソースダウンロード、HTML+CSS 生成、ブラウザ表示/印刷検証、6 項目の差異チェック）により、ピクセルパーフェクトな出力を実現します。

対応~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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

プレビュー

スキル README より

Figma to Pure CSS Single-File スキル（スクリプト無し・オールインワン） preview
Figma to Pure CSS Single-File スキル（スクリプト無し・オールインワン） preview

ドキュメント

Figma to Pure CSS Single-File スキル（スクリプト無し・オールインワン） は何をしますか？

このスキルは、エージェントが Figma デザインを 1 つの独立した HTML ファイル（Single-File） に変換する方法を指示します。内部の <style> タグと画像/SVG のみを使用し、 タグは一切含まれません。ブラウザ表示、A4 印刷 / 正確な比率の PDF 出力（余白ずれ無し） に最適化されています。

1. 目的と適用範囲

以下の場合にこのスキルを使用します。

  • ユーザーが スクリプト無し（No-Script / Zero-JS） の HTML/CSS 作成を要求した場合。
  • 1 つの HTML ファイルにすべてをまとめて出力する必要がある場合（All-in-one HTML）。
  • 以下の用途のインターフェーステンプレート：ドキュメント印刷 / A4 契約書（Print to PDF）、保険申請・請求フォーム、メールテンプレート HTML、モバイルアプリの JavaScript ブロック済み WebView 埋め込み、またはスクリプトを禁止する高セキュリティ CMS/Sandbox。

2. 必須ルール（Hard Constraints）

  1. タグは絶対に 0（厳格な Zero-Script）:

    • 禁止: <script src="https://cdn.tailwindcss.com"></script> またはあらゆる CDN スクリプト。
    • 禁止: Tailwind 設定や JavaScript 実行のためのインライン <script> タグ。
    • 禁止: onclick="..."、onload="..." などのインライン JS イベントハンドラ属性。

  2. すべての CSS は 1 つの内部 <style> タグ内に完全に収める:

    • すべての CSS フォーマットコードは、.html ファイルの <head> 内にある <style> タグに配置します。
    • 外部から CSS をインポートしません（ただし、Figma の標準フォントが必要な場合は Google Fonts を除く）。

  3. 画像とベクターの管理:

    • ビットマップ画像（PNG/JPG/WebP）: 内部フォルダ assets/<slug>/ にダウンロードし、<img src="assets/<slug>/ファイル名.png" alt="..." /> で参照します。
    • ベクターアイコン / ロゴ: インライン <svg> または <img src="assets/<slug>/icon.svg"> で直接埋め込むことを推奨します。

  4. Canvas 絶対座標を使用しない:

    • 全体的なレイアウトフレームに position: absolute; top: ...px; left: ...px; を使用することを禁止します。
    • CSS Grid と Flexbox を使用して自然なレイアウト構造を作成することが必須です。

  5. CSS 変数とデザイントークン:

    • Figma から抽出したすべての色、サイズ、フォントを :root で宣言します： 
      :root {
  --color-primary: #0E4E96;
  --color-secondary: #F58220;
  --color-text-main: #1E293B;
  --color-border: #E2E8F0;
  --font-main: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}

  6. A4 印刷・100% 正確な PDF 出力の規則（ずれ防止 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 のような固定値は使用せず、カラーバーが用紙の左端から右端まで常に $100%$ を覆うようにします。
    • 背景色の印刷（Print Background Colors）を有効にすることが必須:
      • -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; を *, *::before, *::after および @media print で宣言します。
    • @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 のテンプレート構造（Pure CSS A4 Print Ready）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ページタイトル / フォーム</title>
  
  <!-- オプション: Figma で特定のフォントが必要な場合は Google Fonts -->
  <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: 画面表示を美しく */
    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 ステップの実行プロセス（Pure CSS Single-File）

  1. ステップ 1（Figma データの読み取り）: get_figma_data を呼び出し、レイヤー構造、Auto-Layout、フォント、色、サイズを抽出します。A4 サイズ（$595.28\text{pt} \times 841.89\text{pt}$）を識別します。
  2. ステップ 2（リソースのダウンロード）: PNG/JPG 画像と SVG を assets/<slug>/ にダウンロードします。
  3. ステップ 3（HTML + Pure <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