陌讯skills聚合平台

presentation-design

📁 aaronvanston/skills-presentations 📅 3 days ago
9
总安装量
2
周安装量
#31561
全站排名
安装命令
npx skills add https://github.com/aaronvanston/skills-presentations --skill presentation-design

Agent 安装分布

opencode 2
codex 2
gemini-cli 2
amp 1
kimi-cli 1

Skill 文档

Presentation Design

Visual design guidance for bold, minimal presentations optimized for live presenting.

Core Style

Theme: Dark-first, high contrast, minimal (light mode supported) Feel: Modern, confident, tech-forward

Element Specification
Background Black (#000000) or near-black; light mode: #fafafa
Primary text White (#FFFFFF); light mode: #09090b
Secondary text Gray (#9CA3AF)
Accents Section-specific colors (see below)
Typography Sans-serif (e.g. Geist Sans), light weights at large sizes
Letter spacing Tight (-0.035em to -0.015em)

Typography Hierarchy

Impact comes from scale, not weight. Use light/regular weights (400-600) at massive sizes.

SECTION LABEL     Small caps, section color, tracked wide
                  Example: "THE PROBLEM" | "WHAT WORKS"

Headline          Massive, primary color, light weight (400-500)
                  Fluid sizing via container queries
                  1-5 words per line typical

Subtitle          Smaller, secondary/muted color, regular weight
                  1-2 lines maximum

Body/Bullets      Medium size, primary or secondary color
                  Bold lead-ins (600 weight) when used

Text Contrast Hierarchy

Use 4 levels of contrast to create depth:

Level Purpose Example
Primary Headlines, key content White / #FFFFFF
Secondary Subtitles, supporting text Light gray
Muted Labels, metadata Medium gray
Faint Background elements Dark gray

Section Colors

Each major section of a presentation gets its own accent color. This reinforces structure and helps the audience track where they are.

Color Hex (dark) Typical use
Teal #14b8a6 Opening, framing, recap
Red #f87171 Problems, challenges, tension
Purple #a78bfa Solutions, features, tools
Amber #fbbf24 Data, reality checks, caveats
Green #34d399 Best practices, what works
Blue #60a5fa Technical, implementation
Pink #f472b6 Highlights, special callouts

Section colors appear in: section labels, gradient backgrounds, progress bars, and accent elements.

Layout Patterns

Full Statement (most common)

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│ Massive                                 │
│ Headline                                │
│ Here                                    │
│                                         │
│ Subtitle text in muted color            │
│                                 [ref] ↗ │
└─────────────────────────────────────────┘

Big Statement (maximum impact)

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│                                         │
│       Even Bigger                       │
│       Statement                         │
│                                         │
│                                         │
└─────────────────────────────────────────┘

Split Layout

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│ Headline        │  • Point one          │
│ Here            │  • Point two          │
│                 │  • Point three        │
│ Subtitle        │  • Point four         │
└─────────────────────────────────────────┘

Section Divider (with gradient)

┌────────────────────┬────────────────────┐
│                    │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Section            │▓▓▓ Gradient ▓▓▓▓▓▓▓│
│ Title              │▓▓▓ Background ▓▓▓▓▓│
│                    │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Subtitle           │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────┴────────────────────┘

Code Slide

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│ Headline                                │
│ Subtitle                                │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ // syntax-highlighted code block    │ │
│ │ const result = await generate()     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

Data/Metrics

┌─────────────────────────────────────────┐
│        ┌────────┐ ┌────────┐ ┌────────┐ │
│        │  $10M  │ │  ~10%  │ │  NPS   │ │
│        │  ARR   │ │ GROWTH │ │   90   │ │
│        └────────┘ └────────┘ └────────┘ │
│ SECTION LABEL                           │
│ Headline                                │
│ Subtitle                                │
└─────────────────────────────────────────┘

People/Photos Grid

┌─────────────────────────────────────────┐
│ Headline                                │
│ Subtitle                                │
│                                         │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐        │
│ │photo│ │photo│ │photo│ │photo│        │
│ │Name │ │Name │ │Name │ │Name │        │
│ │TITLE│ │TITLE│ │TITLE│ │TITLE│        │
│ └─────┘ └─────┘ └─────┘ └─────┘        │
│                                         │
│ Photo style: Rounded, B&W or consistent │
└─────────────────────────────────────────┘

Slide Type → Layout Mapping

Slide Type Layout
Title Full statement, centered
Section divider Split with gradient, section color
Statement Full statement, left-aligned
Big statement Big statement, maximum scale
Question Full statement, centered
Goals/Agenda Split layout, bullets right
Data Metrics boxes top
Code Headline + syntax-highlighted block
Quote Centered, large quotation marks
People Photos grid
Recap Split layout, labeled bullets
Resources Grouped reference links by section
Next steps Timeline or labeled bullets

Embedded Content

Slides can embed rich media alongside headlines:

  • Code blocks — syntax-highlighted, dark surface background
  • Terminal output — monospace with ANSI color support
  • Tweet cards — styled quote cards with avatar and attribution
  • Video previews — thumbnail with play button
  • Article previews — link cards with title and description

Visual Elements

  • Section labels: Top-left, uppercase, section color
  • Progress bar: Bottom edge, section color, thin (3px)
  • References: Bottom footer with clickable URLs
  • Gradients: Aurora-style background effects using section color
  • Icons: Simple line icons, white or accent color, used sparingly

Things to Avoid

  • Dense paragraphs of text
  • More than 4-5 bullet points
  • Clip art or stock imagery
  • Heavy font weights for headlines (use scale instead)
  • Multiple competing focal points
  • Animation for animation’s sake
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。