jove525/portfolio-builder

Portfolio Builder

사용자의 작업을 원페이지 포트폴리오로 전환합니다. Claude는 채팅에서 콘텐츠를 계획하고 BRIEF.md에 고정한 후, Claude Code 프롬프트를 전달합니다. Claude Code는 로컬에서 빌드하고, GitHub에 푸시하며, Netlify에 배포합니다. 그런 다음 Claude가 저장소와 라이브 사이트를 감사합니다.

이 스킬이 생성하는 모든 콘텐츠의 작성 규칙: 캐주얼하고 직접적인 어조, 짧은 문장, 줄표(em-dash) 사용 금지 (일반 하이픈만 사용).

1단계: 묻기 전에 수집하기

• 이미 알려진 정보 수집: 메모리, 과거 대화, 라이브 사이트 (실제 기능 목록과 카피를 위해 가져오기).
• 먼저 콘텐츠 인벤토리 초안 작성. 빈 질문지로 시작하지 마십시오.

2단계: 브리프 초안 v1 작성, 최대 4가지 결정 사항 질문

실제 카피가 포함된 섹션 초안을 작성한 후, 빌드에 영향을 미치는 다음 사항만 질문하세요:

1. 주요 대상 (클라이언트, 채용 담당자, 또는 둘 다, 그리고 어느 쪽이 주도적인지).
2. 가시성 제약 (현재 고용주를 구체적으로 명시할지 일반적으로 표기할지; 비공개로 유지할 사항).
3. 포함할 프로젝트.
4. 호스팅 위치 (처음에는 Netlify 서브도메인으로 충분).

가드레일:

• 지표, 사용후기 또는 클라이언트를 조작하지 마십시오.
• 사용자가 하지 않은 주장 (예: 하던 일과 관련 없는 AI 작업)을 하지 마십시오.
• 팀 성과는 팀 성과로 표기.
• 고용주를 일반적으로 표기하는 경우, 식별 가능한 세부 정보 (국가 목록, 정확한 직함 및 산업)도 생략. 목록 대신 "5개 시장"이라고 표기.
• 지역 표현 주의 (예: 한 국가가 여러 대륙에 걸쳐 있는 경우 "아시아 시장") 및 히어로 카피의 모호한 대명사.

프로젝트 포함 규칙: 프로젝트가 라이브 상태이고 대상 고객이 기꺼이 비용을 지불할 기술을 보여줄 때 자격을 얻습니다. 너무 많은 벤처는 "당신을 위한 시간이 없음"을 암시합니다. 보류 중이거나 과거 작업은 "실험실에서"라는 작은 행에 정직하게 레이블을 붙여 포함합니다. 이름이 없거나 출시되지 않은 프로젝트는 대기합니다.

도구: 직접 사용한 도구만 나열합니다. 단순히 익숙한 도구는 한 줄 각주 ("또한 X 및 Y에 능숙함")에 포함합니다.

3단계: 빈칸 채우기

요청할 사항: 표시 이름, 헤드샷, 빌드당 스크린샷 1개, 라이브 URL, GitHub URL, 연락처 이메일, 소셜 미디어. 제공된 사이트 카피가 있으면 포트폴리오에 적합하게 다시 작성 (무엇인지, 대상은 누구인지, 무엇을 구축했는지). 모든 카드 링크는 해당 항목을 실제로 설명하는 라이브 페이지를 가리켜야 합니다. 페이지가 준비되지 않은 경우 링크를 걸지 않고 태그를 추가 (예: "출시 예정"). 준비되지 않은 항목 (예약 링크, "함께 작업하기", 사용후기)은 v1을 차단하는 대신 "나중에" 목록으로 연기.

4단계: BRIEF.md 고정

다음 섹션을 순서대로 포함하여 BRIEF.md를 작성합니다:

