MCP

moon.kick·2025년 4월 19일

https://www.youtube.com/watch?v=S0AXLG6RKeE

좋아요! 방금 업로드해주신 스크립트 내용을 바탕으로 Figma 디자인을 Claude와 MCP를 활용해 HTML/CSS 코드로 자동 변환하는 전체 설치 및 실행 과정을 아주 천천히, 초보자도 따라할 수 있도록 자세히 풀어서 설명해드릴게요.

🌐 개요

우리는 Claude라는 AI와 MCP(Figma-Context-MCP 서버)를 사용해
Figma 디자인을 직접 불러오고, 이를 3분 안에 HTML/CSS 코드로 변환합니다.

🧰 사전 준비물 (필수 설치 목록)

항목	설명	다운로드 링크
1. Claude	Anthropic AI의 챗봇	https://claude.ai
2. MCP 클라우드 데스크탑 (Model Context Protocol)	Claude와 외부 리소스를 연결해주는 데스크탑 도구	MCP Quick Start
3. Figma-Context-MCP	Figma와 Claude를 연결하는 MCP 플러그인 (GitHub 소스)	https://github.com/GLips/Figma-Context-MCP

🛠 설치 및 설정 순서 (정말 쉬운 단계별 설명)

① MCP 클라우드 데스크탑 설치

위 링크에서 자신의 OS(Windows/Mac)에 맞는 클라이언트 프로그램 설치
설치 후 실행해두세요 (백그라운드에서 돌아가야 해요)

② Figma-Context-MCP GitHub 연결

GitHub에서 Figma-Context-MCP 프로젝트 열기
figma.context.json 또는 config.json 파일 안에 있는 설정을 복사

{
  "name": "Figma Developer MCP",
  "type": "figma",
  "entryPoint": "https://raw.githubusercontent.com/GLips/Figma-Context-MCP/main/index.json",
  "apiKey": "YOUR_FIGMA_API_KEY"
}

③ Claude MCP 설정 편집하기

Claude를 실행하고 → 설정(Settings) → 개발자(Developers) → 설정 편집(Edit Configuration) 클릭
.claude_desktop_config.json 또는 비슷한 설정파일이 열릴 거예요
위에서 복사한 JSON을 복사해 넣고, "apiKey": "여러분의 Figma API Key"를 입력
저장하고 Claude를 재실행해야 적용됩니다

④ Figma API 키 발급받기 (매우 중요!)

https://www.figma.com 에 로그인
프로필 → Settings → Security 탭
“Generate personal access token” 클릭
이름 입력 (FigmaClaudeKey 등) → Read/Write 권한 부여 → 생성된 키 복사
이 키를 위의 설정 파일에서 "apiKey" 자리에 넣습니다

🚀 사용 방법 (실전 예시)

1. Figma에서 디자인 링크 복사

원하는 페이지/프레임 선택 (예: ‘홈페이지 디자인’)
마우스 우클릭 → Copy/Paste as → Copy Link to Selection 클릭
Figma 내부의 해당 UI 레이어 링크가 복사됨

2. Claude에 지시 (프롬프트 입력 예시)

아래 Figma 디자인 링크의 디자인을 HTML과 CSS 코드로 변환해 주세요:

[복사한 피그마 링크 붙여넣기]

Claude가 자동 응답:

Claude가 MCP를 통해 Figma에 접속
디자인 구조, 텍스트, 위치 등을 분석
헤더/푸터/버튼 등 HTML 구조 생성
CSS (Tailwind 가능) 스타일링 자동 생성

📝 긴 코드 출력 시 "계속하기" 필요

Claude가 생성할 수 있는 텍스트량이 제한되어 있기 때문에, 중간에 멈추면 다음처럼 입력하세요:

계속하기

Claude가 중단된 부분부터 이어서 코드를 생성합니다.

📦 결과물

완성된 HTML/CSS 파일 다운로드 가능
브라우저에서 열면 Figma 디자인과 유사한 레이아웃의 웹페이지가 뜸

🧪 캡처 vs MCP 방식 비교 요약

비교 항목	캡처 이미지 넣기	MCP 설치 후 Figma 직접 연결
정확도	구조가 흐트러짐, 섹션 순서 오류	거의 90% 이상 구조 그대로
이미지 인식	흐림, 배치 오류	정확한 위치, 텍스트 변환
실무 활용성	낮음 (실제 코딩 필요)	높음 (거의 바로 사용 가능)
Claude 연동성	약함	강력 (클릭만으로 변환)

