agentSkill
MotionSites Web Builder — 수상작급 랜딩페이지 만들기
출처: https://github.com/Motionsites-AI/claude-skill/blob/main/plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md
일반·0·2026년 11월 8일
|
agentSkill
출처: https://github.com/Motionsites-AI/claude-skill/blob/main/plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md
| name | motionsites-web-builder |
| description | Build award-level, cinematic websites, landing pages and hero sections, or detailed prompts for Lovable, Bolt and v0, using top MotionSites designs, real media and a screenshot-and-fix loop. |
Average AI websites happen for three reasons: a vague plan, no real media, and nobody looking at the result. This skill fixes all three. Follow the workflow every time; the steps are what make the output great.
Settle these five things, briefly, in your head or in one short message:
What and who: the product or person, and the visitor you are persuading.
Mood in three words (e.g. "calm, expensive, nocturnal").
The signature: the one memorable idea this page will be known for (media, interaction or type moment). Pick from references/techniques.md or invent one.
Output: a single index.html (default: CDN only, opens anywhere), the user's existing stack (React/Next/Vite...), or a prompt only for another builder (see references/builders.md).
Scope: a hero (default when unspecified), or a full landing page.
Only ask a question if you can't proceed without it (e.g. the brand name for a real company). Otherwise choose and say what you chose.
Open examples/INDEX.md. These are the most-liked free prompts on motionsites.ai, real designs people love. Pick the 2–3 closest to the brief (by category, traits and feel) and read them in full. They set the bar for:
Precision: exact fonts, hex/HSL tokens, px and clamp() sizes, letter-spacing, durations and easings, z-index layers, breakpoints.
Restraint: what they leave out.
Structure: how a hero is layered and choreographed.
Borrow structure, precision and techniques. Never copy their brand names, copy text or exact layouts wholesale; the page must be original to this brief.
Great pages are carried by great media. In order of preference (details in references/assets.md):
The user's own assets.
Generate them, if you have an image/video/3D generation tool available (prompt formulas are in assets.md).
The media shelf: media/MEDIA.md plus the numbered contact sheets media/sheet-*.jpg. Look at the sheets, pick by eye, and use the exact URL. These cinematic videos and transparent cut-outs come from free MotionSites prompts and are publicly hosted.
No media: design a type-, gradient- and motion-led page (no fake image boxes).
Never invent asset URLs. Skip any media showing recognisable characters, celebrities, logos or brands.
Write the build spec using references/spec-template.md, at the same level of detail as the examples you read. This is where quality is decided. Every element gets real values: no "nice gradient" or "smooth animation".
Include the real copy: headline, subline, nav, CTA, stats. Write it like a sharp brand copywriter. Keep headlines short and specific, with a point of view.
If the user asked for a prompt only, the spec is the deliverable: format it for their builder (see references/builders.md) and you're done after a self-check against references/review.md.
Build exactly what the spec says, using recipes from references/techniques.md (they are tested and handle mobile and reduced motion).
Single-file default: one index.html with inline ＜style＞ and ＜script＞, Google Fonts, and libraries from a CDN with pinned versions (e.g. three@0.170.0, gsap@3.12.5).
The first CSS rule sets the page background on html, body, so there's no white flash.
Semantic HTML, a real ＜title＞, alt text, visible focus states, and prefers-reduced-motion respected.
No lorem ipsum, no placeholder boxes, no emoji as icons (use inline SVG).
Run python scripts/shoot.py index.html shots/ (it needs Playwright; see the script's header), then open and look at the screenshots. Score the page with references/review.md, fix the three weakest areas with concrete changes, and shoot again. Repeat until you clear the bar (an average of 8+, nothing under 7) or for 3 rounds.
Never skip this step. The first version is never the best one.
(이하 생략 — 전체 SKILL.md는 원본 저장소에서 확인하세요: https://github.com/Motionsites-AI/claude-skill/blob/main/plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md)
원본: https://github.com/Motionsites-AI/claude-skill/blob/main/plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md · 라이선스: MIT (Copyright (c) 2026 MotionSites, examples·media 폴더 제외) — 원문 그대로 옮겼으며, 자세한 조건은 저장소의 LICENSE를 따릅니다.
※ 화면 표시를 위해 꺾쇠괄호(< >)를 전각 문자(＜ ＞)로 바꿨습니다. 그대로 복사해 쓰실 때는 위 원본 저장소의 SKILL.md를 받아 주세요.