디자인을 위한 Claude Code.

Claude Code는 실제로 무엇인가

Claude Code는 Anthropic의 에이전트형 코딩 도구입니다. 코드베이스를 읽고, 파일을 편집하고, 명령을 실행하며, 개발 도구와 통합됩니다 — 단순히 줄을 자동 완성하는 것이 아니라 자연어 작업으로부터 작업을 계획하고, 작성하고, 검증합니다.

동일한 엔진을 공유하는 여러 표면으로 제공됩니다: 터미널 CLI, VS Code·Cursor·JetBrains용 IDE 확장, 시각적 diff 리뷰를 갖춘 데스크톱 앱, 그리고 장시간 작업을 위한 웹 환경. CLAUDE.md 파일, 설정, MCP 서버는 이 모든 표면에 걸쳐 이어집니다.

• 지시 파일: Claude Code는 모든 세션 시작 시 프로젝트 루트의 CLAUDE.md 파일을 읽습니다 — 디자인 컨벤션, tokens, 리뷰 체크리스트를 담기에 가장 자연스러운 곳입니다.
• Skills: Agent Skills는 반복 가능한 지시, 스크립트, 리소스를 패키징하여 Claude가 필요할 때 불러옵니다. Anthropic의 공식 Frontend Design skill을 포함해 감각을 더합니다.
• 계획과 서브에이전트: 행동에 앞서 계획을 세우고, 작업의 여러 부분을 병렬로 처리하는 서브에이전트를 띄울 수 있어 대규모 UI 리팩터링도 일관되게 유지합니다.

• 공급사: Anthropic
• 자격 증명: Anthropic API 키(BYOK, Console 경유) 또는 Claude 구독(Pro / Max)
• 표면: 터미널 CLI, VS Code / Cursor / JetBrains 확장, 데스크톱 앱, 웹

Claude Code가 디자인에 강한 이유

코딩 에이전트들 가운데 Claude Code는 프런트엔드 작업에서 감각이 좋다는 평판을 가지고 있습니다. 그 이유는 몇 가지로 설명됩니다.

• 모호하지 않은, 구체적인 결정: Claude Code는 두루뭉술하게 넘기지 않고 구체적인 선택 — 정확한 hex 값, 간격 스케일, 타입 램프, 컴포넌트 위계 — 에 명확히 전념하는 경향이 있습니다. 이것이 실제 인터페이스와 자리채움을 가르는 차이입니다.
• 코드베이스를 이해하는 추론: 큰 작업 컨텍스트를 바탕으로 여러 파일에 걸친 UI를 한 번에 리팩터링하며, 일회성 스타일을 새로 만들기보다 기존 컴포넌트와 tokens를 재사용합니다.
• 공식 프런트엔드 skill: Anthropic은 Claude가 먼저 디자인 방향을 쓰게 하고, 평범한 시스템 폰트와 뻔한 보라색 그라데이션을 의도적으로 피하도록 만드는 Frontend Design skill을 제공합니다.

교훈은 Anthropic이 자사 모델에 대해 말하는 것과 같습니다: Claude는 기본적으로 감각을 가지고 있지 않습니다 — 내버려 두면 웹 디자인의 통계적 중심(Inter, 보라색 그라데이션, 부드러운 그림자)으로 수렴합니다. 제약을 주면 좋은 디자인을 만들어 냅니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞물립니다(아래에서 자세히).

디자인 작업을 위한 Claude Code 설정하기, 처음부터

깨끗한 머신에서 UI를 만들고 검증할 수 있는 Claude Code까지 가는 전체 경로는 다음과 같습니다.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• 디자인 규칙을 담기: tokens, 기본 요소, 컨벤션을 CLAUDE.md에 담고 Claude가 그것을 보도록 가리키세요. 그러면 결과물이 평범한 모습으로 기본 회귀하지 않고 브랜드에 맞춰집니다.
• 브라우저 검증 추가하기: Playwright 또는 Chrome MCP를 연결해 Claude가 실제 브라우저에서 렌더링하고, 빌드 통과만 확인하는 대신 여러 브레이크포인트에 걸쳐 결과물을 점검하도록 하세요.

CLAUDE.md와 Skills 워크플로

Claude Code로 얻는 가장 효과적인 디자인 루프는 실제 레퍼런스와 디자인 컨텍스트를 함께 제공하고 UI가 맞아떨어질 때까지 반복하는 것입니다 — CLAUDE.md와 Skills가 제약을 담아 두기에 매번 다시 설명할 필요가 없습니다.

