모든 프리미엄 영상 Skill을 하나의 플랜으로. 언제든 해지할 수 있습니다.플랜 보기
Solenne · 16:9

이 Skill로 렌더링한 결과

데스크톱 알림 v1.0.0

macOS 스타일 알림 배너가 앱 아이콘, 제목, 메시지를 달고 스르륵 들어왔다가 빠져나갑니다.

아직 평가 없음 0 다운로드
포맷
영상 · 16:9
길이
0:05

무료 계정만 있으면 무료

로그인 후 다운로드

이 문장을 에이전트에 붙여 넣으세요. 필요하면 CLI를 연결한 뒤 Skill을 설치합니다.

5초짜리 데스크톱 알림을 위한 무료 HyperFrames 블록입니다. 앱 아이콘, 앱 이름, 제목, 한 줄 메시지가 담긴 반투명 배너가 오른쪽 위로 들어와 잠시 머문 뒤 빠져나갑니다. 텍스트와 아이콘은 HTML에서 고치며, 배경이 투명해 화면 녹화나 배경화면 위에 얹을 수 있습니다.

주로 선택하는 사람들

2026년 11월 3일 업데이트

받게 되는 것

  • 배경이 투명한 5초 길이 1920×1080 알림 오버레이
  • 앱 아이콘, 이름, 제목, 메시지
  • 화면 녹화 위에 얹는 방법 안내

잘 맞는 경우

  • SaaS와 앱 데모
  • 튜토리얼과 설명 영상
  • 기능 출시 소식

맞지 않는 경우

  • 세로 전용 영상
  • 긴 메시지

이 Skill에 대하여

이렇게 말하세요

/macos-notification Solenne 데스크톱 알림을 만들어 줘. 제목은 "Evening wind-down is on", 메시지는 "Lights dimmed to 35%, blinds closed and the heating eased to 19°", 우리 거실 사진 위에 얹어 줘.

제품이 방금 무언가를 해냈다는 걸 보여 주는 가장 빠른 방법이 데스크톱 알림입니다. 데스크톱 알림은 화면 녹화나 배경화면 위에 익숙한 macOS 스타일 알림을 띄웁니다. "Evening wind-down is on", "Payment received", "Your export is ready"처럼요.

작동 방식

  1. 요청: 앱 이름과 아이콘, 제목, 한 줄 메시지를 에이전트에게 알려 줍니다.
  2. 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
  3. 렌더링: npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다.
  4. 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.

팁

  • 제목에는 기능이 아니라 결과를 쓰세요.
  • 메시지는 한 줄로 쓰세요.
  • 배경이 투명하므로 알파 채널로 렌더링해 내 영상, 사진 또는 단색 배경 위에 얹으세요. 두 가지 명령어는 SKILL.md에 있습니다.
  • 변수가 없는 블록입니다. 에이전트가 SKILL.md에 따라 HTML 안의 텍스트와 숫자를 직접 고칩니다.

오픈소스

HyperFrames 레지스트리 블록입니다. HeyGen과 HyperFrames 기여자들이 만들어(heygen-com/hyperframes) Apache License 2.0으로 공개했습니다. 다운로드에는 에셋이 포함된 블록과 Reelity가 작성한 SKILL.md가 들어 있어 에이전트가 바로 채우고 렌더링할 수 있으며, HyperFrames 자체는 npm에서 실행됩니다.

시작 전에 필요한 것

준비물
앱 이름, 정사각형 아이콘, 제목, 한 줄 메시지.
의존성
Node.js 22 이상 — 필수 · FFmpeg — 필수
외부 비용
없습니다. HyperFrames는 무료 오픈소스이며 내 컴퓨터에서 렌더링됩니다.
마지막 테스트
v1.0.0 —

사용자 리뷰

아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.

자주 묻는 질문

알림을 여러 개 보여 줄 수 있나요?

알림마다 한 번씩 렌더링해 편집에서 클립을 겹치거나, 에이전트에게 HTML 안에서 배너를 복제해 달라고 하세요.

Apple 로고가 나오나요?

아니요. macOS 스타일 배너 안에 내 앱 아이콘과 이름이 나옵니다.

왜 무료인가요?

HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Solenne으로 만든 샘플을 함께 올렸습니다.

관련 가이드

How to add an animated desktop notification to a product demoA notification is proof that your product did something. How to animate a macOS-style banner over a screen recording, free, with the Desktop Notification block.

비슷한 Skill

전체 보기