각 장별로 프롬프트를 복사하여 바로 사용할 수 있습니다.
- 01장: 나의 첫 바이브 코딩
- 02장: 효과적인 프롬프트로 AI 200% 활용하기
- 03장: 클로드 코드 시작하기
- 04장: 클로드 코드 실전 활용
- 05장: 게임 제작으로 배우는 체계적인 개발과 관리
- 06장: 클로드 코드에 API 날개 달기
- 07장: 클로드 코드 AI 에이전트로 개발팀 구성하기
- 08장: MCP로 클로드 코드의 한계 넘어서기
- 오늘의 날씨와 주요 뉴스를 보여 주는 나만의 시작 홈페이지를 만들고 싶어 (X)업데이트 안내(1-3쇄만 해당): 클로드 아티팩트의 외부 API 정책 변경으로 날씨와 뉴스를 불러오지 못하게 되었습니다. 다음과 같이 대체해 실행해 주세요.
새 아티팩트 선택 후 아래 사진처럼 [처음부터 시작하기] 를 선택
대체 프롬프트:
오늘의 날짜와 시간, 검색창이 있는 나만의 시작 홈페이지를 만들고 싶어
이후 추가 질문에 답하면서 첫 아티팩트를 완성해 보세요. 나머지 게시, 커스터마이즈 관련 내용은 책의 내용에 기반하여 그대로 실행하시면 됩니다.
포트폴리오 웹페이지를 만들려고 해.
주요 기능은 채용 담당자가 30초 안에 내 역량을 파악할 수 있는 임팩트 있는 구성이야.
프리랜서 전환을 준비하는 마케터를 위한 것이고,
경쟁력 있는 지원자로 보이기 위해 필요해.
어떻게 구현하면 좋을지 기술적인 방향과 함께 구체적인 PRD를 작성해 줘.
이 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가지를 보완 및 수정하고, 완벽한 프리랜서 전환용 포트폴리오를 완성해.
npm install -g @anthropic-ai/claude-code
설치 방법이 업데이트 되었습니다. 아래 [업데이트된 설치 가이드] 를 참고해 주세요.
손글씨로 숫자를 입력하면 이것을 인식하는 코드를 만들어서 실행해 줘. 모든 코드와 주석을 영어로 작성해 줘.
숫자 인식 프로그램을 윈도우 탐색기에서 클릭해서 실행할 수 있게 해 줘.
# 앞으로 만드는 모든 파일은 날짜와 시간을 주석으로 표시해 줘.
손글씨 인식 프로그램을 웹 버전과 데스크톱 버전으로 나누어 개발하고 싶어. web_version과 desktop_version 폴더를 만들고, 각 폴더에 해당하는 CLAUDE.md 파일도 생성해 줘.
할 일 관리 앱을 만들고 싶어. PRD를 작성해줘.
매일 10-20개 정도의 할 일을 관리하는 개인용 앱이야.
주요 기능은:
- 할 일 추가, 수정, 삭제
- 완료 체크 기능
- 카테고리 분류 (업무/개인/공부)
- 진행률 보기
브라우저에서 바로 실행되고, 새로고침해도 데이터가 사라지지 않았으면 좋겠어.
기술적으로 복잡하지 않게 순수 자바스크립트로 만들고 싶어.
이 PRD를 클로드 코드에서 사용할 단계별 프롬프트로 변환해 줘.
5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘.
할 일 관리 앱의 기본 구조를 만들어줘.
요구사항:
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 } 구조로 저장해줘.
기존 코드에 카테고리 기능을 추가하고 UI를 개선해줘.
요구사항:
1. 카테고리 기능:
- 3가지 카테고리: 업무(work), 개인(personal), 공부(study)
- 할 일 추가 시 카테고리 선택 드롭다운
- 각 할 일 항목에 카테고리 색상 태그 표시
- 카테고리 필터 버튼 (전체/업무/개인/공부)
2. UI 개선:
- 카테고리별 색상: 업무(파란색 #4A90E2), 개인(초록색 #27AE60), 공부(보라색 #8E44AD)
- 필터 버튼을 상단에 배치
- 선택된 필터 버튼 강조 표시
- 할 일 항목에 생성 시간 표시 (예: "2시간 전")
3. 데이터 구조 업데이트:
- category 필드 추가
- 필터 상태도 localStorage에 저장
완료된 항목은 목록 하단으로 자동 정렬되도록 구현해줘.
진행률 대시보드를 추가하고 인라인 수정 기능을 구현해줘.
요구사항:
1. 진행률 대시보드:
- 앱 상단에 통계 섹션 추가
- 전체 진행률: "5/10 완료 (50%)" 형식 + 프로그레스 바
- 카테고리별 미니 진행률 표시 (각 카테고리 완료/전체)
- 오늘 추가된 할 일 개수 표시
2. 인라인 수정 기능:
- 할 일 텍스트 더블클릭 시 편집 모드
- input 필드로 변경되어 수정 가능
- Enter로 저장, ESC로 취소
- 편집 중 카테고리도 변경 가능한 select 박스
3. UI 애니메이션:
- 진행률 바 부드러운 전환 효과
- 항목 추가/삭제 시 페이드 애니메이션
- 완료 체크 시 슬라이드 애니메이션
대시보드는 실시간으로 업데이트되어야 해.
다크 모드와 추가 기능들을 구현해줘.
요구사항:
1. 다크 모드:
- 우측 상단에 다크/라이트 모드 토글 스위치
- 다크 모드 색상: 배경(#1A1A1A), 카드(#2D2D2D), 텍스트(#E0E0E0)
- 선택한 테마 localStorage에 저장
- 부드러운 전환 애니메이션
2. 추가 기능:
- "완료된 항목 모두 삭제" 버튼 (확인 다이얼로그 포함)
- 할 일 검색 기능 (실시간 필터링)
- 남은 할 일 개수 배지 표시
- 빈 상태 메시지 ("할 일이 없습니다. 추가해보세요!")
3. 키보드 단축키:
- Alt+N: 새 할 일 입력창 포커스
- Alt+1,2,3,4: 카테고리 필터 전환
- Alt+D: 다크 모드 토글
4. 반응형 디자인:
- 모바일 (max-width: 480px) 최적화
- 터치 친화적인 버튼 크기
모든 인터랙션에 적절한 피드백을 제공해줘.
앱을 최종 완성하고 사용성을 극대화해줘.
요구사항:
1. 데이터 내보내기/가져오기:
- JSON 형식으로 데이터 내보내기 버튼
- 파일 업로드로 데이터 가져오기
- 가져오기 전 현재 데이터 백업 확인
2. 정렬 옵션:
- 생성일순, 카테고리순, 완료 상태순 정렬
- 정렬 상태 저장
- 드래그 앤 드롭으로 수동 정렬 (sortable)
3. 성능 최적화:
- 100개 이상 항목에서도 부드러운 성능
- 디바운싱 적용 (검색, 저장)
- 효율적인 DOM 조작
4. 접근성 개선:
- ARIA 레이블 추가
- 포커스 관리
- 스크린 리더 지원
5. 추가 개선사항:
- 할 일 중복 확인 경고
- 최근 삭제 항목 복구 (Undo) 기능
- 오늘의 격언 랜덤 표시
- 완료율에 따른 응원 메시지
모든 엣지 케이스를 처리하고 에러 핸들링을 추가해줘.
코드에 상세한 주석을 달아줘.
현재 할 일 관리 앱에 키워드 기반 자동 카테고리 분류 기능을 추가해 줘.
[Image #1] 현재 디자인은 모바일에 최적화되어 있는 것 같아. 데스크톱 환경에서도 전체 화면에서 UI를 볼 수
있도록 디자인을 수정해 줘. 수정한 디자인은 ‘web_version’이라는 새로운 폴더를 생성한 뒤, 그곳에 저장해 줘.
@script.js 파일에서 다크 모드 관련 함수를 찾고 설명해 줘.
@web_version 폴더에 있는 파일들을 분석해서 할 일 관리 앱이 데스크톱 환경에 최적화되었는지 확인해 줘.
상식 퀴즈 게임을 만들려고 해. PRD를 작성해 줘.
게임 규칙:
- 4지선다 객관식 퀴즈
- 카테고리: 한국사, 과학, 지리, 예술과 문화
- 각 카테고리별 10문제씩 총 40문제
- 정답/오답 즉시 피드백
- 최종 점수 및 순위 기록
상식 퀴즈 게임을 클로드 코드로 구현할 수 있도록 PRD를 바탕으로 3단계 프롬프트를 정리해 줘.
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.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.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문제 이상)
난이도 조절 옵션
사운드 효과 (선택사항)
결과 공유 기능 (클립보드 복사)
테스트 체크리스트
게임 결과가 저장되는가?
순위가 정확하게 계산되는가?
통계가 올바르게 표시되는가?
반응형 디자인이 작동하는가?
브라우저 새로고침 후에도 데이터가 유지되는가?
퀴즈 문제 교차 검증 가이드라인
모든 문제 작성 시 확인 사항
1. 정답이 하나뿐인가?
- 다른 해석 가능 시 조건 명시 (예: 면적 기준, 2024년 기준)
2. 최상급 표현에 기준이 있는가?
- ‘가장 큰’, ‘최초의’ 등 표현에 측정 기준 명시
3. 시간과 범위가 명확한가?
- 변할 수 있는 정보는 시점 명시
- 지리적, 분류적 범위 한정
4. 교차 검증했는가?
- 의심스러운 정보는 2개 이상 출처 확인
- 논란 있는 내용은 주류 학설 기준
현재 프로젝트의 CLAUDE.md 내용을 확인해줘.
지금까지 만들어진 문제를 방금 저장한 가이드라인을 참고해서 점검해 줘. 가이드라인에 맞지 않은 퀴즈와 정답이 있다면 이에 맞게 수정해줘.
현재 프로젝트에 커스텀 명령어 폴더를 만들어 줘.
.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는 난이도로 받아서 처리해.
기존 퀴즈들과 같은 형식으로 만들고, 검증 가이드라인을 꼭 지키게 해 줘.
.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에 이 명령어를 추가해.
OpenRouter에서 받은 API 키를 .env 파일로 저장했어. 이 키를 안전하게 사용할 수 있도록 준비해 줘.
이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-3-27b-it:free 모델을 이용하고,
텍스트 인식은 deepseek/deepseek-chat -v3.1:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.
앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션
을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만들어 줘.
1단계는 이미지를 입력받고 google/gemma-3 -27b-it:free 모델을 사용해서 이미지를 인식해.
2단계는 1단계에서 얻은 정보와 deepseek/deepseek-chat-v3.1:free 모델을 사용해서 레시피를 생성해.
3단계는 사용자 프로필을 만들어서 레시피를 저장해.
각 단계를 PRD_step1.md, PRD_step2.md, PRD_step3.md로 나누어 저장해 줘
PRD_step1.md를 실행해.
메인 애플리케이션을 실행해서 1단계의 결과를 테스트해 줘.
이제 PRD_step2.md를 실행해 줘.
메인 애플리케이션을 실행해서 2단계 결과를 테스트하게 해 줘
이제 PRD_step3.md를 실행해 줘.
메인 애플리케이션을 실행해서 3단계 결과를 테스트하게 해 줘
코드 품질 검토자 에이전트:
코드 리뷰어: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.
code-bug-analyzer에게 냉장고를 부탁해 어플리케이션 코드를 검토하게 해줘.
시스템 최적화 엔지니어 에이전트:
최적화 전문가: 애플리케이션의 작동을 원활하게 개선하고 속도를 빠르게 만들며 병목 지점을 찾아서 해결하는 시스템 최적화 엔지니어.
사용자 경험 전문가 에이전트:
UX 디자이너: 사용자가 쉽고 편하게 이용할 수 있도록 화면 디자인, 버튼 배치, 에러 메시지를 개선하는 사용자 경험 전문가.
code-bug-analyzer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-design-advisor가 사용자 경험을 개선하게 해 줘
개선된 앱을 실행해서 브라우저에서 확인할 수 있게 해 줘.
현재 상태를 백업해 줘
백업으로 복원해 줘.
제품 기획 관리자: 전체 개발 일정을 관리하는 프로덕트 매니저로서 PRD를 작성하여 제품의 목표, 기능, 사용자 요구사항을 정의한다
백엔드 개발자: 서버 아키텍처 설계, API 개발, 데이터 처리, 외부 서비스 통합, 보안 및 성능 최적화를 담당하는 서버 사이드 개발 전문가. 안정적이고 확장 가능한 백엔드 시스템 구축.
프런트엔드 개발자: 사용자 인터페이스 설계 및 구현, 반응형 디자인, 웹 접근성, 성능 최적화를 담당하는 클라이언트 사이드 개발 전문가.
품질 보증 엔지니어: 전체 시스템의 기능 테스트, 에러 처리 검증, 성능 최적화, 코드 리뷰를 수행하는 품질 관리 전문가. 버그 발견, 사용성 개선사항 제안.
AI 통합 전문가: LLM 및 AI 서비스 통합, 프롬프트 최적화, 모델 파인튜닝, AI 파이프라인 구축을 담당하는 인공지능 전문가. 여기서는 OpenRouter API를 통해 DeepSeek 모델과 연동하여 텍스트 생성, 요약을 구현하는 LLM 활용 전문가
AI 공감 다이어리를 만들어 줘. 오늘 있었던 일을 한 줄로 쓰면, AI가 감정을 분석하고 공감하며 위로해 주는 일기 애플리케이션이야.
backend-architect가 OpenRouter API를 연동해서 감정 분석과 공감 메시지를 생성하는 기능을 구현해 줘.
DeepSeek V3.1 무료 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 따뜻하고 편안한 느낌의 일기장 UI를 만든 다음, qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘.
문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index.html’ 파일로 만들어 줘.
PDF 문서를 업로드하면 AI가 요약해주는 웹 애플리케이션을 만들 거야.
먼저 product-manager-prd가 PDF 문서 요약 앱의 상세 PRD와 기능 명세를 작성하고,
backend-architect가 PDF 파일 업로드, 텍스트 추출 기능을 구현해.
ai-integration-specialist가 OpenRouter API를 연동해서 추출된 텍스트를 요약하는 기능을 구현해 줘.
DeepSeek V3.1 무료 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 드래그&드롭 파일 업로드 UI와 요약 결과를 깔끔하게 표시하는 한글 인터페이스를 구현한 다음,
qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘. 문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index_pdf.html’ 파일로 만들어 줘.
Notion MCP:
claude mcp add --transport http notion https://mcp.notion.com/mcp클로드 코드의 업데이트, 변경 사항을 검색하고 요약해 줘. 그 결과를 노션 MCP를 이용해 노션에 저장해 줘.
Sequential Thinking MCP:
Windows PowerShell에서 실행하는 경우:
claude mcp add sequential-thinking -s local -- npx @modelcontextprotocol/server-sequential-thinking@latest(참조) Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add sequential-thinking -s local -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking@latest내 웹 포트폴리오 방문자의 체류 시간을 지금의 2배로 늘리고 싶어. 두 가지 문서를 작성해.
1. 이 목표를 달성할 방법을 구상해서 노션 MCP를 이용해 ‘체류 시간 늘리기’로 저장해 줘.
2. Sequential Thinking MCP를 이용해서 이 목표를 달성할 방법을 체계적으로 구상하고 노션 MCP를 이용해 ‘체류 시간 늘리기 – 체계적 구상’으로 저장해 줘
Context7 MCP server:
claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: YOUR_API_KEY"Playwright MCP:
Windows PowerShell에서 실행하는 경우:
claude mcp add playwright -- npx @playwright/mcp@latest(참조) Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add playwright -- cmd /c npx @playwright/mcp@latest쇼핑 리스트 앱을 만들어 줘. 아이템 추가, 삭제, 체크 기능이 있는 간단한 웹 UI로 로컬 브라우저에서 실행되게 해 줘
Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을 자동으로 테스트해 줘. 아이템 추가, 삭제, 체크 기능이 제대로 작동하는지 확인해 줘.
GitHub MCP:
claude mcp add --transport http github https://api.githubcopilot.com/mcp -H 'Authorization: Bearer $(grep GITHUB_PAT .env | cut -d '=' -f2)'현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶어. github mcp를 사용해서 shopping-listapp이라는 저장소를 만들고 업로드해 줘.
Vercel:
쇼핑 리스트 앱의 shopping -list.html 파일을 index.html로 수정해서 깃허브에 업로드해 줘Supabase MCP:
Windows PowerShell에서 실행하는 경우:
claude mcp add --transport http supabase "https://mcp.supabase.com/mcp"(참조) Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=<Supabase API 토큰> -- cmd /c npx -y @supabase/mcp-server-supabase@latestSupabase mcp를 이용해서 우리의 쇼핑 리스트 앱을 데이터베이스와 연동해 줘. shopping_items라는 테이블을 만들고, 현재 로컬 스토리지에 저장되던 데이터를 Supabase 데이터베이스에 저장하도록 코드를 수정해 줘. 수정이 완료되면 깃허브에 commit하고 push해 줘.
수고 많으셨습니다!