사이트 업그레이드은(는) 무엇을 하나요?

조립된 것처럼 보이는 사이트를 소유자가 자랑스럽게 보여줄 수 있는 사이트로 바꾸는 방법입니다. 실제로 출시되어 소유자와 팀이 높게 평가한 실제 업그레이드 작업(모바일 앱 마케팅 사이트, 두 가지 완전한 방향으로 진행된 B2B 클라우드 회사 사이트, 그리고 처음부터 구축된 헬프 센터)에서 정제되었습니다. 방법, 레시피 및 함정을 재사용하세요. 외형을 절대 재사용하지 마십시오: 모든 사이트는 자체 브랜드, 제품 및 대상 청중으로부터 방향을 결정합니다.

"완료"의 의미

다음 모든 조건이 충족될 때 업그레이드는 완료되며, 그 전에는 완료되지 않습니다:

사이트의 모든 주장은 명명할 수 있는 출처(제품 코드, 법적 텍스트, 결제 시스템 또는 소유자의 서면 답변)로 추적 가능합니다.
디자인은 브랜드 자체 자료에서 비롯되며, 그 아이디어는 경쟁자 테스트를 통과합니다(direction.md).
방문자가 보거나 수행하는 하나 또는 두 개의 시그니처 순간; 그 외 모든 것은 절제됩니다.
모션 없이도 볼 수 있어야 합니다. 모션 감소 설정 시 최종 상태가 표시됩니다.
실제 브라우저에서 1440, 1920×710, 390 및 320 px, 모든 테마, 모션 감소 설정, 프로덕션 빌드에서 확인되었습니다.
귀하의 서면 비판 점수가 9/10 이상이거나, 보고서에 부족한 점이 명확히 명시되어 있습니다(critique.md).
팀이 검토할 수 있는 PR로 제공되며, 팀이 붙여넣을 수 있는 짧은 업데이트가 포함됩니다.

기본 규칙

디자인보다 진실. 모든 기능, 숫자, 가격, 제공 날짜 및 사회적 증거는 출처로 추적 가능합니다. 제품 자체의 온보딩 및 페이월 카피는 종종 과장합니다: 코드에서 확인하세요. "알 수 없음"은 유효한 답변입니다: 해당 슬롯을 선택 사항으로 만들고 질문하세요. 그럴듯한 숫자로 채우지 마십시오. 조작된 증거는 제거합니다.
브랜드가 외형을 결정합니다. 브랜드 자체 자료(로고, 이름, 제품 UI, 비디오, 장소)에서 팔레트, 서체 및 시그니처 장치를 도출합니다. 생성물처럼 보이는 장치(tells.md)는 브랜드 자료나 소유자가 직접 배치하고 방향 계약에서 명명한 경우에만 허용됩니다.
제품이 주인공입니다. 실제 UI와 실제 아티팩트가 아이콘, 스톡 3D 및 추상화보다 우선합니다. 데모는 실제 제품처럼 보여야 합니다: 실제 A4 인보이스, 실제 렌더링된 템플릿, 실제 카탈로그.
웹사이트, 슬라이드 데크가 아닙니다. 각각 페이드 인되는 가운데 정렬된 제목-이미지 블록 더미를 피하십시오. 구도, 고정 스크롤 스토리, 계층적 깊이, 인터랙티브 데모 및 상태 기반 모션을 사용합니다.
모션 뒤에 콘텐츠를 숨기지 마십시오. 트리거되지 않은 리빌은 빈 페이지를 남깁니다. 최종 상태를 표시하여 prefers-reduced-motion을 존중합니다.
소유자는 루프 안에, 방해되지 않게. 전체 빌드 전에 방향을 보여줍니다. 홈 페이지를 먼저 하고 승인되면 다른 페이지로 확장합니다. 각 개방형 질문은 옵션과 함께 한 번만 묻고, 그 주변에서 계속 빌드합니다.
구성은 값을 보관합니다. 환경 변수는 URL, ID 또는 토큰을 전달하며, 켜기/끄기 스위치나 하드코딩된 상수를 전달하지 않습니다. 종속 값은 환경 변수에서 파생합니다. .env.example만 커밋합니다.
대상 리포지토리를 따릅니다. 해당 README, CONTRIBUTING, AGENTS.md 및 commitlint 구성을 읽습니다. 해당 패키지 매니저를 사용합니다. 프레임워크 버전(Next 14 vs 16, Tailwind 3 vs 4, React 18 vs 19)을 일치시킵니다.
비밀 및 내부 정보는 외부로 유출되지 않아야 합니다. 소유자가 붙여넣은 토큰을 절대 출력, 커밋 또는 에코하지 마십시오. 공개 커밋 및 PR에는 클라이언트 이름, 비공개 가격 또는 수정되지 않은 보안 허점이 포함되지 않습니다.
9/10 미만에서 완료되었다고 말하지 마십시오. 보고하기 전에 스크린샷에서 작업 점수를 매깁니다. "완료" 후에 제공된 6 또는 7의 자체 평가는 작업이 누락되었음을 나타냅니다.

