diff --git a/apps/x/packages/core/src/application/assistant/skills/create-presentations/skill.ts b/apps/x/packages/core/src/application/assistant/skills/create-presentations/skill.ts index 97f801c8..f3dd4d03 100644 --- a/apps/x/packages/core/src/application/assistant/skills/create-presentations/skill.ts +++ b/apps/x/packages/core/src/application/assistant/skills/create-presentations/skill.ts @@ -1,60 +1,131 @@ export const skill = String.raw` -# PDF Presentation Generator Skill +# PDF Presentation Skill -## When to Use +## Theme Selection -Activate when the user wants to create presentations, slide decks, or pitch decks. +If the user specifies a visual theme, colors, or brand guidelines, use those. If they do NOT specify a theme, **do not ask** — pick the best fit based on the topic and audience: + +- **Dark Professional** — Deep navy/charcoal backgrounds, indigo (#6366f1) and violet (#8b5cf6) accents, white text. Best for: tech, SaaS, keynotes, engineering. +- **Light Editorial** — White/warm cream backgrounds, amber (#f59e0b) and stone accents, dark text with serif headings. Best for: reports, proposals, thought leadership, research. +- **Bold Vibrant** — Mixed dark and light slides, emerald (#10b981) and rose (#f43e5c) accents, high contrast. Best for: pitch decks, marketing, creative, fundraising. + +Note the theme used at the end of delivery so the user can request a swap if they prefer a different look. + +## Visual Consistency Rules + +Every presentation must have a unified color theme applied across ALL slides. Do not mix unrelated color palettes between slides. + +1. **Define a theme palette upfront** — Pick one primary color, one accent color, and one neutral base (dark or light). Use these consistently across every slide. +2. **Backgrounds** — Use at most 2-3 background variations (e.g. dark base, light base, and primary color). Alternate them for rhythm but keep them from the same palette. +3. **Accent color** — Use the same accent color for all highlights: overlines, bullets, icons, chart fills, timeline dots, CTA buttons, divider lines. +4. **Typography colors** — Headings, body text, and muted text should use the same tones on every slide. Don't switch between warm and cool grays mid-deck. +5. **Charts and data** — Use shades/tints of the primary and accent colors for chart fills. Never introduce one-off colors that don't appear elsewhere in the deck. +6. **Consistent fonts** — Pick one heading font and one body font. Use them on every slide. Don't mix different heading fonts across slides. + +## Critical: One Theme Per Deck + +The example layouts in this document each use different colors and styles for showcase purposes only. When building an actual presentation, pick ONE theme and apply it consistently to EVERY slide. Borrow layout structures and patterns from the examples, but replace all colors, fonts, and backgrounds with your chosen theme's palette. Never copy the example colors verbatim — adapt them to the unified theme. + +### Visual Consistency Rules + +Every presentation must have a unified color theme applied across ALL slides. This is the #1 most important design rule. A deck where every slide looks like it belongs together is always better than a deck with individually beautiful but visually inconsistent slides. + +#### Background Strategy (STRICT) +Pick ONE dominant background tone and use it for 80%+ of slides. Add subtle variation within that tone — never alternate between dark and light backgrounds. + +##### For dark themes: + +Deep base (e.g. #0f172a) — use for title, section dividers, closing (primary background) +Medium base (e.g. #1e293b or #111827) — use for content slides, charts, tables (secondary background) +Accent pop (e.g. #6366f1) — use for 1-2 key stat or quote slides only (rare emphasis) +NEVER use white or light backgrounds in a dark-themed deck. Data tables, team grids, and other content that "feels light" should still use the dark palette with adjusted contrast. + +##### For light themes: + +Light base (e.g. #fafaf9 or #ffffff) — use for most content slides (primary background) +Warm tint (e.g. #fefce8 or #f8fafc) — use for alternation and visual rhythm (secondary background) +Accent pop (e.g. the theme's primary color) — use for 1-2 key stat or quote slides only (rare emphasis) +NEVER use dark/navy backgrounds in a light-themed deck. + +Never alternate between dark and light backgrounds. This creates a jarring strobe effect and breaks visual cohesion. The audience's eyes have to constantly readjust. Instead, create rhythm through subtle shade variation within the same tone family. +Never use more than 3 background color values across the entire deck. + +#### Color & Typography Rules + +Define a theme palette upfront — Pick one primary color, one accent color, and one neutral base (dark or light). Use these consistently across every slide. Write these as CSS variables and reference them everywhere. +Accent color — Use the SAME accent color for ALL highlights across the entire deck: overlines, bullets, icons, chart fills, timeline dots, CTA buttons, divider lines. Do not use different accent colors on different slides. +Typography colors — Headings, body text, and muted text should use the same tones on every slide. Don't switch between warm and cool grays mid-deck. +Charts and data — Use shades/tints of the primary and accent colors for chart fills. Never introduce one-off colors that don't appear elsewhere in the deck. +Consistent fonts — Pick one heading font and one body font. Use them on every slide. Don't mix different heading fonts across slides. + +#### Title Slide Rules + +Title text must span the FULL slide width. Never place a decorative element beside the title that competes for horizontal space. +Title slides should use a single-column, vertically-stacked layout: overline → title → subtitle → optional tags/pills. No side-by-side elements on title slides. +If a decorative visual is needed, place it BEHIND the text (as a CSS background, gradient, or pseudo-element), never beside it. +Title font-size must not exceed 64px. For titles longer than 5 words, use 48px max. + +## Content Planning (Do This Before Building) + +Before writing any HTML, plan the narrative arc: + +1. **Hook** — What's the opening statement or question that grabs attention? +2. **Core argument** — What's the one thing the audience should remember? +3. **Supporting evidence** — What data, examples, or frameworks back it up? +4. **Call to action** — What should the audience do next? + +Map each point to a slide layout from the Available Layout Types below. For a typical presentation, generate **8-15 slides**: title + agenda (optional) + 6-10 content slides + closing. Don't pad with filler — every slide should earn its place. Use layout variety — never use the same layout for consecutive slides. ## Workflow 1. Use workspace-readFile to check knowledge/ for relevant context about the company, product, team, etc. -2. Ensure Playwright is installed: 'npm install playwright && npx playwright install chromium' +2. Ensure Playwright is installed: \`npm install playwright && npx playwright install chromium\` 3. Use workspace-getRoot to get the workspace root path. -4. Use workspace-writeFile to create the HTML file at tmp/presentation.html (workspace-relative) with slides (1280x720px each). -5. Use workspace-writeFile to create a Node.js conversion script at tmp/convert.js (workspace-relative): +4. Plan the narrative arc and slide outline (see Content Planning above). +5. Use workspace-writeFile to create the HTML file at tmp/presentation.html (workspace-relative) with slides (1280x720px each). +6. **Perform the Post-Generation Validation (see below). Fix any issues before proceeding.** +7. Use workspace-writeFile to create the conversion script at tmp/convert.js (workspace-relative) — see Playwright Export section. +8. Run it: \`node /tmp/convert.js\` +9. Tell the user: "Your presentation is ready at ~/Desktop/presentation.pdf" and note the theme used. -~~~javascript -// save as tmp/convert.js via workspace-writeFile -const { chromium } = require('playwright'); -const path = require('path'); +**Critical**: Never show HTML code to the user. Never ask the user to run commands, install packages, or make technical decisions. The entire pipeline from content to PDF must be invisible to the user. -(async () => { - const browser = await chromium.launch(); - const page = await browser.newPage(); - // Use the workspace root path from workspace-getRoot - await page.goto('file:///tmp/presentation.html', { waitUntil: 'networkidle' }); - await page.pdf({ - path: path.join(process.env.HOME, 'Desktop', 'presentation.pdf'), - width: '1280px', - height: '720px', - printBackground: true, - }); - await browser.close(); - console.log('Done: ~/Desktop/presentation.pdf'); -})(); -~~~ - -Replace with the actual absolute path returned by workspace-getRoot. - -6. Run it: 'node /tmp/convert.js' -7. Tell the user: "Your presentation is ready at ~/Desktop/presentation.pdf" - -Do NOT show HTML code to the user. Do NOT explain how to export. Just create the PDF and deliver it. Use workspace-writeFile and workspace-readFile for ALL file operations. Do NOT use executeCommand to write or read files. +## Post-Generation Validation (REQUIRED) + +After generating the slide HTML, perform ALL of these checks before converting to PDF: + +1. **Title overflow check**: For every slide, verify that the title text at its set font-size fits within the slide width (1280px) minus padding (120px total). If \`title_chars × 0.6 × font_size > 1160\`, reduce font-size. Use these max sizes: + - Short titles (1-3 words): 72px max + - Medium titles (4-6 words): 56px max + - Long titles (7+ words): 44px max + Apply \`word-wrap: break-word\` and \`overflow-wrap: break-word\` to all title elements. Never use \`white-space: nowrap\` on titles. + +2. **Content bounds check**: Verify no element extends beyond the 1280x720 slide boundary. Look for: long titles, bullet lists with 6+ items, wide tables, long labels on charts, text that wraps more lines than the available height allows. + +3. **Broken visuals check**: Confirm no \`\` tags reference external URLs. All visuals must be CSS, SVG, or emoji only. Never use external images — they will fail in PDF rendering. Use CSS shapes, gradients, SVG, or emoji for all visual elements. + +4. **Font loading check**: Verify the Google Fonts \`\` tag includes ALL font families used in the CSS. Missing fonts cause fallback rendering and broken typography. + +5. **Theme consistency check**: Confirm all slides use the same palette — no rogue colors in charts, backgrounds, or text that don't belong to the chosen theme. + +6. **Fix before proceeding**: If any check fails, fix the HTML before PDF conversion. Do not proceed with known issues. + ## PDF Export Rules -**These rules prevent rendering issues in PDF. Violating them causes overlapping rectangles and broken layouts.** +These rules prevent rendering issues in PDF. Violating them causes overlapping rectangles and broken layouts. -1. **No layered elements** - Never create separate elements for backgrounds or shadows. Style content elements directly. -2. **No box-shadow** - Use borders instead: \`border: 1px solid #e5e7eb\` -3. **Bullets via CSS only** - Use \`li::before\` pseudo-elements, not separate DOM elements -4. **Content must fit** - Slides are 1280x720px with 60px padding. Safe area is 1160x600px. Use \`overflow: hidden\`. -5. **No footers or headers** - Never add fixed/absolute-positioned footer or header elements to slides. They overlap with content in PDF rendering. If you need a slide number or title, include it as part of the normal content flow. +1. **No layered elements** — Never create separate elements for backgrounds or shadows. Style content elements directly. +2. **No box-shadow** — Use borders instead: \`border: 1px solid #e5e7eb\` +3. **Bullets via CSS only** — Use \`li::before\` pseudo-elements, not separate DOM elements. +4. **Content must fit** — Slides are 1280x720px with 60px padding. Safe content area is 1160x600px. Use \`overflow: hidden\`. +5. **No footers or headers** — Never add fixed/absolute-positioned footer or header elements to slides. They overlap with content in PDF rendering. If you need a slide number or title, include it as part of the normal content flow. +6. **No external images** — All visuals must be CSS, SVG, or emoji. External image URLs will render as broken white boxes in PDF. ## Required CSS -~~~css +\`\`\`css @page { size: 1280px 720px; margin: 0; } html { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .slide { @@ -66,24 +137,2608 @@ html { -webkit-print-color-adjust: exact !important; print-color-adjust: exact ! page-break-inside: avoid; } .slide:last-child { page-break-after: auto; } -~~~ +\`\`\` ## Playwright Export -~~~typescript -import { chromium } from 'playwright'; +\`\`\`javascript +// save as tmp/convert.js via workspace-writeFile +const { chromium } = require('playwright'); +const path = require('path'); + +(async () => { + const browser = await chromium.launch(); + const page = await browser.newPage(); + // Replace with the actual absolute path from workspace-getRoot + await page.goto('file:///tmp/presentation.html', { waitUntil: 'networkidle' }); + await page.pdf({ + path: path.join(process.env.HOME, 'Desktop', 'presentation.pdf'), + width: '1280px', + height: '720px', + printBackground: true, + }); + await browser.close(); + console.log('Done: ~/Desktop/presentation.pdf'); +})(); +\`\`\` + +Replace \`\` with the actual absolute path returned by workspace-getRoot. + +## Available Layout Types (35 Templates) + +Use these as reference when building presentations. Pick the appropriate layout for each slide based on the content type. Mix and match for visual variety. + +### Title & Structure Slides +1. **Title Slide (Dark Gradient)** — Hero opening with gradient text and atmospheric glow +2. **Title Slide (Light Editorial)** — Clean, warm serif typography with editorial feel +3. **Section Divider** — Chapter break with oversized background number +4. **Agenda / Table of Contents** — Serif title with numbered items and descriptions +5. **Full-Bleed Cinematic** — Atmospheric background with grid texture, orbs, and bottom-aligned content + +### Content Slides +6. **Big Statement / Quote** — Full-color background with bold quote or key takeaway +7. **Big Stat Number** — Single dramatic metric with context text +8. **Bullet List (Split Panel)** — Dark sidebar title + light content area with icon bullets +9. **Numbered List** — Ordered steps in numbered cards +10. **Two Columns** — Side-by-side content cards +11. **Three Columns with Icons** — Feature cards with icon accents +12. **Image + Text** — Visual panel left, content + CTA right +13. **Image Gallery (2x2)** — Grid of captioned visual cards using CSS gradient backgrounds + +### Chart & Data Slides +14. **Bar Chart (Vertical)** — Vertical bars with gradient fills and labels +15. **Horizontal Bar Chart** — Ranked bars for lists with long labels +16. **Stacked Bar Chart** — Segmented bars showing composition/breakdown +17. **Combo Chart (Bar + Line)** — SVG bars for volume + line for growth rate +18. **Donut Chart** — CSS conic-gradient donut with legend +19. **Line Chart (SVG)** — SVG polyline with area fill and data labels +20. **KPI Dashboard** — Color-coded metric cards with change indicators +21. **Data Table** — Styled rows with colored header and status badges +22. **Feature Matrix** — Checkmark comparison table (features x tiers) + +### Diagram Slides +23. **Horizontal Timeline** — Connected milestone dots on a horizontal axis +24. **Vertical Timeline** — Left-rail progression of milestones +25. **Process Flow** — Step cards connected with arrows +26. **Funnel Diagram** — Tapered width bars showing conversion stages +27. **Pyramid Diagram** — Tiered hierarchy showing levels/priorities +28. **Cycle Diagram** — Flywheel/feedback loop with circular node arrangement +29. **Venn Diagram** — Three translucent overlapping circles +30. **2x2 Matrix** — Four color-coded quadrants with axis labels + +### Comparison Slides +31. **Comparison / Vs** — Split layout with contrasting colors for A vs B +32. **Pros & Cons** — Checkmarks vs. warnings in two columns +33. **Pricing Table** — Tiered cards with featured highlight + +### People & Closing Slides +34. **Team Grid** — Avatar circles with role descriptions +35. **Thank You / CTA** — Atmospheric closing with contact details + +### Layout Selection Heuristic + +For each slide, identify the content type and pick the matching layout: + +| Content Type | Best Layouts | +|---|---| +| Opening / hook | Title Slide, Full-Bleed Cinematic | +| Agenda / overview | Agenda/TOC | +| Key metric or stat | Big Stat Number, KPI Dashboard | +| List of points | Bullet List, Numbered List | +| Features or pillars | Three Columns, Two Columns | +| Trend over time | Line Chart, Horizontal Timeline | +| Composition / breakdown | Donut Chart, Stacked Bar, Pie | +| Ranking | Horizontal Bar Chart | +| Comparison | Vs Slide, Pros & Cons | +| Process or steps | Process Flow, Vertical Timeline | +| Hierarchy | Pyramid Diagram | +| Feedback loop | Cycle Diagram | +| Overlap / intersection | Venn Diagram | +| Prioritization | 2x2 Matrix | +| Data details | Data Table, Feature Matrix | +| Pricing | Pricing Table | +| Emotional / cinematic | Big Statement, Full-Bleed Cinematic | +| Team intro | Team Grid | +| Closing | Thank You / CTA | + +Never use the same layout for consecutive slides. Alternate between dark and light backgrounds for rhythm. + +### Design Guidelines + +- Use Google Fonts loaded via \`\` tag. Recommended pairings: + - **Primary pair**: Outfit (headings) + DM Sans (body) — works for most decks + - **Editorial pair**: Playfair Display (headings) + DM Sans (body) — for reports/proposals + - **Accent fonts**: Space Mono (overlines, labels), Crimson Pro (quotes) +- Dark slides: use subtle radial gradients for atmosphere, semi-transparent overlays for depth +- Light slides: use warm neutrals, clean borders, and ample whitespace +- Charts: use CSS (conic-gradient for donuts, inline styles for bar heights) or inline SVG for line/combo charts +- Typography hierarchy: monospace overlines for labels -> sans-serif for headings -> serif for editorial/quotes +- Cards: use \`border-radius: 12-16px\`, subtle borders (\`rgba(255,255,255,0.08)\` on dark), no box-shadow (PDF rule) +- All visuals must be CSS, SVG, or emoji — no external images + +### HTML Template Examples + + + + + + +Slide Deck Templates — The Future of AI Coworkers + + + + + +
+
Slide Template Gallery
+

The Future of AI Coworkers

+

35 production-ready slide templates across different layouts, chart types, diagrams, and visual styles — all themed around the AI-powered workplace.

+
+ + +
+
01 / Title Slide
+
Dark Gradient Title
+
Hero opening slide with gradient text and atmospheric glow
+
+
+
Keynote 2026
+

The Future of
AI Coworkers

+
How intelligent agents are transforming collaboration, creativity, and the way teams build together.
+
+
+
+ + +
+
02 / Title Slide
+
Light Editorial Title
+
Clean, warm title slide with serif typography and an editorial feel
+
+
+
Industry Report 2026
+

Working Alongside AI

+
A comprehensive look at how AI coworkers are augmenting human potential across every industry, from startups to the Fortune 500.
+
+
+
+ + +
+
03 / Section Divider
+
Chapter Break
+
Dramatic section separator with oversized background number
+
+
+
01
+
+
Section One
+

The Rise of Intelligent Collaboration

+
+
+
+
+
+ + +
+
04 / Quote / Statement
+
Big Statement Slide
+
Full-color background with a bold quote or key takeaway
+
+
+
AI coworkers don't replace human creativity — they amplify it, handling the routine so teams can focus on the extraordinary.
+
— Annual Workplace Intelligence Report, 2026
+
+
+
+ + +
+
05 / Bullet List
+
Split Panel with Bullets
+
Dark sidebar with title, light content area with icon-accented bullets
+
+
+
+
+

Key Benefits of AI Coworkers

+
+
+
+
⚡
+
+

10x Faster Research

+

AI agents synthesize thousands of documents in seconds, surfacing insights that would take humans weeks.

+
+
+
+
🎯
+
+

Proactive Task Management

+

Intelligent assistants anticipate next steps, draft follow-ups, and keep projects on track automatically.

+
+
+
+
🤝
+
+

Always-On Collaboration

+

AI coworkers bridge time zones, summarize meetings, and ensure no team member is ever out of the loop.

+
+
+
+
📈
+
+

Continuous Learning

+

Each interaction makes the AI smarter — building a compounding knowledge base for your entire organization.

+
+
+
+
+
+
+ + +
+
06 / Two Columns
+
Warm Two-Column Layout
+
Side-by-side content cards on a warm yellow background
+
+
+
+

Two Modes of AI Collaboration

+
Framework
+
+
+
+

🧠 Thinking Partner

+

AI coworkers serve as brainstorming partners that challenge assumptions, offer alternative perspectives, and help teams explore ideas they wouldn't have considered alone. They bring pattern recognition across vast datasets to creative problem-solving sessions.

+
+
+

⚙️ Execution Engine

+

From drafting reports to analyzing data pipelines, AI coworkers handle the heavy lifting of execution. They turn rough outlines into polished deliverables, automate repetitive workflows, and free humans to focus on strategy and relationship building.

+
+
+
+
+
+ + +
+
07 / Three Columns
+
Dark Three-Column Feature Cards
+
Glassmorphic cards with icon accents on a dark background
+
+
+

Core Capabilities

+
+
+
🔍
+

Deep Research

+

Analyze millions of data points across your organization's knowledge base to surface critical insights and connections.

+
+
+
✍️
+

Content Creation

+

Draft, edit, and refine documents, presentations, and communications tailored to your brand voice and standards.

+
+
+
🔗
+

Workflow Orchestration

+

Connect tools, automate handoffs, and ensure seamless execution across your entire tech stack and team.

+
+
+
+
+
+ + +
+
08 / Bar Chart
+
Vertical Bar Chart
+
Clean data visualization with gradient bars on white
+
+
+

Productivity Gains by Department

+
Average hours saved per week after AI coworker deployment
+
+
+
+
18h
+
+
Engineering
+
+
+
+
15h
+
+
Marketing
+
+
+
+
22h
+
+
Sales
+
+
+
+
13h
+
+
Design
+
+
+
+
20h
+
+
Operations
+
+
+
+
16h
+
+
Finance
+
+
+
+
14h
+
+
HR
+
+
+
+
+
+ + +
+
09 / Donut Chart
+
Donut Chart with Legend
+
Dark split layout with donut visualization and data legend
+
+
+
+

How Teams Use AI Coworkers

+
Survey of 5,000+ professionals on their primary use cases for AI collaboration in the workplace.
+
+
Research & Analysis — 42%
+
Content Drafting — 26%
+
Code & Engineering — 17%
+
Meeting Summaries — 15%
+
+
+
+
+
+
5K+
+
respondents
+
+
+
+
+
+ + +
+
10 / Line Chart
+
Trend Line Chart
+
Light green theme with SVG line chart showing growth trajectory
+
+
+

AI Coworker Adoption Rate

+
Percentage of Fortune 500 companies with deployed AI agents, 2022–2026
+ + + + + + + + + + 0% + 25% + 50% + 75% + 100% + + + + + + + + + + + + + + + + + + + 2021 + 2022 + 2023 + 2024 + 2025 + 2026 + + 10% + 19% + 35% + 60% + 84% + 99% + +
+
+
+ + +
+
11 / Horizontal Timeline
+
Evolution Timeline
+
Dark purple with connected milestone dots and descriptions
+
+
+

The Evolution of AI Coworkers

+
+
+
2020
+
+
Basic Chatbots
+
Simple Q&A bots handling repetitive customer queries
+
+
+
2022
+
+
LLM Assistants
+
General-purpose AI for writing, analysis, and coding tasks
+
+
+
2024
+
+
AI Agents
+
Autonomous agents that plan, execute, and iterate on complex workflows
+
+
+
2026
+
+
AI Coworkers
+
Persistent, context-aware teammates with memory and deep integrations
+
+
+
+
+
+ + +
+
12 / Vertical Timeline
+
Light Vertical Timeline
+
Clean white layout with a vertical progression of milestones
+
+
+
Roadmap
+
+
+
Q1 2026
+

Launch AI Knowledge Graph

+

Persistent memory layer that maps relationships across all work data — emails, meetings, docs.

+
+
+
Q2 2026
+

Multi-Agent Orchestration

+

Deploy specialized agents that collaborate — research agent, writing agent, code agent — working in concert.

+
+
+
Q3 2026
+

Proactive Insights Engine

+

AI coworker surfaces insights before you ask — flagging risks, opportunities, and action items automatically.

+
+
+
Q4 2026
+

Full Workflow Autonomy

+

End-to-end autonomous task completion with human-in-the-loop oversight for critical decisions.

+
+
+
+
+
+ + +
+
13 / Process Flow
+
Step-by-Step Process
+
Ocean blue gradient with connected process steps and arrows
+
+
+

How AI Coworkers Learn Your Workflow

+
+
+
01
+

Connect

+

Integrate with your tools — email, calendar, Slack, docs

+
+
→
+
+
02
+

Observe

+

AI maps your workflows, relationships, and patterns

+
+
→
+
+
03
+

Assist

+

Proactively suggests actions and drafts deliverables

+
+
→
+
+
04
+

Evolve

+

Gets smarter with every interaction, compounding value

+
+
+
+
+
+ + +
+
14 / KPI Dashboard
+
Metrics Dashboard
+
Dark zinc theme with color-coded metric cards
+
+
+

Impact Metrics — Q4 2026

+
+
+
Tasks Automated
+
12.4K
+
34% vs Q3
+
+
+
Hours Saved / Week
+
847
+
22% vs Q3
+
+
+
Team Satisfaction
+
94%
+
8pts vs Q3
+
+
+
ROI Multiple
+
11.2x
+
2.1x vs Q3
+
+
+
+
+
+ + +
+
15 / Comparison
+
Side-by-Side Comparison
+
Split layout with contrasting colors for before/after or A vs B
+
+
+
+

Traditional Workflow

+
    +
  • Manual research across scattered sources
    • +
  • Hours spent formatting reports and decks
    • +
  • Context lost between meetings and tools
    • +
  • Repetitive tasks drain creative energy
    • +
  • Knowledge silos across the org
    • +
+
+
VS
+
+

With AI Coworkers

+
    +
  • Instant synthesis from all data sources
    • +
  • Auto-generated first drafts in seconds
    • +
  • Persistent memory across every interaction
    • +
  • Automation frees focus for high-impact work
    • +
  • Shared intelligence for the entire team
    • +
+
+
+
+
+ + +
+
16 / Pricing Table
+
Tiered Pricing
+
Dark theme with featured tier highlight
+
+
+

Choose Your AI Coworker Plan

+
+
+
Starter
+
$29/mo
+
For individuals getting started
+
    +
  • 1 AI coworker agent
    • +
  • 5 tool integrations
    • +
  • 10K messages / month
    • +
  • 7-day memory window
    • +
+
+
+
Team ⭐
+
$99/mo
+
For growing teams
+
    +
  • 5 AI coworker agents
    • +
  • Unlimited integrations
    • +
  • Unlimited messages
    • +
  • Persistent memory
    • +
  • Knowledge graph
    • +
+
+
+
Enterprise
+
Custom
+
For large organizations
+
    +
  • Unlimited agents
    • +
  • Custom model training
    • +
  • SSO & compliance
    • +
  • Dedicated support
    • +
  • On-premise option
    • +
+
+
+
+
+
+ + +
+
17 / Team Grid
+
Team Members
+
Light layout with avatar circles and role descriptions
+
+
+

Meet Your AI Team

+
+
+
🔬
+

Research Agent

+
Deep Analysis
+
Scans thousands of sources to deliver synthesized insights in seconds
+
+
+
✏️
+

Writing Agent

+
Content Creation
+
Drafts, edits, and polishes documents in your brand voice
+
+
+
💻
+

Code Agent

+
Engineering
+
Writes, reviews, and debugs code across your entire stack
+
+
+
📊
+

Data Agent

+
Analytics
+
Transforms raw data into dashboards and actionable reports
+
+
+
+
+
+ + +
+
18 / Image + Text
+
Visual Storytelling Split
+
Left visual panel with decorative elements, right content with CTA
+
+
+
+
+
+
🤖
+
+
+

Your AI Coworker Remembers Everything

+

Unlike session-based tools that forget after every chat, AI coworkers build persistent knowledge graphs from your emails, meetings, and documents — compounding intelligence over time.

+ See It In Action → +
+
+
+
+ + +
+
19 / Funnel Diagram
+
Conversion Funnel
+
Dark cosmic theme with tapered funnel stages
+
+
+
+

AI Coworker Adoption Funnel

+
From first touch to full deployment — how organizations onboard their AI teammates.
+
+
+
+ Discovery & Demo10,000 +
+
+ Free Trial6,200 +
+
+ Active Usage3,800 +
+
+ Paid Conversion2,100 +
+
+ Enterprise Deploy940 +
+
+
+
+
+ + +
+
20 / Closing Slide
+
Thank You & CTA
+
Atmospheric closing slide with contact details and next steps
+
+
+
🚀
+

Thank You

+
The future of work isn't about replacing humans — it's about giving every person an incredible AI teammate. Let's build it together.
+
+
📧 hello@aico.ai
+
🌐 aico.ai
+
🐦 @aico_ai
+
+
+
+
+ + +
+
21 / Big Stat Number
+
Hero Metric
+
Single dramatic number with context — ideal for impact statements
+
+
+
+
Global AI Coworker Impact
+
4.2M
+
hours saved per day
+
Across 12,000+ companies worldwide, AI coworkers are giving teams back the equivalent of 525,000 full workdays — every single day.
+
+
+
+
+ + +
+
22 / Stacked Bar Chart
+
Segmented Horizontal Bars
+
Dark indigo theme with color-coded segments showing composition
+
+
+

AI Task Distribution by Department

+
Breakdown of AI coworker usage across task categories
+
+
Research
+
Drafting
+
Automation
+
Analysis
+
+
+
+
Sales
+
+
+
+
+
+
+
+
+
Marketing
+
+
+
+
+
+
+
+
+
Engineering
+
+
+
+
+
+
+
+
+
Finance
+
+
+
+
+
+
+
+
+
HR
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
23 / Horizontal Bar Chart
+
Ranked Horizontal Bars
+
Warm amber theme — great for ranked lists with long labels
+
+
+

Top AI Coworker Use Cases

+
Ranked by weekly active usage across 5,000+ teams
+
+
+
Meeting summaries
+
92%
+
+
+
Email drafting
+
84%
+
+
+
Code review
+
76%
+
+
+
Data analysis
+
71%
+
+
+
Research synthesis
+
65%
+
+
+
Report generation
+
58%
+
+
+
+
+
+ + +
+
24 / Data Table
+
Styled Data Table
+
Clean white table with colored header and status badges
+
+
+

AI Coworker Platform Comparison

+
Feature and performance benchmarks across leading platforms
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlatformResponse TimeMemoryIntegrationsStatus
AiCo Pro0.8s avgPersistent140+Leader
WorkBot AI1.2s avgSession only85+Growing
TeamMind1.5s avg7-day window60+Growing
AssistIQ2.1s avgSession only35+Emerging
CoPilotX0.9s avg30-day window110+Leader
+
+
+
+ + +
+
25 / Combo Chart
+
Bar + Line Overlay
+
Dark theme SVG with bars for volume and line for growth rate
+
+
+

AI Coworker Revenue & Growth

+
Quarterly revenue ($M) with year-over-year growth rate
+
+
Revenue ($M)
+
YoY Growth %
+
+ + + + + + + + + + + + + + + + $12M + $19M + $31M + $48M + $72M + $105M + + + + + + + + + + 58% + 63% + 68% + 55% + 50% + 46% + + Q1 '24 + Q2 '24 + Q3 '24 + Q4 '24 + Q1 '25 + Q2 '25 + +
+
+
+ + +
+
26 / Pyramid Diagram
+
Strategy Hierarchy
+
Magenta gradient with tiered pyramid showing priorities
+
+
+
+

AI Coworker Maturity Model

+
Organizations progress through five levels of AI integration, each building on the last.
+
+
+
+
Autonomy
+
Self-directed workflows
+
+
+
Proactive Insights
+
AI surfaces opportunities
+
+
+
Contextual Assistance
+
Persistent memory + deep integrations
+
+
+
Task Automation
+
Repetitive work handled by AI
+
+
+
Basic Chat
+
Simple Q&A and information retrieval
+
+
+
+
+
+ + +
+
27 / Cycle Diagram
+
Flywheel / Feedback Loop
+
Light green with circular node arrangement and center label
+
+
+

The AI Coworker Flywheel

+
+ +
+
📥
+

Ingest

+

Connects to emails, docs, meetings, and tools

+
+ +
+
🧠
+

Learn

+

Maps patterns, preferences, and relationships

+
+ +
+
⚡
+

Act

+

Automates tasks and generates deliverables

+
+ +
+
📈
+

Improve

+

Feedback refines accuracy and relevance

+
+ +
↘
+
↗
+
↖
+
↙
+ +
+
🔄
+
Compounding
Intelligence
+
+
+
+
+
+ + +
+
28 / Venn Diagram
+
Overlapping Concepts
+
Dark slate with three translucent overlapping circles
+
+
+
+

The AI Coworker Sweet Spot

+
The most impactful AI coworkers sit at the intersection of three capabilities — understanding context, taking action, and learning continuously.
+
+
+
+ Context
Awareness +
+
+ Autonomous
Action +
+
+ Continuous
Learning +
+
+
⭐ AI
Coworker
+
+
+
+
+
+ + +
+
29 / 2×2 Matrix
+
Strategic Quadrant
+
Light layout with four color-coded quadrants and axis labels
+
+
+

AI Coworker Task Prioritization Matrix

+
+
+

🚀 Automate Now

+

High frequency, low complexity tasks like scheduling, data entry, meeting notes, and status updates.

+
+
+

🤝 Augment & Assist

+

High frequency, high complexity tasks like code review, research synthesis, and report drafting.

+
+
+

📋 Batch & Template

+

Low frequency, low complexity tasks like onboarding docs, expense reports, and form filling.

+
+
+

🧠 Strategic Co-Pilot

+

Low frequency, high complexity tasks like strategy planning, crisis response, and deal negotiation.

+
+
+
+ ← Low complexity + High complexity → +
+
+
+
+ + +
+
30 / Image Gallery
+
2×2 Visual Grid
+
Dark zinc with gradient-captioned cards — uses CSS backgrounds instead of images
+
+
+

AI Coworkers in Action

+
+
+
💬
+
+

Intelligent Chat

+

Context-aware conversations with persistent memory

+
+
+
+
📊
+
+

Auto-Generated Reports

+

Data pulled and visualized in seconds

+
+
+
+
🔗
+
+

Seamless Integrations

+

140+ tools connected out of the box

+
+
+
+
🛡️
+
+

Enterprise Security

+

SOC 2 compliant with full audit trails

+
+
+
+
+
+
+ + +
+
31 / Numbered List
+
Ordered Steps
+
Ocean teal with numbered cards — simpler than full process flow
+
+
+
+

5 Rules for AI Coworker Success

+
The principles that separate teams who thrive with AI from those who struggle.
+
+
+
+
01
+
+

Start with High-Volume Tasks

+

Deploy AI where repetition is highest — email, scheduling, summaries.

+
+
+
+
02
+
+

Give Context Generously

+

The more your AI knows about your work, the better it performs.

+
+
+
+
03
+
+

Trust But Verify

+

Review AI outputs initially, then gradually increase autonomy.

+
+
+
+
04
+
+

Build Feedback Loops

+

Correct mistakes — each correction makes the AI permanently smarter.

+
+
+
+
05
+
+

Expand Gradually

+

Once one workflow succeeds, replicate the pattern across the team.

+
+
+
+
+
+
+ + +
+
32 / Pros & Cons
+
Advantages vs. Considerations
+
Light purple with check/warning icons — honest framing of tradeoffs
+
+
+

AI Coworkers: Benefits & Considerations

+
+
+
✓ Advantages
+
    +
  • Instant access to organizational knowledge
    • +
  • 24/7 availability across time zones
    • +
  • Consistent quality on repetitive tasks
    • +
  • Scales without proportional cost increase
    • +
  • Learns and improves over time
    • +
+
+
+
⚠ Considerations
+
    +
  • Requires initial setup and training period
    • +
  • Data privacy policies must be established
    • +
  • Change management for team adoption
    • +
  • Best for structured, repeatable workflows
    • +
  • Human oversight still needed for critical decisions
    • +
+
+
+
+
+
+ + +
+
33 / Feature Matrix
+
Checkmark Comparison Table
+
Dark theme with features × tiers showing capability coverage
+
+
+

Feature Availability by Plan

+
What's included at each tier of AI coworker deployment
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureStarterTeamEnterprise
Chat-based assistant✓✓✓
Persistent memory—✓✓
Knowledge graph—✓✓
Multi-agent orchestration——✓
Custom model training——✓
SSO & compliance——✓
API access—✓✓
+
+
+
+ + +
+
34 / Agenda
+
Table of Contents
+
Clean white with serif title and numbered agenda items
+
+
+
+
Presentation Outline
+

Today's Agenda

+
+
+
+
01
+
+

The Rise of AI Coworkers

+

Market landscape and driving forces

+
+
+
+
02
+
+

Core Capabilities

+

What makes an AI coworker different from a chatbot

+
+
+
+
03
+
+

Impact & Metrics

+

Real-world results from early adopters

+
+
+
+
04
+
+

Implementation Roadmap

+

How to get started in 90 days

+
+
+
+
05
+
+

Q&A and Next Steps

+

Open discussion and action items

+
+
+
+
+
+
+ + +
+
35 / Full-Bleed Cinematic
+
Atmospheric Background Slide
+
Immersive dark slide with grid texture, orbs, and bottom-aligned content
+
+
+
+
+
+
+
+
+
A New Era Begins
+

Every Knowledge Worker Deserves an AI Teammate

+

We're building toward a world where AI handles the busywork and humans do what they do best — think creatively, build relationships, and make decisions that matter.

+
+
+
+
+ + + -const browser = await chromium.launch(); -const page = await browser.newPage(); -await page.goto('file://' + htmlPath, { waitUntil: 'networkidle' }); -await page.pdf({ - path: '~/Desktop/presentation.pdf', - width: '1280px', - height: '720px', - printBackground: true, -}); -await browser.close(); -~~~ `; export default skill; \ No newline at end of file