1. 가지고 있는 가장 명확한 시각 레퍼런스에서 시작하세요 — 그리고 히어로 한 컷이 아니라 여러 상태(데스크톱과 모바일, hover, 빈 상태, 로딩)를 포함하세요.
2. 프롬프트에서 구체적으로 쓰세요. 강력한 에이전트라도 모호한 프롬프트는 평범한 UI를 낳습니다.
3. 디자인 시스템과 컨벤션을 CLAUDE.md에 두고, tokens와 정식 기본 요소가 어디에 있는지 Claude에게 알려 주세요.
4. Claude가 코드를 작성하기 전에 실제 미학적 방향에 전념하도록 Frontend Design skill을 추가하세요.
5. Claude가 단지 빌드가 되는지만 확인하는 게 아니라, 렌더링하고 브레이크포인트로 크기를 바꿔 레퍼런스와 다시 비교하도록 브라우저 검증을 연결하세요.

세션에 레퍼런스 이미지를 넣고 구체적인 제약과 함께 프롬프트하세요:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

옆에서 dev 서버를 띄우고, 프롬프트는 작고 집중되게 유지하며, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때 Claude에게 알려 주세요). 그래야 각 패스가 깨끗한 기반 위에서 쌓입니다. 더 큰 리팩터링에는 plan 모드를 사용해 파일이 변경되기 전에 접근 방식을 검토하세요.

Claude Code + Figma: 디자인 ↔ 코드 왕복 연동

2026년 2월, Anthropic과 Figma는 Figma MCP 서버를 통해 일급의 양방향 통합을 선보였습니다. 양쪽 방향 모두에서 작동합니다.

• 디자인 → 코드: Figma에서 프레임을 선택하거나 링크를 Claude Code에 붙여넣고, 디자인 컨텍스트를 가져온 다음, 기존 컴포넌트 라이브러리를 사용해 디자인을 구현하도록 요청하세요. Code Connect는 결과물을 실제 컴포넌트에 맞춰 유지합니다.
• 코드 → 디자인: 브라우저에서 기능을 만들고 미리 본 뒤 “Send this to Figma”라고 말하면 실행 중인 UI를 편집 가능한 Figma 레이어로 — 화면 전체 또는 선택한 요소로 — 캡처합니다.

claude plugin install figma@claude-plugins-official로 한 번만 설치하면 됩니다(Dev Mode MCP는 유료 Figma 플랜이 필요합니다). 동일한 Figma MCP는 Claude Code, Codex, Cursor, VS Code에서 사용할 수 있습니다 — 바로 Open Design이 오케스트레이션하도록 설계된 이식 가능한 멀티 에이전트 역량의 전형입니다.

디자인을 위한 Claude Code vs Codex vs Cursor

디자인 작업에 단 하나의 승자는 없습니다 — 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 함께 쌓아 씁니다. 공정한 요약은 다음과 같습니다:

커뮤니티에서 반복되는 결론은 감각이 사람에게서 나온다는 것입니다: 셋 모두 skill, 레퍼런스, 제약이 없으면 평범한 미학으로 기본 회귀합니다. 그것이 풀어야 할 진짜 문제이며 — 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

함정, 그리고 “AI 티” 나는 결과물을 피하는 법

Claude Code가 감각으로 평판이 좋더라도, AI가 생성한 디자인에 대한 가장 흔한 불만은 평범해 보인다는 것입니다 — Inter 폰트, 흰 배경 위 보라색 그라데이션, 부드러운 그림자, 과도하게 둥근 모서리, “AI가 만들었다고 외치는” 듯한 미학. Anthropic 스스로도 이를 분포적 수렴 탓으로 봅니다: 안전한 선택이 웹 학습 데이터를 지배하기 때문입니다. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 지시문이 UI 카피에 새어 나오는 것이 있습니다.

• Frontend Design skill 설치하기: Claude가 실제 방향에 전념하도록 강제하고, AI가 과용하는 폰트와 그라데이션을 명시적으로 피합니다.
• 브라우저 검증 활성화하기: Claude가 브레이크포인트 전반에서 렌더링하고 스스로 점검하게 하여 레이아웃이 모바일에서 조용히 깨지지 않도록 하세요.
• tokens와 레퍼런스 제공하기: 실제 디자인 tokens와 레퍼런스 스크린샷은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다.
• CLAUDE.md에 규칙 담기: “히어로 카드 금지, 서체 최대 두 종, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 매번 읽는 곳에 두세요.

모든 완화책이 에이전트에게 엄선된 디자인 컨텍스트를 주는 것임에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고가 바로 Open Design이 없애는 것입니다.

Open Design 안에서 Claude Code로 디자인하기

Open Design은 위 워크플로가 계속 요구하던 그 오픈소스 디자인 레이어입니다. Claude Code를 일급 어댑터로 취급하고 엄선된 skill 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸 줍니다 — 그래서 Claude Code를 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립하는 대신 첫 실행부터 갖춰져 있습니다.

