Week 02 · Skill·MCP · AI 팀 교육 · 2026
2주차 Skill·MCP
디자인 워크플로우
getdesign 같은 사이트에서 design.md를 내려받고, Week1 HTML을 그 기준으로 개선합니다. 이어 기준을 Skill로 전환하고, frontend-slides와 Stitch MCP로 디자인 워크플로우를 확장합니다.
design.mdskill-creatorfrontend-slidesStitch MCP
SPACE · → · 화면 우측 클릭 — 디자인 기준을 만들고 반복 가능한 도구로 확장
Week1 → Week2 연결
오늘의 목표는 design.md → Skill → MCP 워크플로우입니다
먼저 getdesign 같은 사이트에서 design.md를 내려받고, 그 기준으로 Week1 결과물을 개선합니다. 다음으로 skill-creator를 설치해 SKILL.md 구조를 읽고, frontend-slides Skill을 적용해 발표자료 품질을 보정합니다.
PART 01
design.md 확보·적용
getdesign → Week1 HTML
PART 02
skill-creator
설치·SKILL.md 읽기
PART 03
frontend-slides
발표자료 품질 보정
PART 04
Stitch MCP
앱 화면 디자인 요청
Skill·MCP 학습 구조
Claude Code 작업 환경은 Skill과 MCP로 확장됩니다
1기 Week 04의 Skill·MCP 구조를 이어받습니다. Skill은 작업 기준을 재사용하게 하고, MCP는 외부 도구와 데이터를 실행 환경에 연결합니다.
📘
Skill
발표자료 톤, design.md 기준, 검증 순서처럼 작업 기준과 절차를 정의합니다.
🔌
MCP
Stitch, Figma, GitHub 같은 외부 도구와 데이터를 표준 인터페이스로 연결합니다.
오늘의 흐름은 PART 01 design.md 적용 → PART 02 skill-creator/SKILL.md 구조 → PART 03 frontend-slides → PART 04 MCP 연결로 이어집니다.
PART 01
design.md 기반 디자인 개선
먼저 design.md를 확보한 뒤, 명시된 디자인 기준으로 개선합니다
디자인 개선 · 1.1 · design.md 확보
먼저 getdesign.md에서 design.md를 내려받습니다
Claude Code에 디자인을 맡기기 전에 기준 파일을 먼저 준비합니다. 아래 사이트에서 원하는 디자인 시스템의 DESIGN.md를 내려받아 프로젝트 폴더에 저장합니다.
풀링크
https://getdesign.md/
1
사이트에서 원하는 브랜드/디자인 시스템을 고릅니다.
2
해당 항목의 DESIGN.md 내용을 복사하거나 내려받습니다.
3
파일명을 design.md로 저장하고 Week1 HTML과 같은 폴더에 둡니다.
week1-output/
├─ slides.html
└─ design.md # getdesign.md에서 확보
사이트 디자인 캡처
화면의 디자인 카탈로그에서 기준을 고르고, 그 기준을 Claude Code가 읽을 수 있는 design.md로 가져옵니다.
디자인 개선 · 1.2 · 기준 파일
design.md는 디자인 기준 문서입니다
design.md에는 청중, 톤, 레이아웃, 색상, 금지사항을 명시합니다. Claude Code는 이 기준을 바탕으로 기존 HTML을 개선합니다.
❌ 프롬프트만 사용한 경우
Week1 HTML을 발표용으로 개선해 주세요.
→ 기준이 부족하면 시각 스타일과 정보 구조가 흔들림
✅ design.md를 넣은 경우
design.md를 먼저 읽고, 기존 내용은 유지한 채 발표용 HTML로 개선해 주세요.
→ 목적, 청중, 톤이 반영된 디자인 개선
디자인 개선 · 1.3 · 🛠 실습 — design.md 적용
다운받은 design.md를 Week1 HTML에 적용합니다
design.md
# Design Direction
청중: AI가 낯선 디자이너/기획자
톤: 전문적이지만 쉽게. 전문 용어는 그대로 사용
레이아웃: 16:9 슬라이드, 큰 제목, 카드형 비교
색: 흰 배경 + 선명한 포인트 컬러 1개
금지: 보라색 그라데이션, Inter 남발, 작은 글씨
확인: 글자 잘림 없음, ← → 키 이동, HTML 하나로 공유
Claude Code · 채팅창
> 현재 slides.html은 지난주 결과물입니다.
> 첨부한 design.md를 먼저 읽고, 내용과 순서는 유지한 채 발표용으로 디자인을 개선해 주세요.
> 글자 잘림, 버튼 이동, ← → 키 이동까지 확인해 주세요.
핵심은 기존 결과물의 메시지와 구조를 유지하는 것입니다. 새로 만들지 않고 기준에 맞춰 개선합니다.
디자인 개선 · 1.4 · 확인 기준
개선 결과는 검증 기준으로 확인합니다
이 기준은 이후 Skill 작성과 MCP 실습에서도 동일하게 사용합니다.
PART 02
skill-creator와
SKILL.md 구조 이해
설치 → SKILL.md 읽기 → 구조 설명 순서로 Skill을 이해합니다
SKILL · 2.1 · 정의
Skill = Claude Code에 제공하는 재사용 작업 기준
Skill은 Claude Code가 특정 작업에서 참고할 기준, 절차, 예시, 검증 방법을 담는 패키지입니다. 오늘은 skill-creator의 SKILL.md를 직접 읽으며 구조를 이해합니다.
📁
Skill은 폴더 단위로 구성
SKILL.md, references, scripts, 예시 파일을 함께 관리합니다.
🏷️
name과 description이 activation 조건을 정의
Claude Code는 name과 description을 보고 Skill 적용 여부를 판단합니다.
📖
SKILL.md는 실행 기준을 정의
관련 작업에서는 SKILL.md와 필요한 reference를 읽고 실행합니다.
SKILL · 2.2 · 잘 만드는 법
Skill 작성 시 무엇을 정의해야 하나
좋은 Skill은 단순 명령 목록이 아니라 재사용 가능한 작업 기준입니다. 적용 조건, 판단 기준, 실행 절차, 검증 기준을 함께 정의하고, design.md의 색상·레이아웃·톤을 이 구조 안에 배치합니다.
1
description은 구체적으로
작업 상황과 산출물 유형을 명시해 activation 조건을 분명히 합니다.
2
본문은 짧게, 길면 reference로
핵심 절차는 SKILL.md에 두고, 상세 자료는 references로 분리합니다.
3
예시와 테스트 프롬프트
Input → Output 예시와 검증 기준으로 결과를 안정화합니다.
1기 예시 — 같은 규칙, 두 가지 표현
❌ 명령만
NEVER use purple gradients.
→ 특정 스타일만 피하고 전체 품질 기준은 남지 않음
✅ 이유와 기준까지 설명
보라색 그라데이션은 흔한 AI 생성물처럼 보일 수 있어 신뢰도를 낮춥니다. 색상은 목적과 청중에 맞춰 선택합니다.
→ 유사한 스타일 오류까지 줄일 수 있음
PART 02 · 2.3 · skill-creator 설치
Claude Code에서 skill-creator를 먼저 설치합니다
12페이지부터는 “Skill을 만든다”가 아니라, 실제 Skill 하나를 설치하고 그 안의 SKILL.md를 읽으며 구조를 이해하는 흐름으로 진행합니다.
Claude Code · /plugin 설치
# 1) 공식 플러그인 마켓플레이스 추가
/plugin marketplace add anthropics/claude-plugins-official
# 2) skill-creator 설치
/plugin install skill-creator@claude-plugins-official
# 3) 설치 후 실행
/skill-creator
핵심은 git clone으로 복사하는 것이 아니라, Claude Code 안에서 /plugin 명령으로 공식 Skill을 설치하는 것입니다.
설치 후 확인할 것
마켓
anthropics/claude-plugins-official
명령
/plugin install skill-creator@claude-plugins-official
파일
설치된 skill-creator/SKILL.md 위치를 Claude Code에 물어봅니다.
> 방금 설치한 skill-creator의 SKILL.md 파일 위치를 알려 주세요.
> 그 파일을 열어서 name, description, 본문 구조를 보여 주세요.
PART 02 · 2.4 · SKILL.md 읽기와 구조 설명
설치한 skill-creator/SKILL.md를 읽고 구조를 해석합니다
13·14페이지 내용을 한 장으로 합쳤습니다. 먼저 실제 SKILL.md를 열고, 이어서 모든 Skill이 공유하는 metadata, 본문, resources 구조를 설명합니다.
Claude Code · 읽기 요청
> 방금 설치한 skill-creator의 SKILL.md를 열어 주세요.
> 이 Skill의 name, description, 본문 섹션을 보여 주세요.
> 어떤 순서로 Skill을 만들도록 안내하는지 5줄 이내로 설명해 주세요.
skill-creator/SKILL.md 핵심
---
name: skill-creator
description: Create new skills, modify and improve existing skills...
---
## Creating a Skill
Capture intent → Interview → Write SKILL.md → Test → Package
team-slide-design/
├─ SKILL.md # 필수
│ ├─ YAML frontmatter # name / description
│ └─ Markdown instructions # 실행 기준
├─ references/ # 긴 기준 문서
├─ scripts/ # 반복 검증 자동화
└─ assets/ # 템플릿·예시 파일
1
name은 Skill의 식별자입니다. 짧고 파일명처럼 씁니다.
2
description은 발동 조건입니다. Claude가 언제 이 Skill을 쓸지 판단합니다.
3
본문은 실행 절차입니다. 판단 기준, 단계, 예외, 검증 방법을 씁니다.
4
resources는 필요할 때만 읽는 상세 자료입니다. 긴 design.md는 reference로 분리할 수 있습니다.
PART 03
frontend-slides Skill
적용하기
PART 02에서 이해한 Skill 구조를 바탕으로 frontend-slides를 적용해 발표자료 품질을 보정합니다
PART 03 · frontend-slides · 품질 보정
frontend-slides로 디자인 품질을 보정합니다
이 Skill은 발표자료 제작·보정용 GitHub 저장소에서 설치합니다. 먼저 저장소 링크를 확인한 뒤 Claude Code의 /plugin으로 marketplace를 추가합니다.
GitHub 원본 링크
# 1) 마켓플레이스 소스 추가
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
# 2) Skill 설치
/plugin install frontend-slides@frontend-slides
# 3) 실행
/frontend-slides:frontend-slides
요청 문장
> 첨부한 design.md와 PART 02에서 살펴본 SKILL.md 구조를 기준으로 현재 slides.html을 개선해 주세요.
> 이어서 frontend-slides의 원칙을 적용해 16:9 HTML 발표자료로 품질을 보정해 주세요.
> overflow, keyboard navigation, one-file delivery를 확인해 주세요.
왜
발표자료 전용 Skill이라 16:9 stage, 시각 위계, overflow 검증 기준을 갖고 있습니다.
확인
설치 전 링크가 맞는지 보고, 설치 후 적용 결과를 브라우저에서 직접 검증합니다.
PART 04
MCP로 외부 도구 연결하기
Skill로 작업 기준을 정리했다면, 이제 MCP로 외부 도구를 연결합니다
MCP · 3.1 · 정의
MCP = 외부 도구 연결을 위한 표준 프로토콜
Model Context Protocol은 Claude Code가 외부 도구, 데이터, 서비스에 접근하기 위한 표준 인터페이스입니다. Skill이 작업 기준을 정의한다면, MCP는 실행 가능한 도구 연결을 제공합니다.
🧠
Claude
요청을 이해하고 필요한 도구를 고릅니다.
⇄
🔌
MCP 서버
도구 name·description·inputSchema를 제공합니다.
⇄
🎨
외부 서비스
Stitch·Figma·GitHub·DB 같은 실제 데이터입니다.
MCP · 3.2 · 뜯어보기
MCP 도구는 description과 inputSchema로 이해합니다
Skill에서 name과 description을 읽듯이, MCP에서는 도구의 description과 inputSchema를 읽어 “언제 쓰는 도구인지”와 “무엇을 입력해야 하는지”를 판단합니다.
// MCP Tool 정의의 핵심 구조
name: create_screen_design
description: 앱 화면 요구사항을 받아 Stitch에서 디자인 초안을 만든다
inputSchema: {
type: "object",
properties: {
appName: "어떤 앱인가",
screenName: "어떤 화면인가",
requirements: "무엇을 보여줘야 하나"
},
required: ["appName", "screenName", "requirements"]
}
1
name은 도구의 식별자입니다. Claude Code가 어떤 도구를 부를지 구분합니다.
2
description은 도구 선택 조건입니다. Skill의 description처럼 “언제 이 도구를 써야 하는지”를 설명합니다.
3
inputSchema는 필요한 입력값의 구조입니다. 앱 이름, 화면 이름, 요구사항처럼 비워 두면 안 되는 항목을 정의합니다.
주의
run은 MCP Tool 정의의 필수 용어가 아닙니다. 실제 실행 코드는 MCP 서버 내부 구현으로 다룹니다.
MCP · 3.3 · 작동 구조
MCP 작동 구조 — 요청, 도구 선택, 결과 활용
① 사용자가 요청
“이 앱 화면 디자인해줘”
Claude가 의도를 해석
② MCP 도구 선택
Stitch tool 호출
입력값을 맞춰 전달
③ 외부 결과 사용
디자인 초안/코드화
다시 Claude 작업으로 연결
SKILL vs MCP · 3.4 · 결정적 차이
Skill은 작업 기준, MCP는 도구 연결입니다
📘
SKILL
Claude Code가 따라야 할 작업 기준을 정의합니다. 발표자료 톤, 디자인 기준, 검증 방식을 포함합니다.
🔌
MCP
Claude Code가 외부 도구를 사용할 수 있게 합니다. Stitch, Figma, GitHub, DB 같은 시스템과 연결됩니다.
정리하면 Skill은 작업 기준을 고정하고, MCP는 외부 디자인 도구를 연결합니다.
MCP · 3.5 · 운영 관점
MCP 사용 시 토큰, 권한, 비밀값을 관리합니다
토큰 = 비용
도구 설명과 결과가 대화에 들어오면 컨텍스트 비용이 생깁니다.
권한은 최소로
읽기만 필요한 도구에 쓰기 권한을 주지 않습니다.
API key는 숨김
키는 환경변수/로컬 설정에만 두고 GitHub·슬라이드·채팅에 노출하지 않습니다.
MCP · 3.6 · Skill vs MCP 최종 비교
Skill은 지식·절차 패키지, MCP는 실행 연결 레이어입니다
공식 MCP 문서, Anthropic Agent Skills 문서, Claude Code Skills 문서를 기준으로 정리한 운영 비교입니다. 둘은 대체재가 아니라 함께 쓰는 계층입니다.
Skill — 어떻게 일할지
의미
`SKILL.md`와 참고 파일·스크립트로 절차, 기준, 조직 지식을 패키징합니다.
토큰 사용량
시작 시 name/description 같은 메타데이터만 가볍게 노출되고, 본문·자료는 필요할 때 단계적으로 읽습니다.
설치 위치
`~/.claude/skills`, `.claude/skills`, plugin skills, Enterprise 관리 설정에 둡니다.
용도
톤, 검증 기준, 반복 워크플로우, “이 도구를 언제·어떻게 쓸지”를 고정합니다.
MCP — 무엇에 연결할지
의미
AI 앱이 외부 도구·데이터·워크플로우에 접속하는 client-server 표준 프로토콜입니다.
토큰 사용량
도구의 name/description/inputSchema와 실행 결과가 모델 판단에 쓰이므로, 도구가 많거나 결과가 길면 컨텍스트 비용이 커집니다.
설치 위치
Claude Code/Desktop/IDE의 MCP client config에 서버를 등록합니다. 서버는 local STDIO 또는 remote HTTP로 동작합니다.
용도
Stitch, Figma, GitHub, DB처럼 실제 외부 시스템을 읽거나 실행할 때 씁니다.
결정 기준: 반복 설명·팀 기준은 Skill로 만들고, 외부 시스템 접속·API 호출·파일/DB 작업은 MCP로 연결합니다. 예: “Stitch 화면을 어떤 품질 기준으로 요청할지”는 Skill, “Stitch에 실제 요청을 보내는 연결”은 MCP입니다. API key는 MCP 설정/환경변수에만 저장합니다.
PART 04 · MCP 실습
Stitch MCP로
앱 화면 디자인
Stitch 설치·활성화 → API key 생성·입력 → 가계부 앱 화면 스크립트 → 결과 확인
Stitch MCP · 4.1 · 설치 화면
먼저 Stitch MCP를 설치·활성화합니다
Stitch MCP는 Claude Code/IDE가 Stitch에 접근할 수 있게 해 주는 연결 지점입니다. 설치 후 Configure 화면에서 API key 입력 상태를 확인합니다.
설치·활성화 순서
1
Claude Code/IDE의 MCP 또는 플러그인 설정 화면에서 Stitch를 찾습니다.
2
Enable 상태로 전환하고 Configure 화면을 엽니다.
3
Stitch API Key 입력칸이 보이면 다음 페이지에서 발급한 key를 넣습니다.
# CLI 기반 설정 예시
npx @_davideast/stitch-mcp init
# 또는 MCP client config에 Stitch 서버를 추가
stitch → configure → Stitch API Key
Stitch MCP Configure 화면
이 화면의 핵심은 Stitch API Key 입력칸입니다. key는 로컬 설정에만 저장합니다.
Stitch MCP · 4.2 · API key 생성 경로
API key는 Stitch 사이트 → 계정관리 → API key에서 만듭니다
Stitch MCP가 디자인을 만들거나 읽으려면 Stitch 계정의 API key가 필요합니다. 실제 key는 한 번만 복사해 안전한 로컬 환경변수나 MCP 설정에 저장합니다.
발급 경로
Stitch 사이트
stitch.withgoogle.com
1
우측 상단 프로필 또는 계정 메뉴에서 Stitch settings를 엽니다.
2
API key 섹션에서 Create key를 누릅니다.
3
생성된 key는 즉시 복사하고, 슬라이드·GitHub·채팅에는 남기지 않습니다.
# 예시 — 실제 key 대신 ***만 표시
STITCH_API_KEY="***"
# MCP HTTP header 예시
X-Goog-Api-Key: ***
API key 생성 화면 예시
화면의 Create key 버튼으로 key를 만들고, 노출된 key는 수업 자료에 기록하지 않습니다.
Stitch MCP · 4.3 · 🛠 실습 — 앱 화면 스크립트
교육 포털이 아니라 진짜 만들 앱 화면을 요청합니다
예시는 “가계부 앱 메인 화면”입니다. 앱 이름, 화면, 사용자, 필수 정보, 상태, 금지사항을 지정해야 Stitch가 실제 제품에 가까운 초안을 만듭니다.
요청 설계
정보
수입·지출·잔액, 카테고리별 지출, 최근 거래, 예산 초과 경고
액션
새 지출 추가, 거래 상세 보기, 예산 조정
보안
실제 계좌번호, 개인명, API key는 포함하지 않기
> Stitch MCP를 사용해서 개인 가계부 앱 Moni의 월간 메인 화면을 디자인해 주세요.
> 사용자는 매일 1분 안에 지출 상태를 확인하고 싶은 직장인입니다. 화면에는 이번 달 수입, 지출, 잔액, 카테고리별 지출 비율, 최근 거래 3개, 예산 초과 경고, + 지출 추가 CTA가 보여야 합니다.
> 모바일 우선 레이아웃으로 만들고, 신뢰감 있는 파란색 계열을 사용해 주세요. 금액은 더미 데이터로 표시하고 실제 계좌번호, 개인정보, API key는 절대 넣지 마세요.
> 결과는 개발자가 바로 구현할 수 있도록 주요 컴포넌트와 상태를 구분해 주세요.
Stitch MCP · 4.4 · 결과 화면 예시
요청이 구체적이면 가계부 앱 메인 화면처럼 나옵니다
결과 화면은 “예쁜 화면”만 보는 것이 아니라, 필수 정보가 배치되었는지와 구현 요청으로 넘길 수 있는지까지 확인합니다.
확인 기준: 월간 요약 · 카테고리 지출 · 최근 거래 · CTA · 개인정보/API key 미노출
Stitch MCP · 4.5 · 디자인 → 코드화
Stitch 결과는 Claude Code 구현 요청으로 이어집니다
① Stitch에게 요청
가계부 앱처럼 실제 만들고 싶은 앱, 화면, 사용자, 상태를 지정해 디자인 초안을 생성합니다. 이 단계에서 MCP는 외부 디자인 도구와의 연결을 담당합니다.
② Claude Code에게 구현
> 방금 Stitch가 만든 가계부 메인 화면을 기준으로
React/Tailwind 컴포넌트로 구현해 주세요.
월간 요약, 카테고리 그래프, 최근 거래, CTA, 모바일 대응을 포함해 주세요.
정리하면 design.md는 디자인 기준, Skill은 재사용 가능한 작업 기준, MCP는 외부 도구 연결입니다.
Stitch MCP · 4.6 · 성공 기준
오늘의 완료 기준
✅ 성공 체크리스트
1
design.md로 기존 결과물을 개선했다.
2
skill-creator를 /plugin으로 설치하고 SKILL.md 구조를 읽었다.
3
frontend-slides Skill로 발표자료 품질을 보정했다.
4
Stitch 설치, API key 생성·입력, 가계부 앱 메인 화면 요청과 결과 확인까지 설명할 수 있다.
🧯 안 될 때 먼저 확인
설치
Stitch MCP가 Enabled 상태인지, Configure 화면에 API key 입력칸이 있는지 확인합니다.
키
API key 앞뒤 공백, 복사 누락, 만료 여부를 확인합니다.
보안
실제 key를 문서·GitHub·채팅·화면 공유에 올리지 않습니다.
Week 02 마무리 · Week 03 준비
Week 02 Recap: Skill·MCP 기반 디자인 워크플로우
Week 02 Recap
디자인
getdesign 같은 사이트에서 design.md를 내려받고, Week1 HTML에 적용했습니다.
Skill
skill-creator를 설치하고 SKILL.md 구조를 읽은 뒤, frontend-slides로 품질 보정했습니다.
MCP
Stitch MCP로 특정 앱 화면을 외부 도구에 요청하는 흐름을 익혔습니다.
Week 03 Preview
파일
개선한 HTML, design.md, 참고한 SKILL.md 구조 메모를 정리해 둡니다.
GitHub
다음 주에는 결과물을 GitHub로 버전 관리하고, 변경 이력을 추적합니다.
목표
결과물을 공유 가능한 URL과 변경 기록으로 남깁니다.
Next Week — GitHub로 작업물 관리하고 공개 URL로 공유하기
