# Frame Bold Signal

> Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

- Skill: `nexu-io/frame-bold-signal` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add nexu-io/frame-bold-signal`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/frame-bold-signal/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/frame-bold-signal

---


【模板: 大胆信号卡帧 (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)】
- **0.2s** 左上巨大 section number (`Archivo Black` 96px, 如 `01/04`, 斜杠后半 opacity 0.3) 从上方 rollIn。
- **0.4s 起** 右上 nav breadcrumb 错峰淡入: active 项 `#FF5722` 橙 opacity 1, 其余白 opacity 0.35。
- **0.6s** 橙色焦点卡 (`#FF5722`, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。
- **1.15s** 卡内 label (uppercase, letter-spacing 4px) fadeUp。
- **1.3s** 卡内大标题 (`Archivo Black` 130px, 深色 `#1a1a1a` on 橙) fadeUp。
- **1.6s** 左下 footer (橙色 tick 短条 + system 标签) 淡入。

【配色纪律】暗底灰阶 + 唯一强调色 `#FF5722` 橙 (焦点卡 / active nav / footer tick)。可换成 coral/vibrant accent 但**全片只用一个**强调色。卡上文字用深色保证对比。

【内容纪律】
- title 1-2 行, 必须用真实标题, 严禁 lorem ipsum。
- nav 面包屑反映真实章节结构, 第一项 active。
- 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态。
- 单文件 HTML。