# 퇴사한 디자이너 대신 AI가 디자인 스펙을 만들어준다고? (feat. Claude Code)

Philipy (윤상필)·2026년 3월 25일

Claude Code로 디자인하기

목록 보기

3/3

시리즈: Claude Code로 디자인하기

디자이너가 떠났다

B2C 모바일 서비스를 운영하고 있다. 앱은 Android WebView + Laravel 서버 조합이고, 최근 새 기능을 붙이고 있었다. 60개 넘는 화면짜리 꽤 큰 프로젝트다.

문제는 디자이너가 퇴사했다는 거다.

Figma에 시안은 남아 있는데, 새 화면이 필요할 때마다 막막해진다. 디자인 토큰은 누가 관리하고, 접근성 스펙은 누가 쓰고, 컴포넌트 구조 문서는 또 누가 만드나. 외주? 비용이 부담된다. 그냥 개발자가 알아서? 결과물이 눈에 보인다.

그래서 AI로 디자인 업무를 대체할 수 있는지 찾아보기 시작했다.

3가지 방법을 찾았는데, 다 다르다

조사하면서 3가지 접근법을 발견했다.

1. Code to Canvas (Mode B) — HTML을 만들어서 Figma에 캡처하는 방식. 공식 Figma MCP의 generate_figma_design이 렌더링된 웹페이지를 평면 레이어로 임포트한다. 빠르긴 빠른데 "이미지"에 가깝다. 디자인 시스템이랑 연결이 안 된다.

2. Figma Console MCP (Mode A) — figma_execute로 Figma Plugin API를 직접 호출해서 프레임, 텍스트, 컴포넌트를 프로그래밍 방식으로 생성한다. Auto-layout도 걸리고, 디자인 토큰 바인딩도 된다. 대신 아이콘이나 일러스트는 못 만들고, 시행착오가 많다.

3. uSpec — Uber의 Base 디자인 시스템 팀이 만든 오픈소스. 이건 좀 결이 다르다.

처음엔 셋 다 "AI가 디자인을 만들어주는 도구"인 줄 알았다. 아니었다.

uSpec은 디자인을 만드는 게 아니라고?

여기서 한참 헤맸다.

Figma Console MCP로 figma_execute 써서 디자인 시안을 만드는 작업을 하고 있었는데, 이걸 "uSpec 방식"이라고 부르고 있었다. 인프라가 같으니까 같은 거 아닌가 싶었는데, 전혀 달랐다.

uSpec은 디자인을 "만드는" 도구가 아니라 "문서화하는" 도구다.

이미 Figma에 만들어진 컴포넌트를 분석해서, 그 컴포넌트의 스펙 문서를 자동으로 생성해주는 거다. 번호 매긴 해부도, API 속성 테이블, 색상 토큰 매핑, 접근성 스펙 같은 것들.

정리하면 이렇다.

구분	Figma Console MCP (Mode A)	uSpec
목적	디자인 시안 생성	컴포넌트 스펙 문서 생성
인프라	Figma Console MCP	Figma Console MCP (동일)
입력	텍스트 프롬프트	기존 Figma 컴포넌트 링크
출력	새 디자인 프레임	스펙 문서 페이지

인프라(Figma Console MCP)는 같은데 목적이 완전히 다르다. 이걸 구분 못 해서 명칭을 잘못 쓰고 있었다.

그래서 uSpec은 정확히 뭘 하는 건가?

Uber의 Base 디자인 시스템 리드 디자이너인 Ian Guisard가 만든 오픈소스 AIKit이다. 2026년 3월 11일에 Uber 엔지니어링 블로그를 통해 공개됐다. GitHub 레포는 redongreen/uSpec.

핵심 문제의식은 이거다. Uber의 Base 시스템은 7개 구현 스택(UIKit, SwiftUI, Android XML, Android Compose, Web React, Go, SDUI)에 걸쳐 수천 명의 엔지니어가 서비스를 제공한다. 버튼 하나에도 anatomy, API, property, color, structure, accessibility, motion — 최소 6개 이상의 스펙 섹션이 필요하다. 수작업으로 수 주 걸리던 문서화를 수 분으로 단축하겠다는 거다.