• 목표 (10초 테스트: 그들이 구축한 것, 증거, 연락 방법)
• 대상
• 카피 규칙 (어조, 줄표 금지, 가시성 및 정확성 가드레일, 작성된 카피 그대로 사용)
• 기술 (일반 HTML/CSS/바닐라 JS, 빌드 단계 없음; index.html, styles.css, main.js, /assets; GitHub + Netlify; Lighthouse 95+; 모바일 우선)
• 디자인 방향 (기본 Apple 스타일: Inter 또는 시스템 폰트, 넉넉한 여백, 최대 너비 ~1080px, 텍스트 블록 ~680px, 타이트한 큰 제목, 중립 팔레트, 20-24px 카드 둥근 모서리, 가는 테두리, 하나의 강조 색상을 절제 있게 사용, 라이트/다크 전환, reduced-motion을 존중하는 미묘한 페이드업 효과, 미니멀 브라우저 프레임 카드의 스크린샷, 스티키 블러 네비게이션)
• 레이아웃 규칙 (처음부터 적용):
  • 네비게이션과 모든 섹션이 하나의 컨테이너를 공유하여 모든 왼쪽 가장자리가 정렬되도록 합니다.
  • 모든 간격에 대해 하나의 섹션 간격 토큰 (데스크톱 약 96px, 모바일 약 56px)을 사용합니다. 패딩이 중첩되지 않도록 합니다.
  • 히어로는 브라우저 툴바를 포함하여 1366x768 및 375x812 (약 650px 및 635px 가시 영역)에서 접힘선 위에 맞아야 합니다.
  • 제목: 모바일에서는 text-wrap pretty, 데스크톱에서는 balance; 강제 줄바꿈 없음.
  • 모든 섹션에는 눈에 띄는 제목 또는 눈썹 레이블이 있어야 하며, 아무것도 떠 있지 않아야 합니다.
• 에셋 (정확한 파일 경로; 스크린샷은 WebP로 변환, 더 작은 모바일 크기, 접힘선 아래에서 지연 로딩; 누락된 경우 플레이스홀더, 깨진 이미지 금지)
• 페이지 콘텐츠, 위에서 아래로, 최종 카피 포함: 히어로, 내가 하는 일 (카드 3개), 빌드 (추천 카드 + 그리드 + 실험실 행), 내가 빌드하는 방법, 도구 (그룹화된 알약), 배경 스트립, 원칙 (사용자 자신의 말로, 차용된 인용구 사용 금지), 연락처, 푸터
• SEO 및 메타 (제목, 설명, OG 이미지, 파비콘, 시맨틱 HTML, 대체 텍스트, 포커스 상태, AA 대비)
• 사전 채워진 세부 정보: 저장소 URL, 선호 서브도메인 및 대체 서브도메인, 소셜 핸들, 이메일 (Claude Code가 질문하지 않도록)
• 나중에 (v1에 포함되지 않음)

강조 색상: 빌드 스크린샷의 색상과 구분되는 색상을 선택하십시오. 라이트 모드와 다크 모드에 대한 정확한 16진수 값을 제공하고, 링크와 버튼 텍스트 모두에 대해 두 모드에서 AA 대비를 확인하십시오 (다크 모드 버튼은 일반적으로 밝은 강조 색상 위에 어두운 텍스트가 필요).

BRIEF.md를 파일로 전달.

5단계: 설정 단계 + 4개의 프롬프트

설정 (한 번만):

1. 빈 GitHub 저장소를 만든 다음, git clone <repo-url>로 로컬 폴더에 복제하여 git이 이미 연결되도록 합니다.
2. BRIEF.md를 루트에 넣습니다. /assets 및 /assets/shots를 명명된 파일과 함께 추가합니다.
3. 해당 폴더에서 Claude Code를 엽니다.

프롬프트 1, 계획:

BRIEF.md를 완전히 읽으세요. 아직 코드를 작성하지 마세요.
간단한 빌드 계획을 제공하세요: 파일 구조, 섹션별 레이아웃, 사용할 색상 토큰 및 서체 스케일, 그리고 브리프에서 보이는 질문이나 충돌 사항. 한 화면 이내로 유지하세요.
강조 색상: 라이트 모드에서 <LIGHT_HEX>, 다크 모드에서 <DARK_HEX>. 절제 있게 사용하고, 둘 다 AA 대비를 통과하는지 (버튼 텍스트 포함) 확인하세요.

사용자가 질문에 답변하여 한 번에 붙여넣을 수 있도록 도와주세요.

프롬프트 2, 빌드:

BRIEF.md와 합의한 계획에 따라 사이트를 정확히 빌드하세요.
- 카피를 단어 그대로 사용하세요. 줄표(em-dash)는 절대 사용하지 마세요.
- 일반 HTML, CSS, 바닐라 JS. 프레임워크나 빌드 단계 없음.
- 강조 색상: 라이트 <LIGHT_HEX>, 다크 <DARK_HEX>. 다른 모든 것은 중립.
- BRIEF.md의 레이아웃 규칙 (공유 컨테이너, 하나의 간격 토큰, 히어로가 접힘선 위)을 따르세요.
- /assets의 이미지를 WebP로 사용하세요. 누락된 경우 깔끔한 플레이스홀더를 표시하세요.
- 라이트/다크 모드, 스티키 블러 네비게이션, 스크롤 시 페이드업 (reduced-motion 지원).
완료되면 로컬 서버를 시작하고 검토할 수 있도록 URL을 알려주세요.

