AI LineAiline Skillhub
技能市场/html-ppt-taste-brutalist

html-ppt-taste-brutalist

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode).

HTML PPT — Tactical Telemetry / CRT Terminal

A 16:9 deck for project debriefs, security reviews, infra incident write-ups, ops walkthroughs, and any "we are not selling, we are reporting" presentation. Reads like a declassified mission packet, not a pitch deck.

This skill commits to ONE substrate (dark CRT) — never mix with the light Swiss-print mode in the same artifact.

Source

Distilled from Leonxlnx/taste-skillskills/brutalist-skill/SKILL.md §2.2 (Tactical Telemetry & CRT Terminal). Deck system follows the project's existing html-ppt convention (16:9 slides, vertical-stack fallback when opened directly).

Hard rules

  • Substrate: deactivated-CRT charcoal #0A0A0A / #121212. Never pure black.
  • Foreground: white phosphor #EAEAEA. Secondary #9A9A98.
  • Accent: ONE color — hazard red #E61919. Used on alerts, classifications, the latest data point. Never as a slide background fill.
  • Optional: terminal green #4AF626 for ONE specific UI element across the entire deck (e.g. a single status indicator). Omit if it doesn't earn its place.
  • Type: monospace dominates. JetBrains Mono / IBM Plex Mono for body and meta. Heavy condensed grotesque (Archivo Black / Inter Black) only for slide titles.
  • Title scale: clamp(56px, 7vw, 96px), uppercase, tracking -0.04em, leading 0.9.
  • Geometry: border-radius: 0. Visible 1px hairlines (#2A2A28 on charcoal). Use display: grid; gap: 1px over a hairline-colored background to render perfect cells.
  • Scanline overlay: subtle repeating-linear-gradient at 2px / 4px cycle, opacity ≤ 0.08, applied as a fixed pointer-events-none layer.
  • Phosphor noise: optional SVG-grain pseudo-element, opacity ≤ 0.06.
  • Slide chrome: every slide carries top register strip — classification, slide ID, timestamp, coordinates — and a bottom bar with serial number + page.

Banned

  • border-radius above 0.
  • Drop shadows, gradients, glassmorphism, glow.
  • Color other than charcoal, phosphor, hazard red, and at most one terminal-green element.
  • Sans-serif body fonts. Monospace is the body.
  • Pitch-deck "delight" — emoji, illustration, stock photography, friendly icons.
  • Light-mode slides anywhere in the same deck.
  • Slide transitions other than instant cuts.

Required slide archetypes (10–14 total)

  1. Classification cover — giant numeral or call-sign on the left, redaction bar above the title, mono meta column on the right.
  2. Briefing strip — eight-cell mono register with mission ID, dates, principals, classification.
  3. Numbered objectives — three to five hairline-separated theses, each with >>> marker.
  4. Telemetry griddisplay: grid; gap: 1px of mono key-value cells; red highlight on the variant that breaks the trend.
  5. Threat / risk register — hairline table with severity column in red.
  6. Sequence / timeline — vertical mono list, 2-px vertical rule on the left, hazard markers on critical events.
  7. Diagram / wiring — pure-CSS box-and-line schematic; rectangles with hairlines, ASCII arrows.
  8. Specimen — single mono character or word at viewport-bleeding scale, used as a visual fulcrum.
  9. Alert — diagonal hazard-stripe block (repeating-linear-gradient(135deg, ...)) with the most important sentence in the deck.
  10. Audit log — append-only mono entries with timestamp + actor + event.
  11. Closing colophon — operator, system, build, classification, sign-off line.

Motion

This aesthetic is mechanical and instant.

  • Cuts between slides — no fades. Optionally a 60ms flicker (opacity: 0.85 → 1).
  • A blinking caret on the cover () and a single pulse on the live status dot. Nothing else moves.

Pre-flight

  • [ ] Substrate is charcoal, foreground is phosphor, only accent is hazard red
  • [ ] All border-radius is 0; all corners are 90°
  • [ ] Title slide includes classification + serial + timestamp + coordinates
  • [ ] At least one display: grid; gap: 1px telemetry module
  • [ ] Scanline overlay applied as fixed pointer-events-none element, opacity ≤ 0.08
  • [ ] At least one diagonal hazard-stripe alert block
  • [ ] ASCII syntax decoration ([ ... ], >>>, ///) appears at least four times across the deck
  • [ ] Numeric data uses tabular-nums + monospace
  • [ ] No emojis, no curves, no gradients, no shadow effects
  • [ ] Terminal green appears on zero or one element only — never as text body color

安装中心

可直接安装到 9 个框架(另有 Cursor / Windsurf 需转换为 rules 格式)。悬停可查看各框架的技能目录。

方式一 · 复制提示词(推荐)

粘贴给你的 Claude Code,它会自己完成下载和安装(安装文件直接取自原始仓库)

请帮我安装技能「html-ppt-taste-brutalist」:
1. 从原始仓库下载技能文件:https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/html-ppt-taste-brutalist/SKILL.md(GitHub 上的 SKILL.md 原始文件)
2. 保存为 ~/.claude/skills/html-ppt-taste-brutalist/SKILL.md(目录不存在则创建)
3. 确认文件存在后,告诉我安装结果

方式二 · 命令行安装

npx CLI 跨平台可用(自动检测本机 Agent);PowerShell 方式无需安装任何东西

npx ailine-skills add html-ppt-taste-brutalist
New-Item -ItemType Directory -Force "$HOME\.claude\skills\html-ppt-taste-brutalist" | Out-Null; curl.exe -fsSL "https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/html-ppt-taste-brutalist/SKILL.md" -o "$HOME\.claude\skills\html-ppt-taste-brutalist\SKILL.md"

方式三 · 前往原始仓库

第三方技能不由本站分发安装文件,请从原始仓库获取(上方命令/提示词已直连原始文件)