시네마틱 모션 UI

모델이 생성한 페이지는 대개 본 적 있는 모든 페이지의 평균처럼 보입니다. 즉, 가운데 정렬된 배지, 굵은 Inter 헤드라인, 보라색-분홍색 그라데이션, 두 개의 버튼, 세 개의 아이콘 카드, 모든 요소가 같은 속도로 페이드 인 됩니다. 잘못된 것은 없지만 결정된 것도 없습니다. 사람들은 이 평균을 즉시 알아보고, 그 인식이 바로 "AI가 만든 것 같다"는 의미입니다.

갤러리급 페이지(motionsites.ai에서 프리미엄 프롬프트로 판매되는 종류)는 네 가지 면에서 다르며, 이 스킬은 이를 중심으로 구축되었습니다.

하나의 강력한 시각적 아이디어가 페이지를 이끕니다. 영화 같은 이미지나 비디오, 거대한 단어, 캐릭터, 생성적 필드. UI는 이 아이디어와 경쟁하지 않고 받쳐줍니다.
대비와 세심함이 담긴 타이포그래피. 이 브랜드에 속하는 타이포그래피 결정(메가 워드마크, 확대된 콘덴스드 그로테스크, 단독으로 쓰인 고대비 세리프, 목소리로 사용된 모노), 크기에 따라 조정되는 네거티브 트래킹, 디스플레이 타입에서 1.15 미만의 line-height, 그리고 때로는 글자 단위로 조정된 커닝.
안무된 모션. 모든 요소는 고유한 진입 타입과 지연 시간을 가지며, 하나의 easing 패밀리를 사용하므로 페이지가 페이드 인 되는 대신 조립됩니다. 애니메이션이 전혀 실행되지 않아도 페이지는 완전하고 읽을 수 있어야 합니다.
모든 곳에 특정 값. 정확한 hex, 정확한 px, 정확한 easing, 정확한 카피. 모호함은 기본값(그리고 AI 느낌)이 스며드는 방식입니다. MotionSites 프롬프트는 하나의 화면에 대해 15-40KB의 정확한 값으로 구성됩니다. 그 정밀함이 곧 제품입니다.

실행

다음 단계를 순서대로 진행하십시오. 1-2단계는 종이에 생각을 정리하는 과정으로 몇 분 정도 소요됩니다. 이 단계를 건너뛰는 것이 출력이 평균으로 되돌아가는 가장 흔한 이유입니다.

1. 방향 카드

프로젝트(기존 브랜드, 폰트, 색상, 카피, 에셋)와 사용자의 브리프를 읽으십시오. 그런 다음 references/spec-template.md § 방향 카드 양식을 사용하여 답변이나 스크래치 파일에 짧은 방향 카드를 작성하십시오.

주제 및 대상: 이것이 누구를 위한 것인지, 사용자의 실제 명사를 사용하여 한 문장으로.
아키타입: references/archetypes.md에 있는 일곱 가지 중 하나를 선택하십시오. 지금 해당 파일을 읽으십시오. 각 아키타입의 구성, 유형, 팔레트, 재질 및 시그니처 모션을 제공합니다. 사용자가 참조(사이트, MotionSites 템플릿)를 언급하면 가장 가까운 아키타입에 매핑하십시오.
세 가지 분위기 단어 "모던, 깔끔, 세련된"이 아닌 단어(그 단어들은 모든 페이지를 설명합니다).
팔레트: 배경색, 잉크색, 흐릿한 잉크색, 최대 하나의 악센트색. hex 값을 명시하십시오.
타입 페어: references/typography.md에서 선택하십시오. 각 폰트의 역할을 명시하십시오.
사용하지 않는 동작: references/anti-ai-tells.md § 2차 텔에 있는 "세련된 AI" 기본값 중 최소 두 가지를 명명하고, 무엇으로 대체하는지 적으십시오. 갤러리 프롬프트가 너무 널리 복사되어 그 자체의 레시피가 이제는 텔이 되었습니다.
시그니처 순간: 누군가 친구에게 설명할 한 가지(예: "제목 글자가 올라가면서 얇은 링이 그녀의 얼굴 주위에 그려집니다"). 이름을 지을 수 없다면 페이지는 기억에 남지 않을 것입니다.
미디어 계획: 히어로를 채울 내용과 그 출처(3단계).

2. 코드 전 스펙