먼저, 모드를 선택하세요

방문자가 무엇을 하러 왔는지에 따라 디자인이 얼마나 멀리 갈 수 있는지 결정됩니다. 하나의 프로젝트는 다른 모드의 여러 표면을 가질 수 있습니다. 각각에 모드를 지정합니다.

모드	표면	방문자	주도 요소	참조
설득	제품, 마케팅, 회사, 캠페인, 가격	결정하고 행동합니다	제품이 스스로 증명함; 첫 화면에서의 실제 행동	building-blocks.md
읽기	헬프 센터, 문서, 변경 로그, 블로그	무언가를 이해합니다	독자의 질문; 브랜드는 프레임을 소유하고, 읽기 열은 소유하지 않음	read-mode.md
체험	포트폴리오, 쇼케이스, 갤러리	작업을 탐험합니다	첫 뷰포트부터 작업 자체	building-blocks.md § 체험

제품의 마케팅 사이트는 앱을 보여주더라도 설득입니다. 헬프 센터는 아름다워도 읽기입니다.

워크플로우

단계를 순서대로 진행하세요. 각 참조는 해당 단계에 도달했을 때 읽고, 그 전에는 읽지 마십시오.

단계	수행	참조
0. 킥오프	기본 브랜치에서 분기, 개발 서버 시작 (실제 포트 기록), 보고서용 "이전" 세트 캡처	verification.md § 1
1. 디스커버리	사이트 감사, 진실 출처 찾기, 주장 원장 및 주제 인벤토리 작성, 브랜드 자료 수집, 결과 보고	discovery.md
2. 방향	아이디어 찾고 경쟁자 테스트 통과, 팔레트 및 서체 설정, 시그니처 순간 선택, 방향 계약 작성, 보여주기	direction.md, tells.md
3. 정적 빌드	토큰, 히어로, 실제 콘텐츠가 포함된 각 액트, 내부 페이지. 머릿속에서 모션 끄기	building-blocks.md, media.md, read-mode.md
4. 모션 및 시그니처	하나의 안무된 인트로, 상태 기반 순간, 시그니처. 3D는 그 자리를 증명할 때만	motion.md, three-d.md
5. 문의 및 전환	공유 유효성 검사, 양식, 엣지 라우트, 디자인된 알림 이메일, 예약 또는 리드 사전 채움	contact-email.md
6. SEO 및 표준	서버 렌더링, 메타데이터, 소셜 카드, 구조화된 데이터, 크롤러 파일, 헤더. 자체 스택된 PR	seo-standards.md
7. 검증 및 비판	모든 너비 및 테마의 브라우저 루프, 스크립트된 검사, 프로덕션 빌드, 그 다음 점수화된 비판, 최대 3라운드	verification.md, critique.md
8. 출시	커밋, PR, 팀 업데이트, 이전/이후 보고서, DESIGN.md, 메모리 노트	delivery.md

무언가 이상하게 동작할 때마다 gotchas.md를 확인하세요. 소유자가 반응할 때마다 feedback.md를 읽으세요: 소유자가 말하는 것("양념이 부족해", "색상 균형이 안 맞아", "싸구려 복제품 같아")을 무엇을 변경할지로 바꿔줍니다.

디자인 방향 스킬(frontend-design, impeccable, taste-skill)이 설치된 경우, 2단계에서 추가 범위를 위해 로드하세요. 이 스킬은 그것 없이도 독립적으로 작동합니다.

스택. 레시피는 Next.js, React, Tailwind 및 GSAP에서 출시되었으며 Cloudflare Pages에서 호스팅되었고, 스니펫은 해당 스택을 보여줍니다. 방법, 검사 및 대부분의 스크립트는 스택에 의존하지 않습니다: Astro, SvelteKit, Nuxt 또는 일반 HTML에서 규칙을 유지하고 레시피를 대상 프레임워크 및 버전으로 변환하세요.

스크립트

대상 리포지토리의 루트에서 실행합니다. <skill>은 이 스킬의 폴더입니다.

