presentation-design
Visual design guidance for bold, minimal presentations. Provides layout patterns, typography hierarchy, color specifications, and slide composition rules. Use when asking "how should this slide look?", "design guidance for...", "what layout for this slide?", or when translating content into visual structure for a presentation.
- Installs
- 800
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/aaronvanston/skills-presentations --skill presentation-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads presentation-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the presentation-design skill do?
Visual design guidance for bold, minimal presentations. Provides layout patterns, typography hierarchy, color specifications, and slide composition rules. Use when asking "how should this slide look?", "design guidance for...", "what layout for this slide?", or when translating content into visual structure for a presentation.
How do I install presentation-design?
Run npx skills add https://github.com/aaronvanston/skills-presentations --skill presentation-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/presentation-design/ (personal) or .claude/skills/presentation-design/ (project).
Which AI agents can use presentation-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is presentation-design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains presentation-design?
It is published by aaronvanston in aaronvanston/skills-presentations. It has 800 recorded installs.
More from aaronvanston/skills-presentations
presentation-pitch-deck
aaronvanston/skills-presentations
Open the skill to read its SKILL.md instructions.
presentation-content
aaronvanston/skills-presentations
Open the skill to read its SKILL.md instructions.
presentation-outline
aaronvanston/skills-presentations
Open the skill to read its SKILL.md instructions.
presentation-notes
aaronvanston/skills-presentations
Open the skill to read its SKILL.md instructions.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.