references/spec-template.md의 나머지 부분을 채우십시오: 토큰, 레이어 스택, 마크업 순서, 각 컴포넌트의 상태, 모션 테이블(요소 → 진입 유형 → 지연 시간 → 지속 시간), 중단점 테이블. 간결하게 유지하십시오. 산문이 아니라 작업 문서입니다. 이 단계가 결과를 정밀하게 만듭니다. 값을 기록해 두면 기본값에 의존하지 않고 결정을 구현하게 됩니다.

사용자가 코드 대신 프롬프트나 스펙(다른 빌더에 붙여넣기 용)을 요청했다면, 채워진 스펙이 결과물입니다. references/spec-template.md § 프롬프트 양식의 구조를 따르십시오.

3. 미디어

히어로 이미지나 비디오가 감정적 작업의 대부분을 수행합니다. references/media.md를 읽은 후 다음 순서로 선택하십시오.

사용자가 제공했거나 프로젝트에 존재하는 에셋.
assets/backgrounds/의 생성적 배경(캔버스 입자 파동, WebGL 셰이더 필드, 그려진 SVG 링), 팔레트에 맞게 조정. 이들은 플레이스홀더가 아닌 실제 모션입니다.
디자인된 미디어 슬롯: 스타일이 적용된 폴백(그라데이션 필드 또는 생성적 레이어)과 이미지 또는 비디오용 생성 프롬프트를 주석과 보고서에 포함하여 사용자가 파일을 넣을 수 있도록 합니다.

임의의 스톡 사진(picsum, source.unsplash.com, 플레이스홀더 서비스)을 핫링크하거나 회색 상자를 남기지 마십시오. 둘 다 미완성으로 보이는 가장 빠른 길입니다.

4. 빌드

단일 파일 HTML (프로젝트가 없을 때 기본값): assets/starter.src.html에서 시작하십시오. 이 파일은 구조(레이어 스택, 모션 킷, 안전장치, 축소 모션 처리, 모바일 메뉴, 그레인)이지 디자인이 아닙니다. 선택한 아키타입에 맞게 스타일을 재지정하고 재구성하십시오. 소스 코드에 /*@@MOTION_KIT_CSS@@*/, /*@@MOTION_KIT_JS@@*/ 및 /*@@BG:이름@@*/ 플레이스홀더를 유지하고 python3 <skill>/scripts/inline_kit.py page.src.html index.html 명령으로 최종 파일을 생성하십시오. 이 명령은 직접 다시 입력하지 않고도 킷과 배경을 정확하게 인라인 처리합니다. (assets/starter.html은 이미 인라인 처리된 동일한 스타터 파일로, 읽기용입니다.) examples/ 페이지는 품질 기준을 보여줍니다. 블라인드 리뷰에서 이 페이지들은 참고한 갤러리 템플릿보다 AI처럼 덜 보이는 것으로 평가되었습니다. cinematic-bay-hero.html (A: 안개 낀 만을 향해 열리는 목재 루버) dark-code-review-hero.html (B: 제품 자체의 diff가 이미지, 악센트 단어 클리셰 없음) light-window-hero.html (가벼운 A/C 하이브리드: 아침 햇살이 실시간으로 벽을 가로질러 떠다님). 브리프와 가장 가까운 예제를 훑어보면서 디테일 수준과 하나의 콘셉트가 이미지, 타이포그래피, 모션을 어떻게 결합하는지 확인하십시오. 구성, 색상 팔레트 또는 카피를 복사하지 마십시오. 각 브리프는 고유한 아이디어를 가질 자격이 있습니다.
React / Next / Tailwind / Framer Motion: references/react-port.md를 읽으십시오. 서버 렌더링 HTML이 하이드레이션 없이도 보이도록 진입 애니메이션을 CSS 키프레임에 유지하고, 스크롤 연결 및 인터랙티브 모션에는 Framer Motion을 사용하십시오.
모션 세부사항: references/motion.md. 표면: references/materials.md. 반응형: references/responsive.md.
모든 아이콘과 로고 마크는 이 브랜드를 위해 그린 인라인 SVG를 사용하십시오. 기능 행에 아이폰 폰트와 스톡 아이콘 세트를 사용하는 것은 강력한 템플릿 신호입니다.

5. 단어

카피는 페이지가 AI처럼 읽히는 이유의 절반을 차지합니다. 규칙:

주제의 구체적인 명사와 동사를 사용하십시오("자신의 런북으로 에이전트를 훈련하세요", "조수선에서 끌어온 리조트"). 카테고리 추상화("AI의 힘을 잠금 해제하세요") 대신 사용하십시오.
헤드라인은 의도적으로 두 줄로 나뉜 4-9단어로 구성하십시오. 줄바꿈은 디자인의 일부입니다.
허위 증거를 만들지 마십시오. 고객 로고, 사용 후기, 평점 및 비즈니스 통계는 사용자로부터 와야 합니다. 구성에 통계 행이 필요하고 실제 숫자가 없는 경우, 주장되지 않은 사실(위치, 설립 연도, 제공 서비스 수, 영업 시간)을 사용하거나 코드 주석과 보고서에 명확히 플레이스홀더로 표시하십시오.
페이지가 해당 시장을 위한 것이라면 사용자의 언어로 작성하십시오. 베트남어 카피에는 베트남어 글리프를 완전히 지원하는 폰트가 필요합니다(references/typography.md 확인).
references/anti-ai-tells.md § 카피에 나열된 구문을 피하십시오. scripts/audit.py가 이를 플래그합니다.

6. 검증. 보고 나서 고치십시오.

검사를 통과하는 것이 좋아 보이는 것과 같지는 않지만, 검사에 실패하면 좋아 보일 가능성이 없습니다.

정적 감사 실행: python3 <skill>/scripts/audit.py <파일-또는-디렉토리>. 모든 HIGH를 수정하십시오. 모든 MEDIUM을 수정하거나 의식적으로 수락하십시오.
실제 브라우저(내장 브라우저 창, Playwright 또는 Chrome, 사용 가능한 것)에서 페이지를 여십시오. 진입이 끝날 때까지 약 3초 기다린 후 scripts/runtime_check.js의 스니펫을 브라우저의 JS 평가를 통해 실행하십시오. 숨겨진 텍스트, 수평 오버플로, 한 화면 잠금에 의해 잘린 텍스트, 깨진 미디어, 로드되지 않은 폰트, 작은 탭 대상, 여전히 애니메이션을 실행하는 요소를 보고합니다. 또한 콘솔에서 오류를 확인하십시오. 숨겨지거나 백그라운드 브라우저 탭은 프레임을 렌더링하지 않으므로 CSS/WAAPI 타임라인과 requestAnimationFrame 루프가 중단되어 스크린샷에서 페이지가 비어 있거나 반쯤 빌드된 것처럼 보일 수 있습니다. 판단하기 전에 스크린샷을 한두 장 찍거나(각각 프레임을 렌더링함), document.getAnimations().forEach(a => { try { a.finish() } catch (e) {} })를 실행한 후 다시 확인하십시오. 또한 페이지 사본에서 모든 <script>를 제거하고 한 번 로드하십시오. 모든 텍스트가 여전히 보이고 레이아웃이 온전해야 합니다.
1440×900, 1280×720(짧은 노트북: 히어로가 가장 자주 깨지는 해상도), 375×812에서 스크린샷을 찍으십시오. 페이지에 모바일 메뉴가 있으면 열고 스크린샷도 찍으십시오.
각 스크린샷을 보고 references/anti-ai-tells.md § 가늘게 뜨고 보기 테스트의 질문을 확인하십시오. 실패한 것을 수정하십시오. 첫 번째 패스가 괜찮아 보이더라도 최소 한 번의 수정 및 확인 라운드를 수행하십시오.
브라우저를 전혀 열 수 없으면 보고서에 그렇게 명시하십시오. 수행하지 않은 시각적 검증을 주장하지 마십시오.

7. 보고서

사용자에게 간략히 알리십시오: 방향(아키타입, 시그니처 순간, 타입 페어), 플레이스홀더(미디어, 통계, 링크)와 이를 정확히 대체하는 방법, 그리고 어떤 크기에서 무엇을 검증했는지.

모든 아키타입에 적용되는 법칙

구성

히어로는 데스크톱에서 하나의 뷰포트(100dvh, 히어로 내 스크롤 없음)입니다. 단, 브리프가 긴 랜딩 페이지인 경우는 예외입니다. 콘텐츠는 하단이나 모서리에 고정되며, 정중앙에는 고정되지 않습니다. 상단 부분은 미디어가 차지합니다.
레이어 스택, 뒤에서 앞으로: 배경색 → 미디어 → 스크림 → 페이지 콘텐츠 → 그레인. 스크림은 미디어에 맞게 조정됩니다(텍스트 뒤의 방사형 어두움, 네비게이션 뒤의 상단 그라데이션). 따라서 텍스트를 카드에 넣지 않고도 읽기 쉽게 유지됩니다.
히어로에는 최대 두 개의 콜 투 액션: 하나는 솔리드, 하나는 고스트 또는 글라스. 절대 세 개가 아닙니다.
"헤드라인 위의 배지 알약"과 "하단에 세 개의 통계 행"은 이제 템플릿 가구입니다. 콘텐츠가 실제로 짧은 레이블이거나 세 개의 실제 숫자일 때만 사용하고, 그 경우에도 형태를 변경하십시오(단일 사실, 작은 표, 코너 카피, 타임라인).
아키타입별 반경 시스템을 사용하십시오(기술 및 에디토리얼에는 날카로운 0-7px, 소프트 및 컨슈머에는 알약)하고 이를 고수하십시오. 모든 것에 균일한 rounded-2xl을 사용하는 것은 템플릿 시그니처입니다.