7가지 스펙

스킬 명령	생성물
`/create-anatomy`	컴포넌트 해부도 — 번호 마커 + 속성 테이블
`/create-api`	속성 테이블 — 값, 기본값, 설정 예시
`/create-property`	Variant/boolean/variable mode 전시
`/create-color`	모든 상태별 디자인 토큰 매핑
`/create-structure`	치수 스펙 — 높이, 패딩, 간격
`/create-voice`	VoiceOver + TalkBack + ARIA 접근성 스펙
`/create-motion`	애니메이션 타임라인 + 이징

접근성 스펙(/create-voice)이 특히 인상적이다. iOS VoiceOver, Android TalkBack, 웹 ARIA — 3개 플랫폼의 접근성 스펙을 한 번에 2분 만에 생성한다. 수작업이었으면 며칠은 걸렸을 거다.

2계층 아키텍처

[ 에이전트 스킬 계층 ]  ← 도메인 지식, 검증 규칙, 참조 문서
        ↓
[ Figma Console MCP ]  ← 인프라, Figma 읽기/쓰기 84개+ 도구
        ↓
[ Desktop Bridge ]     ← WebSocket으로 Figma Desktop 연결
        ↓
[ Figma Plugin API ]   ← 실제 Figma 조작

위에서 아래로 내려가는 구조다. 스킬이 도메인 지식을 담고, Figma Console MCP가 실제 Figma 파일을 읽고 쓴다. 모든 게 로컬에서 실행되고, 클라우드에 디자인 데이터가 나가지 않는다.

설치: 30분이면 된다

실제로 설치한 과정을 정리한다.

Step 1. 리포지토리 클론

git clone https://github.com/redongreen/uSpec.git
cd uSpec

Step 2. Figma Console MCP 설정

프로젝트 루트의 .mcp.json에 Figma Personal Access Token을 설정한다.

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}

토큰은 Figma > Settings > Personal access tokens에서 발급한다. figd_로 시작하는 값이다.

Step 3. Figma Desktop + Desktop Bridge 플러그인

Figma Console MCP가 처음 실행될 때 ~/.figma-console-mcp/plugin/ 경로에 플러그인 파일을 자동으로 복사한다. Figma Desktop 앱(웹 버전 안 됨)에서 Plugins > Development > Import plugin from manifest로 해당 디렉토리의 manifest.json을 등록한다.

웹 버전 Figma에서는 안 된다. 반드시 Desktop 앱이어야 한다. 이거 모르고 웹에서 삽질하면 시간 날린다.

Step 4. uSpec Template 라이브러리

Figma Community에서 uSpec Template(파일 ID: 1603925462078533207)을 열고, 내 드래프트에 복제한 뒤, 팀 프로젝트로 이동시키고 Assets 패널 > 책 아이콘 > Publish library로 퍼블리시한다.

이 템플릿에 스펙 문서의 레이아웃 컴포넌트들이 들어있다. 퍼블리시 안 하면 스킬이 템플릿을 못 찾는다.

Step 5. `/firstrun` 실행

cd ~/prj/uSpec && claude

Claude Code에서 /firstrun을 입력하면 두 가지를 질문한다.
1. 어떤 환경인지 (Claude Code CLI 선택)
2. 템플릿 라이브러리 링크 (Step 4에서 퍼블리시한 Figma URL)

설정이 끝나면 이런 메시지가 뜬다.

Setup complete! You are now ready to use uSpec

7개 스킬이 .claude/skills/ 디렉토리에 배포되고, uspecs.config.json에 템플릿 컴포넌트 키가 기록된다. 이 과정은 한 번만 하면 된다.

총 소요 시간: 약 30분. Figma Console MCP랑 Desktop Bridge가 이미 설치되어 있었기 때문에 빨랐다. 처음부터 하면 1시간 정도 잡으면 된다.

3가지 방법 비교: 실전 테스트 결과