node <skill>/scripts/slop-scan.mjs [dir] [--json] [--strict] [--allow <rules>] [--list-rules]: 생성된 사이트 특성, 조작된 증거, 장르 카피, 죽은 링크, 비밀 및 알려진 함정에 대해 소스를 스캔합니다. 오류 시 종료 코드 1(--strict 사용 시 경고에도 종료). site-upgrade-allow: <rule> <reason> 주석(그 아래 줄부터 다음 빈 줄까지 적용) 또는 리포지토리 루트의 .site-upgrade-allow 파일로 예외를 지정합니다. Node 18+, 의존성 없음.
<skill>/scripts/ssr-audit.sh <base-url> [path]...: 페이지당(경로가 지정되지 않으면 모든 사이트맵 페이지): 상태, <h1> 개수, JSON-LD 블록, 표준 URL, 소셜 이미지, 클라이언트 렌더링 회피 및 제목; 그 다음 보안 헤더 및 크롤러 파일. 페이지 실패 시 종료 코드 1. 프로덕션 서버에 대해 실행합니다.
<skill>/scripts/video-prep.sh <source> <out-dir> [name] [poster-second]: 각 컷에 키프레임이 있는 무음 웹 인코딩, 포스터 및 정사각형 미리보기 클립을 씁니다. imageio_ffmpeg 바이너리로 폴백합니다.
<skill>/scripts/playwright/*.js: Playwright MCP browser_run_code_unsafe 도구용. MCP는 작업 공간 내의 파일만 읽으므로 먼저 복사하십시오(mkdir -p .playwright-mcp && cp <skill>/scripts/playwright/*.js .playwright-mcp/) 및 filename: ".playwright-mcp/<name>.js"를 전달하십시오. .playwright-mcp/를 git에서 제외하십시오.
- reveal-scroll.js: 스크린샷 전에 모든 리빌이 실행되도록 스크롤하고 이후에 여전히 숨겨진 텍스트를 나열합니다.
- page-audit.js: 프레임을 측정합니다: 하나의 <h1>, 두 줄 이상의 제목, 작은 텍스트, 작은 터치 대상, 이름 없는 컨트롤, alt 없는 이미지, 제목 없는 섹션 및 테마 없는 브라우저 표면.
- overflow.js: 320px에서 1440px까지 가로 스크롤을 유발하는 요소를 찾고 가장 바깥쪽 원인을 명명합니다.
- console-scan.js: 모든 사이트맵 URL을 방문하고 콘솔 오류, 페이지 오류, 실패한 요청, 4xx/5xx 및 CSP 위반을 보고합니다.

에셋 및 템플릿

대상 리포지토리 또는 스크래치패드에 복사하여 적용합니다:

assets/render-email.ts: 엣지 라우트용으로 react-dom/server 없이 React Email 템플릿을 HTML로 렌더링합니다.
assets/JsonLd.tsx: 임베드해도 안전한 JSON-LD 스크립트 태그입니다.
assets/ScrollTriggerRefresh.tsx: 페이지 높이가 변경될 때마다 GSAP 스크롤 트리거를 다시 측정합니다.
assets/templates/claims-ledger.md: 출시됨, 출시되지 않음, 알 수 없음 및 숫자, 각각 출처 포함(1단계).
assets/templates/direction-contract.md: 주제, 아이디어, 자체 세계, 첫 뷰포트, 시그니처 및 브랜드 예외(2단계).
assets/templates/critique-round.md: 라운드당 하나의 블록으로 점수화된 비판(7단계).
assets/templates/DESIGN.md: 구축된 디자인 시스템, 나중 에이전트가 브랜드를 유지하도록 마지막에 작성(8단계).
assets/templates/team-update.md: 팀 채팅용 복사-붙여넣기 업데이트(8단계).

소유자 체크포인트

이에 의존하는 모든 것을 게시하기 전에 확인하십시오. 옵션과 함께 한 번만 묻고; 빌드를 지연시키지 마십시오:

출시 상태 및 스토어 제공 가능 여부, 환경 플래그 대신 실제 스토어 리스팅 기준
가격 및 요금제, 그리고 그 출처
아무도 출처를 알 수 없는 수치(가동 시간, 데이터 센터, 고객 수): 누군가 승인할 때까지 제외
문의 받은편지함, 및 소유자가 테스트용으로 읽을 수 있는 받은편지함
아직 출시되지 않은 목록, 카탈로그 또는 캐러셀의 항목
법적 신원, 주소 및 전화번호, 나타나는 모든 곳에서 동일
방문자 데이터를 수신할 제3자(분석, 임베드, 폰트, 이메일) 및 필요한 개인정보 처리방침 조항
마스코트, 3D 모델 또는 비디오의 소스 파일(재구축 전)
모든 프로덕션 단계: 도메인, DNS, 배포 설정, 마이그레이션. 소유자가 실행하거나 승인합니다.

사이트 업그레이드