Portal UI
포털은 여러 의도를 제공합니다. 랜딩 페이지는 하나의 목표를 달성합니다. 페이지에 하나의 제안과 하나의 액션만 있다면 중단하고 랜딩 페이지 스킬을 사용하세요. 이 파일은 개인 작업물을 위한 결정 레이어입니다.
이 파일이 다시 명시하지 않는 기본값을 설정하는 두 가지 소스가 있습니다. 시각적 금지 규칙은 Leonxlnx/taste-skill (MIT)을 따릅니다. 간격, 포커스 및 모션 타이밍은 elayadesign/ai-design-skills의 landing-page-design (MIT)을 따르되, 이 파일에서 명명하는 경우에만 적용됩니다. 두 규칙이 포털에서 충돌할 경우 이 파일이 우선합니다.
아이디어
편집 전에 한 문장을 작성하세요:
이 페이지에서 **[오직 여기에만 존재하는 artefact]**는 **[하나의 라이브 디바이스]**가 됩니다.
터미널, 실행 중인 프로젝트 또는 실제 인터페이스가 대상입니다. 스캔라인, 네온 그리드 또는 "SYS.ONLINE"은 해당되지 않습니다. 동일한 문장이 어떤 개발자에게나 적용됩니다. 하나의 라이브 디바이스를 유지하세요. 엄지손가락으로 작동 가능해야 하고, 스크립트가 없을 때를 대비한 대체 수단(fallback)이 있어야 하며, 작업물을 가려서는 안 됩니다.
실제 인터페이스 조각은 data-ui로 표시하세요. 고정폭 글꼴은 해당 조각 내부, pre/code 내부, 그리고 표 형식의 숫자에만 사용합니다.
페이지 순서
- 첫 화면: 이 사람이 누구인지, 무엇을 만드는지, 라이브 디바이스. 모든 너비에서 두 줄 이하인
h1하나. 그 아래에 해야 할 일을 알려주는 한 문장. - 직접 작업물, 실제 사진 또는 클립과 함께. 다른 사람의 소프트웨어는 가이드입니다. 가이드 행에 저자를 표시하세요. 작업 그리드에 넣지 마세요.
- 선택 사항: 실제로 가져온 경우 라이브 목록(피드, 순위).
- 가이드: 도구 사용 방법을 한 문장으로. 별표 개수는 부차적이며 스스로 업데이트될 수 있습니다.
- 이미 존재하는 문서. 문서가 없는 섹션으로 사이트 제목을 붙이지 마세요. 약속된 블로그는 실제 목록을 가져야 하며, 그렇지 않으면 제목에서 해당 단어를 빼야 합니다.
- 바닥글: 이름, 연락처, 유료 또는 지원 제안. 지원 제안은 작업물과 동등한 위치가 아닙니다.
내비게이션의 모든 항목은 제목과 실제 대상을 가지고 있습니다. 모바일 레이아웃도 해당 내비게이션을 유지합니다. 중단점 아래에서 바가 숨겨지면 전체 높이 플랫 패널을 여는 컨트롤을 추가하세요. 링크는 읽기 순서로 60ms 간격으로 도착하며 총 400ms 미만이어야 합니다. 패널 배경은 페이지 배경색이며, 블러 처리가 아닙니다.
시각적 제한
다음 항목을 추가하기 전에 제거하세요: 텍스트 그라데이션, 유리 막대(glass bar), 스캔라인, 애니메이션 그리드, 원뿔형 테두리, 글로우, 제목의 이모지, 인덱스 번호(01 //), 헤드라인 위의 알약 배지, 작업물 뒤의 두 개 이상의 주변 효과.
사이트에 이미 배경색, 텍스트 색상 및 하나의 강조색이 있으면 유지하세요. 두 번째 디스플레이 서체를 도입하지 마세요. 굵기는 700 이하로 유지합니다.
모션은 cubic-bezier(0.22, 1, 0.36, 1)을 사용합니다. transform과 opacity만 애니메이션합니다. 각 섹션을 IntersectionObserver로 한 번만 표시합니다. 존재해야 하는 스크롤 리스너는 requestAnimationFrame으로 게이트(gate)합니다. prefers-reduced-motion은 모든 단어를 화면에 유지하고 이동을 없앱니다.
공유 CSS: 포털 전용 제한은 홈페이지 스타일시트에 넣으세요. 모든 페이지에 있는 버그(예: 누락된 포커스 링)에 대해서만 공유 파일을 변경하세요.
출시
- 건너뛰기 링크,
:focus-visible에서 표시, 현재 네비게이션 항목 표시. href="#"사용 금지.og:image는 작업물의 넓은 그림. Twitter 카드는summary_large_image.- 작업 이미지에 대체 텍스트. 라이브 디바이스는 접근 가능한 이름을 가져야 합니다.
확인
이 스킬에서 node scripts/check.mjs <index.html> <css files>를 실행하세요. 그런 다음 1440, 768 및 390 너비에서 페이지를 여세요. 모바일에서는 메뉴를 열고 각 링크를 따라가세요. 모션이 축소된 상태에서 첫 화면은 여전히 사람과 작업물을 표시해야 합니다.
스크립트의 FAIL을 수정하세요. 홈페이지 컷에 맞추기 위해 형제 페이지의 스타일을 변경하지 마세요.