사용 가이드로 건너뛰기
Video to Superprompt작성자 MengTo

Video to Superprompt 스킬.

레퍼런스 영상을 구체적인 디자인·모션 재구성 프롬프트로 바꾸세요.

  • 영상 분석
  • 샷 프롬프트
소스 검토 · video-to-superpromptSKILL.md
작업 레퍼런스 영상을 구체적인 디자인·모션 재구성 프롬프트로 바꾸세요. 결과물 바로 붙여 넣을 수 있는 상세 재구성 또는 영감 기반 프롬프트 하나. 시작 전 확인 검사 가능한 녹화를 제공하고 정밀 재현인지 영감 기반 변형인지 알려 주세요. 대상 프레임워크와 사용 가능한 자료를 포함해 브리프가 실제 파일과 누락된 레퍼런스를 구별하도록 하세요.
편집 요약 · 소스 검토일 2026-11-02 · 생성된 예제가 아닙니다

01 기능 소개

레퍼런스 영상을 구체적인 디자인·모션 재구성 프롬프트로 바꾸세요

레퍼런스 영상의 레이아웃, 자료, 전환, 스크롤 동작을 분석하고 반응형·모션 대안을 갖춘 구현용 프롬프트를 만드세요.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

video-to-superprompt는 접근 가능한 레퍼런스 영상을 다른 빌더가 사용할 상세 브리프로 변환합니다. 시퀀스, 화면 배치, 타이포그래피, 자료, 모션 원리를 살펴본 뒤 관찰한 동작을 구체적인 구현 지침으로 바꿉니다. 기본 산출물은 바로 붙여 넣을 수 있는 프롬프트입니다.

정확한 재현과 영감을 받은 변형을 구별합니다. 정확한 작업에는 연결된 HTML, CSS, JavaScript가 있으면 검사하도록 요구합니다. 자료 맵은 실제 경로와 플레이스홀더를 구분하며, 프롬프트는 비슷한 애니메이션 같은 표현에 기대지 않고 모바일 동작, 모션 감소, 각 섹션의 타이밍을 설명해야 합니다.

예상 산출물

  • 바로 붙여 넣을 수 있는 상세 재구성 또는 영감 기반 프롬프트 하나.
  • 실제 파일명, 소스 URL, 명확히 표시한 누락 자료를 포함한 자료 맵.
  • 선택적인 글, 구현 브리프 또는 별도의 자료 생성 프롬프트.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    녹화를 찾아 조사하세요

    레퍼런스에 접근할 수 있는지 확인하세요. 로컬 영상은 길이, 크기, 프레임률을 검사하고 의미 있는 변화 주변의 프레임을 추출하세요.

  2. 02
    보이는 원리를 설명하세요

    이야기, 레이아웃, 시각적 처리, 모션을 분리하세요. 고정 섹션, 마스크, 스크롤 스크러빙, 카메라 변화는 녹화가 뒷받침할 때만 명시하세요.

  3. 03
    구현 준비가 된 브리프를 쓰세요

    섹션별로 프롬프트를 정리하고 자료, 상호작용, 반응형 동작, 대안을 포함하세요. 참조 파일이 실제로 존재하거나 플레이스홀더로 명시되었는지 확인하세요.

02 활용 상황

언제 사용하면 좋을까요

검사 가능한 녹화를 제공하고 정밀 재현인지 영감 기반 변형인지 알려 주세요. 대상 프레임워크와 사용 가능한 자료를 포함해 브리프가 실제 파일과 누락된 레퍼런스를 구별하도록 하세요.

적합한 경우

  • 모션 레퍼런스를 설명하기 어려운 경우녹화를 논의하거나 다시 만들 수 있는 명명된 시각 원리와 시퀀스로 바꿉니다.
  • 구현 전에 디자인 인계가 필요한 경우유용한 브리프를 먼저 만들고 나중에 빌더나 구현 스택을 선택할 때 사용하세요.

