C✳CODEZ.WIN
🌐 한국어

현지화된 읽기 가이드

figma-generate-design목적, 사용법 및 출처

이 스킬은 Figma와 함께 사용하세요. 애플리케이션 페이지, 뷰 또는 여러 섹션으로 구성된 레이아웃을 Figma로 변환하는 작업에 적합합니다. 트리거: 'Figma에 쓰기', '코드에서 Figma로 생성', '페이지를 Figma로 푸시', '이것을 가져오기'app/page'Figma에서 빌드', '화면 생성', 'Figma에서 랜딩 페이지 구축', '코드에 맞춰 Figma 화면 업데이트'와 같은 작업을 수행할 때 가장 적합한 워크플로 스킬입니다. 사용자가 코드나 설명을 기반으로 Figma에서 전체 페이지, 화면 또는 뷰를 구축하거나 업데이트하려는 경우에 유용합니다. search_design_system을 통해 디자인 시스템 구성 요소, 변수 및 스타일을 검색하고, 이를 가져온 다음, 하드코딩된 값 대신 디자인 시스템 토큰을 사용하여 화면을 섹션별로 점진적으로 구성합니다.

출처 검색됨:

소스 저장소
openai/skills
SKILL.md
skills/.curated/figma-generate-design/SKILL.md
저장소 Star
28,420
저장소 최근 업데이트
2026-10-29
능력 분류
설계
최근 수집 시간

라이선스: 명시되지 않음

원본 SKILL.md

워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.

아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.

이 스킬의 기능

이 스킬은 Figma와 함께 사용하세요. 애플리케이션 페이지, 뷰 또는 여러 섹션으로 구성된 레이아웃을 Figma로 변환하는 작업에 적합합니다. 트리거: 'Figma에 쓰기', '코드에서 Figma로 생성', '페이지를 Figma로 푸시', '이것을 가져오기'app/page'Figma에서 빌드', '화면 생성', 'Figma에서 랜딩 페이지 구축', '코드에 맞춰 Figma 화면 업데이트'와 같은 작업을 수행할 때 가장 적합한 워크플로 스킬입니다. 사용자가 코드나 설명을 기반으로 Figma에서 전체 페이지, 화면 또는 뷰를 구축하거나 업데이트하려는 경우에 유용합니다. search_design_system을 통해 디자인 시스템 구성 요소, 변수 및 스타일을 검색하고, 이를 가져온 다음, 하드코딩된 값 대신 디자인 시스템 토큰을 사용하여 화면을 섹션별로 점진적으로 구성합니다.

업스트림 워크플로우 작동 방식

generate_figma_design을 사용한 병렬 워크플로 (웹 앱 전용)

웹 앱에서 브라우저에 렌더링할 수 있는 화면을 구축할 때, 두 가지 접근 방식을 동시에 실행하면 최상의 결과를 얻을 수 있습니다. 먼저 이 스킬의 워크플로(use_figma + 디자인 시스템 구성 요소)를 사용하여 화면 구축을 시작한 다음, 실행하세요.generate_figma_design실행 중인 웹 앱의 픽셀 단위까지 정확한 스크린샷을 캡처합니다. 두 작업이 모두 완료되면 use_figma 출력을 업데이트하여 캡처된 픽셀 단위의 레이아웃과 일치하도록 합니다.generate_figma_design캡처 기능을 사용하면 목표로 삼아야 할 정확한 간격, 크기 및 시각적 처리를 확인할 수 있으며, use_figma 출력에는 디자인 시스템에 연결된 적절한 컴포넌트 인스턴스가 포함됩니다.

상류 통로 · L30 ↗

필수 워크플로

다음 단계를 순서대로 따르십시오. 단계를 건너뛰지 마십시오.

상류 통로 · L44 ↗

단계1화면을 이해하세요

Figma를 사용하기 전에 무엇을 만들고자 하는지 먼저 파악하세요. 코드로 개발하는 경우, 관련 소스 파일을 읽어 페이지 구조, 섹션, 사용된 컴포넌트를 이해해야 합니다. 화면의 주요 섹션(예: 헤더, 히어로, 콘텐츠 패널, 가격표, FAQ 아코디언, 푸터)을 식별하고, 각 섹션에 사용된 UI 컴포넌트(버튼, 입력 필드, 카드, 내비게이션 필, 아코디언 등) 목록을 작성하세요.

상류 통로 · L48 ↗
상류 통로 · js ↗
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

요구 사항 및 설정

필수 조건

Figma MCP 서버에 연결되어 있어야 합니다. 대상 Figma 파일은 구성 요소가 포함된 게시된 디자인 시스템(또는 팀 라이브러리에 대한 액세스 권한)을 가지고 있어야 합니다.

상류 통로 · L21 ↗

제한 사항 및 품질 검사

이 파일에서 별도의 제한 조건 구문이 선택되지 않았습니다. 이는 해당 스킬이 모든 입력 또는 환경에서 안전하다는 것을 의미하지 않습니다. 전체 소스 코드를 검토하고 결과를 직접 확인하십시오.

안전한 시험 사용부터 시작하세요

  1. 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
  2. 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
  3. 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
  4. 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.

기술 형식 및 디렉토리 사양 ↗

원문에서 더 자세한 내용을 읽어보세요.

번역 및 범위

이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.

이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.

출처 검색됨
소스 커밋
49f948faa9258a0c61caceaf225e179651397431
출처 SHA-256
45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9
전체 스킬 카탈로그로 돌아가기