Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 화면에 들어갈 비주얼은 Higgsfield로 생성해 브랜드 팔레트에 잠급니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다. 다음과 같은 요청 시 사용하세요: - "랜딩 페이지 만들어 줘", "히어로 인상적으로" - "스크롤에 반응하는 사이트", "스크롤하면 영상이 재생되는" - "three.js 넣어 줘", "WebGL 효과", "3D로 보이게" - "패럴랙스", "마우스 따라 움직이는", "파티클" - "어워드 받을 만한 사이트", "밋밋해 보여" 호스팅·배포·도메인·DB는 범위 밖입니다. 코드는 사용자 프로젝트 안에 만들며 외부 호스팅에 올리지 않습니다. 브랜드
.claude/skills/modu-ai-design-landing-motion/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-23 | ✗→✓ | ▲ Improved | 29% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 4% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 89% | 0% |
| case-12 | ✗→✓ | ▲ Improved | 78% | 0% |
| case-13 | ✗→✓ | ▲ Improved | 90% | 0% |
> moai-designer | 컨셉 → 효과 1개 → 에셋 킷 → 구현 → 게이트 (생성 실행: moai-media)
밋밋한 랜딩과 기억에 남는 랜딩을 가르는 건 효과의 개수가 아니라 하나를 끝까지 완성했는지다. 이 스킬은 효과를 여러 개 뿌리는 것을 막고, 컨셉에 맞는 시그니처 효과 하나를 골라 초기 렌더·모바일·저감모션까지 완결시킨다.
두 번째 축은 비주얼이다. AI가 만든 랜딩이 싸구려로 보이는 가장 흔한 이유는 stock 이미지나 CSS 그라디언트로 때우기 때문이다. 이 스킬은 화면에 들어갈 이미지를 브랜드 팔레트에 잠근 채 생성한다.
moai-media:media-higgsfield-core 계약에 위임한다.랜딩 페이지, 랜딩, 히어로, 스크롤 효과, 스크롤 스크럽, 패럴랙스, 시차, three.js, threejs, WebGL, R3F, GSAP, ScrollTrigger, 파티클, 마스크 리빌, 키네틱 타이포, 인터랙션, 다이나믹, 어워드, 모션 사이트
| 파일 | 언제 읽나 | |---|---| | references/effects-catalog.md | 1단계 — 효과를 고를 때 (고르기 전에 반드시) | | references/asset-kit.md | 2단계 — 무엇을 생성할지 정할 때 | | references/motion-craft.md | 3단계 — DOM·CSS 모션을 짤 때 | | references/threejs-patterns.md | 3단계 — WebGL·3D가 들어갈 때 | | references/quality-gate.md | 4단계 — 끝내기 전 |
환경 판정 (먼저). 프로젝트를 감지해 구현 문법을 정한다. 추측하지 않고 파일로 확인한다.
| 감지 | 스택 | |---|---| | package.json에 react/next | React 경로 — R3F(@react-three/fiber·drei) + Framer Motion + GSAP ScrollTrigger | | Hugo·Astro·Eleventy·순수 HTML | 정적 경로 — 바닐라 three + GSAP + CSS | | 판단 불가 | blocker 반환 |
컨셉 스파인. 이 사이트가 말하려는 한 가지를 한 문장으로 적는다("정밀함", "상승", "축적" 등). 효과 선택은 이 문장에 봉사해야 한다. 스파인 없이 효과부터 고르면 예쁘지만 겉도는 페이지가 나온다.
디자인 시스템 읽기. 팔레트·타이포·형태 언어·브랜드 금지 사항을 프로젝트에서 읽는다(design-brand-visual과 동일한 우선순위). 근거가 없으면 지어내지 말고 "근거 없음"으로 표시한다.
references/effects-catalog.md에서 하나만 고른다. 카탈로그 밖에서 즉흥적으로 고르지 않는다.
선택 규칙:
references/asset-kit.md의 구성표대로 무엇을 만들지 정하고, 프롬프트에 팔레트를 명시해 moai-media에 넘긴다. 생성 실행·모델 선택·비용 고지는 그쪽 계약이다.
사용자 자산이 언제나 이긴다. 로고·제품 사진·팀 사진·폰트를 이미 갖고 있으면 그대로 쓴다. 생성은 빈 곳만 채운다.
> moai-media 미설치 또는 MCP 미연결 시: 완성된 생성 프롬프트를 텍스트로 출력하고 Higgsfield 웹(https://higgsfield.ai)에서 직접 만들도록 안내한다. 이때 stock 이미지나 CSS 그라디언트로 대체하지 않는다 — 빈 슬롯임을 명시하는 편이 낫다.
판정된 스택의 문법으로 만든다. 모션 규범은 references/motion-craft.md, WebGL은 references/threejs-patterns.md.
순서가 중요하다: 정적 레이아웃을 먼저 완성하고 그 위에 모션을 얹는다. 모션부터 짜면 초기 렌더가 비어 있는 페이지가 나오고, 이건 게이트에서 걸린다.
references/quality-gate.md의 항목을 기계적으로 점검한다. 통과 못 하면 끝난 게 아니다.
prefers-reduced-motion 대체는 모든 애니메이션 요소에 필수. 저감모션에서는 핀 없이 최종 상태를 정적으로 보여준다.transform과 opacity만 애니메이션한다. 레이아웃 속성(width·top·margin)을 움직이지 않는다.## 랜딩 제작 결과
- 컨셉 스파인: [한 문장]
- 판정 환경: [React | 정적] — 근거: [감지한 파일]
- 시그니처 효과: [카탈로그 id] — 스파인과의 연결: [한 문장]
- 참조한 디자인 시스템: [파일 경로] (없으면 "근거 없음")
- 생성 에셋: [항목별 목록] (위임: moai-media)
- 모바일 열화: [무엇이 어떻게 바뀌는지]
- 저감모션 대체: [정적 최종 상태 설명]
- 게이트: [통과 | 걸린 항목과 조치]references/threejs-patterns.md.| 스킬 | 시점 | |---|---| | moai-designer:design-brand-visual | 대안: 이미지 한 장만 필요할 때 | | moai-designer:design-brand-system | 선행: 팔레트·타이포 기준 수립 | | moai-designer:design-tokens-transformer | 선행: 토큰을 CSS로 | | moai-designer:design-slop-check | 후속: 카피 AI 슬롭 점검 | | moai-media:media-higgsfield-image | 위임: 이미지 생성 | | moai-media:media-higgsfield-video | 위임: 스크럽용 영상 생성 | | moai-media:media-higgsfield-assets | 위임: 3D(GLB)·업스케일·누끼 | | moai-media:media-higgsfield-identity | 선행: 인물·마스코트 일관성 |
higgsfield-websites v0.12.0 (MIT). 효과 카탈로그·모션 규범·에셋 킷 구성·안티슬롭 카피 규칙·게이트 항목의 착안점.higgsfield website CLI를 요구한다. 이 스킬은 디자인·모션·에셋 지식만 가져오고 호스팅 계층은 가져오지 않는다. 따라서 원본과 동작이 같지 않다.moai-media:media-higgsfield-core 라이브 계약.| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-22 | fail→fail | 9,884 | 9,182 | -7% | 1 | 1 | 0% | 786 | 3,956 | +403% | 0 | 0 | — |
case-23 | fail→pass | 36,679 | 37,611 | +3% | 1 | 1 | 0% | 8,230 | 10,615 | +29% | 0 | 0 | — |
case-01 | fail→fail | 28,612 | 28,160 | -2% | 1 | 1 | 0% | 3,921 | 6,557 | +67% | 0 | 0 | — |
case-02 | fail→fail | 24,387 | 35,813 | +47% | 1 | 1 | 0% | 4,107 | 8,318 | +103% | 0 | 0 | — |
case-03 | fail→fail | 28,721 | 43,251 | +51% | 1 | 1 | 0% | 4,168 | 7,690 | +85% | 0 | 0 | — |
case-04 | pass→pass | 22,488 | 12,217 | -46% | 1 | 1 | 0% | 3,231 | 3,621 | +12% | 0 | 0 | — |
case-05 | fail→fail | 23,276 | 24,437 | +5% | 1 | 1 | 0% | 5,113 | 6,666 | +30% | 0 | 0 | — |
case-06 | fail→pass | 25,919 | 14,516 | -44% | 1 | 1 | 0% | 3,722 | 3,868 | +4% | 0 | 0 | — |
case-07 | pass→pass | 21,621 | 16,549 | -23% | 1 | 1 | 0% | 3,509 | 4,358 | +24% | 0 | 0 | — |
case-08 | pass→pass | 18,099 | 13,800 | -24% | 1 | 1 | 0% | 2,179 | 4,010 | +84% | 0 | 0 | — |
case-09 | fail→fail | 20,256 | 20,089 | -1% | 1 | 1 | 0% | 3,398 | 3,004 | -12% | 0 | 0 | — |
case-10 | pass→pass | 23,559 | 25,633 | +9% | 1 | 1 | 0% | 3,843 | 5,920 | +54% | 0 | 0 | — |
case-11 | fail→pass | 14,935 | 19,348 | +30% | 1 | 1 | 0% | 2,676 | 5,070 | +89% | 0 | 0 | — |
case-12 | fail→pass | 19,776 | 14,633 | -26% | 1 | 1 | 0% | 2,743 | 4,876 | +78% | 0 | 0 | — |
case-13 | fail→pass | 23,848 | 38,254 | +60% | 1 | 1 | 0% | 4,528 | 8,595 | +90% | 0 | 0 | — |
case-14 | pass→pass | 18,312 | 19,268 | +5% | 1 | 1 | 0% | 2,220 | 5,037 | +127% | 0 | 0 | — |
case-15 | fail→pass | 19,293 | 20,784 | +8% | 1 | 1 | 0% | 2,991 | 6,286 | +110% | 0 | 0 | — |
case-16 | fail→fail | 26,008 | 47,331 | +82% | 1 | 1 | 0% | 2,962 | 6,402 | +116% | 0 | 0 | — |
case-17 | fail→pass | 23,518 | 13,936 | -41% | 1 | 1 | 0% | 3,145 | 3,877 | +23% | 0 | 0 | — |
case-18 | fail→fail | 18,952 | 21,184 | +12% | 1 | 1 | 0% | 2,530 | 5,199 | +105% | 0 | 0 | — |
case-19 | fail→pass | 18,053 | 28,313 | +57% | 1 | 1 | 0% | 2,649 | 6,033 | +128% | 0 | 0 | — |
case-20 | pass→pass | 15,474 | 15,631 | +1% | 1 | 1 | 0% | 2,907 | 4,232 | +46% | 0 | 0 | — |
case-21 | fail→fail | 18,808 | 16,744 | -11% | 1 | 1 | 0% | 2,240 | 4,450 | +99% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 22 counted toward the lift figure. The other 1 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +35 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.