💻 Dev_Log

Page List

Claude Design

💻 Dev_Log

Claude Design

Date

2026/04/30

Claude Design

•

Claude Design 웹사이트

claude.ai

https://claude.ai/design

•

실제 사용 영상

•

공식 문서

Introducing Claude Design by Anthropic Labs

Today, we’re launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more.

https://www.anthropic.com/news/claude-design-anthropic-labs

Claude Design 시작하기 | Anthropic 지원 센터

Anthropic Labs의 Claude Design을 사용하면 Claude와 대화하여 디자인, 대화형 프로토타입, 프레젠테이션 등을 만들 수 있습니다. 이 가이드는 첫 번째 프로젝트를 만들고, 디자인을 반복하며, 도구를 최대한 활용하는 방법을 안내합니다.

https://support.claude.com/ko/articles/14604416-claude-design-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

실제 개발 수행 결과

1. 프롬프트로 원하는 디자인 형식 주입

•

폰트 크기나 디자인, 전반적인 색상에 대한 색상코드 등 디테일한 부분을 제시하면 효과가 더 좋음

•

레퍼런스 링크를 함께 주면 효과가 더 좋음

•

클로드 코드와 질의하며 디테일한 기획 수행 (기능 추가, 원하는 컬러 등)

2. 딸깍

•

오른쪽 Tweaks에서 더 다양한 컬러나 폰트 조합을 시도해보고 싶다면 추가적으로 프롬프트를 입력하면 됨

•

ooo폰트랑 xxx폰트도 적용해보고 싶어. 컬러는 #oooooo 컬러도 추가로 적용해보고 싶어. 다크/라이트 토글도 추가해주고, 기사 정돈이 되도록 페이지네이션 (or 무한스크롤) 기능 추가하고싶어

3. 어느 정도 디자인이 완료되었다면, 오른쪽 share 버튼에서 다양한 방식으로 export 가능

•

만들어진 코드(js, jsx)에 대한 zip파일, pdf, Canva, HTML, Claude Code 등등

4. Handoff to Claude Code를 선택하면 로컬로 모든 파일을 옮겨서 Claude Code와 커스텀하게 작업 가능

•

백엔드 코드만 짜두면 기능 매핑만 해서 바로 배포하면 됨

•

아님 이미 있는 화면 파일에 대해 필요한 API를 알아서 만들어달라고 해도 됨

5. 화면 개발 완료

→ 디자인같은건 100% 완벽하게 예쁘진 않고 Pro 요금제라 좀 조심스럽게 쓴 느낌도 있었지만, 5분만에 원하는 기획 방향에 대한 화면 디자인을 코드화해서 생각보다 깔끔하게 주기 때문에 구현 속도가 엄청나게 높아질 것 같음.

→ 디자인도 완벽한게 아니다 정도지 화면 간격이나 버튼 구성 같은건 더 수정할 필요없을 정도로 잘 해주는 것 같음. 컬러나 폰트사이즈, 줄바꿈 정도만 수정하면 돼서 1인 개발 시대가 이제는 왔구나.. 하는 느낌을 받음.

Table of contents

1. Claude Design (Anthropic Labs 공식 제품)

개요

Anthropic Labs가 출시한 대화형 비주얼 디자인 도구로, Claude Opus 4.7 비전 모델을 기반으로 작동. 디자인, 프로토타입, 슬라이드, 원페이저 등 비주얼 작업을 Claude와 협업해 만들 수 있다. 현재 Research Preview 단계이며 Pro, Max, Team, Enterprise 구독자에게 제공된다.

핵심 기능

•

디자인 시스템 자동 생성: 온보딩 시 코드베이스와 디자인 파일을 읽어 팀의 디자인 시스템(컬러, 타이포그래피, 컴포넌트)을 자동 추출

•

다양한 입력 소스 지원: 텍스트 프롬프트, 이미지/문서 업로드(DOCX, PPTX, XLSX), 코드베이스 연결, 웹 캡처 도구

•

세밀한 편집 컨트롤: 인라인 코멘트, 직접 텍스트 편집, 슬라이더(spacing, color, layout)로 라이브 조정

•

조직 단위 협업: 문서 공유 권한 관리, 팀원 동시 편집 가능

•

Claude Code 연계: 디자인 의도(design intent)를 보존한 채로 엔지니어링 핸드오프