세 가지를 다 써보고 나서 정리한 비교표다.

방법	용도	장점	단점
Code to Canvas	HTML 렌더링 결과를 Figma에 캡처	빠름, CSS 고급 효과 가능	디자인 시스템 미연결, Noto Sans KR 대체됨
Figma Console MCP (Mode A)	`figma_execute`로 Figma 요소 직접 생성	Auto-layout, 토큰 바인딩	아이콘/일러스트 한계, 시행착오 많음
uSpec	기존 컴포넌트의 스펙 문서 자동 생성	접근성 스펙 2분, 엔터프라이즈급 품질	디자인 생성이 아닌 문서화 전용

셋은 서로 대체 관계가 아니라 보완 관계다.

새 화면을 만들 때: Code to Canvas 또는 Figma Console MCP
만든 컴포넌트를 문서화할 때: uSpec

Android WebView + 웹서버 조합의 프로젝트라면 uSpec의 /create-color(WebView CSS 변수와 Android XML 컬러 리소스 간 토큰 일관성 보장)와 /create-voice(TalkBack + ARIA 접근성 동시 문서화)가 특히 유용하다.

실제로 쓸 때 주의할 것들

설치하고 나서 알게 된 운영 규칙이다.

1. 매 스킬 호출마다 새 Claude Code 세션을 시작한다. 토큰을 많이 먹기 때문에 하나의 세션에서 여러 스킬을 연속 실행하면 컨텍스트가 꽉 찬다. /create-anatomy 끝나면 /exit 하고, 다시 cd ~/prj/uSpec && claude 입력.

2. 스킬 실행 중에는 Figma를 절대 건드리지 않는다. 에이전트가 노드 참조를 잡아서 작업하는 중인데, 캔버스를 클릭하거나 이동하면 참조가 깨진다. "완료" 메시지 나올 때까지 가만히 있어야 한다.

3. Figma 파일당 한 번에 하나의 에이전트만 실행한다. 에이전트가 페이지/파일 컨텍스트를 공유하기 때문에 동시에 돌리면 충돌한다.

4. 모델은 Claude Opus 이상을 권장한다. 스킬 내부의 검증 규칙과 스키마가 꽤 복잡해서 가벼운 모델로는 정확도가 떨어진다.

비개발자도 쓸 수 있게 가이드를 만들었다

우리 팀에는 마케터, 대표도 있다. 디자인 스펙이 필요한 건 개발자만이 아니다. 그래서 비개발자용 가이드를 따로 만들었다.

핵심은 간단하다.

1. Figma Desktop 앱 열기 (웹 버전 아님)
2. 작업할 파일 열기
3. Plugins > Development > Figma Desktop Bridge 실행
4. 터미널에서: cd ~/prj/uSpec && claude
5. /create-??? [피그마 링크] + 설명 입력
6. 완료될 때까지 Figma 안 건드리기
7. Figma Pages에서 결과 확인

피그마 링크는 Figma에서 컴포넌트 우클릭 > "Copy link to selection"으로 복사한다. 이것만 알면 된다.

결과물은 Figma 파일 안에 새 페이지로 생성된다. 별도 내보내기 없이 바로 팀원과 공유 가능하다.

알게 된 것들

uSpec과 Figma Console MCP는 다르다. 인프라는 같지만 목적이 다르다. uSpec은 스펙 문서화, Figma Console MCP는 디자인 생성. 이걸 구분 못 하면 명칭부터 혼란이 온다. 실제로 나도 한동안 잘못 쓰고 있었다.

"디자이너 없이 AI로 대체" 같은 건 없다. AI가 해주는 건 반복 작업의 자동화다. 디자인 의사결정, 사용자 리서치, 브랜드 방향성 같은 건 여전히 사람 몫이다. 다만 스펙 문서화 같은 노동 집약적 작업은 확실히 대체 가능하다.

프로세스 문서화가 진짜 중요하다. 도구 설치는 개발자가 하면 되는데, 실제로 쓰는 사람이 개발자만은 아니다. 비개발자용 가이드를 처음부터 만들어두면 팀 전체의 생산성이 올라간다.

