Claude Code로 UI/UX 디자인하기: 아이디어에서 인터페이스까지 실전 워크플로 (2026)

Claude Code가 실제로 UI/UX를 디자인할 수 있나요?

네, 하지만 먼저 도구를 이해해야 해요. Claude Code는 터미널에서 실행되는 에이전트형 CLI예요. 리포지토리를 읽고, 인터페이스 코드를 직접 작성하며(React, Next.js, Tailwind, shadcn/ui), 목업만 그려 놓고 방치하는 대신 즉시 실행되는 결과물을 만들어요. 이것이 대부분의 영어권 검색 결과가 실제로 이야기하는 웹 기반 "Claude Design" 경험과의 가장 큰 차이예요.

간단히 말해, Claude Code는 UI/UX를 디자인할 때 "아이디어에서 실행되는 코드로" 방식을 취하고, Claude Design(웹)은 와이어프레임 → 비주얼 목업 쪽으로 기울어 있어요. 실제 React/Next 프로젝트를 진행하는 개발자라면, 결과물이 Git, 테스트, 빌드와 함께 코드베이스에 바로 안착하기 때문에 Claude Code가 올바른 선택이에요.

함정에 대해 솔직히 말할게요. 기본 상태에서 Claude Code가 만드는 UI는 지루할 정도로 "무난한" 경우가 많아요. 균일한 레이아웃, 보라색 그라데이션, Inter 폰트, 똑같은 둥근 모서리의 기능 카드 같은 거죠. 모델이 보기 좋게 만들지 못하는 게 아니라, 미적 제약이 없는 거예요. 이 글의 나머지 부분은 품질을 프로덕션 수준까지 끌어올리도록 그 제약을 어떻게 주는지에 관한 내용이에요.

왜 Claude Code의 UI는 "평범하게" 나올까요?

원인을 이해하면 올바른 부분을 고칠 수 있어요. 평범한 UI는 모델이 "미적으로 서툴러서"가 아니라, 입력이 빠진 결과예요.

• 디자인 시스템이 없어요. 그냥 "랜딩 페이지를 만들어 줘"라고만 하면, 모델에게는 팔레트도, 간격 스케일도, 폰트 조합도 없어요. 그래서 학습 데이터에서 가장 많이 본 가장 무난한 기본값, 즉 Inter, 보라/파랑 그라데이션, 부드러운 그림자를 골라요.
• 비주얼 레퍼런스가 없어요. Claude Code는 주로 텍스트로 작업해요. 레퍼런스(목업, 마음에 드는 사이트의 스크린샷)를 한 번도 "보지" 못하면, 겨냥할 미적 목표가 없어요.
• 컴포넌트 제약이 없어요. 방향이 없으면, 제대로 된 라이브러리를 쓰지 않고 버튼/입력/카드를 직접 손으로 만들어요. 이는 일관성 부족과 접근성 약화로 이어져요.
• 피드백 루프가 없어요. 코드를 한 번 작성하고 멈춰요. 렌더링된 결과를 보고 스스로 수정하지 않아요.

좋은 소식은, 네 가지 원인 모두 구체적인 단계로 해결할 수 있다는 거예요. 그래서 이 글은 하나의 "마법 같은" 프롬프트가 아니라 프로세스에 초점을 맞춰요.

시작하기 전에: 필요한 것

중간에 멈추지 않도록 먼저 환경을 준비하세요.

• Claude Code 설치와 로그인 완료(아직 없다면 Claude Code 설치 방법 참고).
• Node.js(npx로 실행되는 MCP 서버용)와 이미 초기화된 React/Next.js + Tailwind 프로젝트.
• MCP 서버(shadcn, Playwright)를 연결할 계정/키 - 개념은 MCP란에서 확인하세요.

사용할 세 가지 도구 그룹:

Claude Code로 UI/UX를 디자인하는 6단계 워크플로

이것은 제가 몇 번이고 반복해서 쓰는 프로세스예요. 각 단계에는 명확한 목표, 구체적인 명령어나 프롬프트, 그리고 눈으로 확인해야 할 결과가 있어요. 처음부터 전부 할 필요는 없지만, 단계를 건너뛰면 바로 그 지점에서 UI가 "평범"해져요.

