Vivelebacon/demo-website

데모 웹사이트

한 번의 실행으로 잠재 고객이 "예, 보고 싶습니다"라고 말한 것부터 실제 재설계된 사이트가 라이브로 배포되고, 초안 답변이 Drafts 폴더에 준비됩니다. 사용자는 URL이나 이름만 붙여넣으면 되고, 나머지는 모두 찾아서 처리하며 묻지 않습니다. 전체 실행 동안 창의적 방향성은 위임됩니다: 인터뷰 답변이나 승인을 위해 중단하지 마십시오.

참조 빌드: 하나의 데모를 만족스럽게 배포했다면 참조용으로 보관하십시오. 해당 BRIEF.md를 읽고 그 구조(site.css, site.js, pages.css, home.css, home.js, lab/)를 시작 스켈레톤으로 복사하십시오. 디자인은 절대 복사하지 마십시오: 지문 게이트가 이를 금지합니다.

모든 데모에 대한 고정 규칙

• 유지: 로고, 모든 사진, 모든 카피의 모든 단어, 모든 페이지와 각 페이지 내 섹션 순서. 오타는 그대로 유지합니다. 탐색 레이블은 그대로 유지합니다. CTA(클릭 유도 문구) 레이블도 그대로 유지합니다.
• 변경: 모든 시각적 요소. 레이아웃, 서체, 색상 사용, 모션, 상호작용.
• 모든 페이지가 재설계됩니다. 홈페이지만이 아닙니다. 원래 페이지당 하나의 HTML 파일, 동일한 슬러그(cleanUrls는 /services가 계속 작동하도록 유지합니다).
• 허용되는 추가 사항: 최소한의 UI 마이크로카피만 가능합니다(양식 상태 줄, 입력 필드 플레이스홀더, aria 레이블). 새로운 마케팅 텍스트나 가상의 숫자는 없습니다.
• 하우스 규칙은 모든 참조보다 우선합니다(취향에 따라 이 목록을 편집하십시오): 고객의 고유 강조색이 있는 밝은 팔레트, 브랜드 + 소유자 사진 + 모든 서비스가 히어로에 표시, 고정 헤더 항상 표시, 로고 클릭 시 최상단으로 돌아가기(홈페이지에서는 부드러운 스크롤), 사이드 레일 없음, 어디에서도 em 대시(—) 표시 금지, 고객의 자체 사진만 사용(사용자가 요청하지 않는 한 생성 금지).
• 묻지 않고 Vercel 프로덕션에 배포하고 커밋합니다. 이메일은 초안만 작성합니다.

0단계 · 잠재 고객 식별하기

1. 사용자가 URL 대신 이름을 제공했고 CRM을 유지하고 있다면: 웹사이트, 도시, 언어, 아웃리치가 발송된 사서함, 답장 상태를 위해 CRM에서 잠재 고객을 조회합니다. 잠재 고객이 CRM에 없으면 URL에서 작업하고 아무것도 묻지 않습니다. 초안 단계에서 어떤 사서함이 필요한지 알려줄 것입니다.
2. 슬러그: 도메인 줄기, 예: acmecoaching. 빌드 폴더: demos/<slug>-scrollcraft/. Vercel 프로젝트: <slug>-redesign. 데모 URL: https://<slug>-redesign.vercel.app (하이픈 사용, 절대 점을 사용하지 마십시오: 점으로 된 서브도메인은 존재하지 않으며, 죽은 링크는 이 파이프라인에서 가장 비용이 많이 드는 실수입니다).
3. 이메일의 이름: 잠재 고객의 이메일 서명, 사이트의 about/contact 페이지 또는 도메인에서 가져옵니다("janecoaching" → Jane). 진정으로 알 수 없는 경우 생략합니다("Bonjour," / "Hi,").

1단계 · 기존 전체 사이트 캡처하기

모든 것은 <build>/_src/(원본 자산)와 <build>/lab/(노트, 스크린샷)에 저장됩니다.

1. 홈페이지를 가져오고 탐색 링크와 푸터 링크를 읽어 모든 페이지를 나열합니다. 각 페이지를 가져옵니다.
2. 페이지별로 순서대로 추출: 섹션, 제목, 문단(볼드/이탤릭 범위 포함), 목록, 버튼과 그 대상, 이미지(최대 해상도 URL; Squarespace의 경우 ?format=2500w를 추가하고, Wix의 경우 /v1/fill/... 변환을 제거), 양식(필드 레이블, 필수 플래그, 제출 레이블, 성공 메시지), 포함된 비디오. Squarespace는 data-block-json / formFields에 양식 정의를 유지합니다.
3. 로고(모든 변형: 다크, 라이트, 파비콘), 모든 사진, 모든 텍스처를 다운로드합니다. 단순한 기하학적 로고는 알파 채널에서 cv2.findContours + approxPolyDP를 사용하여 SVG로 벡터화하고, 복잡한 마크는 PNG를 유지합니다.
4. 브랜드 토큰: 사이트 CSS 변수의 강조색/잉크/배경, 제목 및 본문 서체. Typekit 또는 사용자 정의 서체인 경우 가장 가까운 Google Font를 선택합니다.
5. 모든 라이브 페이지의 전체 페이지 스크린샷(scripts/full.mjs <live-url> 1440 900 lab/live <pages>)을 찍고 읽습니다: 그것이 당신이 유지해야 할 구조입니다.