주요 사용 사례

사용자	시나리오
디자이너	정적 mockup → 인터랙티브 프로토타입 변환, 다양한 디자인 방향 빠르게 탐색
PM	기능 플로우 와이어프레임 작성 → Claude Code로 구현 핸드오프
창업자/AE	러프 아웃라인 → 브랜드 톤 맞춘 피치덱 (PPTX/Canva 익스포트)

→ 특히 1인 창업자 카테고리에서 가장 사용량 데이터가 가파르게 올라갈 것으로 전망.

핸드오프 워크플로우

Export 클릭 → "Hand off to Claude Code" 선택

디자인 파일 + 채팅 + README 번들 생성

로컬 Claude Code 또는 Claude Code Web에 붙여넣기

코드베이스가 연결되어 있다면 컴포넌트 패턴 인식해서 구현

2. Claude Code 기반 디자인 워크플로우

두 가지 환경 (Two Environments)

디자이너 워크플로우에서 핵심은 목적에 맞는 환경 선택이다.

Cowork (데스크톱 앱) — 사고(Thinking) 영역

•

비주얼 인터페이스, 비-터미널 사용자 친화적

•

Figma 스크린샷 디자인 비평

•

위키 페이지 읽기/주석 (Chrome 통합)

•

디자인 문서 및 프레젠테이션 작성

•

리서치 및 분석

•

Skills 작성도 가능 (AI에게 자기 학습 자료 작성을 시킬 수 있음)

Claude Code (터미널) — 실행(Doing) 영역

•

코드 생성, 컴포넌트 구현

•

Figma MCP 연동을 통한 디자인  코드 동기화

•

QA, 디자인 리뷰 자동화

핵심 구성 요소

구성 요소	역할
Skills	Claude가 회사의 디자인 원칙/컴포넌트 스펙/콘텐츠 가이드라인을 학습하는 SKILL.md 파일
MCP Servers	Figma, Jira, Wiki 등 외부 도구 연결 (Claude의 "손" 역할)
Environments	Cowork(사고용) vs Claude Code(실행용)

 판단 기준: "신입 디자이너가 첫날에 알 거라고 기대할 수 없는 것"이라면 Skill로 만들어야 한다.

3. 디자인 Skills 생태계

3.1 표준 Skill 구조 (디자이너 팀 기준)

A. Reference Skills (지식형)

•

Design Principles: 평가 프레임워크, 비주얼 계층 규칙, 디자인 철학 → Claude의 판단력 학습

•

Component & Token Specs: 컴포넌트, 토큰, 아이콘의 단일 진실 공급원 (Single Source of Truth)

•

Content Strategy: 보이스/톤 규칙, UI 요소별 카피 패턴, 제품 용어집

•

Motion Specs: 타이밍 커브, duration, 트랜지션 패턴, 마이크로 인터랙션 스펙

•

Domain Reference Skills: 특정 제품 영역의 UX 패턴, IA, 마이크로카피 가이드

B. Capability Skills (작업 자동화형)

Standalone (의존성 없음)

•

read-filter-prd: PRD에서 UI/UX 요구사항 추출

•

create-design-ticket: Jira 디자인 티켓 구조화

•

define-flow: 사용자 플로우 및 인터랙션 상태 매핑

•

research: 사전 디자인 벤치마킹 및 근거 수집

•

sell-design-vision: 디자인 프로젝트 피칭 및 임팩트 보고

Reference Skills 의존

•

identify-ux-problems: 기존 디자인 감사 (Principles 로드)

•

generate-design: 정적 hi-fi Figma 프레임 생성 (Principles, Specs, Content Strategy 로드)

•

generate-prototype: 인터랙티브 애니메이션 프로토타입 생성 (Motion, Specs, Principles 로드)

Reference Skills + Figma MCP 의존

•

design-review: 라이브 디자인의 휴리스틱 평가 (Figma 연결)

•

qa-signoff: Figma 원본 vs 구현 비교 비주얼 QA (Figma 연결)

3.2 인기 있는 커뮤니티 Skills

