Vercel 랜딩 페이지
비기술적 요청을 빠르고 깔끔한 사이트로 전환하고, 반복 가능한 워크플로우로 Vercel에 게시하세요. 사용자는 무엇을 원하는지 말하면 됩니다. 당신이 스택, 코드, 검사 및 각 배포 준비를 담당합니다. 사용자가 반드시 개발자는 아니므로: 간단하게 말하고, 질문을 최소화하며, 사이트를 미완성 상태로 두지 마세요. 사용자의 언어로 응답하세요 (기본값: 리오플라텐세 스페인어).
0. 각 작업이 실행되는 위치 (황금률)
명령어를 실행할 세 가지 장소가 있으며, 각각 고정된 역할이 있습니다:
| 장소 | 용도 | 절대 사용 금지 |
|---|---|---|
| 사용자 터미널 (사용자의 Mac/PC, 자체 Vercel 세션) | vercel login, link, deploy, rollback, promote, domains, env add — vercel.com 또는 자격 증명을 건드리는 모든 작업 | — |
Cowork 로컬 터미널 (device_bash, 연결된 폴더 위의 VM) | 파일 읽기 및 편집, git add/commit, 사전 검사, 기록 기록 | vercel login 및 배포 |
Cowork 클라우드 터미널 (Bash) | Playwright를 사용한 스크린샷, 로컬 VM에 없는 도구 | 사용자 파일 직접 건드리기 |
이유: device_bash 호출은 매번 새롭고 일시적인 샌드박스입니다. vercel login처럼 승인을 기다리는 백그라운드 프로세스는 명령어가 종료되면 중단되어 '멈춘' 것처럼 보입니다. 또한 조직 프록시가 vercel.com을 차단할 수 있습니다 (403 from proxy after CONNECT, fetch failed). 사용자 터미널에는 이미 로그인과 네트워크가 있습니다. 토큰이나 자격 증명을 요청하거나 입력하지 마세요. 로그인은 사용자가 직접 합니다.
사용자에게 명령어를 전달하는 방법:
- 코드 블록, 한 줄에 하나의 명령어,
cd를 폴더로 시작. - 줄 끝에
#주석 금지 (zsh이 이를 인수로 전달:Error: Can't deploy more than one path). 설명은 블록 밖에 작성. - 항상
--yes를 사용하여 대화형 프롬프트가 없도록. - 전체 출력을 붙여넣도록 요청; 거기서 URL과 오류를 추출.
- 각 배포 후,
device_bash로 직접 기록 기록 (섹션 5 참조).
컴퓨터 사용: macOS는 터미널과 편집기에서 클릭만 허용하고, 입력은 허용하지 않습니다. 명령어 입력을 위해 터미널 제어를 요청하지 마세요. 작동하지 않습니다.
1. 먼저 상황 파악
device_request_folder_access로 폴더 접근 요청 (예:~/Downloads). 프로젝트가.tar.gz/.zip으로 도착했다면device_bash로 옆에 압축 풀기..vercel/project.json이 존재함 → 업데이트 (섹션 5). 프로젝트가 이미 연결됨.- 코드는 있지만
.vercel/없음 → 기존 코드의 첫 배포 (섹션 3–5). - 비어 있음 / 새 폴더 → 새 프로젝트 (섹션 2–5).
- 자체 도메인 요청 → 섹션 6.
연결된 폴더에서 Git: git은 .lock 파일을 삭제해야 합니다. 삭제 권한이 없으면 unable to unlink ... Operation not permitted 오류가 발생합니다. device_request_delete_permission을 루트 폴더에 대해 한 번 요청하고, git 임시 파일을 위한 것이라고 설명하세요 (세션 동안 해당 폴더 전체에서 삭제를 활성화한다고 알림). 사용자가 거부하면, 사용자가 자신의 터미널에서 커밋합니다. 각 명령어에 작성자를 설정: git -c user.name=... -c user.email=... commit.
사용자 터미널에서 한 번 확인: node -v (≥18), git --version, npx vercel whoami. whoami가 Logged out이라고 말하면, 사용자가 해당 터미널에서 npx vercel login을 실행하고 브라우저에서 코드를 승인합니다. 절대 사용자 대신 자격 증명, 토큰 또는 세금 키를 입력하지 마세요.
2. 요청 → 사양 (간략히)
사용자가 이미 말한 내용을 바탕으로, 빠진 것과 차단 요소만 한 메시지에 최대 ~4개의 질문으로 물어보세요:
- 목표 (판매, 연락처 수집, 정보 제공, 등록) 및 단 하나의 주요 행동 (CTA)
- 대상 및 텍스트 언어
- 콘텐츠: 이름, 섹션, 사용 가능한 텍스트/사진 (또는 "예시 텍스트 만들어 줘")
- 브랜드: 색상, 로고, 스타일 (또는 "네가 골라 줘")
- 필요 사항: 양식, WhatsApp 버튼, 분석, 자체 도메인
5–10줄의 사양을 반환하고 이의가 없으면 진행하세요. 발명된 콘텐츠는 TODO로 표시합니다. WhatsApp 전화번호가 주어지면 국제 형식을 확인하세요 (아르헨티나 휴대폰: 549 + 지역 번호 + 번호, +나 15 없이). 형식이 맞지 않으면 알리세요. 잘못된 wa.me는 유효하지 않은 채팅을 엽니다.
스타일 요청에 긴장이 있는 경우 ("고급스럽지만 투박한", 라이벌 동네 클럽 색상, 상표 등록), 직접 판단하여 해결하고, 결과를 보여주고, 결정을 두 줄로 설명하세요. 제3자의 엠블럼, 이름 또는 로고를 사용하지 마세요.
3. 스택 선택 (기본적으로 가장 간단한 것)
| 필요 사항 | 스택 | 이유 |
|---|---|---|
| 단일 랜딩 / 소수의 정적 페이지 | HTML + CSS + 최소 JS, 빌드 없음 | 종속성 제로, 깨질 것 없음, 즉시 배포. 기본값. |
| 많은 페이지, 공유 레이아웃, 블로그 | Astro (정적 출력) | 컴포넌트 + 마크다운, JS 거의 없음 |
| 실제 애플리케이션 로직, 로그인, 패널 | Next.js | 정말 필요할 때만 |
| 연락처 양식만 | 정적 + api/contact.js 함수, 또는 양식 서비스 | 프레임워크를 정당화하지 않음 |
세부 사항, 명령어, 양식 및 분석: references/stacks.md.
정적 사이트의 경우, assets/static-starter/를 기본으로 복사 (index, 스타일, vercel.json, 404, robots, .gitignore)하여 적용하세요. 기본 디자인을 변경 없이 게시하지 마세요.
4. 잘 구축하기 (Cowork에서)
references/landing-guidelines.md를 따르세요. 필수 사항:
- 모바일 우선, 반응형, 주요 콘텐츠는 JS 없이 작동
<title>, 메타 설명, Open Graph, 파비콘,lang속성- 이미지 압축, 크기 지정, 접힌 부분 아래는
loading="lazy",alt - 명확한 주요 행동 하나, 반복 (상단과 하단)
- 레포에 비밀 정보 없음. 키는
npx vercel env add사용 (사용자가 실행) .vercelignore필수:.env*,.deployments.log,.git,.gitignore,.vercelignore포함. 빌드 없는 정적 사이트에서 Vercel은 폴더의 모든 것을 업로드하며,vercel link는 토큰이 포함된.env.local을 생성하여/.env.local에 공개될 수 있습니다..gitignore:.vercel,node_modules,.env*,.deployments.log포함
device_bash로 편집: sed -i 또는 읽기-수정-쓰기 방식의 짧은 Python 스크립트를 사용하고, 각 대체가 정확히 한 번 일치하는지 assert로 확인하세요. 도구 출력에서 전체 파일을 다시 입력하지 마세요.
배포 전 검사:
predeploy-check.mjs를 폴더에 대해 실행: 모든 ERROR 수정, WARNING 평가. 스킬 스크립트는 클라우드에 있습니다. 로컬 VM에서 실행하려면 base64 또는 heredoc으로device_bash를 통해$HOME/tools/에 한 번 복사하세요 (mnt/밖, 사용자에게 보이지 않음).- Astro/Next:
npm run build가 통과해야 함. - 클라우드에서 시각적 확인:
device_stage_files로 사이트 파일을 스테이징 →python3 -m http.server→ Playwright (chromium.launch({executablePath: '/opt/pw-browsers/chromium-*/chrome-linux/chrome'})사용,playwright install실행 금지) → 1366px 및 390px에서 전체 페이지 스크린샷 → Read로 확인. Google Fonts는 거기서 로드되지 않으므로 글꼴이 근사치로 보입니다. 시각적 변경이 있는 경우 사용자에게 스크린샷을 보내세요.
각 변경 사항은 git commit -m "<변경 내용>"으로 끝납니다. 커밋이 버전 기록입니다.
5. 배포: 항상 동일한 워크플로우
프로젝트에 스크립트를 한 번 설치: 스킬의 scripts/deploy.mjs를 프로젝트 루트에 deploy.mjs로 복사하세요 (device_bash, heredoc 또는 base64로). 이를 사용자가 실행합니다. macOS, Windows 및 Linux에서 작동하며 종속성이 없습니다.
node deploy.mjs의 기능: 로그인 확인 → .vercel/project.json이 없으면 프로젝트 생성/연결 (vercel link --yes --project <이름>) → 커밋되지 않은 변경 사항 알림 → package.json에 빌드가 있으면 vercel pull + vercel build + vercel deploy --prebuilt 사용, 없으면 vercel deploy --yes 직접 사용 → URL 출력 → .deployments.log에 줄 추가 (날짜, 대상, 커밋, URL). --dry-run은 계획만 표시.
워크플로우, 항상:
- 당신: 변경, 검사, 스크린샷,
git commit(Cowork). - 사용자, 자신의 터미널에서:
cd ~/경로/프로젝트 node deploy.mjs --name 프로젝트-이름--name은 처음 한 번만.) 출력을 붙여넣으면 당신이 프리뷰 URL을 알려줍니다. - 사용자가 자신의 브라우저에서 프리뷰를 검토합니다. 프리뷰는 일반적으로 Deployment Protection이 있습니다 (Vercel 로그인 필요).
npx vercel curl로 확인하지 마세요. 프로젝트에 영구 바이패스 토큰이 생성됩니다. 직접 확인해야 하는 경우*.vercel.app및vercel.com도메인에request_access로 통합 브라우저를 사용하고, 불가능하면 사용자 검토와 로컬 스크린샷을 신뢰하세요. - 명시적인 "예"가 있어야만 사용자가
node deploy.mjs --prod를 실행합니다. 프로덕션은 공개입니다. - 프로덕션 확인 (URL은 보호되지 않음):
/응답, CSS 로드, CTA 링크가 올바른지,/.env.local,/.git/HEAD,/.vercel/project.json이 404 반환, 존재하지 않는 경로가 404 표시. - 알림: 프로덕션 URL, 변경 사항, 커밋, 롤백 방법.
사용자가 스크립트를 사용하지 않으려면, 수동으로 하는 방법은 npx vercel link --yes --project <이름>, npx vercel deploy --yes, npx vercel deploy --prod --yes입니다. 이 경우 당신이 device_bash로 .deployments.log에 줄을 기록합니다 (ISO 날짜<TAB>preview|production<TAB>짧은 sha<TAB>URL). 사용자가 붙여넣은 출력에서 추출.
프로젝트 이름: 소문자와 하이픈, 비즈니스에서 파생 (panaderia-la-espiga); 하위 도메인 *.vercel.app을 정의합니다.
롤백
npx vercel rollback→ 이전 프로덕션 (즉시, 리빌드 없음; 첫 배포인 경우 존재하지 않음)npx vercel promote <deploy-url>→ 특정 배포 게시npx vercel ls <프로젝트>→ 배포 목록;.deployments.log가 커밋과 연결
요청 시 추가 기능
- 환경 변수:
npx vercel env add NOMBRE production(값은 사용자가 입력). git push시 자동 배포:references/ci-github.md. 여러 사람이 편집하거나 변경 사항이 많을 때 권장; 수동 배포 단계를 제거합니다.
CLI 플래그는 변경될 수 있습니다. 명령어가 플래그로 실패하면 npx vercel <cmd> --help를 확인하고 적용하세요. 일반적인 오류: references/troubleshooting.md, 그리고 실제 경험에서 본 것:
| 증상 | 원인 / 해결책 |
|---|---|
Error: Can't deploy more than one path | zsh에서 붙여넣은 줄 끝에 # 주석. 주석 없이 블록 다시 작성. |
Cowork에서 vercel login "멈춤" | 일시적 샌드박스. 로그인은 사용자 터미널에서. |
vercel.com에 403 from proxy after CONNECT / fetch failed | 조직 네트워크가 Vercel 차단. 사용자 터미널, 또는 관리자가 vercel.com 및 *.vercel.app을 허용 도메인에 추가. |
vercel link 후 .env.local 생성됨 | 정상 (OIDC 토큰). .gitignore 및 .vercelignore에 있어야 함. 삭제 가능. |
unable to unlink .git/...lock: Operation not permitted | 연결된 폴더에 삭제 권한 없음. 한 번 요청하거나 사용자가 커밋하도록 함. |
| 프리뷰가 Vercel 로그인 요청 | 프리뷰의 Deployment Protection; 로그인된 사용자가 검토. |
6. 자체 도메인
- .com.ar / .ar →
references/dominio-nic-ar.md참조 (NIC Argentina에서 CUIT + Clave Fiscal로 구매하고 Vercel에 위임). Clave Fiscal 절차와 결제는 사용자가 직접 함. 당신이 단계별로 안내. - .com 또는 기타 → 모든 등록 대행자 (또는 Vercel)에서 구매하고 해당 가이드의 DNS 단계를 동일하게 적용.
- 두 경우 모두, 사용자 터미널에서:
npx vercel domains add <도메인> <프로젝트>, DNS 구성,npx vercel domains inspect <도메인>으로 확인. Vercel은 HTTPS 인증서만 발급.
7. 마무리 메시지 (항상)
간결하고 단순하게:
- 게시된 URL (및 해당하는 경우 프리뷰) 및 커밋
- 수행/변경된 내용, 2–4개 항목
- 사용자가 확인하면 좋은 디자인 또는 콘텐츠 결정 (톤, 색상, 예시 데이터)
- "무언가를 변경하려면, 말씀해 주세요. 게시하기 전에 프리뷰를 보여드립니다."
- 미해결
TODO및 .ar 도메인이 있는 경우 연간 갱신 알림