# Vibe Coding 프롬프트 모음

각 장별로 프롬프트를 복사하여 바로 사용할 수 있습니다.

---

## 📖 목차

- [01장: 나의 첫 바이브 코딩](#01장-나의-첫-바이브-코딩)
- [02장: 효과적인 프롬프트로 성능 200% 활용하기](#02장-효과적인-프롬프트로-성능-200-활용하기)
- [03장: 클로드 코드 시작하기](#03장-클로드-코드-시작하기-터미널에서-만드는-첫-프로그램)
- [04장: 할 일 관리 앱 만들기](#04장-할-일-관리-앱-만들기-클로드-코드-실전-활용)
- [05장: 미니 게임 제작으로 배우는 고급 활용](#05장-미니-게임-제작으로-배우는-클로드-코드-고급-활용)
- [06장: 클로드 코드에 API 날개 달기](#06장-클로드-코드에-api-날개-달기)
- [07장: AI 에이전트로 개발팀 구성하기](#07장-클로드-코드-ai-에이전트로-개발팀-구성하기)
- [08장: MCP로 클로드 코드의 한계 넘어서기](#08장-mcp로-클로드-코드의-한계-넘어서기)

---

## 첫째 마당 | AI와 코딩의 만남

### 01장: 나의 첫 바이브 코딩

#### 01-2: AI로 나만의 첫 웹페이지 만들기

```
오늘의 날씨와 주요 뉴스를 보여 주는 나만의 시작 홈페이지를 만들고 싶어
```

```
밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘. 기술 관련 뉴스를 보여 줘.
```

```
이 계획대로 시작해 줘.
```

```
구글 스타일로 디자인을 수정해 줘.
```

```
오늘의 할 일 목록을 추가해 줘.
```

```
[현재 시간], [오늘의 할 일], [오늘의 날씨], [최신 기술 뉴스] 아이템을 한 열에 두 개씩 배치하고, 메모지 안에 각각 들어 있는 디자인으로 수정해 줘.
```

---

### 02장: 효과적인 프롬프트로 성능 200% 활용하기

#### 02-1: PRD 작성하기

```
포트폴리오 웹페이지를 만들려고 해.
주요 기능은 채용 담당자가 30초 안에 내 역량을 파악할 수 있는 임팩트 있는 구성이야.
프리랜서 전환을 준비하는 마케터를 위한 것이고,
경쟁력 있는 지원자로 보이기 위해 필요해.
어떻게 구현하면 좋을지 기술적인 방향과 함께 구체적인 PRD를 작성해 줘.
```

#### 02-2: 포트폴리오 웹사이트 제작

```
이 PRD대로 진행할 거야. 먼저 PRD를 기반으로 HTML 문서를 작성해 줘.
섹션을 나누고, 수정을 대비해 각 섹션에 고유한 이름을 붙여 줘.
아직 기능은 구현하지 말고, 전체 구조만 보여 줘.
```

```
performance-metrics 섹션의 [프로젝트 수] 항목은 지난 3년 간의 성과를 구체적으로 나열한 리스트로 수정해 줘.
```

```
HTML 문서에 모던하고 세련된 디자인을 적용해 줘.
```

```
case-studies 섹션에 있는 [Before/After 지표]를 hero-introduction 섹션으로 옮기고 차트로 표현해 줘.
```

```
나의 경력 포트폴리오는 다음과 같아. 섹션별로 다음 내용을 참고해서 업데이트해 줘.
나는 3년차, 퍼포먼스/콘텐츠 마케팅 전문가야.
- 핵심 성과: ROAS 200%, 25개 캠페인, 연 8억 매출 기여한 거고,
- 3년간 포지션 변화: 주니어(2023) → 퍼포먼스 마케터(2024) → 매니저+자문(2025)
- 스킬 레벨: 퍼포먼스 마케팅: 75%, 콘텐츠 마케팅: 70%, 데이터 분석 (GA4): 65%
다음은 나의 대표 케이스 스터디 이력이야.
- 이커머스: 월 광고비 1천만원, ROAS 200%
- 스타트업: 인스타 팔로워 2천→8천(6개월) 증가
- 로컬 브랜드: 블로그 방문자 500→3천(4개월) 증가
```

```
워드프레스 테마 중에서 이 포트폴리오와 가장 잘 어울리는 것을 하나 선택해서 디자인을 수정해 줘. 섹션별로 색상 톤을 달리 해서 구분이 잘 되게 해 줘.
```

```
포트폴리오 웹페이지의 모든 부분이 잘 만들어졌는지 검토해 줘. PRD대로 제작되었는지, 각 링크가 문제없이 작동하는지 확인해.
```

```
발견된 개선점 3가지를 보완 및 수정하고, 완벽한 프리랜서 전환용 포트폴리오를 완성해.
```

---

## 둘째 마당 | 클로드 코드와 함께하는 실전 코딩

### 03장: 클로드 코드 시작하기: 터미널에서 만드는 첫 프로그램

#### 03-2: 손글씨 숫자 인식 프로그램

```
손글씨로 숫자를 입력하면 이것을 인식하는 코드를 만들어서 실행해 줘. 모든 코드와 주석을 영어로 작성해 줘.
```

```
숫자 인식 프로그램을 윈도우 탐색기에서 클릭해서 실행할 수 있게 해 줘.
```

#### 03-3: 프로젝트 분리 및 커스터마이징

```
# 앞으로 만드는 모든 파일은 날짜와 시간을 주석으로 표시해 줘.
```

```
손글씨 인식 프로그램을 웹 버전과 데스크톱 버전으로 나누어 개발하고 싶어. web_version과 desktop_version 폴더를 만들고, 각 폴더에 해당하는 CLAUDE.md 파일도 생성해 줘.
```

---

### 04장: 클로드 코드 실전 활용
#### 04-1 단계별 프롬프트와 함께 클로드 코드 명령어 익히기
#### PRD 작성 요청

```
할 일 관리 앱을 만들고 싶어. PRD를 작성해줘.
매일 10-20개 정도의 할 일을 관리하는 개인용 앱이야.
주요 기능은:
- 할 일 추가, 수정, 삭제
- 완료 체크 기능
- 카테고리 분류 (업무/개인/공부)
- 진행률 보기
브라우저에서 바로 실행되고, 새로고침해도 데이터가 사라지지 않았으면 좋겠어.
기술적으로 복잡하지 않게 순수 자바스크립트로 만들고 싶어.
```

#### 단계별 프롬프트 생성

```
이 PRD를 클로드 코드에서 사용할 단계별 프롬프트로 변환해 줘.
5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘.
```

#### Step 1: 기본 구조 및 핵심 기능 구현

```
할 일 관리 앱의 기본 구조를 만들어줘.

요구사항:
1. index.html, style.css, script.js 세 개의 파일로 구성
2. HTML 구조:
   - 앱 제목 "My Tasks"
   - 할 일 입력창 (input + 추가 버튼)
   - 할 일 목록을 표시할 컨테이너
3. JavaScript 기능:
   - 할 일 추가 (Enter 키와 버튼 클릭 모두 지원)
   - 할 일 삭제 (각 항목에 X 버튼)
   - 체크박스로 완료/미완료 토글
   - 완료 시 취소선 스타일 적용
4. localStorage에 데이터 저장:
   - 추가/삭제/완료 상태 변경 시 자동 저장
   - 페이지 새로고침 시 데이터 유지
5. 기본 CSS 스타일링:
   - 깔끔한 카드 형태의 레이아웃
   - 중앙 정렬, 최대 너비 600px
   - 호버 효과와 트랜지션

각 할 일은 { id, text, completed, createdAt } 구조로 저장해줘.
```

#### Step 2: 카테고리 기능 및 UI 개선

```
기존 코드에 카테고리 기능을 추가하고 UI를 개선해줘.

요구사항:
1. 카테고리 기능:
   - 3가지 카테고리: 업무(work), 개인(personal), 공부(study)
   - 할 일 추가 시 카테고리 선택 드롭다운
   - 각 할 일 항목에 카테고리 색상 태그 표시
   - 카테고리 필터 버튼 (전체/업무/개인/공부)
2. UI 개선:
   - 카테고리별 색상: 업무(파란색 #4A90E2), 개인(초록색 #27AE60), 공부(보라색 #8E44AD)
   - 필터 버튼을 상단에 배치
   - 선택된 필터 버튼 강조 표시
   - 할 일 항목에 생성 시간 표시 (예: "2시간 전")
3. 데이터 구조 업데이트:
   - category 필드 추가
   - 필터 상태도 localStorage에 저장

완료된 항목은 목록 하단으로 자동 정렬되도록 구현해줘.
```

#### Step 3: 진행률 대시보드 추가

```
진행률 대시보드를 추가하고 인라인 수정 기능을 구현해줘.

요구사항:
1. 진행률 대시보드:
   - 앱 상단에 통계 섹션 추가
   - 전체 진행률: "5/10 완료 (50%)" 형식 + 프로그레스 바
   - 카테고리별 미니 진행률 표시 (각 카테고리 완료/전체)
   - 오늘 추가된 할 일 개수 표시
2. 인라인 수정 기능:
   - 할 일 텍스트 더블클릭 시 편집 모드
   - input 필드로 변경되어 수정 가능
   - Enter로 저장, ESC로 취소
   - 편집 중 카테고리도 변경 가능한 select 박스
3. UI 애니메이션:
   - 진행률 바 부드러운 전환 효과
   - 항목 추가/삭제 시 페이드 애니메이션
   - 완료 체크 시 슬라이드 애니메이션

대시보드는 실시간으로 업데이트되어야 해.
```

#### Step 4: 다크 모드 및 고급 기능

```
다크 모드와 추가 기능들을 구현해줘.

요구사항:
1. 다크 모드:
   - 우측 상단에 다크/라이트 모드 토글 스위치
   - 다크 모드 색상: 배경(#1A1A1A), 카드(#2D2D2D), 텍스트(#E0E0E0)
   - 선택한 테마 localStorage에 저장
   - 부드러운 전환 애니메이션
2. 추가 기능:
   - "완료된 항목 모두 삭제" 버튼 (확인 다이얼로그 포함)
   - 할 일 검색 기능 (실시간 필터링)
   - 남은 할 일 개수 배지 표시
   - 빈 상태 메시지 ("할 일이 없습니다. 추가해보세요!")
3. 키보드 단축키:
   - Alt+N: 새 할 일 입력창 포커스
   - Alt+1,2,3,4: 카테고리 필터 전환
   - Alt+D: 다크 모드 토글
4. 반응형 디자인:
   - 모바일 (max-width: 480px) 최적화
   - 터치 친화적인 버튼 크기

모든 인터랙션에 적절한 피드백을 제공해줘.
```

#### Step 5: 최종 완성 및 최적화

```
앱을 최종 완성하고 사용성을 극대화해줘.

요구사항:
1. 데이터 내보내기/가져오기:
   - JSON 형식으로 데이터 내보내기 버튼
   - 파일 업로드로 데이터 가져오기
   - 가져오기 전 현재 데이터 백업 확인
2. 정렬 옵션:
   - 생성일순, 카테고리순, 완료 상태순 정렬
   - 정렬 상태 저장
   - 드래그 앤 드롭으로 수동 정렬 (sortable)
3. 성능 최적화:
   - 100개 이상 항목에서도 부드러운 성능
   - 디바운싱 적용 (검색, 저장)
   - 효율적인 DOM 조작
4. 접근성 개선:
   - ARIA 레이블 추가
   - 포커스 관리
   - 스크린 리더 지원
5. 추가 개선사항:
   - 할 일 중복 확인 경고
   - 최근 삭제 항목 복구 (Undo) 기능
   - 오늘의 격언 랜덤 표시
   - 완료율에 따른 응원 메시지

모든 엣지 케이스를 처리하고 에러 핸들링을 추가해줘.
코드에 상세한 주석을 달아줘.
```

#### 04-2 작업 재개와 효율성 높이기

```
현재 할 일 관리 앱에 키워드 기반 자동 카테고리 분류 기능을 추가해 줘.
```

#### 04-3 프로젝트 개선과 작업 관리

```
[Image #1] 현재 디자인은 모바일에 최적화되어 있는 것 같아. 데스크톱 환경에서도 전체 화면에서 UI를 볼 수
있도록 디자인을 수정해 줘. 수정한 디자인은 ‘web_version’이라는 새로운 폴더를 생성한 뒤, 그곳에 저장해 줘.
```

```
@script.js 파일에서 다크 모드 관련 함수를 찾고 설명해 줘.
```

```
@web_version 폴더에 있는 파일들을 분석해서 할 일 관리 앱이 데스크톱 환경에 최적화되었는지 확인해 줘.
```

---

### 05장: 미니 게임 제작으로 배우는 클로드 코드 고급 활용

#### 05-1 할루시네이션 없는 AI 콘텐츠 만들기

```
상식 퀴즈 게임을 만들려고 해. PRD를 작성해 줘.
게임 규칙:
- 4지선다 객관식 퀴즈
- 카테고리: 한국사, 과학, 지리, 일반상식 
- 각 카테고리별 10문제씩 총 40문제
- 정답/오답 즉시 피드백
- 최종 점수 및 순위 기록
```

```
상식 퀴즈 게임을 클로드 코드로 구현할 수 있도록 PRD를 바탕으로 3단계 프롬프트를 정리해 줘.
```

#### 1단계: 핵심 퀴즈 시스템 구축

```
1단계: 핵심 퀴즈 시스템 구축
목표
기본적인 퀴즈 플레이가 가능한 MVP(Minimum Viable Product) 구현
구현 내용
1.1 프로젝트 초기 설정
- 프로젝트 구조 설정 (React 또는 Vanilla JS)
- 기본 HTML/CSS 레이아웃 구성
- 상태 관리 구조 설계
1.2 문제 데이터 구조 및 관리
javascript// 문제 데이터 구조 예시
{
  id: 1,
  category: "한국사",
  difficulty: "medium",
  question: "조선을 건국한 왕은?",
  options: ["이성계", "왕건", "이방원", "세종"],
  correctAnswer: 0,
  explanation: "이성계는 1392년 조선을 건국했습니다."
}

각 카테고리별 10문제씩 하드코딩 (총 40문제)
문제 로딩 및 관리 시스템
카테고리별 문제 필터링 기능

1.3 게임 진행 로직
javascript// 주요 구현 함수
- initGame(): 게임 초기화
- loadQuestion(): 문제 로드 및 표시
- handleAnswer(): 답변 처리
- showFeedback(): 정답/오답 피드백
- nextQuestion(): 다음 문제로 이동
- endGame(): 게임 종료 처리
1.4 기본 UI 구현

시작 화면 (게임 시작 버튼)
퀴즈 화면 (문제, 4개 선택지, 진행률)
즉시 피드백 UI (정답/오답 표시)
간단한 결과 화면 (총점, 정답 개수)

테스트 체크리스트

 40문제가 순차적으로 출제되는가?
 정답/오답 판정이 정확한가?
 피드백이 즉시 표시되는가?
 게임 완료 시 결과가 표시되는가?
```

#### 2단계: 점수 시스템 및 게임 모드 확장

```
 2단계: 점수 시스템 및 게임 모드 확장
목표
다양한 게임 모드와 정교한 점수 시스템 구현
구현 내용
2.1 점수 시스템 구현
javascript// 점수 계산 로직
class ScoreManager {
  calculateScore(isCorrect, timeSpent, consecutiveCorrect, hintUsed) {
    let score = 0;
    if (isCorrect) {
      score += 10; // 기본 점수
      if (timeSpent < 10) score += 3; // 시간 보너스
      if (!hintUsed) score += 2; // 노힌트 보너스
      score += this.getConsecutiveBonus(consecutiveCorrect);
    }
    return score;
  }
}
2.2 게임 모드 구현
javascript// 게임 모드 설정
const gameModes = {
  full: { questions: 40, timeLimit: null },
  category: { questions: 10, timeLimit: null },
  speed: { questions: 20, timeLimit: 15 } // 문제당 15초
};

전체 도전 모드 (40문제)
카테고리별 도전 모드
스피드 퀴즈 모드 (시간제한)

2.3 고급 기능 추가

힌트 시스템 (2개 오답 제거, 게임당 3회)
일시정지 기능
문제별 타이머
연속 정답 콤보 시스템

2.4 상세 결과 분석
javascript// 결과 데이터 구조
{
  totalScore: 350,
  correctAnswers: 32,
  totalQuestions: 40,
  accuracy: 80,
  categoryStats: {
    "한국사": { correct: 8, total: 10 },
    "과학": { correct: 7, total: 10 },
    // ...
  },
  averageResponseTime: 12.5,
  longestStreak: 7
}
테스트 체크리스트

 점수 계산이 정확한가?
 각 게임 모드가 제대로 작동하는가?
 힌트 기능이 정상 작동하는가?
 타이머가 정확하게 작동하는가?
 결과 분석이 정확한가?
```

#### 3단계: 데이터 저장 및 순위 시스템

```
3단계: 데이터 저장 및 순위 시스템
목표
사용자 기록 저장 및 리더보드 기능 완성
구현 내용
3.1 로컬 스토리지 활용
javascript// 로컬 데이터 관리
class LocalDataManager {
  saveGameResult(result) {
    const history = this.getGameHistory();
    history.push({
      ...result,
      timestamp: new Date().toISOString()
    });
    localStorage.setItem('gameHistory', JSON.stringify(history));
  }
  
  getBestScore() {
    const history = this.getGameHistory();
    return Math.max(...history.map(h => h.totalScore));
  }
}
3.2 순위 시스템 구현
javascript// 리더보드 구조
const leaderboard = {
  daily: [],
  weekly: [],
  allTime: [],
  byCategory: {
    "한국사": [],
    "과학": [],
    // ...
  }
};

로컬 리더보드 (브라우저 내)
순위 표시 (상위 10명)
개인 최고 기록 관리

3.3 통계 및 진행도

플레이 횟수 추적
카테고리별 정답률 통계
성장 그래프 (시간별 점수 추이)
개인 대시보드

3.4 UI/UX 개선

CSS 애니메이션 추가
반응형 디자인 적용
다크모드 지원
모바일 최적화
접근성 개선 (키보드 네비게이션)

3.5 추가 기능

문제 풀 확장 (각 카테고리 20문제 이상)
난이도 조절 옵션
사운드 효과 (선택사항)
결과 공유 기능 (클립보드 복사)

테스트 체크리스트

 게임 결과가 저장되는가?
 순위가 정확하게 계산되는가?
 통계가 올바르게 표시되는가?
 반응형 디자인이 작동하는가?
 브라우저 새로고침 후에도 데이터가 유지되는가?
```

#### 퀴즈 검증 및 개선

```
현재 프로젝트의 CLAUDE.md 내용을 확인해줘. 
```

```
지금까지 만들어진 문제를 방금 저장한 가이드라인을 참고해서 점검해 줘. 가이드라인에 맞지 않은 퀴즈와 정답이 있다면 이에 맞게 수정해줘.
```

#### 05-2 자동화로 개발 효율 높이기

```
현재 프로젝트에 커스텀 명령어 폴더를 만들어 줘.
.claude/commands 디렉터리를 생성하고 구조를 보여줘.
```

```
.claude/commands/quiz-validate.md 파일을 만들어 줘.
퀴즈 문제 중에서 ‘가장’, ‘최초’, ‘최대’ 같은 최상급 표현이 있는지 찾아서 목록으로 보여줘.
```

```
.claude/commands/quiz-validate.md를 다음과 같이 수정해 줘.
사용자가 카테고리를 지정하면 해당 카테고리의 문제만 검증하고,
지정하지 않으면 전체 문제를 검증해 줘.
$ARGUMENTS에 입력된 값을 카테고리로 사용하면 돼.
검증할 때는 ‘가장’, ‘최초’, ‘최대’ 같은 모호한 표현이 있는지 찾아서
어떤 기준을 명시해야 하는지 알려 줘.
```

```
.claude/commands/quiz-range.md를 생성해.
$1번부터 $2번까지의 문제를 검토하는 기능을 만들어 줘.
문제의 난이도와 정답 분포를 확인하게 해 줘.
```

```
.claude/commands/quiz-add.md를 생성해.
새 퀴즈를 추가하는 명령어를 만들어 줘.
$1은 카테고리, $2는 난이도로 받아서 처리해.
기존 퀴즈들과 같은 형식으로 만들고, 검증 가이드라인을 꼭 지키게 해 줘.
```

#### 05-3 명령어 체이닝을 통해 익히는 선택적 업데이트 전략

```
.claude/commands/quiz-check.md 를 생성해 줘.
여기에는 모든 문제 정답의 정확성을 검증하는 기능을 수행하게 해.
.claude/commands/quiz-stats.md 를 만들어 줘.
퀴즈 게임의 통계를 관리하는 기능을 하게 해 줘.
.claude/commands/quiz-leaderboard.md 를 만들어.
순위 시스템을 관리하는 기능이 실행되게 해.
```

```
.claude/commands/quiz-daily.md를 만들어서 다음 작업을 순서대로 수행하게 해 줘.
1. 퀴즈가 담겨 있는 파일의 구조를 읽고 이해하기
2. 현재 문제 개수와 분포 확인
3. 각 카테고리별로 부족한 부분 파악
4. 새 문제 추가 전 중복 체크
5. 문제 추가 후 형식 검증
6. 전체 데이터 백업
7. 실행 결과 상세 보고
각 단계별로 검증하고, 실패하면 즉시 중단한 뒤, 오류를 보고해.
```

```
이제 퀴즈를 푼 여러 학생들의 성적을 한눈에 보고 비교하는 선생님 모드를 만들고 싶어.
이 기능에 필요한 커스텀 명령들을 직접 구상하고 만들어 줘.
그리고 이 명령어를 하나로 모아서 실행하는 통합 명령어도 만들어 줘.
모든 명령들은 ‘.claude/commands/’ 폴더 안에 각각 .md 확장자로 저장되어야 해.
실행이 끝나면, 생성한 커스텀 명령어들과 그 기능을 나열해서 보고해.
```

```
.claude/commands/create-report.md를 다음과 같이 수정해 줘.
등급 표시를 상위 비율 기준 상대평가로 변경해서 다음과 같이 표시되게 해.
- 상위 20%: A
- 상위 40%: B
- 상위 70%: C
- 하위 30%: D
```

```
.claude/commands/export-report.md 파일을 새로 만들어 줘.
teacher_report.html을 읽어서 CSV 또는 PDF로 저장하고,
teacher-dashboard.md에 이 명령어를 추가해.
```

---

## 셋째 마당 | 클로드 코드로 프로처럼 일하기

### 06장: 클로드 코드에 API 날개 달기

#### 냉장고를 부탁해 앱 제작 (3단계)

```
냉장고 사진을 업로드하면 재료를 인식하고 맞춤 레시피를 추천하는 '냉장고를 부탁해' 앱을 3단계로 나누어 체계적으로 구현해보겠습니다. (PRD 상세)
```

```
PRD_step1.md를 읽고 첫 번째 단계를 구현해줘.
```

```
PRD_step2.md를 읽고 두 번째 단계를 구현해줘.
```

```
PRD_step3.md를 읽고 세 번째 단계를 구현해줘.
```

---

### 07장: 클로드 코드 AI 에이전트로 개발팀 구성하기

#### AI 에이전트 생성

**코드 품질 검토자 에이전트:**
```
code-bug-analyzer: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.
```

```
code-bug-analyzer에게 냉장고를 부탁해 어플리케이션 코드를 검토하게 해줘.
```

**시스템 최적화 엔지니어 에이전트:**
```
performance-optimizer: 애플리케이션의 작동을 원활하게 개선하고 속도를 빠르게 만들며 병목 지점을 찾아서 해결하는 시스템 최적화 엔지니어.
```

**사용자 경험 전문가 에이전트:**
```
ux-designer: 사용자가 쉽고 편하게 이용할 수 있도록 화면 디자인, 버튼 배치, 에러 메시지를 개선하는 사용자 경험 전문가.
```

#### 다중 에이전트 협업

```
code-bug-analyzer, performance-optimizer, ux-designer 에이전트들에게 쇼핑 리스트 앱의 코드 리뷰, 성능 최적화, UX 디자인 개선을 각각 수행하게 해줘.
```

#### 공감 AI 다이어리

```
공감 AI 다이어리를 만들어줘. (상세 역할 분담 입력)
```

#### PDF 요약 앱

```
이제부터 PDF 문서를 업로드하면 AI가 요약해주는 웹 애플리케이션을 만들거야. (5 에이전트 역할 분담 입력)
```

---

### 08장: MCP로 클로드 코드의 한계 넘어서기

#### MCP 설치 및 활용

**Notion MCP:**
```bash
claude mcp add –-transport http notion https://mcp.notion.com/mcp
```

```
Notion MCP를 이용해 클로드 코드의 최신 업데이트를 검색하고 이를 요약해 노션에 저장해줘.
```

**Sequential Thinking MCP:**
```bash
claude mcp add sequential-thinking -s local -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking@latest
```

```
내가 만든 웹 포트폴리오의 방문자 체류 시간을 지금의 2배로 늘리는 방법을, 먼저 일반적인 방법으로 묻고, 그다음 Sequential Thinking MCP를 이용해서 다시한 번 체계적으로 구상한 뒤, 두 답변을 각각 '체류시간 늘리기'와 '체류시간 늘리기 -체계적인 구상'이라는 이름으로 노션에 저장해줘.
```

**Playwright MCP:**
```bash
claude mcp add playwright -- cmd /c npx @playwright/mcp@latest
```

```
playwright mcp를 사용해서 쇼핑 리스트 앱의 모든 기능이 정상 작동하는지 테스트해 줘.
```

**GitHub MCP:**
```bash
claude mcp add --transport http github https://api.githubcopilot.com/mcp -H 'Authorization: Bearer YOUR_GITHUB_PAT'
```

```
github mcp를 이용해 shopping-list-app이라는 저장소를 만들고 우리의 프로젝트를 push를 통해 업로드해줘.
```

**Supabase MCP:**
```bash
claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=[토큰] -- cmd /c npx -y @supabase/mcp-server-supabase@latest
```

```
supabase mcp를 이용해 쇼핑 리스트 앱을 데이터베이스와 연동해줘. 실시간 동기화가 되게 해줘.
```

---

Happy Vibe Coding! 🚀
