Claude Code 디자인 스킬 6가지 - 프론트엔드부터 Figma 코드 변환

X의 UI/UX Savior님(@UiSavior)

 

Claude Code를 쓰다 보면 "매번 똑같은 디자인 지침을 프롬프트에 다시 붙여 넣고 있다"는 느낌이 오는 시점이 있습니다.

브랜드 색상을 매번 설명하거나, Figma 목업을 코드로 옮기는 과정을 반복하거나, 테마를 일일이 지정하는 작업들이 쌓이면 생산성보다 번거로움이 먼저 눈에 들어옵니다. Anthropic이 2025년 10월에 공개한 Skills 시스템은 바로 이 지점에서 출발합니다.

 

한 번 세팅해두면 Claude가 디자인 규칙을 기억한 채로 작업을 이어가고, Figma 파일을 코드로 변환하거나 브랜드 가이드라인을 자동으로 적용합니다. 이번 글에서는 디자이너와 프론트엔드 개발자의 실무 흐름에 맞는 디자인 특화 스킬 6가지와, 이를 조합하는 방법을 정리합니다.

 

Claude Code Skills란 무엇인가

Claude Skills는 Claude가 특정 작업을 더 일관되게 수행하도록 커스텀 능력을 부여하는 지식 패키지입니다.

단순한 프롬프트 모음이 아니라, 특정 분야의 전문 지식과 작업 방식을 구조화한 파일입니다.

Claude는 세션을 시작할 때 설치된 스킬의 이름과 설명만 먼저 로드하고, 실제로 필요한 스킬의 상세 내용만 선택적으로 불러옵니다. 수십 개를 설치해도 관련 없는 작업에서는 컨텍스트 창을 소비하지 않는 구조입니다.

 

스킬은 적용 범위에 따라 세 가지로 나뉩니다.

범위	경로	적용 대상
개인 스킬	~/.claude/skills/스킬명/SKILL.md	내 모든 프로젝트
프로젝트 스킬	.claude/skills/스킬명/SKILL.md	해당 프로젝트만
플러그인 스킬	/plugin install로 설치	팀 배포용

 

Frontend Design - 구조를 먼저 잡는 스킬

코드를 짜기 전에 디자인 씽킹 프로세스를 먼저 거치도록 Claude의 작업 순서를 바꿔줍니다.

UI 설계 단계를 체계화하고 싶은 경우, 디자인 특화 스킬 중에서 가장 먼저 설치하기를 권합니다.

SKILL.md 파일을 내려받아 Figma 파일과 함께 업로드하면 Claude가 디자인 의도를 파악한 뒤 프론트엔드 코드를 생성하는 방식으로 작동합니다.

 

Figma to Code - 링크 하나로 코드 변환

Figma 링크를 붙여넣으면 프로덕션 수준의 코드로 변환합니다.

Figma MCP(Model Context Protocol)를 통해 Claude가 컴포넌트, 스타일, 디자인 시스템을 직접 읽고 React·Vue·HTML+CSS를 생성합니다. 이 기능은 스킬보다 플러그인 방식이 더 안정적으로 작동합니다.

 

Figma가 2026년 2월 공식 발표한 "Code to Canvas" 기능과 연동하면 반대 방향 변환도 가능합니다. Claude Code에서 만든 인터페이스를 Figma 레이어로 역방향 변환하는 것입니다. Figma MCP를 활용해 175개 디자인 변수를 Primitives → Semantic → Component 3계층 구조로 자동 생성한 실제 사례도 있습니다.

 

Theme Factory - 10가지 테마가 기본 내장

완성도 높은 테마 10가지와 컬러 팔레트, 폰트 조합이 기본으로 제공됩니다.

MVP나 프로토타입 단계처럼 디자인 퀄리티를 빠르게 끌어올려야 할 때 실용적입니다. 테마를 선택한 뒤 Brand Guidelines 스킬과 함께 쓰면, 기본 테마 위에 자사 브랜드 색상과 폰트를 덮어씌우는 방식으로 빠르게 커스터마이징할 수 있습니다.

 

Brand Guidelines - 산출물 전반에 브랜드 일관성 유지

브랜드 색상, 폰트, 간격, 톤앤매너를 Claude가 자동으로 적용합니다.

한 번 정의해두면 코드, 카피, 디자인 산출물 모두에서 브랜드 기준이 유지됩니다. 다만, 스킬에 입력하는 내용은 Claude의 컨텍스트 창에 포함되므로 기밀이 담긴 내부 브랜드 자료는 주요 내용만 요약해서 등록하는 것이 적절합니다.

 

Canvas Design - 포스터와 아트워크를 파일로 출력

포스터, 비주얼 컴포지션, 아트워크를 PNG 또는 PDF로 바로 내보낼 수 있습니다.

코드 작성이 아닌 시각적 결과물이 필요한 경우, 또는 썸네일이나 행사용 그래픽을 빠르게 만들어야 할 때 활용 범위가 있습니다.

 

Skill Creator - 커스텀 스킬을 직접 만드는 도구

자사 디자인 시스템, 브랜드 보이스, 고유 워크플로우에 맞는 커스텀 스킬을 직접 만드는 도구입니다.

Claude Code Skills는 2025년 10월 출시 이후 수천 개로 빠르게 늘어났고, 커뮤니티 스킬과 공식 스킬을 조합하는 방식이 이미 일반화됐습니다. 기존 스킬로 해결되지 않는 작업이 있다면, 이 스킬로 팀 전용 스킬을 설계하는 것이 현실적인 선택입니다.

 

3단계 조합 워크플로우

여섯 가지 스킬 중에서 가장 시너지가 큰 조합은 Brand Guidelines → Figma to Code → Theme Factory 순서입니다.

Brand Guidelines로 브랜드 기준을 먼저 정의하고, Figma to Code로 목업을 코드로 변환한 다음, Theme Factory로 다크모드나 변형 테마를 빠르게 추가하는 흐름입니다.

 

스타트업 랜딩 페이지를 예로 들면, Brand Guidelines에 주 색상·폰트·보이스를 등록하고, Figma 목업 링크를 붙여넣어 코드를 생성한 뒤, Theme Factory로 라이트·다크 버전을 각각 완성하는 식입니다.

각 단계가 독립적으로 작동하기 때문에 중간에 수정이 생겨도 해당 단계만 다시 실행하면 됩니다.

 

설치 전 확인할 것들

Claude Code 최신 버전 설치 여부를 먼저 확인합니다.

npx skills add 명령을 실행하려면 Node.js 18 이상이 필요하고, Figma to Code 플러그인은 Figma 계정 연동이 별도로 필요합니다. 개인 스킬 경로(~/.claude/skills/)와 프로젝트 스킬 경로(.claude/skills/)는 적용 범위가 다르므로 목적에 맞게 구분해서 사용합니다.

 

처음 시작한다면 frontend-design과 Figma 플러그인 두 가지만 설치해도 실무에서 체감할 수 있는 변화가 있습니다.

더 깊이 탐색하고 싶다면 GitHub Awesome Claude Skills 목록에서 커뮤니티 스킬을 살펴보는 것도 방법입니다. 

https://github.com/ComposioHQ/awesome-claude-skills

GitHub - ComposioHQ/awesome-claude-skills: A curated list of awesome Claude Skills, resources, and tools for customizing Claude