MD412/agentic-build-intro

Agentic Build Intro

시작 화면, 실제 페이지 스캔, 그리고 레이블이 지정된 커서 에이전트들이 실제 페이지를 구축합니다. 프레임워크나 빌드 단계가 필요 없습니다. assets/layers.js와 assets/layers.css 두 파일로 구성됩니다.

파일

• assets/layers.js: 런타임입니다. 설정을 읽고 게이트를 표시하며 스캔 및 빌드를 실행합니다.
• assets/layers.css: 모든 스타일이 포함되어 있으며, --lx-* 사용자 정의 속성을 통해 테마를 지정할 수 있습니다.
• assets/head-snippet.html: 모든 페이지의 head에 포함해야 하는 세 개의 태그입니다.
• references/gate-design.html, references/scan-design.html: 원본 독립 실행형 디자인입니다. 소유자가 새 게이트나 스캔 디자인을 원할 경우 시작점으로 사용하세요.

단계

1. 사이트를 백업하세요. 그런 다음 layers.js와 layers.css를 사이트에 복사합니다(기본 경로는 /js/layers.js와 /css/layers.css이며, 사이트에서 다른 경로를 사용하는 경우 스니펫을 조정하세요).

2. 모든 페이지에 head 태그를 추가하세요. assets/head-snippet.html을 각 페이지의 <head>에 붙여넣습니다. 인라인 스크립트는 인트로가 실행될 때만 페이지가 페인트되기 전에 숨기고, 런타임이 로드되지 않으면 4초 후에 페이지를 다시 표시합니다.

3. 게이트 텍스트를 설정하세요. script 태그의 data-* 속성 또는 스크립트 로드 전에 설정된 window.AgenticBuildIntro 객체를 사용합니다. 객체가 속성보다 우선합니다.

   키	속성	기본값
   name	data-name	document.title
   initials	data-initials	name의 첫 글자
   title	data-title	비어 있으면 숨김
   location	data-location	비어 있으면 숨김
   timezone	data-timezone	방문자의 현지 시간
   clock	data-clock	true
   cta	data-cta	Initiate Portfolio Build
   skip	data-skip	Skip to site
   agents	data-agents	데스크톱 30개, 휴대폰 14개
   colors	data-colors	내장 팔레트 (쉼표 목록)

   소유자가 제공한 사실만 사용하세요. 이름, 직함 또는 위치를 절대 임의로 만들지 마십시오. 추가 텍스트는 중립적인 UI 텍스트여야 합니다.

4. 사이트의 디자인 시스템에 맞추세요. 사이트의 CSS 변수와 글꼴을 읽은 후, 사이트 자체 스타일시트의 :root에서 --lx-* 토큰을 재정의하세요: --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1에서 --lx-accent-4, --lx-font-display, --lx-font-body. 키트는 글꼴을 로드하지 않습니다. 사이트 고유의 색상을 유지하고 배경에서 잘 읽히는 생생한 에이전트 색상을 선택하세요.

5. 스캔 작동 방식을 변경하지 마세요. 스캔 윤곽선은 빌드에서 사용하는 것과 동일한 요소 목록에서 가져오므로 윤곽선은 실제 콘텐츠가 배치되는 위치에 정확히 표시되며 스캔 에이전트는 동일한 지점, 색상 및 레이블로 빌드 에이전트에 작업을 인계합니다. 절대 일반 와이어프레임으로 대체하지 마세요.

6. 다음 동작을 유지하세요.

   • 상자는 핸들과 W x H 레이블과 함께 드래그되어 나타나고, 텍스트는 캐럿과 함께 입력되며, 에이전트가 작업하는 동안 가이드 라인이 깜박입니다.
   • 이미지는 약 1.7초에 걸쳐 단계별 위에서 아래로 지우기, 스캔 라인, 희미한 줄무늬 및 흑백에서 컬러로 전환되며 나타납니다.
   • 기본 속도는 부드럽고 빠르며, 부드러운 ease-in-out이 적용됩니다: 커서는 0.50.7초, 상자는 0.60.8초에 드래그, 텍스트는 문자당 약 15ms(긴 블록은 약 1.4초로 제한), 각 에이전트는 작업 간 약 150ms 멈춥니다. 속도는 처음에 페이지 크기에 따라 설정되며, 데스크톱에서 약 23초, 휴대폰에서 약 20초 목표에 뒤처지면 빌드 중에 속도가 빨라져 필요한 경우 에이전트가 접힌 부분 아래에서 더 멀리 시작할 수 있습니다. 에이전트는 항상 푸터까지 모든 요소를 구축합니다. 45초 폴세이프가 유일한 하드 스톱입니다.
   • 팔로우(Follow)는 기본적으로 켜져 있습니다. 다음 빌드 대상이 뷰포트의 약 65% 아래로 떨어지면 페이지가 한 번의 느린 동작으로 아래로 이동하여 작업이 상단에서 약 30% 위치에 있게 됩니다. 종료 시 상단으로 다시 스크롤되지 않습니다. reduced motion 설정 시에는 ease 대신 즉시 이동합니다.
   • 세션당 한 번만 실행됩니다. ?build=1은 재생, ?build=0은 건너뜁니다. Enter 키는 시작, Esc 키는 게이트 건너뜀, 휠, 클릭, 터치 또는 아무 키나 실행 중인 인트로를 건너뜁니다.
   • 390px 너비까지 작동하며 휴대폰에서는 더 적은 에이전트를 사용합니다. prefers-reduced-motion은 인트로를 건너뜁니다.

7. 코드 규칙. 코드 주석 없음, 텍스트에 em 대시 사용 금지, AI 생성 사람 형상 사용 금지.

8. 녹화하여 확인하세요. JS에서 node --check를 실행합니다. 사이트를 서빙하고 1280x800 및 390x844 해상도에서 Playwright 비디오를 녹화합니다: ?build=1을 열고 시작 버튼을 클릭한 후 20~60초 동안 녹화합니다. 게이트, 스캔, 인계, 빌드 및 종료 상태의 프레임을 추출하고 페이지 오류를 확인한 후 발견된 문제를 수정합니다. 모든 기존 페이지가 여전히 200을 반환하는지 확인하세요.

9. 보고 라이브 링크, 게이트 스크린샷 및 녹화본과 함께 제출하세요.