Figma를 열지 않고 텍스트 프롬프트만으로 UI 목업을 잡고, 클릭 가능한 프로토타입을 만들고, 실제 React 파일까지 생성하는 워크플로가 2026년 현재 실용적인 수준에 들어섰다. 진입 장벽이 낮아서가 아니라, Claude가 제공하는 세 가지 도구가 설계-검증-구현 흐름을 각각 커버하기 때문이다.
Claude로 UI 디자인: 세 가지 도구의 역할 구분
Claude로 UI 작업을 할 때 혼동하기 쉬운 것이 있다. Claude Design, Claude Artifacts, Claude Code CLI는 같은 Claude 브랜드지만 전혀 다른 레이어에서 작동한다.
Claude Design은 2026년 4월 17일 Anthropic Labs 리서치 프리뷰로 공개된 도구다. 텍스트 프롬프트를 입력하면 UI 목업, 슬라이드, 프로토타입 이미지를 생성한다. 결과물은 시각 이미지 형태이므로 코드를 직접 꺼낼 수는 없고, 팀 공유나 다음 단계 프롬프트의 참조용으로 활용한다.
Claude Artifacts는 claude.ai 브라우저 안에서 실행되는 인터랙티브 React 컴포넌트다. 별도 환경 설정 없이 채팅창에서 바로 살아 움직이는 UI를 확인할 수 있다. 단, 실행 환경이 샌드박스라서 사용 가능한 라이브러리가 제한된다.
Claude Code CLI는 로컬 프로젝트의 파일 시스템에 직접 접근해 컴포넌트 파일을 생성·수정한다. 기존 디자인 시스템, 스택, 파일 구조를 읽고 그에 맞는 코드를 쓴다.
세 도구는 순서대로 이어 쓰는 게 자연스럽다. 목업으로 방향 잡기 → Artifacts로 인터랙션 검증 → CLI로 실코드 생성. 각각 독립적으로도 쓸 수 있지만, 세 레이어를 이어 쓸 때 Figma 없이도 완결된 설계-구현 사이클이 된다.
시작 전 확인: 플랜·접근 경로·라이브러리 제약
Claude Design은 Pro($20/월) 이상 플랜에서만 이용 가능하다. Free 플랜으로는 접근이 안 된다. Max, Team, Enterprise도 포함되므로 현재 Pro 이상 구독 중이라면 claude.ai 사이드바에서 Claude Design 항목을 찾으면 된다.
Artifacts에서 쓸 수 있는 라이브러리는 React, Recharts, Lucide React 등으로 제한된다. Tailwind CSS는 공식 지원 목록에 없다. 임의 npm 패키지도 설치할 수 없다. 처음 쓰는 사람이 가장 많이 걸리는 함정이 이것인데, 스타일링은 인라인 style 객체나 <style> 태그로 우회해야 한다.
Claude Code CLI는 별도로 설치해야 한다. npm install -g @anthropic-ai/claude-code로 설치한 뒤 claude 명령으로 실행하고, 첫 실행 시 claude.ai 계정 또는 API 키로 인증한다. 로컬 파일 접근 권한을 요청할 때 프로젝트 디렉토리를 확인하고 허용하면 된다.
Claude Design이 리서치 프리뷰 상태라는 점도 염두에 둬야 한다. 기능 변경 빈도가 높고, 현재 Claude Opus 4.7 기반으로 동작한다. 최신 Claude Opus 4.8과는 다른 버전임을 알고 있으면 결과 품질 차이를 이해하는 데 도움이 된다.
Claude Design으로 목업 초안 만들기
Claude Design에서 좋은 목업을 빠르게 얻으려면 프롬프트에 세 가지가 들어가야 한다. 화면의 목적, 주요 컴포넌트 나열, 색상·레이아웃 힌트. 추상적인 요청보다 구체적인 요청이 훨씬 낫다.
나쁜 예: “대시보드를 만들어줘” 좋은 예: “SaaS 구독 관리 대시보드. 상단에 월간 MRR·활성 사용자·해지율 카드 3개, 왼쪽에 네비게이션, 중앙에 구독 플랜별 막대 차트. 다크 배경에 보라색 포인트 컬러”
첫 결과가 마음에 들지 않으면 전체를 다시 요청하기보다 특정 요소를 지목해서 수정하는 게 빠르다. “네비게이션 항목을 5개로 줄이고, 차트 영역을 오른쪽으로 옮겨줘” 식으로 이어가면 원하는 방향으로 빠르게 수렴된다.
결과물은 이미지 형태다. 코드가 아니므로 이 단계에서 구현 가능 여부를 검증하려 하면 안 된다. 스크린샷을 팀 슬랙에 올려 방향을 합의하거나, 다음 단계 Artifacts 프롬프트에 “이 목업과 유사하게 구현해줘”라고 이미지를 첨부해 참조하는 방식으로 활용한다.
Artifacts로 인터랙티브 프로토타입 구현
목업으로 방향을 잡았다면 claude.ai 채팅창에서 바로 실행되는 프로토타입으로 넘어간다. 가장 직접적인 진입 프롬프트는 이것이다.
“방금 본 대시보드 목업을 React 컴포넌트로 만들어줘. Artifacts로 출력해서 바로 확인할 수 있게 해줘.”
Tailwind가 안 되므로 스타일은 인라인 style 객체로 처리한다. backgroundColor: '#1a1a2e', display: 'flex', gap: 16 같은 방식이다. 처음엔 번거로워 보이지만 Claude가 알아서 작성하므로 직접 쓸 일은 거의 없다.
데이터 시각화가 필요하면 Recharts가 유용하다. BarChart, LineChart, PieChart 컴포넌트를 조합하면 대시보드 패널을 빠르게 구성할 수 있다. 아이콘은 Lucide React에서 import { Settings, Bell, ChevronDown } from 'lucide-react' 형태로 불러온다.
탭 전환, 모달 열기·닫기, 폼 입력 상태 같은 인터랙션은 useState로 처리한다. 단일 파일 안에서 완결되는 구조가 Artifacts에 맞다. 외부 API 호출, 로컬스토리지, 라우팅은 지원되지 않으니 “이 버튼을 클릭하면 어떤 화면이 펼쳐지는가”를 보여주는 클릭 흐름 시연에 집중하는 게 맞다.
프로토타입이 만족스러우면 오른쪽 Artifacts 패널 상단의 “Copy code” 버튼으로 전체 코드를 복사한다. 이게 다음 단계의 원본이 된다.
실제 코드로: Claude Code CLI에서 컴포넌트 파일 생성
로컬 프로젝트 디렉토리에서 claude 명령을 실행하면 Claude Code가 파일 트리를 읽는다. 여기서 Artifacts 코드를 붙여넣고 다음과 같이 요청한다.
“이 코드를 이 프로젝트의 Next.js + Tailwind + shadcn/ui 스택에 맞는 컴포넌트로 변환해줘.
components/Dashboard/디렉토리 구조로 파일을 분리하고, 기존Button,Card컴포넌트를 재활용해.”
Claude Code는 package.json, tailwind.config.ts, 기존 컴포넌트 파일을 읽고 프로젝트 컨벤션에 맞게 변환한다. 인라인 스타일은 Tailwind 클래스로 바뀌고, shadcn/ui의 Button, Dialog, Tabs 컴포넌트가 자동으로 import된다.
스토리북 스토리와 단위 테스트를 동시에 만들고 싶으면 요청에 붙이면 된다.
“각 컴포넌트의 Storybook 스토리 파일과 Vitest 단위 테스트도 같이 생성해줘.”
파일 생성 전에 Claude Code가 변경 계획을 보여주고 확인을 요청한다. 예상과 다른 경로에 파일이 생기려 하면 이 단계에서 수정 지시를 내리면 된다. y로 승인하면 컴포넌트, 스토리, 테스트 파일이 한 번에 만들어진다.
emotion이나 CSS Modules를 쓰는 프로젝트라면 “Tailwind 대신 CSS Modules로”라고 명시하면 그에 맞게 작성한다. 스택 정보를 명시할수록 재작업이 줄어든다.
한계와 Figma를 여전히 써야 하는 경우
Claude Design은 리서치 프리뷰 단계라서 디자인 토큰 연동, 컴포넌트 라이브러리 참조, 버전 관리 같은 기능이 없다. Figma의 Variables, Auto Layout, Dev Mode 같은 기능을 기대하면 안 된다.
50개 이상 컴포넌트 규모의 디자인 시스템이나 엄격한 브랜드 가이드라인이 있는 프로젝트는 Figma가 여전히 현실적이다. 비개발자 디자이너와 협업하거나 디자이너-개발자 핸드오프가 필요한 팀 환경에서는 Figma가 사실상 표준이고, Claude 워크플로로 대체하기 어렵다.
반면 Claude 워크플로가 빛나는 구간은 명확하다. 1인 개발자가 MVP 화면을 빠르게 검증할 때, 내부 어드민 도구처럼 브랜드 구애 없이 기능 중심으로 만들 때, 프로토타입을 바로 코드로 넘겨야 하는 스타트업 초기 단계가 그 구간이다. Figma를 대체하는 것이 아니라, Figma를 열기 전 단계 또는 Figma가 과한 규모에서 빈 자리를 채운다고 보면 맞다.
자주 묻는 질문
Q. Claude Design과 Claude Artifacts는 어떻게 다른가요?
Claude Design은 이미지 형태의 UI 목업을 생성하는 도구다. 결과물이 시각 이미지라서 코드를 직접 꺼낼 수 없다. Claude Artifacts는 채팅창 안에서 실제로 실행되는 React 컴포넌트를 생성한다. 버튼을 클릭하고 상태 변화를 확인할 수 있다. 설계 의도 공유에는 Design이, 인터랙션 검증에는 Artifacts가 더 적합하다.
Q. Artifacts에서 Tailwind가 안 된다면 복잡한 스타일을 어떻게 처리하나요?
인라인 style 객체로 대부분 처리할 수 있다. style={{ display: 'flex', gap: 16, backgroundColor: '#f0f4ff' }} 형태다. 글로벌 스타일이 필요하면 컴포넌트 안에 <style>{ ` .my-class { ... } ` }</style> 을 삽입한다. Tailwind 없이도 유연하게 레이아웃을 잡을 수 있고, Artifacts 단계는 어차피 스타일 완성도보다 인터랙션 흐름 검증이 목적이라 과한 스타일 작업을 이 단계에서 할 필요가 없다.
Q. Claude Code CLI 없이 Artifacts 코드를 그냥 복사해서 쓰면 안 되나요?
간단한 컴포넌트라면 가능하다. 하지만 Artifacts 코드는 Tailwind를 쓰지 않고, shadcn/ui 같은 프로젝트 컴포넌트를 import하지 않으며, 파일이 분리되어 있지 않다. 그대로 붙여넣으면 프로젝트 스택과 충돌이 난다. Claude Code CLI를 쓰는 핵심 이유가 이것이다. 파일 트리와 기존 코드를 읽고 프로젝트 컨벤션에 맞게 변환해주므로, 복사-붙여넣기보다 재작업이 훨씬 줄어든다.
Q. Claude Design은 무료로 써볼 수 없나요?
현재는 Pro 이상 플랜 전용이다. Free 플랜으로는 접근이 안 된다. Artifacts는 Free 플랜에서도 사용 가능하므로, 인터랙티브 프로토타이핑 자체는 무료로 시도해볼 수 있다.
단계별 실행 가이드
1단계. 플랜 확인 및 도구 접근
claude.ai에 로그인 후 현재 플랜을 확인한다. Claude Design은 Pro($20/월) 이상에서만 이용 가능하다. 사이드바에 “Claude Design” 항목이 보이지 않으면 플랜을 먼저 확인한다. Claude Code CLI는 별도로 npm install -g @anthropic-ai/claude-code로 설치하고 claude 명령으로 첫 실행 후 인증을 완료한다.
2단계. Claude Design으로 목업 생성
Claude Design에서 “화면 목적 + 주요 컴포넌트 + 색상·레이아웃 힌트” 3요소를 담은 프롬프트를 입력한다. 첫 결과에서 마음에 드는 요소와 수정이 필요한 요소를 구분해 이어서 수정 프롬프트를 날린다. 방향이 합의되면 스크린샷을 저장한다.
3단계. Artifacts로 인터랙티브 프로토타입 구현
claude.ai 채팅창에서 “이 목업을 React 컴포넌트로 만들어줘, Artifacts로 출력해줘”라고 요청한다. 스타일링은 인라인 style 객체로 처리된다는 점을 감안하고, 탭·모달·폼 같은 인터랙션이 의도대로 동작하는지 직접 클릭하며 검증한다. 만족스러우면 “Copy code”로 전체 코드를 복사한다.
4단계. Claude Code CLI로 실제 컴포넌트 파일 생성
로컬 프로젝트 루트에서 claude 명령을 실행한다. Artifacts에서 복사한 코드를 붙여넣고 “이 코드를 프로젝트 스택(Next.js / Tailwind / shadcn/ui)에 맞게 변환해서 components/ 디렉토리에 파일로 분리해줘”라고 요청한다. 변경 계획을 확인한 뒤 승인하면 컴포넌트 파일이 생성된다.
5단계. 테스트 및 통합 확인
생성된 컴포넌트를 실제 페이지에 import해서 개발 서버에서 확인한다. 스타일 충돌이나 import 오류가 있으면 Claude Code에게 오류 메시지와 함께 수정 요청을 날린다. 스토리북 스토리와 단위 테스트가 필요하면 이 단계에서 추가 요청으로 생성한다.