확인할 한계

  • 영상을 검사할 수 있어야 합니다접근 불가능한 URL로 관찰한 레이아웃이나 타이밍을 주장할 수 없습니다. 없는 원본 자료는 명시적인 공백으로 남겨야 합니다.
  • 산출물은 프롬프트입니다브리프 작성이 페이지 구현이나 원본이 제안한 기술을 사용했다는 증거가 되지는 않습니다.

준비할 입력

  • 레퍼런스 녹화접근 가능한 로컬 영상이나 URL을 제공하고 가장 중요한 구간을 지정하세요.
  • 재현 범위시각 동작을 가깝게 재현할지 다른 브랜드와 콘텐츠에 맞게 변형할지 알려 주세요.
  • 대상 프로젝트프레임워크, 사용 가능한 자료, 모바일 요구 사항, 최종 경험을 설명하세요.

03 핵심 결정

중요한 판단 기준

  1. 실행 가능한 모션 지침

    고정 패널이나 영상 시간 스크러빙 같은 명명된 원리는 빌더에게 구현할 내용을 알려 줍니다.

  2. 자료의 출처

    자료 맵은 기존 자료와 아직 제작해야 할 이미지·클립을 구분합니다.

  3. 브리프에 포함되는 대안

    데스크톱 동작과 함께 모바일 및 모션 감소 동작을 작성합니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

소스와 설정 확인

접근 가능한 로컬 영상이나 URL을 제공하고 가장 중요한 구간을 지정하세요.

업스트림 소스 파일
https://github.com/MengTo/Skills/blob/ef5f85130d083d33e08cb19f6ee23cdde2d406ab/agent-skills/codex/video-to-superprompt/SKILL.md

아래 참고 링크에서 원본 사용 지침을 확인할 수 있습니다. 사용 전에 리포지터리의 설정 요건을 확인하세요. 설치 명령어가 아닙니다.

결과물 하나부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
video-to-superprompt로 제공한 25초 제품 사이트 녹화를 분석해 줘. 일정 관리 앱용 영감 기반 변형을 원하며 고정 기능 섹션과 스크롤 위치·영상 진행의 관계는 유지하고 싶어. 시작, 섹션 경계, 최종 상태를 검사하고 관찰과 구현 추측을 구분해. 자료 맵, 섹션 구조, 애니메이션 타이밍, 키보드·모바일 동작, 모션 감소 대안을 포함한 붙여 넣기용 구현 프롬프트 하나를 만들어. 없는 자료는 플레이스홀더로 표시해. 웹사이트를 만들거나 소스로 확인되지 않은 원본 라이브러리 사용을 주장하지 마.

결과 확인

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 대표 프레임이 중요한 모든 전환을 다루는지 확인합니다.
  • 모든 자료 참조를 확인하고 모르는 구현 세부 사항을 표시합니다.
  • 주요 상호작용마다 모바일과 모션 감소 동작이 명시되었는지 확인합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스와 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
MengTo
저장소
MengTo/Skills
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · ef5f85130d08
편집 소스 요약
레퍼런스 영상을 구체적인 디자인·모션 재구성 프롬프트로 바꾸세요.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 궁금한 점

웹사이트를 자동으로 재현하나요?

기본 출력은 프롬프트입니다. 구현, 글, 자료 팩은 별도로 요청해야 하는 출력 모드입니다.

원본 애니메이션 라이브러리를 식별할 수 있나요?

적절한 원리를 제안하고 사용 가능한 소스 파일을 검사할 수 있습니다. 녹화만으로 어떤 라이브러리가 효과를 만들었는지는 증명할 수 없습니다.

일정 간격으로 추출한 프레임 외에 추가 프레임이 왜 필요한가요?

짧은 전환은 정기 썸네일 사이에서 사라질 수 있습니다. 원문은 타임라인 비트, 섹션 변화, 시작과 끝 상태를 우선합니다.

OpenDesign

작업 요청과 디자인 결과물을 한곳에 모으세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/MengTo/Skills/blob/ef5f85130d083d33e08cb19f6ee23cdde2d406ab/agent-skills/codex/video-to-superprompt/SKILL.md