メニュー
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frame-electric-studio |
| zh_name | 电光工作室分屏帧 |
| en_name | Electric Studio Frame |
| emoji | 🔷 |
| description | Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line. |
| zh_description | 电光工作室分屏帧:白/蓝双屏从中心开合 + 强调条生长 + 引言逐行浮现, 高对比专业感 |
| en_description | Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line. |
| category | video |
| scenario | video |
| aspect_hint | 1920×1080 (16:9) |
| featured | 0 |
| recommended | 6 |
| tags | ["split-panel","quote","blue","high-contrast","studio","frame"] |
| example_id | sample-frame-electric-studio |
| example_name | 电光分屏帧 · 引言 |
| example_format | markdown |
| example_tagline | 白/蓝双屏开合 + 引言逐行浮现 |
| example_desc | pull-quote / 使命陈述 — 黑色 accent 条 + 跨屏引言 |
| example_source_url | https://github.com/zarazhangrui/frontend-slides |
| example_source_label | frontend-slides · Electric Studio (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 Electric Studio Frame template to turn my quote into a two-panel split reveal — white top and electric-blue bottom panels opening from center, a black accent bar growing on the seam, and the quote revealing line by line. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「电光工作室分屏帧」模板把我的引言做成一段双屏开合揭示:白色上屏 + 电光蓝下屏从中心开合 + 接缝处黑色强调条生长 + 引言逐行浮现。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"}} |
【模板: 电光工作室分屏帧 (Electric Studio)】 【意图】pull-quote / 推荐语 / 使命陈述 / 高对比标题。视觉提炼自 frontend-slides 的 Electric Studio 预设 (MIT, © Zara Zhang)。
【画布】1920×1080, 白色上屏 (540px) + 电光蓝下屏 (#4361ee, 540px), 中线分割。
【字体】display + body 都用 Manrope 800/700/500/400。
【主结构 (时间轴, 默认 4s)】
.on-blue)。font-size 96px, weight 800。【配色纪律】白 / 电光蓝 #4361ee / 近黑 #0a0a0a 三色。accent 条与品牌词用黑/白, 蓝是大色块。禁止第四个主色。
【内容纪律】
.on-blue class) 形成跨屏对比。@keyframes, prefers-reduced-motion 下全部停在终态。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.
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
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.
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.