Skill	특징	설치
Anthropic Frontend Design	Inter/Roboto/Arial/Space Grotesk 명시적 금지(AI 남용), 비대칭 레이아웃, 의도된 모션 (118.3k stars)	claude plugin add anthropic/frontend-design
UI/UX Pro Max	50+ UI 스타일, 161 컬러팔레트, 57 폰트 페어링, 161 제품 타입, 99 UX 가이드라인, 25 차트 타입 (10개 스택 지원)	nextlevelbuilder/ui-ux-pro-max-skill
Vercel Web Design Guidelines	접근성 표준, 웹 베스트 프랙티스	-
AccessLint	WCAG 가이드라인 자동 감사	-
Vercel React Best Practices	성능/아키텍처 패턴, 컴포지션 패턴	-
Bencium UX Designer	의도적 디자인 (AI 디폴트 회피)	-

3.3 Skill 조합 전략

 주의: 두 개 이상의 비주얼 스타일 Skill을 동시에 쓰면 충돌 가능. 비주얼 1개 + 기술 1개 조합이 베스트.

4. 실전 워크플로우 패턴

4.1 디자인 시스템 셋업 (Claude Design 기준)

Claude Design 좌하단 organization 클릭

조직 선택 또는 신규 생성 → 온보딩 플로우 진입

브랜드 자산 업로드:

•

코드베이스 (예: React 컴포넌트 라이브러리 리포지토리 링크/업로드)

•

프로토타입 (스크린샷, 웹 플로우, 기존 디자인 파일)

•

실제 완성된 사례 포함 (스펙만 주는 것보다 마감된 랜딩페이지가 브랜드 느낌을 더 잘 전달)

Claude가 자동 추출:

•

컬러 팔레트: Primary, Secondary, Accent

•

타이포그래피: 폰트 패밀리, 크기, 굵기

•

컴포넌트: 버튼, 카드, 네비게이션 등

•

레이아웃 패턴: 스페이싱, 그리드 시스템

테스트 프로젝트로 검증 → "Published" 토글 ON

4.2 빠른 프로토타이핑 워크플로우

아이디어 → 텍스트 프롬프트 → Claude 첫 버전 생성

대화로 리파인 → 인라인 코멘트 → 직접 편집 → 커스텀 슬라이더

2-3개 대안 방향 동시 생성 → 스테이크홀더 피드백

Claude Code 핸드오프 → 프로덕션 구현
Plain Text
복사

4.3 효과적인 프롬프트 예시

•

"SaaS 앱용 새 settings 페이지 디자인. account, billing, notifications, integrations 섹션. 사이드바 nav, 각 섹션 expandable"

•

"신규 사용자용 5스크린 온보딩 플로우. 데이터 소스 연결 → 첫 대시보드 설정 → 팀원 초대"

•

"사용자 프로필 페이지 3가지 레이아웃: 카드 기반, 좌측 사이드바, 상단 탭

5. 디자이너용 도구 조합 가이드

5.1 작업 유형별 추천 도구

작업 유형	추천 도구
아이디에이션 & 빠른 프로토타이핑	Claude Design (Figma보다 빠름)
시스템 & 협업	Figma (Claude Design보다 강력)
디자인 → 코드 변환	Claude Design (현재 우위)
프론트엔드 컴포넌트 개발	Claude Code + Frontend Design Skill
접근성 감사	AccessLint Skill
디자인 리뷰 자동화	design-review Skill + Figma MCP

5.3 통합 워크플로우 예시 (디자인 → 프론트 → 백엔드 → 인프라)

[1] Claude Design에서 디자인 시스템 + 와이어프레임 생성
[2] Claude Code 핸드오프 (Frontend Design Skill 활성화)
[3] React/Next.js 프론트엔드 코드 생성
[4] FastAPI 백엔드 (Router → Service → Repository) 연결
[5] AWS EC2 배포 + CloudWatch 모니터링
Plain Text
복사

오픈소스 Skills

•

UI/UX Pro Max Skill (GitHub)

•

Anthropic Frontend Design Skill

핵심 요약 (TL;DR)

Claude Design은 대화 → 디자인 → 코드 핸드오프까지 한 곳에서 처리하는 Anthropic 공식 도구

Claude Code + Skills + MCP 조합으로 디자인 워크플로우 자동화 가능

Skills는 Reference(지식형) + Capability(작업형)으로 구분, 회사의 디자인 DNA를 코드화

비주얼 Skill 1개 + 기술 Skill 1개 조합이 안전 (충돌 방지)

백엔드 개발자도 Claude Design → Claude Code → 백엔드 연결의 풀스택 흐름 구축 가능