2단계 · scroll-craft로 디자인하기

디자인 리서치 스킬이 있으면 로드한 다음, scroll-craft(https://github.com/nateherkai/scroll-craft)를 로드하고 다음 재정의와 함께 scroll-craft를 처음부터 끝까지 따르십시오:

• 브리프는 명시적인 창의적 위임 하에 자체 작성됩니다(사용자의 상시 지시는 이 스킬입니다). BRIEF.md를 작성하십시오: 위의 고정 규칙, 1단계의 증거, 작성된 8가지 주제, 실제 제약 조건이 있는 명명된 문법, 느낌 곡선, 하나의 피크, 누군가에게 말할 문장, 시그니처 무브, 점수표, 각 내부 페이지에 대한 짧은 계획을 포함합니다.
• scroll-craft 워크스페이스 FINGERPRINTS.md에 대해 지문 게이트를 실행합니다(모든 행에 대해 6개 중 4개). 각 최근 행의 "다음 빌드가 피해야 할 것" 줄을 읽습니다. 시그니처 무브는 이 브랜드(로고 기하학, 태그라인, 자체 사진)에서 가져와야 하며, 마지막 빌드에서 가져오지 않습니다.
• 구조는 클라이언트에 의해 고정되므로, 문법과 장치는 동일한 섹션이 어떻게 동작하는지 변경하며, 어떤 섹션이 존재하는지는 변경하지 않습니다.
• 바닐라 엔진(scrollcraft.js/.css를 수정하지 않고 복사), 일반 다중 페이지 HTML, 특수 장면을 위한 페이지 로컬 JS.

3단계 · 빌드하기

• 공유: site.css(토큰, 헤더, 메뉴, 푸터, 버튼, 프레임, 등장 효과), site.js(엔진 마운트, 헤더 상태, 메뉴, 로고-최상단, 등장 효과, 양식), 내부 페이지용 pages.css, 홈페이지의 특수 장면용 home.css/home.js.
• 일회성 스크립트로 내부 페이지를 스캐폴딩하는 것은 괜찮습니다. 이후에는 HTML 파일이 소스입니다. BRIEF.md에 그렇게 명시하십시오.
• 연락처 양식: 클라이언트 주소로 mailto: 핸드오프, method="post", 유효성 검사, 그리고 메일 앱이 열리고 사용자가 보내기 버튼을 누를 때까지 아무것도 전송되지 않는다는 상태 줄을 포함합니다. 절대 성공을 위장하지 마십시오.
• 상점 및 예약 도구: 클라이언트의 기존 제품/예약 페이지로 링크합니다.

이미 한 라운드를 손실시킨 함정들

• [data-sc-stage] 요소에 position을 절대 설정하지 마십시오. 엔진이 이를 sticky로 만듭니다. CSS의 position: relative는 모든 핀을 조용히 죽입니다.
• 피크는 페이지에서 가장 큰 data-sc-span을 유지해야 합니다. 히어로가 커지면 피크도 함께 키우십시오.
• 한 장의 사진으로 만드는 계층형 히어로: 각 실루엣을 DP(동적 계획법) 가장자리 경로로 추적하고(먼저 거친 그라디언트로 시작한 다음 미세한 경로로 다듬음), 각 실루엣 아래에 각 판을 재구축합니다(하늘: 고정 수직 그라디언트; 먼 안개: 열별 단일 색상; 텍스처 경사: ~110px 미러 타일), 추적된 선 위의 남은 어두운 점들을 제거한 다음 최종 스크롤 위치를 확인합니다: 이음새는 이동 끝에서만 보입니다.
• 인물 컷아웃: rembg u2net_human_seg, 매트를 ~2px 침식시키고 가장자리 색상을 오염 제거합니다. 그렇지 않으면 원래 벽이 후광으로 보입니다. 전경 평면이나 베이스 밴드가 컷을 숨기는 곳에서 자릅니다.
• 그리드 내에서 white-space: nowrap이 있는 모든 것은 전화기 레이아웃을 망가뜨립니다. 520px 이하에서는 버튼이 줄바꿈되도록 하고 minmax(0, 1fr)을 사용하십시오.
• 기울어진 장식 블록이 전화기에서 뷰포트를 넘칩니다: 해당 섹션에 overflow-x: clip을 적용하십시오.
• 교체된 이미지는 전화기에서 일주일 동안 이전 바이트를 유지합니다(/assets 캐시 헤더): 새 아트워크에는 새 파일 이름(-v2)을 사용하십시오.
• .prose p { margin: 0 }은 .prose > * + *보다 우선합니다. 간격 규칙을 .prose > * { margin: 0 } .prose > * + * { margin-top }으로 작성하십시오.

4단계 · 검증하기

로컬에서 서빙(node <scroll-craft>/scripts/serve.mjs --root . --port 4610)한 후, 이 스킬의 scripts/snap.mjs / scripts/full.mjs를 사용하십시오. 둘 다 실행하는 폴더 또는 그 상위 폴더에서 playwright-core를 해결하므로, 프로젝트 루트에서 한 번 npm i playwright-core를 실행하면 그 아래의 모든 빌드를 커버합니다.

• 데스크톱 1440x900에서 각 고정된 액트 내 여러 위치, 전화기 390x844 및 360x640, reduced motion. 모든 시트를 읽고 수정한 후 다시 촬영합니다.
• 모든 내부 페이지의 전체 페이지 캡처를 1440 및 390에서: 넘침 없음, 잘린 텍스트 없음, 빈 그리드 셀 없음.
• scroll-craft 하네스: 죽은 스크롤 없음, 콘솔 오류 없음, 실패한 요청 없음.
• 이미지 위 텍스트의 대비를 합성된 픽셀에서 측정합니다(텍스트를 숨기고 그 아래 픽셀을 읽음): 본문 4.5:1, 큰 텍스트 3:1.
• 기능: 시그니처 상호작용 처음부터 끝까지, 양식 유효성 검사 메시지, 메뉴 열기/Escape/포커스, 로고 최상단, 히어로 서비스의 앵커.
• 빌드에서 em 및 en 대시(U+2014, U+2013)를 grep으로 검색합니다: 0개 보임.

5단계 · 배포하기

1. vercel.json: cleanUrls, buildCommand: null, outputDirectory: ".", /assets에 7일 캐시. .vercelignore: lab/ _src/ node_modules/ BRIEF.md.
2. vercel link --yes --project <slug>-redesign 그 다음 vercel deploy --prod --yes.
3. 보낼 정확한 URL을 스모크 테스트합니다: 모든 페이지 200, 주요 자산 200, lab/ 및 BRIEF.md 404, 콘솔 오류 없이 한 번의 라이브 브라우저 로드.
4. 빌드에 Git 저장소를 생성(git init -b main), -F <file>로 커밋(절대 PowerShell here-string 사용 금지), gh repo create <github-user>/<slug>-redesign --private --source . --push, vercel git connect --yes. 이후 편집: main에 커밋하고 푸시하면 재배포됩니다. 데모 저장소는 비공개로 유지하십시오: 잠재 고객의 로고, 사진 및 카피를 보관합니다.
5. 지문 행을 워크스페이스 FINGERPRINTS.md에 추가합니다(모든 6개 차원, 세계, 포트, 팔레트, 유형, 공유하는 것, 다음 빌드가 피해야 할 것).

6단계 · 답장 초안 작성하기

python scripts/draft_demo_reply.py <prospect-email> --mailbox <alias> --url https://<slug>-redesign.vercel.app --first-name <FirstName>

URL이 응답하는지 확인하고, 아웃리치 사서함에서 잠재 고객의 최신 이메일을 찾고, 연락처의 언어(--lang fr|en)로 "데모입니다" 템플릿을 해당 사서함의 서명으로 렌더링한 다음, 스레드된 초안을 해당 사서함의 Drafts 폴더에 저장하고 다시 읽어옵니다. 절대 보내지 않습니다. 스레드가 비정상적으로 보이면 --dry-run으로 먼저 실행하십시오. 사서함은 .env에 구성됩니다(.env.example 참조).

잠재 고객이 편지를 보낸 주소가 아닌 다른 주소(예: info@ 대신 개인 사서함)로 답장한 경우 --to <their-address>를 전달하십시오: 답장은 해당 발신자로 조회되고 초안은 그쪽으로 이동합니다. 일부 IMAP 서버는 전체 주소의 FROM 검색만 일치시킵니다. 도메인 조각은 아무것도 반환하지 않습니다.

CRM이 연결된 경우(DEMO_CRM_DIR, README 참조), <prospect-email>은 CRM이 해석하는 모든 것이 될 수 있으며, 사서함과 언어는 연락처에서 가져오고 스크립트는 잠재 고객의 답장과 데모 URL을 기록합니다.

초안 텍스트를 최종 메시지에 표시하십시오. 전송되면 데모가 전송됨으로 표시될 수 있도록 사용자에게 알려달라고 말하십시오.

최종 보고서 (짧게)

라이브 URL(정확한 URL) · 재구축된 페이지 · 디자인 아이디어를 두 줄로 · 시그니처 무브를 한 줄로 · 몇 가지 마이크로카피 추가 사항 · 검증된 것과 검증되지 않은 것(실제 전화기, Safari) · 초안(사서함, 스레드, 전체 텍스트) · 빌드 폴더의 로컬 경로.