Slidev

Slidev Presentation Generator

You generate complete Slidev presentation projects from slide outlines. Every generation produces a polished, distinctive presentation ready to run.

References

Before generating, internalize these references:

• references/slidev-syntax.md — Slidev markdown syntax
• references/slidev-layouts.md — Layout selection guide
• references/slidev-animations.md — Animations & transitions
• references/preset-format.md — Preset file specification
• references/layout-css-patterns.md — CRITICAL: Battle-tested CSS patterns for each layout type (alignment, backgrounds, overlays)
• references/design-principles.md — CRITICAL: Gamma-level design quality principles (visual rhythm, layout diversity, typography drama, icon system, card variation, decorative layer, visual arc, data viz, mockups, SVG diagrams, spacing, accent hierarchy). Apply in ALL modes: generation, editing, presets, Visual QA.
• references/scoring-subroutine.md — Slide scoring (1-10 on 9 axes), used by --polish, --learn, --compare
• references/content-review-subroutine.md — Content quality checks (3-second test, narrative flow, redundancy, CTA clarity, hierarchy)
• references/polish-procedure.md — --polish=N iterative improvement cycle
• references/ab-testing.md — A/B variant generation for weak slides (used by --polish)
• references/design-memory.md — Design pattern memory (read/write protocol)
• references/compare-procedure.md — --compare side-by-side scoring
• references/notes-procedure.md — --notes speaker notes generation
• references/responsive-check.md — --responsive aspect ratio check

Input Parsing

Parse the user's input to determine the subcommand or mode:

Subcommands (handle before anything else)

--help: Display usage help and stop. Show:

Slidev Presentation Generator

Usage:
  /slidev                      Generate with unique design
  /slidev --preset                Generate with preset style
  /slidev style:                  Generate with custom style
  /slidev --theme                 Generate with specific theme
  /slidev --polish=N [dir]                       Iterative quality improvement (N cycles)
  /slidev --edit [dir]                  Edit existing presentation
  /slidev --picture [auto|paths...] [dir]        Add images to slides
  /slidev --compare                  Compare two presentations
  /slidev --notes [dir]                          Generate speaker notes
  /slidev --responsive [dir]                     Check 4:3 rendering
  /slidev --export  [dir]                Export (html|pdf|png2pdf|pngs|png_N)
  /slidev --dev [dir]                            Launch dev server
  /slidev --create-preset                  Create a new preset
  /slidev --learn=N                              Self-improving loop (N cycles)
  /slidev --learn=N --preset             Preset learning (create + refine with visual critic)
  /slidev --deep_learn=N                       Preset deep learning (auto-refine N cycles)
  /slidev --deep_learn=N --preset        Deep learn a specific preset
  /slidev --add_archetype [name]              Add a new composition archetype
  /slidev --stitch=design              Stitch придумывает стиль → наш pipeline генерирует
  /slidev --stitch=full               Stitch генерирует ВСЮ презу → адаптируем в Slidev
  /slidev --stitch=improve                Stitch делает variants каждого слайда готовой презы
  /slidev --stitch=design --learn=N            Learn с Stitch-стилями
  /slidev --stitch=learn=N              Learn from Stitch as design teacher (N cycles)
  /slidev --figma=                         Create preset from Figma template
  /slidev --figma= --learn=N               Figma learning (create preset + refine with Figma reference)
  /slidev --figma= --deep_learn=N           Same as --figma --learn (both trigger FDL)
  /slidev --figma=                Create preset from Figma + generate presentation
  /slidev --no-preset                 Generate without auto-preset (Unique mode)
  /slidev --help                                 Show this help

--create-preset : Interactive preset creation wizard.

1. Extract preset name from arguments. If missing, ask for one (kebab-case).
2. Ask 8 questions ONE AT A TIME, waiting for each answer:

• Mood: "What mood? (professional, playful, dramatic, calm, futuristic, elegant, bold)"
• Color scheme: "Light or dark? (dark, light, deep navy, warm cream...)"
• Accent color: "Accent color? (#ff6b35, electric blue, warm coral...)"
• Typography: "Font personality? (geometric & modern, rounded & friendly, sharp & technical, humanist & classic, condensed & bold)"
• Density: "Content density? (minimal with whitespace, balanced, information-dense)"
• Textures: "Background textures? (subtle noise, gradient mesh, geometric patterns, clean flat, frosted glass)"
• Slide types: "Какие типы слайдов чаще всего будут? (метрики/числа, таймлайны, команда, портфолио, сравнения, данные...)"
• Transitions: "Slide transitions? (fade, slide-left, none...)"
• Save location: "Save preset globally or locally? (global: ~/.claude/slidev-presets/, local: ./.slidev-presets/ in current project)"

1. Synthesize answers into concrete design params using /frontend-design principles (distinctive Google Fonts — never Inter/Roboto/Arial/generic choices, cohesive palette with dominant+accent hierarchy, atmospheric backgrounds, CSS). The CSS block MUST include layout-specific styles per references/preset-format.md — explicit text-align: center on h1, p, div for all centered layouts (cover, section, fact, end, statement, center), plus background image overlay support for cover/section. See references/layout-css-patterns.md for the required patterns.

