메뉴
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.
A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.
| name | frame-bold-signal |
| zh_name | 大胆信号卡帧 |
| en_name | Bold Signal Frame |
| emoji | 🔶 |
| description | Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising. |
| zh_description | 大胆信号卡帧:暗渐变底 + 大编号 + 导航面包屑 + 橙色卡片滑入 + 标题升起, 高冲击力 |
| en_description | Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising. |
| category | video |
| scenario | video |
| aspect_hint | 1920×1080 (16:9) |
| featured | 0 |
| recommended | 6 |
| tags | ["bold","card","dark","orange","section","signal","frame"] |
| example_id | sample-frame-bold-signal |
| example_name | 大胆信号帧 · 01/04 |
| example_format | markdown |
| example_tagline | 暗渐变底 + 橙色焦点卡 + 大编号 |
| example_desc | 章节分隔 / 大胆陈述 — 橙卡从右滑入 + 标题升起 |
| example_source_url | https://github.com/zarazhangrui/frontend-slides |
| example_source_label | frontend-slides · Bold Signal (MIT) |
| od | {"mode":"video","surface":"video","scenario":"video","featured":0,"upstream":"https://github.com/zarazhangrui/frontend-slides","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Bold Signal Frame template to turn my section into a bold colored-card divider — a big section number, a nav breadcrumb, and a vibrant orange card sliding in from the right with the title rising. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「大胆信号卡帧」模板把我的章节做成一段大胆色卡分隔:大编号 + 导航面包屑 + 鲜橙卡片从右滑入 + 标题升起。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"}} |
【模板: 大胆信号卡帧 (Bold Signal)】 【意图】章节/段落分隔 / 大胆 launch 陈述 / 高冲击标题卡。视觉提炼自 frontend-slides 的 Bold Signal 预设 (MIT, © Zara Zhang)。
【画布】1920×1080, 暗底 #1a1a1a + 135° 渐变 (#1a1a1a → #2d2d2d → #1a1a1a)。
【字体】display Archivo Black (900); body Space Grotesk 400/500/700。
【主结构 (时间轴, 默认 4s)】
Archivo Black 96px, 如 01/04, 斜杠后半 opacity 0.3) 从上方 rollIn。#FF5722 橙 opacity 1, 其余白 opacity 0.35。#FF5722, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。Archivo Black 130px, 深色 #1a1a1a on 橙) fadeUp。【配色纪律】暗底灰阶 + 唯一强调色 #FF5722 橙 (焦点卡 / active nav / footer tick)。可换成 coral/vibrant accent 但全片只用一个强调色。卡上文字用深色保证对比。
【内容纪律】
@keyframes, prefers-reduced-motion 下全部停在终态。