figma-design-to-code · OpenAI · Codex
디자인 맥락과 자산을 읽어 실제 UI 코드로 옮깁니다.
Figma의 화면을 실제 서비스의 UI 코드로 옮기는 스킬입니다. 그림처럼 닮은 화면뿐 아니라 디자인의 구조와 필요한 자산을 읽어 구현에 반영합니다.
Figma 링크와 대상 프로젝트를 함께 제공해보세요. 기존 컴포넌트 구조에 맞춰 화면을 만들고 디자인과 구현 사이에 다른 부분을 확인하는 데 활용할 수 있습니다.
“이 Figma 화면을 현재 React 프로젝트에 구현해줘. 글꼴, 간격, 자산을 확인하고 기존 컴포넌트와 연결해줘.”
받을 수 있는 결과디자인에 맞춘 UI 코드
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: figma.
앱 연결·MCP·보조 파일이 포함된 플러그인이에요. 아래 SKILL.md는 동작을 읽어보는 용도로도 사용할 수 있지만, 파일 하나로 앱 연결이 설치되지는 않아요.
Codex의 Plugins에서 figma에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 figma-design-to-code 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/figma/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
“figma-design-to-code 스킬을 사용해줘. 입력 자료: Figma 화면 링크와 대상 프로젝트”처럼 요청하세요. 위의 예시를 내 자료에 맞게 바꿔도 좋아요.
예상 결과는 ‘디자인에 맞춘 UI 코드’입니다. 필요한 내용이 포함됐는지 확인하세요. 입력 자료의 사실·숫자와 결과를 대조하고, 부족한 부분을 이어서 요청하세요.
제작자 원본 2026-10-04 확인 · 설치 안내 2026-10-04 확인 · 실제 설치·실행 미검증
모델 사용 요금과 연결 앱 요금은 이용 중인 서비스의 정책을 따릅니다.
설치 안내 출처Codex의 Plugins에서 figma에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 figma-design-to-code 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/figma/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
원문 재배포 허용을 확인하지 못한 항목은 지원 환경의 설치 안내를 제공합니다.
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: figma.
OpenAI 플러그인 저장소 원본 확인안내에 표시된 앱에서 설치하세요. 설치·실행 검증은 별도입니다.