무료GitHub에 공개한국어 소개

frame-glitch-title

영상 전환이나 사이버펑크풍 메인 비주얼에 쓸 제목 화면을 만듭니다. 색 어긋남, 주사선, 글자 왜곡을 하나의 HTML로 구성합니다.

원문원문 설명 보기

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

nexu-io/open-design

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

영상 전환용 제목 화면 제작
사이버펑크풍 메인 비주얼 제작
제목에 가로 방향 글자 왜곡 추가
색이 어긋난 정적 제목 화면 제작

한국어 소개

할 수 있는 일

frame-glitch-title은 영상 전환이나 사이버펑크풍 메인 비주얼에 사용할 제목 화면을 만듭니다. 검정에 가까운 배경에 큰 제목을 놓고 청록색과 마젠타색의 어긋남, 브라운관풍 주사선, 미세한 노이즈를 겹칩니다. 글자를 가로로 어긋나게 하는 애니메이션, 시간 표시, 기호 조각도 결합하여 하나의 HTML 파일로 구성합니다.

이럴 때 유용합니다

영상 도입부나 장면 전환에서 통신 장애 또는 데이터 손상을 떠올리게 하는 표현을 사용할 때 활용합니다. 제목과 부제목을 준비해 어두운 배경과 제한된 색상으로 통일감 있는 화면을 만들 때도 사용합니다. 예상 화면 크기는 가로형 1920×1080입니다.

사용 예시

“이 제목과 부제목으로 색 어긋남과 주사선이 있는 영상용 제목 화면을 만들어 주세요.”
“사이버펑크풍 제목에 글자가 가로로 어긋나는 움직임을 넣어 주세요.”

주의 사항

사용자의 실제 제목과 부제목을 사용하는 것이 전제입니다. 움직임은 CSS의 @keyframes로 표현하며, prefers-reduced-motion에 따라 애니메이션을 멈추고 정적인 색 어긋남 효과로 전환하도록 설계합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호영상 전환용 제목 화면이라는 용도와 색 어긋남, 주사선, 글자 왜곡 구성을 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호화면 크기, 색상, 글자 크기, 동작 시간을 지정하고 단일 HTML 출력 형식을 명시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호외부 전송이나 삭제 작업이 없으며 prefers-reduced-motion에 따른 동작 중지를 지정합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호단일 HTML과 CSS로 출력하며 API 키, 유료 서비스, 특정 운영체제의 전제는 없습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(3)

SKILL.md3.6 KB
example.html4.8 KB
example.md221 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

【模板: 故障艺术标题帧 (Glitch Title)】【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景 #070708 近黑或 CRT 暗灰 #0d0e10; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

【主标题】

居中, 6-9vw, weight 800/900, 字体 Space Grotesk Bold / Inter Tight Black / JetBrains Mono Bold。
颜色: 主层 #f5f5f7; 后面套 2 层伪影:
- cyan #00f0ff translate(-3px, 1px)。
- magenta #ff2bd6 translate(3px, -1px)。
整层加 clip-path 切片 5-8 段, 每段 @keyframes 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用 filter: url(#displacementFilter) 或简单 CSS 平移。

【附加层】

顶部一行 caption (uppercase mono, 11px, opacity 0.6): >> SIGNAL_LOST · CH-04 · 14:32:08。
标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被 ̶▒̶ 字符替换 (假乱码)。
角落随机点缀 █▓▒░ ASCII 噪点 chunks。
底部 timecode (mono, opacity 0.4)。
整画面叠 noise grain 层 background-image: url("data:image/svg+xml,...turbulence..."), opacity 6%, mix-blend-mode overlay。

【SVG 滤镜 (可选)】

定义 <filter id="rgbShift"> 用 feColorMatrix + feOffset + feMerge 把 R/G/B 三通道偏移; 整层 filter: url(#rgbShift) 在故障瞬间应用。

【设计细节】

颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。
字体: 西文 Space Grotesk 或 JetBrains Mono Bold; 中文 Noto Sans Mono CJK SC 或 Noto Sans SC Bold。
严禁 lorem ipsum; 必须用用户的标题 + 副标。
动效用 @keyframes, 可被 prefers-reduced-motion 关闭 (退回静态 chromatic split)。
单文件 HTML。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