1단계 - 제대로 된 디자인 시스템 생성하기 (디자인 인텔리전스 스킬)

이것은 효과가 가장 큰 단계예요. 모델이 팔레트와 폰트를 추측하게 두는 대신, 디자인 인텔리전스 스킬로 디자인 시스템 전체를 한 번에 생성하세요. 컬러 팔레트, 폰트 조합, 간격 스케일, 테두리 반경, 그리고 정확한 제품 유형(SaaS 대시보드, 랜딩 페이지, 이커머스 등)에 맞춘 UX 가이드라인이에요.

ak-ui-ux-pro-max 같은 스킬은 대규모 레퍼런스 라이브러리(50개 이상의 스타일, 161개 팔레트, 57개 폰트 조합, 161개 제품 유형, 99개 UX 가이드라인, 25개 차트 유형, 10개 스택)와 대조해요. 그래서 "예뻐 보이는 것을 추측"하는 대신, 검증된 조합을 골라요. 제품을 설명하면 Tailwind 설정에 바로 넣을 수 있는 토큰 형태로 디자인 시스템을 돌려줘요.

# In Claude Code, describe the product so the skill generates a design system
Use the ui-ux design-intelligence skill: generate a design system for a
SaaS task-management landing page, professional yet modern tone, audience
is developers. Return a palette (with hex codes), one font pairing
(heading/body), a spacing scale, radius, and 5 core UX guidelines.
Output it as tokens.

기대되는 결과: ("부드러운 파랑"이 아니라) tailwind.config에 바로 복사해 붙일 수 있는 구체적인 토큰 표예요. 이제부터 모든 컴포넌트가 동일한 단일 소스를 참조해요.

2단계 - 미적 규칙을 CLAUDE.md에 작성하기

디자인 시스템은 Claude Code가 모든 세션에서 그것을 따를 때에만 유용해요. 가장 오래가는 방법은 규칙을 리포지토리 루트의 CLAUDE.md 파일에 하드코딩하는 거예요. 이 파일은 작업할 때마다 자동으로 컨텍스트에 로드돼요(자세한 내용은 CLAUDE.md 가이드 참고).

# CLAUDE.md - Design rules (UI/UX)

## Aesthetics (must follow)
- DO NOT use the Inter or Roboto font. Use the font pairing in the design tokens.
- DO NOT use default purple/blue gradients. Only use colors from the palette tokens.
- Every spacing/color/radius must reference tokens - no loose hardcoded values.
- UI components must use shadcn/ui - do not hand-roll button/input/card.
- Minimum contrast 4.5:1; every interactive element has a visible focus ring.
- Minimum touch target 44x44px; no horizontal scroll on mobile.

이것이 가장 중요한 가드레일이에요. 미적 결정을 부드러운 제안이 아니라 확고한 제약으로 바꿔줘요. Claude Code가 "편하게" Inter로 손을 뻗으려 할 때마다, 이 규칙이 다시 끌어당겨요.

3단계 - MCP를 통해 컴포넌트 라이브러리 연결하기 (shadcn/ui)

Claude Code가 자기 것을 다시 작성하는 대신 제대로 된 컴포넌트를 조립하게 하려면, shadcn을 MCP를 통해 연결하세요. shadcn/ui의 컴포넌트는 이미 접근성을 처리하고(내부는 Radix), 스타일이 일관돼요.

claude mcp add shadcn -- npx -y shadcn@latest mcp

연결이 끝나면, "shadcn을 써서 로그인 폼을 추가해 줘"와 같이 요청해요. 그러면 Claude Code가 알맞은 컴포넌트(button, input, dialog)를 가져와 1단계 토큰에 맞춰 조립해요. 그 결과, 직접 만든 컴포넌트가 줄고, 접근성 버그가 줄며, 눈에 띄게 더 일관된 UI가 돼요.

4단계 - Claude Code에 비주얼 레퍼런스 주기

모델은 겨냥할 목표가 있을 때 훨씬 더 나은 UI 작업을 해요. 화면을 코딩하라고 지시하기 전에, 비주얼 레퍼런스를 건네세요. 목업 이미지, 마음에 드는 페이지의 스크린샷, 기존 컴포넌트 같은 거예요.