타이포그래피

디스플레이 크기: 트래킹 −0.03em ~ −0.05em, line-height 0.9–1.12. 작은 대문자와 모노 마이크로 카피: 트래킹 +0.04em ~ +0.12em, 대문자, 11–14px.
헤드라인당 최대 하나의 강조 장치를 브리프에서 선택하십시오. 산세리프 헤드라인 안의 세리프 이탤릭 단어("AI 에이전트를 훈련하세요…")는 2025-26년 가장 인식하기 쉬운 "세련된 AI" 틱입니다. 블라인드 리뷰어는 즉시 플래그합니다. 기본적으로 사용하지 마십시오. 크기나 두께 대비, 의도적인 줄바꿈, 색상, 콘셉트와 연결된 그려진 마크(분음 부호의 잔물결, 버그 아래의 빨간 펜 물결), 또는 강조 없음을 선호하십시오. 세리프 이탤릭이 실제로 브랜드의 목소리라면 한 단어가 아니라 전체 줄을 이탤릭으로 설정하십시오.

모션

하나의 easing 패밀리(기본값: cubic-bezier(.16,1,.3,1) expo-out). 진입은 0.6–1.35초 동안 지속되며 읽기 순서대로 약 0.1초에서 약 1.5초까지 지연되어 시작됩니다. 각 요소 유형은 고유한 진입을 갖습니다(헤드라인은 mask-rise, 네비게이션 알약은 scale, 버튼은 wipe, 통계는 rise).
콘텐츠는 정지 상태에서 보여야 합니다. 숨겨진 상태는 animation-fill-mode: both와 JS 안전장치를 사용하여 키프레임의 0%에만 존재합니다. JS나 애니메이션이 실패했을 때 페이지가 빈 상태로 유지된다면, 행복한 경로에서 아무리 좋아 보여도 망가진 것입니다.
앰비언트 모션(비디오, 파티클, 셰이더)은 미디어 레이어에 있습니다. 전경 UI는 호버 피드백(0.2–0.35초)과 선택적 스크롤 연결 효과를 제외하고는 진입 후 정지 상태입니다.
prefers-reduced-motion을 존중하십시오: 진입 없음, 앰비언트 루프 없음(대신 하나의 정지 프레임 렌더링).

재질

글라스와 메탈은 미디어 위에 떠 있는 하나 또는 두 개의 컨트롤용이며, 모든 카드에 사용하지 마십시오. 레시피는 references/materials.md에 있습니다.
미디어가 많은 페이지 위에 그레인(6–10% 불투명도)을 추가하십시오. 생성된 이미지를 UI와 통합합니다.

이 스킬의 파일

파일	읽을 시기
`references/archetypes.md`	1단계, 항상
`references/typography.md`	1단계, 타입 페어 선택 시
`references/spec-template.md`	2단계, 항상, 사용자가 프롬프트를 원할 때 프롬프트 양식도 포함
`references/media.md`	3단계
`references/motion.md`	4단계, 모션 세부사항, 스크롤 효과, WAAPI 타임라인
`references/materials.md`	4단계, 버튼, 알약, 글라스, 메탈, 그라데이션 텍스트
`references/responsive.md`	4단계, 토큰, 높이 포함 중단점, 아트보드 스케일링, 모바일 메뉴
`references/react-port.md`	프로젝트가 React, Next, Tailwind 또는 Framer Motion인 경우
`references/anti-ai-tells.md`	5-6단계
`assets/starter.html`	단일 파일 빌드
`assets/motion-kit.css`, `assets/motion-kit.js`	모든 빌드(인라인 또는 가져오기)
`assets/backgrounds/*.js`	생성적 미디어 레이어
`examples/*.html`	품질 기준 조정용(세 가지 히어로)
`scripts/audit.py`	정적 AI 텔 및 견고성 감사
`scripts/runtime_check.js`	로드 후 브라우저 내 검사
`scripts/inline_kit.py`	킷/배경 플레이스홀더가 있는 소스에서 최종 단일 파일 빌드

Cinematic Motion UI: AI가 만든 티 안 나는 시네마틱 랜딩