🎁 결론: Claude + MCP = 개발자 생산성 폭발

✅ Figma → Claude 직접 연결 가능
✅ HTML/CSS 코드 자동 생성
✅ MCP 서버 설치 한 번이면 무한 재사용 가능
✅ 실무에서 디자이너 없이도 빠르게 UI 개발 가능

✅ 1. 실제 실행 화면 따라 하기 (스크린 캡처 기반)

📌 Step-by-Step 요약

💻 [1] Claude 데스크탑 MCP 설치 후 실행

MCP 클라우드 실행 → Claude 앱 오른쪽 상단 ‘설정’ → 개발자 → 설정 편집
.claude_desktop_config.json 열림 → MCP 서버 추가 (figma.context.json 참고)

🧷 [2] Figma에서 링크 가져오기

Figma 파일 열기 → 원하는 Frame 선택 → 우클릭 → Copy Link to Selection

🧠 [3] Claude에 프롬프트 입력

아래 Figma 디자인을 HTML과 Tailwind CSS로 코딩해줘.

[링크 붙여넣기]

🧩 [4] Claude가 코드를 자동 생성

MCP 서버가 작동하면서 Claude가 Figma 디자인 구조를 분석
HTML 구조 + Tailwind CSS 스타일 자동 출력
길이 제한에 걸릴 경우 계속하기 입력해서 마저 받기

🌐 [5] 결과 다운로드 및 확인

Claude가 .zip 형태로 HTML/CSS 파일 제공
브라우저에서 열면 원본 디자인에 매우 유사한 웹 UI 확인 가능

🧠 2. Claude 프롬프트 템플릿 모음

🔹 기본 HTML/CSS

아래 Figma 디자인을 HTML + CSS 코드로 제작해줘.
모바일 반응형까지 고려해서 만들어줘.

[피그마 링크]

🔹 Tailwind CSS 스타일 적용

아래 Figma 디자인을 Tailwind CSS로 스타일링된 HTML로 바꿔줘.
컴포넌트별로 div를 분리해서 구조를 잘 나눠줘.

[피그마 링크]

🔹 React 컴포넌트로 변환

아래 Figma 디자인을 기반으로 React 컴포넌트 구조로 만들어줘.
Styled Components를 사용하지 말고 Tailwind CSS로 스타일링해줘.

[피그마 링크]

🔹 섹션별 분리 요청

피그마 디자인을 기준으로,
Header, Hero, Feature, Footer 섹션을 나눠서 HTML 구조와 Tailwind 스타일로 만들어줘.

🔹 다국어 지원 고려

다국어 웹사이트로 만들 예정이야.
텍스트는 모두 i18n 키로 대체해줘. 예: `t("home.title")` 이런 식으로

🎨 3. Tailwind CSS 스타일 자동 생성 옵션

Claude에게 Tailwind CSS로 변환 요청 시 다음처럼 더 구체화할 수 있어요.

옵션	프롬프트 예시
컬러 변수화	`Tailwind config에 커스텀 색상 사용해줘. 예: primary, secondary`
반응형 디자인	`모바일 우선 디자인으로 Tailwind의 sm, md, lg breakpoint 활용해줘`
다크모드 지원	`Tailwind의 dark: 클래스도 함께 사용해서 다크모드 지원하게 해줘`
hover/focus 상태	`버튼에 hover와 focus 스타일도 적용해줘`

예시 출력:

<button class="bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-md">
  시작하기
</button>

⚛️ 4. React 컴포넌트로 확장 예시

예시: `HeroSection.jsx`

const HeroSection = () => {
  return (
    <section className="bg-white py-20 text-center">
      <h1 className="text-4xl font-bold mb-4">
        혁신적인 웹사이트를 지금 만드세요
      </h1>
      <p className="text-lg text-gray-600 mb-6">
        빠르게 구축되고, 반응형이며, 모던한 디자인입니다.
      </p>
      <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700">
        시작하기
      </button>
    </section>
  );
};

export default HeroSection;

🔗 Tailwind Config 확장 (선택사항)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#007AFF',
        'primary-dark': '#005ecb',
      },
    },
  },
};

📦 보너스: Claude가 자동 생성한 코드 활용 팁

