MotionSites 프롬프트 캡처은(는) 무엇을 하나요?

목표

사용자가 웹사이트/UI 디자인 요구를 제시하면 motionsites.ai에서 일치하는 프롬프트 템플릿을 찾고 사용자 프로젝트에 맞춘 최적화 방안을 제시합니다. 이 스킬의 출력은 '추천 프롬프트 + 최적화 방안'이며, 직접 코드를 작성하지 않습니다.

먼저 핵심 정보를 확인하고, 누락된 항목은 합리적인 기본값으로 진행하며 반복적으로 묻지 않습니다.

사이트 유형: 랜딩 페이지 / SaaS 공식 사이트 / 포트폴리오 / 에이전시 사이트 / 히어로 섹션 / 전자상거래 페이지 등
시각 스타일: 다크, 유리 효과, 그라데이션, 미니멀, 3D, 파티클 배경 등
모션 필요 사항: 스크롤 애니메이션, 패럴랙스, 부드러운 스크롤, 3D 인터랙션 등
콘텐츠 구조: 필요한 블록 (내비게이션, 히어로, 특징, 가격, 푸터 등)
기술 스택: 기본값은 React/Next.js + Tailwind + shadcn/ui (Build Web Apps 플러그인 환경). 사용자가 다른 스택을 지정하면 그에 따릅니다.

우선 in-app 브라우저(사용자가 이미 열었거나 사용 가능한 경우)를 사용하여 https://motionsites.ai/ 를 열고 카테고리(SaaS, Agency, Portfolio, Landing pages, Hero sections 등)를 탐색합니다.
브라우저를 사용할 수 없는 경우 open_page 또는 웹 검색을 통해 페이지 정보를 가져옵니다. 해당 사이트는 JS로 렌더링되는 SPA이므로 정적 크롤링으로 카테고리 콘텐츠를 가져오지 못할 수 있습니다. 이 경우 브라우저를 사용하는 것이 더 정확하다고 설명하세요.
'유형 + 스타일 + 모션' 세 가지 차원으로 필터링하여 가장 일치하는 1~3개의 프롬프트를 찾습니다.

선택한 프롬프트 원문을 그대로 보여줍니다. 수정하거나 번역하지 않습니다.
각 프롬프트의 일치 이유(사용자 요구에 적합한 이유)를 설명합니다.
완전히 일치하는 프롬프트가 없는 경우 가장 가까운 것을 선택하고 차이점을 명확히 지적합니다. 존재하지 않는 프롬프트를 절대 만들어 내지 않습니다.

사용자의 실제 프로젝트를 기준으로 최적화 포인트를 항목별로 제시합니다.

기술 스택 적응: 프롬프트가 기본적으로 Lovable/Bolt/Cursor/Claude를 대상으로 하므로, 사용자 스택(기본값은 React + Tailwind + shadcn/ui, 컴포넌트 분할, 디자인 토큰 재사용)으로 마이그레이션하는 방법을 설명합니다.
모션 구현: motionsites는 주로 GSAP ScrollTrigger + Lenis 부드러운 스크롤을 사용합니다. 구현 시 핵심 절충점(성능, 폴백, 접근성, prefers-reduced-motion)을 제시합니다.
시각 자산: 히어로 이미지, 텍스처, 아이콘이 필요한 경우 imagegen으로 생성하거나 프롬프트가 요구하는 리소스에서 가져오는 방법을 설명합니다.
검증 방법: 구현 후 playwright / frontend-testing-debugging을 사용하여 브라우저 검증(반응형, 모션, 콘솔 오류)을 수행합니다.
위험 요소: 프롬프트에서 현재 프로젝트에 적용되지 않을 수 있는 부분(의존성, 성능 오버헤드, 콘텐츠 플레이스홀더)을 지적합니다.

마지막으로 사용자에게 최적화 방안에 따라 구현을 시작할지 물어봅니다. 사용자가 확인하기 전에는 코드를 작성하지 않습니다.

'프롬프트 찾기' 단계를 건너뛰고 바로 코드를 작성하지 않습니다.
프롬프트 원문은 그대로 유지합니다. 최적화 방안은 사용자 프로젝트를 대상으로 하며, 사용자가 요청하지 않는 한 프롬프트 자체를 수정하지 않습니다.
motionsites.ai를 브라우저로 실제 탐색한 후 선택하는 것을 우선시하며, 기억에 의존하여 사이트 콘텐츠를 추측하지 않습니다.