Based on the "Slide types" answer, generate the archetypes section with preferred/avoid lists and the shapes section with appropriate defaults. For example, if the user said "метрики и команда", set preferred: [stat-hero, profile-grid, bento-grid] and icon_container: circle. After determining the accent color, check it against the AI color blacklist (hue 240-290 at saturation >50%). If the accent falls in this range, regenerate with a different hue. Common safe alternatives: teal (#0D9488), amber (#D97706), emerald (#059669), rose (#E11D48).

1. Based on save location answer:

• Global: Create ~/.claude/slidev-presets/ if needed, write .preset.md there
• Local: Create .slidev-presets/ in the current working directory if needed, write .preset.md there

Write per references/preset-format.md. 4b. Generate theme directory: Based on the preset's CSS block and font/color choices, generate a -theme/ directory alongside the preset file with:

• package.json (Slidev theme metadata with font defaults — use Slidev's native fonts.serif key for body font slot even though value is sans-serif)
• styles/index.css (CSS variables, base layout, shape vocabulary from preset CSS block)
• styles/layouts.css (layout-specific text alignment, background overlay support)
• layouts/none.vue, layouts/default.vue (passthrough: ``)
• layouts/cover.vue (bg-accent background), layouts/section.vue (bg-alt), layouts/end.vue (bg-accent)

1. Generate demo presentation using assets/demo-outline.md with that preset, output to demo-/.
2. Visual QA — Run the Visual QA Loop for demo-/.
3. Print summary: preset path (noting global vs local), demo path, Visual QA results, how to preview, how to use.

--add_archetype [name]: Add a new composition archetype to the library.

1. If name not provided — ask "Как назвать архетип? (kebab-case)"
2. Ask: "Для какого типа контента этот архетип? Опишите ситуацию, когда существующие архетипы не подходят."
3. Based on the answer, determine:

• How many archetypes are actually needed (may be 1, may be 2-3 for different aspects)
• Density level for each (low / medium / medium-high / high)
• Group classification (hero / grid / split / timeline / table / cta)
• Which content types it serves
• Which shape elements it uses (circles, pills, hexagons, etc.)

1. Generate HTML skeleton following the format in references/composition-archetypes.md (using {{SLOT}} markers, layout: none, max 3 div nesting levels, inline styles)
2. Append the archetype record(s) to references/composition-archetypes.md — both the archetype definition AND its content-type association in the mapping table at the top
3. Generate a test slide using the new archetype with sample content and export as PNG for visual verification
4. Report: archetype name(s), density, content types served, and the test slide PNG path

Stop here — do not proceed to generation.

--stitch= : Use Google Stitch AI as a design partner. Three modes:

/slidev --stitch=design     Stitch придумывает визуальный стиль → мы делаем презу
/slidev --stitch=full       Stitch генерирует ВСЮ презу → мы адаптируем в Slidev
/slidev --stitch=improve        Stitch делает variants каждого слайда готовой презы

Can be combined with --learn=N: /slidev --stitch=design --learn=7

CRITICAL: Always use modelId: "GEMINI_3_1_PRO" for all Stitch calls — самая умная модель.

Stitch Mode: design

Stitch придумывает визуальный стиль (мы НЕ задаём ему цвета/шрифты — он сам). Мы получаем от него стиль и конвертируем в пресет.

ST-D1: Parse outline — Прочитать outline. Сформировать описание презентации на английском: тема, аудитория, настроение, количество слайдов.

ST-D2: Создать 3 проекта с разными промптами — Каждый проект получает ОДИНАКОВЫЙ контент но РАЗНЫЙ промпт для стиля. Мы НЕ задаём шрифты, цвета, roundness — Stitch решает сам.

Для каждого из 3 стилей:

1. create_project({ title: "slidev-style--" }) → получить projectId

2. generate_screen({
     projectId: "",
     prompt: "",
     deviceType: "DESKTOP",
     modelId: "GEMINI_3_1_PRO"
   })
   → Блокирующий вызов (1-5 мин). Возвращает { screenId, html, screenshotUrl }.
   HTML готов — шаг 3 не нужен.

Промпты для 3 стилей (отличаются ТОЛЬКО стилевым направлением):

• Style 1: "Design a complete presentation as a single-page website. Each slide is a `` tag, 16:9 aspect ratio. Topic: [topic]. [slide count] slides. Content per slide: [brief per-slide content]. Style direction: clean, professional, trustworthy. Choose your own color palette, fonts, and layout — make it look like a premium human-designed presentation, NOT AI-generated."
• Style 2: "Design a complete presentation as a single-page website. Each slide is a `` tag, 16:9 aspect ratio. Topic: [topic]. [slide count] slides. Content per slide: [brief per-slide content]. Style direction: bold, energetic, modern. Choose your own color palette, fonts, and layout — make it look like a premium human-designed presentation, NOT AI-generated."
• Style 3: "Design a complete presentation as a single-page website. Each slide is a `` tag, 16:9 aspect ratio. Topic: [topic]. [slide count] slides. Content per slide: [brief per-slide content]. Style direction: elegant, editorial, refined. Choose your own color palette, fonts, and layout — make it look like a premium human-designed presentation, NOT AI-generated."

ВАЖНО: В промпте указываем ВЕСЬ контент всех слайдов (кратко). Stitch генерирует ЦЕЛЫЙ "сайт" — все слайды в одном экране. Каждый слайд в ``.

ST-D3: Получить и проанализировать 3 HTML — Для каждого стиля:

1. get_screen → получить HTML
2. Извлечь из HTML (Stitch сам выбрал — мы только читаем):

• Цветовая палитра (background, text, accent, surface)
• Шрифты (headline, body)
• Border-radius
• Декоративные паттерны (градиенты, тени, формы)
• Структура layout'ов

ST-D4: Агент выбирает лучший стиль — Оценка по:

• 50-point AI Detection Rubric (docs/research/ai-presentation-detection-guide-ru.md)
• Контрастность и читаемость
• Запоминаемость дизайна
• Соответствие теме и аудитории

Записать выбор и причины в stitch-style-selection.md.

ST-D5: Конвертировать в пресет — Из победившего HTML извлечь стиль → записать .slidev-presets/stitch-.preset.md:

• Шрифты из HTML → fonts.sans, fonts.body (serif check: если Stitch выбрал serif → заменить ближайшим sans-serif)
• Цвета из HTML → --color-accent, --bg-base, --bg-alt, --bg-accent и производные
• Roundness из HTML → card_radius, icon_container
• Декоративные приёмы → описание в aesthetic section пресета

ST-D6: Стандартный pipeline — PDL (3 цикла) → генерация презентации. Если --learn=N → learning loop.

ST-D7: Cleanup — Удалить 3 Stitch-проекта (временные).

Stitch Mode: full

Stitch генерирует всю презентацию целиком как HTML-сайт. Мы извлекаем стиль И контент, адаптируем в Slidev.

ST-F1: Parse outline — Так же как ST-D1.

ST-F2: Создать 3 проекта, каждый = полная презентация — Промпт содержит ВСЕ слайды с контентом:

generate_screen({
  projectId: "",
  prompt: "Design a complete presentation as a single-page website where each slide
    is a  tag with width:100% and aspect-ratio:16/9.

    CONTENT:
    Slide 1 (Cover): [title, subtitle]
    Slide 2 (Problem): [heading, 3 pain points]
    Slide 3 (Solution): [heading, key features]
    ...
    Slide N (CTA): [call to action, contacts]

    Style direction: [clean professional / bold energetic / elegant editorial].
    Design a COMPLETE, polished presentation. Each section should have distinct
    layout (not all identical). Use real visual hierarchy — hero numbers large,
    body text readable, decorative accents varied. Make it NOT look AI-generated.",
  deviceType: "DESKTOP",
  modelId: "GEMINI_3_1_PRO"
})

ST-F3: Получить HTML — get_screen для каждого стиля.

ST-F4: Агент выбирает лучший — Так же как ST-D4.

ST-F5: Парсинг HTML → Slidev — Из победившего HTML:

1. Разделить по `` тегам → получить HTML каждого слайда
2. Извлечь общий стиль → создать styles/index.css + пресет
3. FONT SIZE RECALCULATION — Stitch генерирует для веб-viewport (~1440px), а Slidev рендерит на 960x540. Все font-size из Stitch HTML нужно пересчитать:

• Stitch px → Slidev rem: разделить на 16, затем проверить против FONT SIZE FLOOR
• ПОСЛЕ пересчёта — применить FONT SIZE FLOOR из Step 5:
• Body text: если /slides.md и styles/index.css`. Извлечь общий стиль (палитра, шрифты, формы).

ST-I2: Создать Stitch-проект с дизайн-системой презентации:

create_project({ title: "slidev-improve-" })

create_design_system({
  projectId: "",
  designSystem: {
    displayName: "Current presentation style",
    theme: {
      colorMode: "",
      headlineFont: "",
      bodyFont: "",
      roundness: "",
      customColor: ""
    }
  }
})

ST-I3: Для каждого слайда с оценкой ", prompt: "Presentation slide: [slide content]. Style must match the design system. 16:9.", deviceType: "DESKTOP", modelId: "GEMINI31_PRO" }) ```

1. Запросить 3 варианта:

`` generate_variants({ projectId: "", selectedScreenIds: [""], prompt: "Generate alternative layouts for this presentation slide. Keep content and color scheme, vary the layout structure and visual hierarchy.", variantOptions: { variantCount: 3, creativeRange: "EXPLORE", aspects: ["LAYOUT"] } }) ``

1. Применить дизайн-систему ко всем вариантам:

`` apply_design_system({ projectId, selectedScreenInstances, assetId }) ``

1. Получить HTML всех вариантов → выбрать лучший layout
2. Адаптировать layout-идею (grid-структуру, позиционирование) обратно в наш Slidev-слайд

ST-I4: Собрать улучшенный slides.md — Заменить слабые слайды на улучшенные варианты. Запустить QA.

ST-I5: Cleanup.

Stitch MCP Server — кастомный stitch-slidev MCP-сервер на базе @google/stitch-sdk. Все вызовы блокирующие (await) — никакого поллинга.

| Тул | Описание | |-----|----------| | `create_projec

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: kama34
• Source: kama34/kama-skills
• License: MIT

Install and usage instructions live in the source repository linked above.