항목	설명
🎨 디자인 피드백	Claude가 만든 코드로 빠르게 웹 시안 확인 후 디자이너와 피드백 주고받기
💼 포트폴리오	Figma 디자인만 있으면 3분 만에 HTML 데모 완성 가능
🧱 컴포넌트 추출	각 섹션(헤더, 푸터 등)을 분리해 재사용 가능
🔧 개발 생산성	프론트 개발자가 컴포넌트 스타일까지 80%는 자동화 가능

필요하시면 Claude가 생성한 HTML을 Storybook 구성이나 Next.js 프로젝트로 연결하는 방법도 안내해드릴 수 있어요!

어떤 방향으로 확장해보고 싶으신가요? 😊
Figma 링크, 혹은 Claude 화면 캡처 보내주시면 실전 예시도 완성해드릴게요!

moon.kick

@mgkick

이전 포스트

Figma

다음 포스트

MCP

🌐 개요

🧰 사전 준비물 (필수 설치 목록)

🛠 설치 및 설정 순서 (정말 쉬운 단계별 설명)

① MCP 클라우드 데스크탑 설치

② Figma-Context-MCP GitHub 연결

③ Claude MCP 설정 편집하기

④ Figma API 키 발급받기 (매우 중요!)

🚀 사용 방법 (실전 예시)

1. Figma에서 디자인 링크 복사

2. Claude에 지시 (프롬프트 입력 예시)

Claude가 자동 응답:

📝 긴 코드 출력 시 "계속하기" 필요

📦 결과물

🧪 캡처 vs MCP 방식 비교 요약

🎁 결론: Claude + MCP = 개발자 생산성 폭발

✅ 1. 실제 실행 화면 따라 하기 (스크린 캡처 기반)

📌 Step-by-Step 요약

💻 [1] Claude 데스크탑 MCP 설치 후 실행

🧷 [2] Figma에서 링크 가져오기

🧠 [3] Claude에 프롬프트 입력

🧩 [4] Claude가 코드를 자동 생성

🌐 [5] 결과 다운로드 및 확인

🧠 2. Claude 프롬프트 템플릿 모음

🔹 기본 HTML/CSS

🔹 Tailwind CSS 스타일 적용

🔹 React 컴포넌트로 변환

🔹 섹션별 분리 요청

🔹 다국어 지원 고려

🎨 3. Tailwind CSS 스타일 자동 생성 옵션

예시 출력:

⚛️ 4. React 컴포넌트로 확장 예시

예시: `HeroSection.jsx`

🔗 Tailwind Config 확장 (선택사항)

📦 보너스: Claude가 자동 생성한 코드 활용 팁

Figma

신상품 출시 알림 서비스/ 커뮤니티 서비스

0개의 댓글

MCP

🌐 개요

🧰 사전 준비물 (필수 설치 목록)

🛠 설치 및 설정 순서 (정말 쉬운 단계별 설명)

① MCP 클라우드 데스크탑 설치

② Figma-Context-MCP GitHub 연결

③ Claude MCP 설정 편집하기

④ Figma API 키 발급받기 (매우 중요!)

🚀 사용 방법 (실전 예시)

1. Figma에서 디자인 링크 복사

2. Claude에 지시 (프롬프트 입력 예시)

Claude가 자동 응답:

📝 긴 코드 출력 시 "계속하기" 필요

📦 결과물

🧪 캡처 vs MCP 방식 비교 요약

🎁 결론: Claude + MCP = 개발자 생산성 폭발

✅ 1. 실제 실행 화면 따라 하기 (스크린 캡처 기반)

📌 Step-by-Step 요약

💻 [1] Claude 데스크탑 MCP 설치 후 실행

🧷 [2] Figma에서 링크 가져오기

🧠 [3] Claude에 프롬프트 입력

🧩 [4] Claude가 코드를 자동 생성

🌐 [5] 결과 다운로드 및 확인

🧠 2. Claude 프롬프트 템플릿 모음

🔹 기본 HTML/CSS

🔹 Tailwind CSS 스타일 적용

🔹 React 컴포넌트로 변환

🔹 섹션별 분리 요청

🔹 다국어 지원 고려

🎨 3. Tailwind CSS 스타일 자동 생성 옵션

예시 출력:

⚛️ 4. React 컴포넌트로 확장 예시

예시: HeroSection.jsx

🔗 Tailwind Config 확장 (선택사항)

📦 보너스: Claude가 자동 생성한 코드 활용 팁

Figma

신상품 출시 알림 서비스/ 커뮤니티 서비스

0개의 댓글

예시: `HeroSection.jsx`