효과적인 방법: 레퍼런스 이미지를 세션에 붙여넣고 빌리고 싶은 것을 정확히 설명하세요. 예를 들어 "이 이미지의 히어로 레이아웃과 간격 리듬을 따르되, 팔레트와 폰트는 토큰의 것을 써 줘"처럼요. 구체적일수록("넉넉한 여백", "타이포그래피를 초점으로", "과감한 CTA") 결과가 덜 평범해져요. 그냥 "보기 좋게 만들어 줘"라고 하지 말고, 어떤 좋음인지 짚어 주세요.

5단계 - 스크린샷 → 비교 → 개선 루프 (Playwright MCP)

이것이 이 가이드를 다른 것들과 구별 짓는 단계예요. 직접 화면을 스크린샷으로 찍고 결함을 설명하는 대신, Playwright MCP로 Claude Code가 결과를 스스로 "보게" 하세요. 렌더링된 페이지를 열고, 스크린샷을 찍고, 레퍼런스와 비교한 다음, 코드를 고쳐요. 이걸 최소 두 번 반복해요.

claude mcp add playwright -- npx -y @playwright/mcp@latest

루프 프롬프트:

Use Playwright MCP: open http://localhost:3000 and screenshot the hero
screen. Compare it to the reference on spacing, hierarchy, and contrast.
List the 3 biggest gaps, fix the code, screenshot again, and loop until
it matches the reference. Keep the constraints in CLAUDE.md.

매 회차마다 모델은 "자신이 코딩한 것"과 "도달해야 할 것" 사이의 격차를 보게 돼요. 그래서 첫 시도에서 멈추는 대신 품질이 올라가요. 이것은 텍스트 우선 도구의 시각적 약점을 보완하는 데 가장 가까운 방법이에요.

6단계 - 디자인 토큰 고정 및 접근성 확인

UI가 마음에 들면, 이후 세션에서 "흔들리지" 않도록 고정하세요. 디자인 토큰을 단일 소스 파일(예: tokens.css나 tailwind.config 안의 블록)로 내보내고, 이것이 진실의 원천임을 CLAUDE.md에 명시하세요. 모든 새 화면은 이것을 참조해야 하며, 흩어진 값은 쓰지 않아요.

그 직후에 간단한 접근성 점검을 실행하세요(자세한 내용은 아래 섹션). 대비 4.5:1, 보이는 포커스 링, 44px 이상의 터치 타깃, 가로 스크롤 없음, 그리고 prefers-reduced-motion 존중이에요. 토큰을 고정하고 접근성을 확인하면 "운 좋게 보기 좋은 빌드"가 반복 가능한 시스템이 돼요.

실제 예시: 랜딩 페이지 하나 만들기, 비포/애프터

구체적으로 보여드리기 위해, SaaS 작업 관리 도구(개발자 대상)의 랜딩 페이지를 예로 들게요. 프로세스는 위의 6단계를 정확히 따라요.

v1 빌드(제약 없음): Claude Code는 전형적인 "평범한" 모습을 돌려줬어요. 가운데 정렬된 히어로, Inter 폰트, CTA 버튼의 보라색 그라데이션, 똑같은 둥근 모서리의 기능 카드 세 개였어요. 실행은 됐지만, 한눈에 "AI가 만들었네"라고 알 수 있었어요.

1~5단계를 적용한 후: 디자인 시스템은 더 개성 있는 폰트 조합(제목에 세리프, 본문에 산세리프), 하나의 따뜻한 강조색을 가진 뉴트럴 팔레트, 더 넓은 간격, 그리고 그라데이션 대신 단색 CTA로 바뀌었어요. Playwright 루프를 세 번 돌린 후에는 위계가 더 뚜렷해지고, 기능 카드가 반복되는 대신 서로 다른 리듬을 갖게 됐어요.

한계에 대해 솔직히 말할게요. Claude Code는 레이아웃, 체계적인 간격, 컴포넌트 조립을 아주 잘해요. 제가 여전히 손으로 고치는 건 마이크로 인터랙션(애니메이션 타이밍, 이징)과, 텍스트 규칙으로는 온전히 전하기 어려운 몇 가지 "취향" 판단이에요. 다시 말해, 전체 틀의 80%는 처리해 주지만, 마지막 20%는 여전히 사람의 눈이 필요해요. 프론트엔드 구축을 더 깊이 알고 싶다면 Claude Code로 React 프론트엔드 구축하기를 읽어 보세요.