프롬프트 3, 다듬기:

Apple의 시니어 디자이너처럼 사이트를 검토한 다음, 발견한 문제를 수정하세요:
1. 375px, 768px, 1366px 및 1440px에서 확인하세요. 가로 스크롤이 없고, 비좁은 부분이 없어야 합니다.
2. 모든 왼쪽 가장자리가 정렬되어야 하며, 모든 섹션 간격은 하나의 간격 토큰을 사용합니다.
3. 히어로는 브라우저 툴바를 포함하여 1366 및 375에서 접힘선 위에 맞아야 합니다.
4. 다크 모드는 의도적으로 보여야 하며, 단순히 반전된 느낌이 아니어야 합니다. 강조 색상이 두 모드에서 잘 읽혀야 합니다.
5. 접근성: 대체 텍스트, 포커스 상태, AA 대비, 시맨틱 제목.
6. 모든 파일에서 줄표(em-dash)를 검색하여 일반 하이픈으로 교체하세요.
7. Lighthouse를 실행하고 모든 4개 점수를 95 이상으로 얻으세요.
변경한 사항의 간단한 목록을 제공하세요.

그런 다음 사용자가 만족할 때까지 일반 언어로 피드백을 제공합니다.

프롬프트 4, 푸시 및 배포:

이 폴더는 이미 <REPO_URL>에서 복제되었습니다.
1. .gitignore와 netlify.toml을 추가하세요 (publish dir = root, 적절한 캐시 헤더, BRIEF.md 및 소스 PNG에 대한 404 처리로 공개되지 않도록).
2. 명확한 메시지와 함께 모든 것을 커밋하고 main으로 푸시하세요.
3. 저장소를 Netlify에 연결하세요. <SUBDOMAIN>을 먼저 시도하고, 실패하면 <FALLBACK>을 시도하세요. Netlify의 GitHub 앱이 저장소를 볼 수 없는 경우, 액세스 권한을 부여하는 방법을 알려주세요.

참고: Claude Code는 종종 빌드, 다듬기, 배포를 한 번에 실행합니다. 괜찮습니다. 감사 단계로 건너뛰세요.

6단계: 푸시 후 감사

저장소 또는 라이브 URL이 공유되면:

1. 저장소를 복제하고 확인: 카피가 BRIEF.md와 일치하는지, 조작된 내용이 없는지, 줄표가 없는지, 제한된 이름이 없는지, 모든 링크가 올바른지, 이미지가 WebP인지 (대체 텍스트 및 크기 포함), 메타/OG/파비콘이 있는지, 내부 파일이 라이브 사이트에서 차단되었는지.
2. 브라우저에서 라이브 사이트를 1440 및 1366 (라이트 모드)과 375 (다크 모드)에서 시각적으로 확인: 가장자리 정렬, 간격 일관성, 히어로가 접힘선 위에 있는지, 제목 줄바꿈, 겹치는 부분 없는지.
3. 수정 사항을 붙여넣기 가능한 하나의 Claude Code 프롬프트로 제공한 다음, 푸시 후 재확인. 저장소가 비어 있으면 명확히 말하고 먼저 푸시하도록 요청하세요.

알려진 문제점:

• Netlify는 2026년 8월 19일 이후에 생성된 무료 플랜 프로젝트에 "Powered by Netlify" 배지를 추가합니다. 코드에 있는 것이 아닙니다. 프로젝트 설정 > 일반 > Powered by Netlify 배지에서 프로젝트별로 끄십시오.
• 느린 연결에서의 라이브 Lighthouse 점수는 다양합니다. 로컬 실행만으로 판단하지 말고 pagespeed.web.dev로 평가하세요.

7단계: 나머지 온라인 존재 동기화

GitHub 프로필 README (및 기타 바이오)를 포트폴리오와 일치시키겠다고 제안하세요: 동일한 포지셔닝 라인, 동일한 연락처 이메일, 라이브 빌드 및 포트폴리오에 대한 링크, 포트폴리오에서 의도적으로 제외된 프로젝트를 제거합니다.