Communitygithub.com

cdv-bot/figma-to-pure-css

Figma 디자인을 순수 CSS 단일 HTML 파일로 변환하는 스킬입니다. JavaScript가 전혀 포함되지 않으며, 인쇄/A4 템플릿, PDF, 이메일 뉴스레터, 샌드박스 웹뷰 등에 최적화되어 있습니다.

figma-to-pure-css란 무엇인가요?

이 스킬은 Figma 디자인을 하나의 완전한 HTML 파일로 변환하는 AI 에이전트를 위한 명세서입니다. 모든 스타일은 내부 `<style>` 태그에 CSS로만 작성되며, `<script>` 태그나 JavaScript 코드는 전혀 포함되지 않습니다. A4 용지(595.28pt x 841.89pt)를 기준으로 인쇄 및 PDF 출력 시 정확한 크기와 여백을 유지하도록 `@page`, `@media print` 규칙과 `print-color-adjust` 속성을 강제합니다. 이미지와 SVG는 `assets/` 폴더에 저장하거나 인라인 SVG로 포함하며, 레이아웃은 CSS Grid와 Flexbox로 구성하고 `position: absolute` 사용을 금지합니다. Claude Code, Cursor, Codex 등 모든 터미널 기반 AI 에이전트에서 사용할 수 있으며, 5단계 실행 프로세스를 통해 Figma 데이터를 읽고, 리소스를 다운로드한 후, Playwright로 인쇄 미리보기를 검증하여 완벽한 1:1 일치를 보장합니다.

지원 대상~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 preview
figma-to-pure-css preview

문서

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

이 스킬은 에이전트가 Figma 디자인을 **1개의 독립적인 HTML 파일(Single-File)**로 변환하도록 안내합니다. 내부 <style> 태그와 이미지/SVG만 사용하며, 스크립트 태그를 전혀 포함하지 않습니다. 브라우저 표시와 **A4 인쇄/PDF 출력(정확한 비율, 여백 어긋남 없음)**에 완벽하게 최적화되어 있습니다.

1. 목적 및 적용 범위

이 스킬은 다음과 같은 경우에 사용합니다:

  • 사용자가 스크립트 없음(No-Script / Zero-JS) HTML/CSS를 요청할 때
  • 1개의 HTML 파일에 모든 것을 포함하여 내보내야 할 때 (All-in-one HTML)
  • 인터페이스 템플릿이 다음 용도로 사용될 때: 문서 인쇄 / A4 계약서(PDF 출력), 보험/청구 양식, 이메일 템플릿 HTML, JavaScript가 차단된 모바일 앱 웹뷰, 또는 스크립트를 금지하는 고보안 CMS/Sandbox

2. 필수 규칙 (Hard Constraints)

  1. 절대 0개의 <script> 태그 (Strict 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. 캔버스 절대 좌표 사용 금지:

    • 전체 레이아웃 프레임에 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 인쇄 및 PDF 출력 100% 정확도 규칙 (ANTI-DRIFT A4 PRINT RULES):

    • 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). 웹 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)로 설정합니다.
    • Footer 및 Header Bar 100% 가장자리까지 확장:
      • 바닥글 색상 막대나 헤더 제목 표시줄은 width: 100%;에 position: absolute; bottom: 0; left: 0; right: 0;을 함께 사용하여 고정 width: 595.28px/pt 대신 사용, 색상 막대가 항상 용지 왼쪽 가장자리부터 오른쪽 가장자리까지 $100%$ 덮도록 보장합니다.
    • 배경 색상 인쇄 활성화 필수:
      • *, *::before, *::after와 @media print에 -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;를 선언합니다.
    • @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="ko">
<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> 생성):
    • 모든 CSS를 HTML 파일의 <style> 태그 안에 작성합니다.
    • 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