1. Open Design을 설치하고 에이전트로 Claude Code를 선택하세요.
2. Anthropic API 키(BYOK) 또는 Claude 구독으로 인증하세요 — 자격 증명은 여러분의 머신에 머물며 결코 저희를 거쳐 프록시되지 않습니다.
3. 디자인 시스템과 skill을 고른 다음, 일관된 감각으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.
4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 여러분 자신의 레포에 존재합니다.

같은 Claude Code 에이전트, 같은 키 — 그 위에 실제로 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. 로컬 우선이며 Apache-2.0이라, 여러분의 작업이나 자격 증명 중 어떤 것도 머신을 떠나지 않습니다.

자주 묻는 질문

1. 01 Claude Code는 디자인 작업에 좋은가요? +

   네 — 프런트엔드 감각이 가장 뛰어난 코딩 에이전트로 널리 인정받으며, hex 값, 간격, 타입 스케일에 대해 구체적이고 코드베이스를 이해하는 결정을 내립니다. Frontend Design skill, 디자인 시스템, 그리고 실제 레퍼런스 이미지가 컨텍스트에 있으면 양산 품질의 반응형 UI를 만들고 브라우저에서 검증할 수 있습니다. 그런 컨텍스트가 없으면 평범한 모습으로 기본 회귀하는 경향이 있는데, 그것이 바로 Open Design이 메우는 격차입니다.

2. 02 Claude Code로 디자인하려면 Claude 구독이 필요한가요? +

   Anthropic API 키(BYOK, Console 경유) 또는 Claude 구독(Pro / Max) 중 어느 쪽이든 사용할 수 있습니다. 어느 경우든 Open Design은 결코 여러분의 자격 증명을 프록시하지 않습니다 — 자격 증명은 여러분의 머신에서 에이전트가 직접 사용합니다.

3. 03 프런트엔드 디자인에는 Claude Code인가요, Codex인가요? +

   둘 다 강력합니다. Claude Code는 구체적이고 코드베이스를 이해하는 디자인 결정과 프런트엔드 추론으로 알려져 있고, Codex는 강한 비주얼 완성도와 위임된 샌드박스 빌드에 능합니다. 많은 팀이 둘 다 씁니다 — Open Design을 쓰면 디자인 워크플로를 바꾸지 않고 에이전트를 전환할 수 있습니다.

4. 04 Claude Code를 Figma에 어떻게 연결하나요? +

   claude plugin install figma@claude-plugins-official로 공식 Figma 플러그인을 설치하세요. 그러면 디자인 컨텍스트를 사용해 Figma 프레임을 코드로 구현할 수 있고, “Send this to Figma”로 실행 중인 UI를 편집 가능한 Figma 프레임으로 되돌릴 수 있습니다. Dev Mode MCP는 유료 Figma 플랜이 필요합니다.

5. 05 Skills와 CLAUDE.md란 무엇인가요? +

   CLAUDE.md는 프로젝트 루트에 있는 마크다운 파일로, Claude Code가 모든 세션 시작 시 읽습니다 — 디자인 컨벤션을 담는 곳입니다. Skills는 Claude가 필요할 때 불러오는 반복 가능한 지시와 리소스를 패키징하며, Anthropic의 공식 Frontend Design skill을 포함합니다. Open Design은 두 가지를 엄선한 라이브러리로 제공하여 프로젝트마다 하는 설정을 건너뛰게 해 줍니다.

6. 06 평범한 “AI 티” 미학을 어떻게 피하나요? +

   Frontend Design skill을 설치하고, 실제 디자인 tokens와 레퍼런스 스크린샷을 제공하며, 브랜드 규칙을 CLAUDE.md에 담고, 브라우저 검증을 활성화하세요. Open Design은 이것들을 엄선한 라이브러리로 제공하여 프로젝트마다 하는 설정을 건너뛰게 해 줍니다.

7. 07 Open Design은 Anthropic과 제휴되어 있나요? +

   아니요. Claude Code는 Anthropic의 제품이며, Open Design은 이를 일급 어댑터로 지원하는 독립적인 오픈소스 프로젝트입니다. Claude와 Claude Code는 Anthropic의 상표입니다.

8. 08 제 파일과 자격 증명은 안전한가요? +

   네 — Open Design은 로컬 우선이며 Apache-2.0입니다. 여러분의 파일, 산출물, DESIGN.md는 여러분 자신의 레포에 머물고, Anthropic 자격 증명은 에이전트가 직접 사용하며 결코 Open Design 서버를 거치지 않습니다.