An AI generated presentation often comes together quickly, but ends up looking like a loose stack of slides: spacing that keeps shifting, colors that do not match, no recurring building blocks. The Slide Deck Framework starts from a different point. From an approved slide structure, a markdown design guideline, and an HTML briefing, the skill first builds a design system in CSS before a single slide exists: colors, typography, spacing, and reusable components such as cards, grids, comparisons, or process diagrams. Only after that are the individual slides built on top of it.
\nThe skill is built for anyone who wants an AI built presentation that reads as a considered deck rather than a pile of separate slides: pitch decks, internal strategy presentations, or client meetings where a print ready PDF is also needed at the end. It is particularly useful when an existing corporate design has to be respected and a generic slide generator works too coarsely for that.
\nThe honest limit: the result is only as good as the design guideline and slide structure you supply. Without a worked out guideline, this framework stays generic too, and where CSS design tokens are missing, the skill has to derive them itself and flags that as an assumption. It also does not replace an actual review in a browser or an actual test print as PDF, both remain a task for a person after handoff.
\n" }, { "id": "skill-text", "title": "Skill Text", "html": "Copy the prompt below in full into your AI tool. As a file: foliengeruest.en.json
\n" } ], "schritte": [ { "nr": 1, "titel": "Provide the design basics", "beschreibung": "A markdown design guideline, a slide structure, and an HTML briefing are provided, with CSS design tokens included if they already exist.", "rolle": "mensch" }, { "nr": 2, "titel": "Build the preflight plan", "beschreibung": "The required slide types and components are determined, every slide is mapped to a slide type, and risks around text volume or PDF export are flagged.", "rolle": "automatisch" }, { "nr": 3, "titel": "Build the design system in CSS", "beschreibung": "Design tokens, the base layout, reusable components, and print rules for the PDF export are set up.", "rolle": "automatisch" }, { "nr": 4, "titel": "Generate the slides", "beschreibung": "Each slide is built according to its slide type, its core message, and the intended visual idea.", "rolle": "automatisch" }, { "nr": 5, "titel": "Receive the HTML presentation", "beschreibung": "The complete HTML file is delivered, together with instructions for opening it, for the PDF export, and a list of points a person should review.", "rolle": "ergebnis" } ], "herausgeber": "Voyage Digital", "version": "2.0", "stand": "2026-07-26", "umsetzung": [ { "titel": "Prepare the design basics", "text": "Having the design guideline and slide structure fully ready before starting keeps the result from turning out generic." }, { "titel": "Choose the right tool", "text": "The skill text is used in an AI tool that can output clean, complete HTML code." }, { "titel": "Review the preflight plan", "text": "Slides with too much text or an unclear visual idea are worth a second look before the build continues." }, { "titel": "Open the HTML in a browser", "text": "The finished deck is opened locally and checked for layout, readability, and consistent components." }, { "titel": "Test the PDF export", "text": "A single test export shows whether content gets cut off or background colors are missing when printed." } ], "zutaten": [ "Design guideline", "Slide structure", "HTML briefing" ], "beispielSzenario": "A team has prepared a design guideline and a structure with twelve slides, and hands both over together with a short HTML briefing. The Slide Deck Framework first builds a preflight plan and finds that two slides carry far too much text. CSS variables, the base layout, and reusable components such as cards and process diagrams are built next. Only then are the individual slides assembled on top of them. At the end, the file can be opened in a browser and exported as a PDF in one pass.", "eingaben": [ { "feld": "Markdown design guideline", "pflicht": true }, { "feld": "Slide structure", "pflicht": true }, { "feld": "HTML briefing", "pflicht": true }, { "feld": "CSS design tokens", "pflicht": false }, { "feld": "Export target", "pflicht": false }, { "feld": "Technical requirements for the output", "pflicht": false } ], "ausgabe": "A preflight plan, a complete HTML file with a design system, reusable components, and print CSS for the PDF export, instructions for opening it locally and for the export, and a list of points that still need to be reviewed.", "prompt": "# DESCRIPTION\nYou build a complete HTML presentation from an approved slide structure, a markdown design guideline, and an HTML briefing. You think through the design system, reusable components, and the PDF export from the very start, not as an afterthought. Address the user in a professional, direct manner throughout.\n\n# INPUT\n- Markdown design guideline (required)\n- Slide structure (required)\n- HTML briefing (required)\n- CSS design tokens, if already available (optional)\n- Export target, for example browser, PDF, or presentation mode (optional)\n- technical requirements for the output (optional)\n\n# OUTPUT\n- preflight plan with slide types, components, and identified risks\n- complete, self contained HTML file\n- instructions for opening it locally in a browser\n- instructions for the PDF export\n- list of points a person should additionally review\n\n# CONTEXT\n- Design system before individual slide, components before one off solutions: an existing component is reused before a new one is invented.\n- Each slide carries exactly one message. If a slide is too full, this is flagged in the preflight plan instead of being silently squeezed in.\n- The PDF export is considered from the start, not patched on afterward.\n- Boundary: stick strictly to the supplied design guideline. Do not invent a new design pattern outside the guideline and no arbitrary colors. Where CSS design tokens or guideline details are missing, derive sensible defaults and mark that explicitly as an assumption instead of guessing.\n\n# WORKING INSTRUCTIONS\n\n## Step 1: Build the preflight plan\nBefore writing any code, put together a list of the required slide types and components, and map every slide to a slide type. Flag slides with too much content and propose a cut or a split.\n\n## Step 2: Translate the design system into CSS\nSet up CSS custom properties for colors, typography, spacing, layout sizes, lines, shadows, and component values. Use existing CSS design tokens from the guideline, derive missing tokens from the guideline yourself, and mark that as an assumption.\n\n## Step 3: Build the base layout\nCreate the deck and slide base structure, reusable layout classes, a footer and slide numbers if needed, and print rules for the PDF export. Aim for a 16:9 area and clean scaling in the browser.\n\n## Step 4: Build the components\nDefine reusable components such as headline, card, label, badge, grid, comparison, process diagram, framework, table, and quote. Use these consistently and do not invent a new component when an existing one is enough.\n\n## Step 5: Generate the slides\nBuild each slide with the matching layout class, make the core message visible through visual hierarchy, implement the visual idea in a structured way, and reduce the amount of text where needed.\n\n## Step 6: Secure the PDF export\nAdd print CSS with a fixed page size, a page break after every slide, and printed background colors, for example:\n\n```css\n@media print {\n @page {\n size: 16:9;\n margin: 0;\n }\n .slide {\n page-break-after: always;\n break-after: page;\n }\n}\n```\n\nCheck that no content gets cut off and that the 16:9 aspect ratio is preserved.\n\n## Step 7: Quality check\nCheck every slide against the Definition of Done before handing over the result. Flag open assumptions and the points a person should still review.\n\n# DEFINITION OF DONE\n[ ] A preflight plan has been created\n[ ] Design tokens have been translated into CSS\n[ ] Reusable components have been built\n[ ] Every slide uses a matching slide type\n[ ] Every slide carries exactly one main message\n[ ] Print CSS for the PDF export is included\n[ ] No slide is obviously overloaded\n[ ] Points for human review are named\n[ ] The HTML file is usable on its own\n[ ] Assumptions are explicitly flagged\n\n# CONVERSATION START\nHello. Send me your markdown design guideline, the slide structure, and the HTML briefing. I will build a complete HTML presentation from them, with a design system, reusable components, and preparation for the PDF export.", "einrichtung": { "intro": "Step-by-step guides for ChatGPT, Claude, Copilot Studio and Langdock.", "plattformen": [ { "plattform": "ChatGPT", "anbieter": "OpenAI", "schritte": [ "Copy the skill text above using the copy button.", "Click your profile picture and select \"Skills\".", "Click \"Create skill\" and paste the copied text as the instruction.", "Adjust inputs, outputs and format where your case requires it.", "Save the skill. It is available in all chats from that point on." ], "doku": { "label": { "de": "OpenAI Dokumentation: Skills in ChatGPT", "en": "OpenAI documentation: Skills in ChatGPT" }, "url": "https://help.openai.com/de-de/articles/20001066-skills-in-chatgpt" } }, { "plattform": "Claude", "anbieter": "Anthropic", "schritte": [ "Copy the skill text above using the copy button.", "Open claude.ai and go to \"Skills\" in your profile.", "Create a new skill and paste the copied text as the instruction.", "The skill works in claude.ai, in Claude Code and through the API.", "Available on the Pro, Max, Team and Enterprise plans." ], "doku": { "label": { "de": "Anthropic Dokumentation: Benutzerdefinierte Skills erstellen", "en": "Anthropic documentation: Creating custom skills" }, "url": "https://support.claude.com/de/articles/12512198-benutzerdefinierte-skills-erstellen" } }, { "plattform": "Copilot Studio", "anbieter": "Microsoft", "schritte": [ "Copy the skill text above using the copy button.", "Open Copilot Studio and create a new agent.", "Paste the copied text as the instruction.", "Connect knowledge sources and tools where needed.", "Publish the agent for yourself or for your organisation." ], "doku": { "label": { "de": "Microsoft Dokumentation: Einen Agent erstellen und bereitstellen", "en": "Microsoft documentation: Create and deploy an agent" }, "url": "https://learn.microsoft.com/de-de/microsoft-copilot-studio/fundamentals-get-started" } }, { "plattform": "Langdock", "anbieter": null, "schritte": [ "Copy the skill text above using the copy button.", "Open the sidebar and click \"Add skill\".", "Paste the copied text directly as the instruction.", "Connect the skill to integrations such as Gmail or Slack where needed.", "Save the skill and release it for yourself or your team." ], "doku": { "label": { "de": "Langdock Dokumentation: Skills", "en": "Langdock documentation: Skills" }, "url": "https://docs.langdock.com/de/product/chat/skills" } } ] }, "itemIcon": "gallery-vertical-end", "recommended": [ { "slug": "canvas-design", "category": "skill", "name": "The Artwork", "teaser": "Develops a standalone design philosophy from a single cue, then turns it into a museum-quality visual piece in PDF or PNG.", "domaene": "Design & Kreativ", "itemIcon": "palette" }, { "slug": "adobe-firefly", "category": "tool", "name": "Adobe Firefly", "teaser": "Adobe's AI platform for image, video, audio and vector generation, built directly into Photoshop, Illustrator, Express and Premiere, trained on licensed content for commercially safe use.", "domaene": "Design & Kreativ", "logoFile": "adobe-firefly.png", "logoEinzug": 0.78 }, { "slug": "canva", "category": "tool", "name": "Canva", "teaser": "Canva is a widely used online design platform that combines templates with the Magic Studio AI suite for social media graphics, presentations and other visual content.", "domaene": "Design & Kreativ", "logoFile": "canva.png", "logoEinzug": 1 }, { "slug": "claude-design", "category": "tool", "name": "Claude Design", "teaser": "An AI-assisted design tool from Anthropic Labs that imports your existing design system and hands finished drafts straight to a coding agent as a ready-to-build bundle.", "domaene": "Design & Kreativ", "logoFile": "claude-design.svg", "logoEinzug": 1 }, { "slug": "comfyui", "category": "tool", "name": "ComfyUI", "teaser": "ComfyUI is a node-based, open-source editor that lets you build image, video, and 3D generation pipelines visually as workflow graphs.", "domaene": "Design & Kreativ", "logoFile": "comfyui.svg", "logoEinzug": 1 }, { "slug": "fireworks-tech-graph", "category": "tool", "name": "fireworks-tech-graph", "teaser": "fireworks-tech-graph is an open-source tool that generates production-ready technical SVG and PNG diagrams from natural-language descriptions, including all UML types and built-in AI architecture patterns.", "domaene": "Design & Kreativ" }, { "slug": "freepik", "category": "tool", "name": "Freepik", "teaser": "An all-in-one platform that bundles AI image, video and audio generation with a large, commercially licensed stock library under a single interface.", "domaene": "Design & Kreativ", "logoFile": "freepik.svg", "logoEinzug": 0.78 }, { "slug": "krea", "category": "tool", "name": "Krea", "teaser": "Web platform and API that bundles more than 40 third-party AI image and video models, including Flux, Veo 3, and Kling, in one interface for generation, editing, upscaling, and LoRA training.", "domaene": "Design & Kreativ", "logoFile": "krea.svg", "logoEinzug": 1 }, { "slug": "liquid-glass-js", "category": "tool", "name": "liquid-glass-js", "teaser": "Open source vanilla JavaScript library for WebGL-based glass effects in the style of Apple's Liquid Glass, delivering genuine multi-layer light refraction instead of CSS blur for buttons and containers.", "domaene": "Design & Kreativ" }, { "slug": "liquid-logo", "category": "tool", "name": "Liquid Logo", "teaser": "Free open source browser tool that turns an uploaded logo into a flowing liquid metal animation via WebGL shaders, exportable as PNG or MP4.", "domaene": "Design & Kreativ" }, { "slug": "magnific", "category": "tool", "name": "Magnific", "teaser": "Node-based creative platform with roughly 30 AI tools for image, video, audio, and 3D, a connected library of more than 250 million licensed assets, and MCP access for AI assistants.", "domaene": "Design & Kreativ", "logoFile": "magnific.svg", "logoEinzug": 0.78 }, { "slug": "midjourney", "category": "tool", "name": "Midjourney", "teaser": "Midjourney is an AI platform for image and video generation valued for its visual quality, best suited as a peripheral tool for moodboards and concept exploration rather than a core building block for SME workflows.", "domaene": "Design & Kreativ", "logoFile": "midjourney.png", "logoEinzug": 0.78 }, { "slug": "napkin-ai", "category": "tool", "name": "Napkin AI", "teaser": "A text-to-diagram tool that turns bullet points or prose into infographics, mind maps, and flowcharts automatically.", "domaene": "Design & Kreativ", "logoFile": "napkin-ai.png", "logoEinzug": 0.78 }, { "slug": "playground-ai", "category": "tool", "name": "Playground AI", "teaser": "Playground AI is an AI image generation and editing platform built around a precise canvas editor for controlled, brand consistent visuals.", "domaene": "Design & Kreativ", "logoFile": "playground-ai.png", "logoEinzug": 1 }, { "slug": "react-three-fiber", "category": "tool", "name": "React Three Fiber", "teaser": "React renderer for Three.js that lets 3D scenes, shader effects, and WebGL content be built as declarative React components, with full, lossless access to the entire Three.js API.", "domaene": "Design & Kreativ", "logoFile": "react-three-fiber.svg", "logoEinzug": 1 }, { "slug": "shadergradient", "category": "tool", "name": "ShaderGradient", "teaser": "React library for animated 3D gradient backgrounds built on WebGL, configurable through typed props or a copyable web URL, with a Figma plugin and Framer component for use outside React.", "domaene": "Design & Kreativ", "logoFile": "shadergradient.png", "logoEinzug": 1 }, { "slug": "stitch", "category": "tool", "name": "Stitch", "teaser": "Stitch is an AI design tool from Google Labs that generates UI wireframes and screen mockups from text descriptions, sketches, or images.", "domaene": "Design & Kreativ", "logoFile": "stitch.png", "logoEinzug": 0.78 }, { "slug": "transitions-dev", "category": "tool", "name": "transitions.dev-Skill", "teaser": "An external repository of ready-to-use, vetted CSS transitions for common UI states, packaged as a skill that AI coding agents can pull directly into a project.", "domaene": "Design & Kreativ" }, { "slug": "email-html-mjml", "category": "skill", "name": "The Email Template", "teaser": "Builds responsive MJML 4.x email templates and compiles them to production-ready HTML, checked against the quirks of Outlook, Gmail, and mobile clients.", "domaene": "Design & Kreativ", "itemIcon": "mails" }, { "slug": "21st-dev", "category": "tool", "name": "21st.dev", "teaser": "Community-run registry of React and Tailwind components in shadcn format, letting builders copy ready-made pieces straight into an existing project via CLI command or AI prompt.", "domaene": "Design & Kreativ", "logoFile": "21st-dev.png", "logoEinzug": 0.78 } ] }