전체 파이프라인이 로컬에서 돈다. AI 클라이언트 > MCP 서버(stdio) > WebSocket(localhost:9223-9232) > Desktop Bridge 플러그인 > Figma Plugin API. 디자인 데이터가 클라우드 엔드포인트를 거치지 않는다. 보안 측면에서 안심이다.

빠른 참조: uSpec 도입 체크리스트

설치 전 확인

Node.js 18+ 설치 여부
Figma Desktop 앱 (웹 버전 불가)
Figma Personal Access Token (figd_로 시작)
Claude Code CLI 설치 여부

설치 순서

git clone redongreen/uSpec
.mcp.json에 토큰 설정
Desktop Bridge 플러그인 등록 (최초 1회)
uSpec Template Community에서 복제 > 팀 프로젝트 > Publish library
/firstrun 실행 > "Setup complete!" 확인

매번 사용 시

Figma Desktop 열기
대상 파일 열기
Desktop Bridge 플러그인 실행
cd ~/prj/uSpec && claude
/create-??? + 피그마 링크 + 설명
완료까지 Figma 안 건드리기
끝나면 /exit > 새 세션 시작

비개발자에게 알려줄 것

Figma Desktop과 웹 버전은 다르다는 것
Desktop Bridge 플러그인은 매번 실행해야 한다는 것
실행 중 Figma를 건드리면 안 된다는 것
결과는 Figma Pages에 새 페이지로 생긴다는 것

Written with Claude Code (Anthropic CLI) — 2026-03-25

Philipy (윤상필)

Tech Phase-smith, Karax wannabe

이전 포스트

# 퇴사한 디자이너 대신 AI가 디자인 스펙을 만들어준다고? (feat. Claude Code)

Claude Code로 디자인하기

시리즈: Claude Code로 디자인하기

디자이너가 떠났다

3가지 방법을 찾았는데, 다 다르다

uSpec은 디자인을 만드는 게 아니라고?

그래서 uSpec은 정확히 뭘 하는 건가?

7가지 스펙

2계층 아키텍처

설치: 30분이면 된다

Step 1. 리포지토리 클론

Step 2. Figma Console MCP 설정

Step 3. Figma Desktop + Desktop Bridge 플러그인

Step 4. uSpec Template 라이브러리

Step 5. `/firstrun` 실행

3가지 방법 비교: 실전 테스트 결과

실제로 쓸 때 주의할 것들

비개발자도 쓸 수 있게 가이드를 만들었다

알게 된 것들

빠른 참조: uSpec 도입 체크리스트

설치 전 확인

설치 순서

매번 사용 시

비개발자에게 알려줄 것

# Uber가 만든 uSpec — AI가 Figma에 디자인 스펙을 직접 그려준다

0개의 댓글

# 퇴사한 디자이너 대신 AI가 디자인 스펙을 만들어준다고? (feat. Claude Code)

Claude Code로 디자인하기

시리즈: Claude Code로 디자인하기

디자이너가 떠났다

3가지 방법을 찾았는데, 다 다르다

uSpec은 디자인을 만드는 게 아니라고?

그래서 uSpec은 정확히 뭘 하는 건가?

7가지 스펙

2계층 아키텍처

설치: 30분이면 된다

Step 1. 리포지토리 클론

Step 2. Figma Console MCP 설정

Step 3. Figma Desktop + Desktop Bridge 플러그인

Step 4. uSpec Template 라이브러리

Step 5. /firstrun 실행

3가지 방법 비교: 실전 테스트 결과

실제로 쓸 때 주의할 것들

비개발자도 쓸 수 있게 가이드를 만들었다

알게 된 것들

빠른 참조: uSpec 도입 체크리스트

설치 전 확인

설치 순서

매번 사용 시

비개발자에게 알려줄 것

# Uber가 만든 uSpec — AI가 Figma에 디자인 스펙을 직접 그려준다

0개의 댓글

Step 5. `/firstrun` 실행