SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdesign-landing-motion

design-landing-motion

Design & creation

View repository

Updated 10-15 21:49

About this skill

design-landing-motion — Dynamic landing production

moai-designer | Concept → 1 effect → asset kit → implementation → gate (generation run: moai-media)

Overview

What separates a flat landing page from a memorable one is not the numberof effects, but whether you carried one through to completion. This skill prevents scattering multiple effects and instead picks a single signature effect that fits the concept and takes it all the way through initial render, mobile, and reduced motion.

The second axis is visuals. The most common reason AI-made landing pages look cheap is that they are padded out with stock images or CSS gradients. This skill generates the images that go on screen while locked to the brand palette.

What it does not do

  • No hosting, deployment, domains, DB, or secrets management — code is created inside the user's project. It is not uploaded to an external hosting product.
  • No image generation execution, model selection, or credit notices — moai-media:media-higgsfield-core — that is delegated to the contract.
  • No defining design tokens — it only reads and uses the project's design system, never creates a new one.
  • No asking the user directly — if a slot is empty, it returns a blocker.

Trigger keywords

landing page, landing, hero, scroll effect, scroll scrub, parallax, parallax, three.js, threejs, WebGL, R3F, GSAP, ScrollTrigger, particles, mask reveal, kinetic typography, interaction, dynamic, award, motion site

Reference files

File When to read
references/effects-catalog.md Step 1 — when choosing the effect (before choosing, always)
references/asset-kit.md Step 2 — when deciding what to generate
references/motion-craft.md Step 3 — when writing DOM·CSS motion
references/threejs-patterns.md Step 3 — when WebGL·3D is involved
references/quality-gate.md Step 4 — before finishing

Workflow

Step 0 — environment determination and brief

Environment determination (first). Detect the project and determine the implementation syntax. Do not guess; verify with files.

Detect Stack
package.json에 react/next React path — R3F(@react-three/fiber·drei) + Framer Motion + GSAP ScrollTrigger
Hugo·Astro·Eleventy·pure HTML Static path — vanilla three + GSAP + CSS
Cannot determine return blocker

Concept spine. Write in one sentence the one thing this site is trying to say ("precision", "ascent", "accumulation", etc.). Effect selection must serve this sentence. If you pick effects first without a spine, you get a pretty but hollow page.

Read the design system. Read the palette, typography, shape language, and brand prohibitions from the project (design-brand-visualsame priority as). If there is no evidence, do not make it up; mark it as "no evidence".

Step 1 — Signature effect one selection

references/effects-catalog.mdfrom only one choose. Do not choose improvisationally from outside the catalog.

Selection rules:

  1. Choose an effect that repays the concept spine, and one sentence explaining why that pairingwrite in the brief.
  2. Do not repeat the same effect as the previous build in the same session. The 6 axes of repetition prevention are in the catalog document.
  3. Every effect must support initial render completion과 reduced-motion fallback. If either is impossible, that effect is out.
  4. Accompanying reveal animations are allowed, but if they cannot answer "what does this convey", remove them.

Step 2 — Asset kit generation (delegated to moai-media)

references/asset-kit.mdDecide what to make according to the composition table of , and specify palette in the prompt해 moai-mediahand off to. Generation execution, model selection, and cost notice are that side's contract.

User assets always win. If you already have a logo, product photos, team photos, or fonts, use them as is. Generation fills only the empty spots .

If moai-media is not installed or MCP is not connected: output the completed generation prompt as text and guide the user to create it directly on the Higgsfield web (https://higgsfield.ai)에서 . At this time, do not substitute stock images or CSS gradients — it is better to clearly state that the slot is empty.

Step 3 — Implementation

Build with the syntax of the determined stack. Motion norms are references/motion-craft.md, WebGL은 references/threejs-patterns.md.

Order matters: complete the static layout first, then layer motion on top of it. If you design motion first, you get a page with an empty initial render, and this gets caught at the gate.

Step 4 — Gate

references/quality-gate.mdMechanically check the items of . If it does not pass, it is not done.

Hard rules

  • One signature effect per page. Two or more kill each other.
  • The initial render must be complete. In the screenshot before JS runs, the completed hero must already be visible.
  • prefers-reduced-motion Fallbacks are mandatory for all animated elements. In reduced motion, show the final state statically without pinning.
  • On the hot path, animate transform과 opacityonly. Do not move layout properties (width·top·margin).
  • Declare mobile degradation in advance. Cursor effects should respond to scrolling, and long pins should be shortened. "Desktop only" is not degradation but neglect.
  • Do not bake body text into images. Layer typography with HTML.
  • Do not make do with stock·picsum·CSS gradients. If generation is impossible, state that it is an empty slot.
  • If the motion cannot be finished properly, output it statically. A clean static page is better than a half-attached ScrollTrigger.

Output format

## 랜딩 제작 결과
- 컨셉 스파인: [한 문장]
- 판정 환경: [React | 정적] — 근거: [감지한 파일]
- 시그니처 효과: [카탈로그 id] — 스파인과의 연결: [한 문장]
- 참조한 디자인 시스템: [파일 경로] (없으면 "근거 없음")
- 생성 에셋: [항목별 목록] (위임: moai-media)
- 모바일 열화: [무엇이 어떻게 바뀌는지]
- 저감모션 대체: [정적 최종 상태 설명]
- 게이트: [통과 | 걸린 항목과 조치]

Precautions

  • Read the catalog before choosing effects. Improvised choices usually produce the same results as everyone else.
  • Before adding a dependency, check whether the project can handle it (bundle size·build setup·SSR compatibility).
  • WebGL can fail (old devices·drivers). Always provide a fallback — references/threejs-patterns.md.
  • Accessibility is not just reduced motion. Check whether motion breaks keyboard focus·contrast·screen reader flow.
  • Generation cost is proportional to the number of assets. Inform the user before finalizing the kit composition.

Related skills

Skill Timing
moai-designer:design-brand-visual Alternative: when only one image is needed
moai-designer:design-brand-system Prerequisite: establish palette·typography standards
moai-designer:design-tokens-transformer Prerequisite: tokens as CSS
moai-designer:design-slop-check Follow-up: copy AI slop check
moai-media:media-higgsfield-image Delegate: image generation
moai-media:media-higgsfield-video Delegate: video generation for scrubbing
moai-media:media-higgsfield-assets Delegate: 3D (GLB)·upscaling·background removal
moai-media:media-higgsfield-identity Prerequisite: character·mascot consistency

Source

  • Higgsfield Skills (official agent documentation) — higgsfield-websites v0.12.0 (MIT). Inspiration for the effect catalog·motion norms·asset kit composition·anti-slop copy rules·gate items.
  • The original is combined with a Cloudflare Worker hosting pipeline and higgsfield website requires the CLI. This skill takes only design·motion·asset knowledge and does not take the hosting layer. Therefore, its behavior is not the same as the original.
  • Generation execution·model·cost: moai-media:media-higgsfield-core live contract.