motion-web은(는) 무엇을 하나요?
모션 우선의 크리에이티브 웹. 이 스킬은 참조 → 컨셉 → 명세 → 구축 → 감사의 모든 단계를 처리합니다.
이 스킬은 전체 웹 페이지를 구축합니다. 모션은 페이지를 좋게 만드는 요소이지, 전체 작업이 아닙니다. 모션이 전혀 없는 요청 — "做个落地页", "帮我把这个官网做出来" — 도 이 스킬의 대상이며, 결과물은 완성된 사이트입니다: 스택, 토큰, 섹션, 카피, 컴포넌트, 상태, 메타, 배포.
우선순위 — 1과 2는 동등합니다:
- 모션 컨셉 및 인터랙션 안무
- 페이지 디자인 — 구조, 타이포그래피 스케일, 팔레트, 간격 리듬, 움직이기 전의 모습
- 구축된 아티팩트로서의 페이지 — 섹션과 그 카피, 컴포넌트 용어집, 토큰 레이어, 해피 패스를 벗어난 상태들 (
page-blueprints.md,components.md,project-setup.md,production-polish.md) - 페이지를 강화할 때만 가벼운 3D 또는 캔버스
- 성능, 접근성, 축소 모션 폴백
기본 페이지에 멋진 메커니즘 하나는 실패한 페이지입니다. 모션은 장점이지, 변명이 아닙니다. 이 스킬의 가장 흔한 실패는 아무도 디자인하지 않은 레이아웃에 하나의 교묘한 인터랙션을 붙여 배송하는 것입니다 — 모션을 끄면 부끄러운 페이지라면 완료된 것이 아니며, 어떤 스프링 튜닝도 고칠 수 없습니다. 디자인은 시간상 2단계가 아닙니다. 최종 결과물에서도 참이어야 하는 또 다른 것입니다. → references/page-design.md, references/design-slop.md
이것은 한 가지 사이트 클래스를 위한 디자인 및 구축 스킬입니다: 크리에이티브 및 마케팅 웹 — 랜딩 페이지, 제품 페이지, 포트폴리오, 스튜디오 사이트, 캠페인, 에디토리얼, 가벼운 문서. 이들은 처음부터 끝까지 구축합니다. 대시보드 / 관리자 / 데이터 밀집 앱 UI 스킬이 아니며, 전체 3D 장면 생성기도 아닙니다(그런 경우 3d-scene-studio로 라우팅). 앱 형태의 조각(가격 표, 로그인, 콘솔 스크린샷)이 포함된 크리에이티브 페이지는 범위 내에 있지만, 로그인된 제품 인터페이스는 그렇지 않습니다.
에이전트 의도 감지 (중요 — 먼저 읽으세요)
사용자는 종종 매우 적게 말합니다. 최소한의 입력에서 의도를 감지하고 자율적으로 행동하세요.
신호 → 의도 맵
| 사용자가 보낸 내용 | 감지된 의도 | 수행할 작업 |
|---|---|---|
| "做个网页" / "做个落地页/官网/作品集" with a topic, no reference | full-build | 전체 사이트, 메커니즘이 아닙니다. page-blueprints.md → project-setup.md → page-design.md → build → components.md → production-polish.md |
| "这页要放什么" / "该有哪些 section" / "信息架构" / "文案怎么写" | blueprint | page-blueprints.md — 스파인을 선택하고, 실제 카피를 작성하며, 모든 발명된 사실을 표시합니다 |
| "导航" / "按钮" / "表单" / "卡片" / "footer" / "FAQ" / "定价表" / "弹窗" / "组件" | component | components.md — 먼저 방언 표, 그 다음 상태 매트릭스. 상태가 없는 컴포넌트는 완료되지 않았습니다 |
| "用什么技术栈" / "Astro 还是 Next" / "怎么起项目" / "design token" / "字体" / "部署" | setup | project-setup.md — 페이지 사다리 ≠ 모션 사다리; 0단계부터 시작하여 올라갑니다 |
| "像 demo 不像成品" / "OG 预览是空的" / "没有 favicon" / "404" / "空状态" / "暗色模式" / "表单没校验" | polish | production-polish.md — 모두 확인 가능합니다; 추정하지 말고 §9를 실행하세요 |
| A bare URL (no other text) | url-drop | 열고 분해한 후(복제 모드 1-2단계), 다음을 물어보세요: 이것을 재구축할까요, 아니면 그들의 것을 위한 참조로 사용할까요? |
| A URL + "做个网页" or "参考这个" | replicate → build | 먼저 URL을 분해하고(복제 모드), 사용자 자신의 콘텐츠를 위한 모션 컨셉을 제안하세요 |
| 参考 + "复刻出来并收录成 case" / "存进 skill" / "做成案例" | case-authoring | cases/AUTHORING.md — 먼저 페이즈 0 게이트: 참조에서 이미지를 제거하세요; 아무것도 남지 않으면, 구축 후가 아닌 구축 전에 에셋을 확보하세요 |
| A URL + "复刻" / "做一个类似的" / "参考这个做" | replicate | 분해 → 패턴에 매핑 → 즉시 구축. |
| A URL to a paper/article/blog | doc-drop | 읽고, 추출 가능한 값으로 기법의 이름을 지정한 후, 요청 시 하나로 구축하세요 (아래 문서 / 기사 드롭) |
| A vague brief ("做个很酷的网页" / "做个 portfolio") | freeform-build | composition-guide.md를 통해 조정 → 스타일+아크를 독립적으로 선택하세요 |
| A topic only ("做一个关于 AI 的落地页") | spec → build | composition-guide.md를 통해 조정 → 시각적 방향을 제안하고 즉시 구축하세요 |
| A detailed brief with references | spec → build | MOTION_SPEC.md 작성 → 승인 받기 → 구축 |
| "审查" / "有什么问题" / "gap" | audit | 기존 작업에서 모션/성능/접근성 갭을 검사하세요 — 정지 프레임을 포함, design-slop.md 참조 |
| "不好看" / "太丑" / "像 AI 做的" / "没设计感" / "普通" | design-audit | 모션을 끄고 스크린샷을 찍어 design-slop.md의 게이트를 실행하세요. 스프링을 튜닝하지 마세요 — 불만은 정지 프레임에 대한 것입니다 |
| "版式" / "排版" / "字太小" / "留白" / "结构" / "section 都长一样" | design | page-design.md — 거시 구조, 타이포그래피 스케일, 간격 리듬, 현재 수상작과 비교하여 측정 |
| "加上…" on existing page | incremental-build | 새로운 모션으로 현재 구현을 확장하세요 |
| A video reference (Pinterest/Dribbble/X clip) | video-ref | STOP — 코드를 작성하기 전에 아래 비디오 참조 프로토콜을 실행하세요 |
| "手感差" / "太生硬" / "不跟手" / "四平八稳" on existing motion | handfeel-tune | handfeel.md에 따라 감사 — 스프링, 속도 커플링, 2차 모션 |
| "跟手但总差一点" / "一抖一抖" / 手感随帧率变 on anything that follows (camera, cursor, rail, tooltip) | handfeel-tune | §1의 스프링이 아님 — handfeel.md §7: 1-exp(-k·dt), speed/k 리드 항, 필터 후 절대 수정하지 않음 |
| "能不能不用 GSAP" / 只是个入场或视差 / 想要更轻 | build | 먼저 1.5 단계 확인 — 네이티브 animation-timeline / animation-trigger / sibling-index() → build-mode.md 사다리 + pattern-recipes.md #16. Firefox는 정적 최종 상태를 얻습니다 |
| 素材是一个真实存在的地方（实拍/扫描），要走进去 | build | 5.5 단계 — 모델보다 3D 가우시안 스플랫 먼저 → build-mode.md 사다리 |
| 卡片/图片要弯折、旗帜、翻页、把截图钉进立体面、"skew 不够用" | warp | 코너-핀 호모그래피 → pattern-recipes.md #17. 모든 쿼드를 보호하고 가장자리 기울기를 asin(h/w)로 고정하세요 — 보호되지 않은 쿼드는 오류 없이 화면 크기 블록을 그립니다 |
| "点不开" / "只有一个能点" / "没人会发现" / "看不到" on existing motion | affordance-audit | 히트 테스트 코드를 먼저 건드리지 마세요. affordance.md에 따라 감사 — 메커니즘은 대개 괜찮습니다. 초대장이 없거나 만료되었습니다 |
| A pile of image assets + "做成一个 3D 场景" / "要有纵深" / "camera 要能走进去" | image-plane-3d | 모델을 사용하지 마세요. 실제 원근 카메라에서 평면 평면으로 장면을 구축하세요 → image-plane-3d.md (사다리 5단계) |
| "有拼接感" / "没融进去" / "像贴上去的" on a rendered scene | image-plane-3d | 아트를 건드리기 전에 측정: 에셋 배치당 평균 R−B 및 휘도, 접촉 그림자 존재 → image-plane-3d.md §6–7 |
| "这个该用什么画" / "DOM 还是 canvas" / 页面只会输出 div 和系统字体 / 参考明显不是 DOM 能做的 | render-layer | 레이어를 먼저 결정한 다음 메커니즘을 결정하세요 → render-layer.md §1. 레이어는 선언이며, case README에 작성하고 verify_case.py --layer로 확인합니다 |
| 手绘 / 墨线 / 描边风的 3D，"像画出来的不像渲出来的"，boil / 抖线 / 纸纹 | ink-render | render-layer.md §3 — 깊이 불연속 외곽선(법선 크리크 꺼짐), 정적 warp과 동적 boil 분리, boil 클록 11Hz 대 60fps 렌더링 |
| Raw plates / renders that still need cutting out, "抠图", "素材怎么进场景", "图糊了" | asset-pipeline | 이미지의 자체 배경에 대해 키잉, 알파 bbox로 자르기, 메타데이터 스크립팅, 요소별 해상도 예산 출력 → image-asset-pipeline.md |
| Any headless check; a number disagrees with what you see; "怎么验" | verify | 먼저 프로브 표면을 구축하세요 — 고정 가능한 클록, __seek, __hold, 상태 종료 — 그런 다음 측정 → verification-harness.md |
| "这一段什么都没发生" / "节奏不好" / "一堆字一下就出来了" on a scroll timeline | timeline-audit | 모든 트랙을 하나의 스크롤 축에 겹쳐 놓으세요; 죽은 비트는 느린 레이어 하나가 아니라 일치하는 고원입니다 → timeline-orchestration.md |
| Long scroll scene with many assets; "卡", "加载慢", "内存爆了", hundreds of plates | scene-streaming | 화면 창으로 활성화, 큰 업로드 분할, 스캔 내 양보, 완전히 폐기 → scene-streaming.md |
| Anything with sound — BGM, ambience, interaction SFX, "音效太少", "氛围音听不清但也别吵" | scene-audio | 세 개의 버스(bgm / hand / world), 행별 곡선, 더 큰 배경 위의 개별 이벤트 → scene-audio.md |
어떤 모드를 사용해야 하는지 사용자에게 묻지 마세요. 감지하세요. 진행하세요. 브리핑이 두 개의 매우 다른 출력(예: 명세 대 즉시 구축) 사이에서 진정으로 모호할 때만 멈추세요.
비디오 참조 프로토콜 (硬规则 — 不许猜)
트리거: 참조가 실제로 볼 수 없는 비디오 — Pinterest 핀, Dribbble 샷, X 클립, 站外短链. 제목이나 텍스트 설명은 모션 정보가 아닙니다.
- 라이브 페이지가 없다고 결론 내리기 전에 스레드를 읽으세요. 저자는 거의 항상 답글에 URL을 게시하며, 답글은 또한 해당 작품이 웹 페이지인지 여부를 알려줍니다. 2026-09-02 측정: 이전 세션은 7개의 비디오 참조에 URL이 없다고 선언하고 페이즈 1을 프레임 측정에 소비했습니다. 모든 7개에 저자 본인이 게시한 라이브 사이트가 있었으며, 한 게시물의 4개 클립 중 3개는 웹 구현이 전혀 없는 Jitter / Figma Motion / Rive 렌더링으로 판명되었습니다(
cases/AUTHORING.md페이즈 1).safe-x tweet <url> --json을 실행한 다음 답글의 모든t.co링크를 확인하세요. - 추측으로 모션을 구축하지 마세요. 제목/설명만 추출했다면 주제는 알지만 모션은 모릅니다. 어쨌든 구축하면 전체 반복을 소모합니다 — 이것은 문서화된 실패 모드입니다(2026-07-06, 해산물 히어로: "orbit" 추측, 실제는 상승 대각선; 두 번 재구축).
- 즉시 2-3개의 키프레임을 요청하세요. 한 문장: "这个视频我打不开，截 2-3 帧关键画面（入场/中间/离场）发我".
- 코딩 전에 궤적을 명시적 기하학으로 명시하고 확인을 받으세요:
- 앵커 포인트: 요소가 들어오는 / 정점에 도달하는 / 나가는 위치(모서리, 3등분점)
- 자세: 회전이 경로 접선을 따름 / 일정하게 유지됨 / 뒤처짐
- 2차 반응: 무엇이 더 움직이는지(배경 모양, 선, 텍스트) 그리고 어떻게
- 예시: "右下入场 → 中心 → 左上离场的上升对角线，鱼头恒定朝左上" — 잘못된 추측은 코드가 아닌 여기서 죽습니다
- 그런 다음에만 pattern-recipes / handfeel.md에 매핑하고 구축하세요.
단일 스크린샷도 동일한 규칙을 따릅니다: 한 프레임은 포즈를 제공하지만 궤적은 제공하지 않습니다. 경로가 중요하다면 더 많은 프레임을 요청하세요.
복제 모드 (复刻模式)
사용자가 "复刻" / "做一个类似的" / "能不能做这种效果"와 함께 URL을 보내면 — 분해한 다음 구축하세요. 저장 단계는 없습니다. 결과물은 페이지입니다.
복제 실행 경로
-
페이지를 열고 세 가지 레이어로 읽으세요, 사용 가능한 브라우저 도구(Claude Preview,
browser-use, Playwright)를 사용하여: 스택(라이브러리, 이징, 키프레임, CSS 변수 — 번들이 이름을 지정함), 스크롤 안무(어떤 요소가 어떤 밴드 위에 고정되어 있는지, 레일과 그 px 거리, 패럴랙스 비율, 스크러빙된 속성, 진입 지점 — 약 9개의 스크롤 위치를 샘플링하고 그 사이의getBoundingClientRect및 계산된 스타일을 비교), WebGL 레이어(프로그램 수, 드로우 콜, 사용자 정의 유니폼 이름; 셰이더 소스가 필요하면 페이지 스크립트가 실행되기 전에getContext를 래핑). 두 스크립트가 측정 가능한 절반을 다룹니다: 정적 페이지(섹션, 내비게이션, 버튼, 토큰 스케일, 미디어, 메타, 모바일 오버플로)를 위한scripts/measure_structure.py <url>과 실제 휠 아래에서 페이지의 얼마나 많은 부분이 실제로 움직이는지를 위한scripts/measure_churn.py <url>. URL은 작업 자체여야 하며, 갤러리 목록(awwwards.com/sites/<slug>)이 절대 안 됩니다: 목록 페이지는 갤러리 자체의 크롬을 제공하며, 6개의 다른 수상작이 동일한 라이브러리, 동일한 키프레임 및 동일한 글꼴로 반환됩니다. -
분해 — 찾은 내용을 진술하고 인상이 아닌 숫자를 인용하세요:
- "GSAP 3.12 + ScrollTrigger + Lenis；
.home-animate__wrapper在 0.25–0.50 被 pin 住，期间.icon横移 +1545px，出场是 0.25/0.38/0.62 三段 stagger" - "背景是原生 WebGL2，14 个 program、944 draw calls，uniform 里有 bloomStrength/blurTexture1-5 和 cloudCoverage/cloudDensity —— 是 UnrealBloom + 体积云"
컨텍스트만으로 "WebGL 사용"을 보고하지 마세요 — 연결된 프로그램이 없는 크기 없는 300×150 컨텍스트는 Modernizr 스타일의 기능 감지일 뿐, 장면이 아닙니다. 연결된 프로그램과 드로우 콜을 세세요.
- "GSAP 3.12 + ScrollTrigger + Lenis；
-
pattern-recipes에 매핑 —
references/pattern-recipes.md에서 가장 가까운 레시피를 찾으세요 -
갭 채우기 — 참조가 사용하지만 레시피에는 없는 것을 추출된 값에 기반하여 처음부터 작성하세요
-
즉시 구축 — 페이지를 스캐폴딩하고, 실행하고, 시각적으로 확인하세요
-
보고 — "复刻了 [site] 的核心动效，用了 [X] 实现 [Y]，和原版差异是 [Z]"
복제 ≠ 복사
- 할 것: 인터랙션 패턴, 모션 특성, 타이밍 느낌을 재창조하세요
- 하지 말 것: 독점 브랜드 색상, 정확한 카피 텍스트, 식별 가능한 제품 UI를 복사하지 마세요
- 할 것: 기법을 사용자 자신의 콘텐츠와 팔레트에 맞게 조정하세요
- 보고서에서 무엇이 조정되었고 무엇이 원본에 충실했는지 기록하세요
프리폼 구축 모드 (사용자가 방향을 전혀 제시하지 않을 때)
사용자가 "做个网页" / "随便做" / "自己想一个主题" 또는 단순한 모호한 주제(예: "做一个AI agent平台落地页")를 말할 때, 이것은 창의성을 발휘하라는 초대입니다. 기본 템플릿을 기본값으로 사용하지 말고, 엄격한 1대1 라우팅 매핑을 사용하지 말며, 명확화 질문을 하지 마세요.
프리폼 실행 경로 (런타임 창의적 루프 — 创造发生在执行中，不
...