접근성과 반응형 확인하기 (건너뛰지 마세요)

대부분의 가이드는 "보기 좋은 것"만 이야기하고 접근성을 건너뛰어요. 안타까운 일이에요. 바로 여기가 코드로 검증할 수 있는 Claude Code가 크게 도움이 되는 지점이거든요. 완료라고 하기 전에 이 체크리스트를 실행하세요.

• 대비 4.5:1 이상을 일반 텍스트에(큰 텍스트는 3:1) - WCAG 2.1 AA 기준.
• 포커스 가시성: 키보드로 탭 이동할 때 모든 인터랙티브 요소(링크, 버튼, 입력)에 명확한 포커스 링이 표시돼요.
• 터치 타깃 44x44px 이상을 모바일에서 확보해 탭이 빗나가지 않게 해요.
• 가로 스크롤 없음을 주요 브레이크포인트(360px, 768px, 1024px)에서.
• prefers-reduced-motion 존중: 움직임에 민감한 사용자를 위해 애니메이션을 끄거나 줄여요.
• 시맨틱 HTML + alt: 올바른 제목 레벨, alt 텍스트가 있는 이미지, 레이블이 있는 폼.

바로 맡길 수도 있어요. "페이지 전체를 CLAUDE.md의 접근성 체크리스트에 비추어 감사하고, 위반 사항을 코드 줄과 함께 나열한 다음 고쳐 줘"처럼요. 이것은 규칙 기반 작업이라, Claude Code가 빠르고 실수도 적게 처리해요.

UI/UX 디자인에서 Claude Code의 진짜 한계

올바른 기대치를 세우기 위해, 대부분의 가이드가 피하는 부분을 말씀드릴게요.

• 복잡한 시각적 추론은 아직 약해요. 스크린샷을 꽤 잘 "읽지만", 시각적 균형과 레이아웃 리듬에 대한 미묘한 판단은 아직 디자이너 수준이 아니에요.
• 픽셀 퍼펙트는 아니에요. Figma와 픽셀 단위로 일치하기를 기대하지 마세요. 정확한 청사진이 아니라 디자인의 정신을 따라요.
• 텍스트 규칙은 이미지를 대체할 수 없어요. "프리미엄"을 말로 설명할 수는 있지만, 비주얼 레퍼런스가 언제나 훨씬 더 효과적이에요.
• 섬세한 마이크로 인터랙션과 애니메이션. 타이밍, 이징, 부드러운 전환 - 이 부분은 보통 손으로 다듬어야 해요.
• 여전히 사람의 검토가 필요해요. 속도를 크게 높여 주지만, 최종적인 미적 판단과 감성적 경험은 여전히 당신의 몫이에요.

그래도 진짜 디자이너가 필요한 때는 언제일까요? 새로운 브랜드 아이덴티티를 처음부터 구축할 때, 또는 복잡한 멀티 프로덕트 디자인 시스템이 필요할 때예요. Claude Code는 "빠르고 일관된 제작자의 팔"이지, 디자인 사고의 대체재가 아니에요.

속도를 높이세요: AgentKit의 사전 제작 UI/UX 스킬

1단계(디자인 시스템 생성)는 스킬을 직접 만들 경우 가장 손이 많이 가는 부분이에요. 바로 여기서 사전 제작 스킬이 시간을 크게 절약해 줘요. ak-ui-ux-pro-max는 161개 팔레트, 57개 폰트 조합, 99개 UX 가이드라인, 25개 차트 유형, 10개 스택을 갖춘 풀 버전으로, AgentKit에 포함돼 있어요. UI 작업을 할 때 Claude Code가 이 스킬을 자동으로 호출하기 때문에, 프로젝트마다 디자인 규칙을 처음부터 다시 쓸 필요가 없어요.

