이력서 파일만 넣으면 웹 포트폴리오 자동 생성해주는 프롬프트 (Claude Design)

1. 어떤 문제를 해결하나요?

포트폴리오가 없거나, 있어도 PDF나 노션으로만 관리하고 있는 분들을 위한 프롬프트예요.

PDF 이력서는 면접관 기억에 잘 남지 않아요. 스크롤 애니메이션과 커스텀 커서가 살아있는 웹 포트폴리오는 확실히 달라요.

Figma도, VS Code도, 터미널도 몰라도 됩니다. Claude Design에 이력서 붙여넣고 프롬프트 하나 넣으면 끝이에요.

2. 이런 분들에게 추천합니다

• 취업 준비 중인 디자이너, 개발자, 기획자

• 포트폴리오는 있는데 PDF나 노션으로만 정리된 분

• 코딩 없이 웹사이트를 빠르게 만들고 싶은 프리랜서

• Claude Design을 처음 써보는 분 (가이드 포함)

• 면접 전날 급하게 포트폴리오가 필요한 분

3. 어떻게 사용하는 기어인가요?

Claude Design(claude.ai)에서 High Fidelity 모드를 선택하고, 이력서 파일을 첨부한 다음 프롬프트를 붙여넣으면 됩니다.

Claude가 이력서를 읽고 이름, 경력, 프로젝트, 스킬을 모두 자동으로 웹사이트에 채워줘요. 결과물은 HTML 파일 하나로 출력돼서 브라우저에서 바로 열 수 있고, GitHub Pages나 Netlify로 무료 배포도 바로 가능합니다.

4. 어떤 결과를 얻을 수 있나요?

다크 배경에 네온그린 포인트 컬러가 들어간 에디토리얼 스타일 포트폴리오 웹사이트가 나와요.

• 히어로 섹션: 이름이 120px+ 대형 타이포로 라인별 등장

• Works 섹션: 프로젝트 행에 마우스 올리면 네온그린이 왼쪽에서 오른쪽으로 채워짐

• Experience 섹션: 스크롤하면 경력 항목이 순서대로 슬라이드인

• 네온그린 커스텀 커서, 스크롤 진행 바, 키워드 마퀴 스트립

• 모바일 완전 대응 / 코드 한 줄 없이 완성

5. 포함된 구성

• 포트폴리오 웹사이트 자동 생성 프롬프트 전문

• Claude Design 사용 가이드 (6단계)

• 프롬프트 커스터마이징 가이드 (컬러, 섹션, 언어, 속도 조정)

• 결과물 섹션 구조 설명 (Nav / Hero / About / Works / Experience / Contact)

• 무료 배포 방법 안내 (GitHub Pages, Netlify)

6. 사용 AI 도구

• Claude Design (claude.ai) — High Fidelity 모드 필수

• 별도 설치 없음 / Claude 계정만 있으면 바로 사용 가능

7. 실제 활용 예시

• PDF 이력서 붙여넣고 5분 만에 포트폴리오 완성, 당일 링크 공유

• 노션에 정리해둔 포트폴리오 텍스트 입력 → Works 섹션 KPI 카드에 프로젝트 성과 자동 표시

• 포인트 컬러만 네온그린에서 파란색으로 바꿔서 개인 브랜드에 맞게 커스터마이징

• 이력서 첨부 → HTML 파일 다운로드 → Netlify 드래그앤드롭 배포 5분 완료