visual-digest
SKILL.md
Visual Digest Generator
Transform markdown digest files into polished, branded visuals for sharing via email, Slack, or as posters.
When to Use
- Running
/visual-digest [date]or/poster [date]commands - User asks for "shareable version" of a digest
- Creating email-ready weekly summaries
- Generating Slack-friendly visual updates
AskElephant Brand Guidelines
Colors
| Element | Color | Hex |
|---|---|---|
| Background | Light Gray | #F5F5F5 |
| Primary Text | Near Black | #1A1A1A |
| Secondary Text | Medium Gray | #6B7280 |
| Accent (CTA) | Lime Green | #BFFF00 or #D4FF00 |
| Success | Green | #22C55E |
| Warning | Amber | #F59E0B |
| Cards | White | #FFFFFF |
| Borders | Light | #E5E7EB |
Typography
- Headlines: Inter Bold, 32-48px
- Section Headers: Inter Semibold, 20-24px
- Body: Inter Regular, 14-16px
- Stats/Numbers: Inter Bold, 36-64px (for big metrics)
- Captions: Inter Regular, 12px, gray
Logo Usage
- Black elephant icon with "AskElephant" wordmark
- Logo should appear in header
- Minimum clear space: 1x logo height on all sides
Layout Principles
- Generous whitespace (24-48px padding)
- Card-based sections with subtle shadows
- Left-aligned text (no center alignment for body)
- Clear visual hierarchy
- Maximum 2-3 sections visible without scrolling
Visual Formats
1. Email Digest (600px wide)
┌────────────────────────────────────┐
│ 🐘 AskElephant │
│ Weekly Digest • Week XX, 2026 │
├────────────────────────────────────┤
│ │
│ 🏆 HEADLINE │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ [Main achievement in large text] │
│ │
├────────────────────────────────────┤
│ │
│ 📊 THIS WEEK'S NUMBERS │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 21 │ │ 6 │ │ 14 │ │
│ │feat.│ │impr.│ │bugs │ │
│ └─────┘ └─────┘ └─────┘ │
│ │
├────────────────────────────────────┤
│ │
│ ✨ NEW FEATURES │
│ • Feature 1 │
│ • Feature 2 │
│ │
│ 🔧 IMPROVEMENTS │
│ • Improvement 1 │
│ │
│ 🐛 BUGS FIXED │
│ • Bug fix 1 │
│ │
├────────────────────────────────────┤
│ 👥 Team • Coming Next │
└────────────────────────────────────┘
2. Poster/Slack Visual (1200x630px - Social Preview)
┌──────────────────────────────────────────────────┐
│ │
│ 🐘 AskElephant Weekly │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ │ │
│ │ "Dialpad Integration Now Live" │ │
│ │ │ │
│ │ 21 Features • 6 Improvements • 14 Bugs│ │
│ │ │ │
│ └────────────────────────────────────────┘ │
│ │
│ Week 4 • January 20-24, 2026 │
│ │
└──────────────────────────────────────────────────┘
3. Full Poster (Portrait - 800x1200px)
For printing or high-res sharing with all sections visible.
Generation Procedure
Step 1: Parse Markdown Digest
Extract from the digest file:
- Title/Date - From header (e.g., "Week 4: January 20-24, 2026")
- Headline - From "WEEK'S HEADLINE" or "TODAY'S HEADLINE" section
- Stats - Features count, Improvements count, Bugs count
- Features List - Items under "NEW FEATURES"
- Improvements List - Items under "IMPROVEMENTS"
- Bugs Summary - Count and highlights from "BUGS FIXED"
- Team Contributions - Names and focus areas
- Coming Next - Future items
Step 2: Generate Image Prompt
Use the GenerateImage tool with a detailed prompt:
Professional business newsletter visual for AskElephant (B2B meeting intelligence platform).
Style:
- Clean, modern SaaS design
- Light gray (#F5F5F5) background
- White cards with subtle shadows
- Inter or similar sans-serif font
- Black text with lime green (#BFFF00) accents
- Professional but approachable
Layout:
- AskElephant logo (black elephant icon) in top left
- "Weekly Digest" header with date
- Large headline quote in center card
- Three stat boxes showing: [X] Features, [X] Improvements, [X] Bugs Fixed
- Clean typography hierarchy
- Minimal decoration, lots of whitespace
Content:
- Headline: "[HEADLINE TEXT]"
- Stats: [X] Features, [X] Improvements, [X] Bugs Fixed
- Date: [DATE RANGE]
Do NOT include:
- Stock photos of people
- Generic tech imagery
- Busy backgrounds
- Multiple colors (keep monochrome + green accent)
Step 3: Save Output
Save generated visual to:
pm-workspace-docs/status/activity/visuals/digest-YYYY-MM-DD.pngpm-workspace-docs/status/activity/visuals/digest-YYYY-WXX.png
Command Options
| Command | Description |
|---|---|
/visual-digest |
Generate visual for most recent digest |
/visual-digest YYYY-MM-DD |
Generate visual for specific daily digest |
/visual-digest YYYY-WXX |
Generate visual for specific weekly digest |
/poster |
Alias for /visual-digest |
--format email |
Optimize for email (600px wide) |
--format social |
Optimize for social/Slack (1200x630px) |
--format poster |
Full poster format (800x1200px) |
Example Prompt for Week 4 Digest
Professional weekly newsletter poster for AskElephant, a B2B meeting intelligence SaaS platform.
Design specifications:
- Dimensions: 1200x630 pixels (social media preview size)
- Background: Light warm gray (#F5F5F5)
- Cards: White with very subtle shadow
- Typography: Modern sans-serif (Inter-style)
- Accent color: Bright lime green (#D4FF00) for highlights
- Overall feel: Clean, professional, minimal
Layout (top to bottom):
1. Header bar: Black elephant logo icon + "AskElephant" wordmark + "Weekly Digest" badge
2. Main card (centered):
- Large quote: "Dialpad Integration Now Live"
- Subtext: "Customers using Dialpad can now connect their telephony directly to AskElephant"
3. Stats row: Three pill-shaped badges showing:
- "21 Features" (green accent)
- "6 Improvements"
- "14 Bugs Fixed"
4. Footer: "Week 4 • January 20-24, 2026"
Visual style:
- NO stock photos or people
- NO busy patterns or gradients
- Clean vector-style graphics only
- High contrast text for readability
- Professional B2B SaaS aesthetic
HTML Email Template (Alternative)
For email platforms that support HTML, generate this template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AskElephant Weekly Digest</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
background: #f5f5f5;
margin: 0;
padding: 24px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header {
background: #1a1a1a;
color: white;
padding: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.logo {
font-weight: bold;
font-size: 18px;
}
.badge {
background: #d4ff00;
color: #1a1a1a;
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
}
.headline {
padding: 32px 24px;
border-bottom: 1px solid #e5e7eb;
}
.headline h1 {
font-size: 24px;
margin: 0 0 8px 0;
color: #1a1a1a;
}
.headline p {
color: #6b7280;
margin: 0;
font-size: 14px;
}
.stats {
display: flex;
padding: 24px;
gap: 16px;
background: #fafafa;
}
.stat {
flex: 1;
text-align: center;
padding: 16px;
background: white;
border-radius: 8px;
}
.stat-number {
font-size: 32px;
font-weight: bold;
color: #1a1a1a;
}
.stat-label {
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
}
.section {
padding: 24px;
border-bottom: 1px solid #e5e7eb;
}
.section h2 {
font-size: 14px;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 16px 0;
letter-spacing: 0.5px;
}
.section ul {
margin: 0;
padding: 0;
list-style: none;
}
.section li {
padding: 8px 0;
color: #1a1a1a;
font-size: 14px;
}
.footer {
padding: 24px;
text-align: center;
color: #6b7280;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span class="logo">🐘 AskElephant</span>
<span class="badge">Weekly Digest</span>
</div>
<div class="headline">
<h1>{{HEADLINE}}</h1>
<p>{{HEADLINE_DESCRIPTION}}</p>
</div>
<div class="stats">
<div class="stat">
<div class="stat-number">{{FEATURES_COUNT}}</div>
<div class="stat-label">Features</div>
</div>
<div class="stat">
<div class="stat-number">{{IMPROVEMENTS_COUNT}}</div>
<div class="stat-label">Improvements</div>
</div>
<div class="stat">
<div class="stat-number">{{BUGS_COUNT}}</div>
<div class="stat-label">Bugs Fixed</div>
</div>
</div>
<div class="section">
<h2>✨ New Features</h2>
<ul>
{{#each FEATURES}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
<div class="section">
<h2>🔧 Improvements</h2>
<ul>
{{#each IMPROVEMENTS}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
<div class="footer">{{DATE_RANGE}} • For the AskElephant team</div>
</div>
</body>
</html>
Reference Assets
Brand assets location:
- Logo:
.cursor/skills/visual-digest/assets/askelephant-logo.png - Screenshots:
~/.cursor/projects/.../assets/(user-provided examples)
Integration
With Activity Reporter
After generating a digest, suggest:
Would you like me to create a visual version for sharing?
Run /visual-digest to generate an email/poster version.
Output Locations
| Format | Location |
|---|---|
| Generated images | pm-workspace-docs/status/activity/visuals/ |
| HTML templates | pm-workspace-docs/status/activity/templates/ |
Error Handling
Missing Digest
No digest found for [date].
Run /eod --digest or /eow --digest first to generate the markdown digest.
Image Generation Failed
Image generation failed. Creating HTML template instead.
[Save HTML to templates/ folder]
Weekly Installs
4
Repository
tylersahagun/pm…orkspaceFirst Seen
Mar 1, 2026
Security Audits
Installed on
opencode4
gemini-cli4
codebuddy4
github-copilot4
codex4
kimi-cli4