figma-generate-library

figma-generate-library 스킬 개요

figma-generate-library가 하는 일

figma-generate-library는 코드베이스를 Figma에서 구조화된 라이브러리로 바꾸는 Figma 디자인 시스템 오케스트레이션 스킬입니다. 토큰, 변수, 컴포넌트 세트, 테마, 문서가 처음부터 손으로 만든 것처럼 따로 놀지 않고 실제 프로덕션 코드와 맞물리게 해야 하는 팀에 적합합니다.

누가 사용하면 좋은가

제품 디자인, 프런트엔드 엔지니어링, 디자인 운영을 위한 디자인 시스템을 새로 만들거나 다듬는 중이라면 figma-generate-library skill을 사용하세요. 일회성 화면을 스케치하는 용도보다, 기존 소스 패턴을 바탕으로 재사용 가능한 Figma 라이브러리를 만들 때 가장 잘 맞습니다.

무엇이 다른가

이 스킬은 순서와 의존성에 대해 꽤 엄격합니다. 한 번에 답을 내는 단일 프롬프트가 아니라, 여러 단계로 라이브러리를 구축하도록 안내하는 방식입니다. 디자인 시스템 작업에서는 토큰, 변수, 컴포넌트, 문서가 순서가 틀리거나 검증 지점 없이 생성되면 쉽게 무너지기 때문에, 이런 점이 중요합니다.

figma-generate-library 스킬 사용 방법

올바른 보조 스킬을 설치하고 불러오기

figma-generate-library install을 할 때는 OpenAI skills package를 통해 스킬을 추가하고, Figma tool call을 하기 전에 figma-use를 함께 로드하세요. 이 스킬은 무엇을 어떤 순서로 만들지 결정하고, figma-use는 각 use_figma 단계를 올바르게 실행하는 데 필요한 Plugin API 호출 규칙을 제공합니다.

워크플로를 좌우하는 repo 파일부터 살펴보기

먼저 SKILL.md를 읽고, 그다음 references/discovery-phase.md, references/token-creation.md, references/component-creation.md, references/documentation-creation.md를 확인하세요. repo에 특이한 네이밍 규칙이나 복구 요구사항이 있다면 references/naming-conventions.md와 references/error-recovery.md도 함께 살펴보는 것이 좋습니다. 이 파일들이 중요한 이유는, 이 스킬이 단순한 평면형 스크립트가 아니라 단계별 실행, 검증, 정리를 전제로 설계되었기 때문입니다.

러프한 요청을 바로 쓸 수 있는 프롬프트로 바꾸기

figma-generate-library usage를 잘 활용하려면 “src/ui를 기준으로 light/dark 토큰 시스템과 Button, Input, Card 컴포넌트를 만들고, 기존 spacing과 color scale에 맞춰 달라”처럼 범위가 분명한 요청부터 시작하세요. “우리 디자인 시스템을 더 좋게 만들어줘” 같은 모호한 프롬프트는 피하는 편이 좋습니다. 어떤 프레임워크를 쓰는지, 어떤 화면을 대상으로 하는지, 테마 범위가 무엇인지, 생성·정합성 맞추기·정리 중 무엇이 필요한지까지 알려줄수록 결과가 좋아집니다.

한 번에 끝내지 말고 단계별로 진행하기

실용적인 figma-generate-library guide는 먼저 discovery를 요청하고, 다음에 token mapping, 그다음 component creation, 이어서 docs, 마지막으로 validation을 진행하는 방식입니다. 이렇게 해야 repo 구조와 맞고, 코드와 Figma가 어긋날 때 다시 손볼 일이 줄어듭니다. discovery를 건너뛰면 나중에 네이밍, 변수 범위, 컴포넌트 의존성 문제를 고치느라 오히려 시간이 더 듭니다.

figma-generate-library 스킬 FAQ

figma-generate-library는 디자인 시스템에만 쓰나요?

네, 기본적으로는 그 용도에 가장 잘 맞습니다. figma-generate-library for Design Systems는 semantic tokens, variables, published components, 지원 문서처럼 라이브러리 아키텍처가 필요할 때 특히 강합니다. 빠른 모크업이나 개별 마케팅 프레임 작업에는 적합하지 않습니다.

Figma를 깊게 알고 있어야 하나요?

아니요. 다만 소스 코드와 디자인 의도를 구체적인 질문에 답할 수 있을 만큼은 알고 있어야 합니다. 초보자도 figma-generate-library skill을 사용할 수 있지만, 네이밍, variant 구조, theming에 대한 결정을 검토하는 과정은 필요하므로 완전 자동 생성이라고 기대하면 안 됩니다.

일반 프롬프트와 무엇이 다른가요?

일반 프롬프트는 대개 결과물 하나를 요청합니다. 반면 figma-generate-library는 빌드 프로세스에 더 가깝습니다. 단계별 작업, 검증, 수정을 전제로 하기 때문에, 특히 코드베이스가 크거나 디자인 시스템에 여러 mode와 dependency가 있을 때 더 신뢰할 수 있습니다.

언제는 쓰지 않는 게 좋나요?

몇 개의 ad hoc frame만 필요하거나, 코드베이스에 안정적인 UI pattern이 없거나, 여러 단계를 거치는 변경을 검토하고 승인할 수 없다면 사용하지 마세요. 그런 경우에는 더 단순한 프롬프트나 더 작은 Figma task가 더 빠르고 위험도 낮습니다.

figma-generate-library 스킬 개선 방법

처음부터 더 강한 소스 재료를 주기

figma-generate-library skill은 실제로 매핑할 수 있는 디자인 입력을 줄수록 결과가 좋아집니다. 예를 들면 component source path, token file, theme name, 이미 쓰고 있는 naming rule 같은 것들입니다. “src/tokens, Button.tsx, Card.tsx를 사용하고, light와 dark mode를 유지하며, ds- prefix를 보존해 달라”처럼 요청하면, 막연히 라이브러리를 새로 다듬어 달라는 말보다 훨씬 실행 가능성이 높습니다.

무엇이 승인 기준에 중요한지 먼저 말하기

팀이 실제로 사용할 수 있는 결과가 되려면 무엇이 중요한지 스킬에 알려주세요. 코드 네이밍과의 일치, variant 폭증 줄이기, code connect 지원, handoff용 foundation 문서화처럼 기준을 구체적으로 적으면 됩니다. 그러면 시각적 완성도만 좇지 않고, 어떤 tradeoff를 우선할지 더 잘 판단합니다.

흔한 실패 패턴을 주의하기

가장 큰 위험은 과도한 구축, dependency 순서 무시, semantic token과 component-level detail을 뒤섞는 것입니다. 첫 결과가 너무 넓어 보이면 범위를 좁히고, foundation과 component를 분리하고, 필요하면 더 많은 node를 만들기 전에 discovery를 다시 돌리라고 요청하세요.

재발명보다 검증 중심으로 반복하기

첫 결과가 나온 뒤에는 “우리 token convention에 맞게 이름을 바꿔줘”, “중복된 variant를 합쳐줘”, “spacing과 color semantic에 대한 문서를 추가해줘”처럼 목표가 분명한 수정 요청을 하세요. 이 스킬은 상태를 유지하고 이전 결정을 이어받도록 구조화되어 있으므로, 처음부터 다시 시작하는 것보다 이런 방식이 대개 더 효과적입니다.