혼동을 피하기 위해 한마디 할게요. 여기서 말하는 AgentKit은 Claude Code를 위한 킷(agentkit.best, ak CLI 사용)으로, OpenAI의 AgentKit(Agent Builder/ChatKit)과는 다른 것이에요. 개발 킷 자체가 궁금하다면 Engineer Kit에 무엇이 있는지를 보세요. Engineer Kit은 현재 $99이며(사이트에 반복 요금 표기는 없어요), 페이지 정보에 따르면 "환불 보장"과 "평생 업데이트"가 함께해요.

디자인 시스템을 손으로 구축하는 걸 건너뛰고 싶나요? AgentKit UI/UX 스킬 세트에는 ak-ui-ux-pro-max가 포함되어, Claude Code가 처음부터 탄탄한 팔레트, 폰트, UX 가이드라인을 갖추게 돼요.

자주 묻는 질문 (FAQ)

Claude Code는 Claude Design(웹)과 어떻게 다른가요?

Claude Code는 터미널에서 실행되는 에이전트형 CLI로, UI 코드를 리포지토리에 직접 작성하고 그 자리에서 바로 실행해요. Claude Design(웹)은 브라우저에서 와이어프레임 → 비주얼 목업 쪽으로 기울어 있어요. 실제 React/Next 프로젝트를 만들고 있다면, 결과물이 코드베이스 안에 존재하는 Claude Code가 더 잘 맞아요.

Claude Code가 만드는 UI가 "프로덕션" 품질이 될 수 있나요?

네, 전체 워크플로를 적용하면 가능해요. 디자인 시스템 + CLAUDE.md 제약 + 제대로 된 컴포넌트(shadcn) + 개선 루프 + 접근성 점검이에요. 이 단계들을 건너뛰면 UI는 쉽게 평범해져요. 마이크로 인터랙션과 섬세한 미감은 여전히 손으로 검토하는 게 좋아요.

Figma를 알아야 하나요?

필수는 아니에요. 텍스트 설명과 레퍼런스 이미지 한 장만으로 전부 작업할 수 있어요. 하지만 Figma 목업이 있다면, 그것을 비주얼 레퍼런스로 쓰면 Claude Code가 미감을 훨씬 더 잘 따라요.

유료 스킬이 필요한가요?

꼭 그렇진 않아요. 디자인 규칙은 무료로 CLAUDE.md에 작성할 수 있어요. ak-ui-ux-pro-max 같은 사전 제작 스킬은 디자인 시스템 구축을 건너뛰게 해줄 뿐이에요. 여러 프로젝트를 넘나들며 일관성을 원할 때 편리하지만, 필수 조건은 아니에요.

UI 디자인을 위해 어떤 MCP 서버를 연결해야 하나요?

가장 값어치 있는 두 가지: shadcn MCP(제대로 되고 접근성 있는 컴포넌트를 조립하기 위해)와 Playwright MCP(Claude Code가 렌더링된 UI를 스크린샷으로 찍어 레퍼런스와 비교하고 루프로 개선할 수 있도록)예요.

UI를 덜 평범하게 만들려면 어떻게 하나요?

제약을 주세요. CLAUDE.md에서 기본 폰트/색상을 금지하고, 구체적인 비주얼 레퍼런스를 주고, 모델이 추측하게 두는 대신 자신만의 디자인 시스템을 쓰고, 스크린샷 → 비교 → 수정 루프를 최소 두 번 돌리세요.

결론 + 다음 단계

요컨대, Claude Code는 충분한 제약을 주면 UI/UX를 잘 디자인해요. 디자인 시스템을 생성하고, 미적 규칙을 CLAUDE.md에 고정하고, shadcn + Playwright를 MCP로 연결하고, 비주얼 레퍼런스를 주고, 개선 루프를 돌린 다음, 토큰을 고정하고 접근성을 확인하세요. 픽셀 퍼펙트는 기대하지 말고, 빠르고 일관된 제작자의 팔로 활용하되, 취향에 관한 판단은 스스로 간직하세요.

다음 단계: 인터페이스 코드를 더 깊이 파고들려면 Claude Code로 React 프론트엔드 구축하기를 읽어 보세요. 그리고 디자인 시스템을 손으로 구축하는 걸 건너뛰고 싶다면, AgentKit에 포함된 ak-ui-ux-pro-max 스킬을 고려해 보세요(아래 박스 참고).