Skip to main content Inicio Creadores crazywoola dify-x new-slide-deck
new-slide-deck Create a new reveal.js slide deck for dify-x and register it on the index pages. Use when asked to add a new presentation, create a new deck, or add slides for a new customer/event.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/crazywoola/dify-x --skill new-slide-deckEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name new-slide-deck description Create a new reveal.js slide deck for dify-x and register it on the index pages. Use when asked to add a new presentation, create a new deck, or add slides for a new customer/event.
New Slide Deck
Creates a new reveal.js presentation in /Users/minibanana/Program/dify-x/ and wires it into the navigation index.
Step 1 — Gather info
Ask (or infer from context) before writing any files:
Field Example DECK_DIRacme (lowercase, kebab-case)PILL_LABELDify × AcmeTHEMEnordic · milvus · popart (see §Themes) ZH title + one-line description for index.html card EN title + one-line description for index_en.html card Slide content outline titles, bullets, speaker notes per slide
Step 2 — Choose a theme
Theme A · Nordic (default) — agent-systems / hongkong-oss / pupu
Clean, grid-based, Dify Blue on white. Best for technical deep-dives.
CSS : reference ../agent-systems/styles.cssReveal version : 4.5.0Fonts : Inter + Noto Sans SC + JetBrains Mono (Google Fonts)Icons : RemixIcon remixicon@3.5.0Extra : Tailwind CDN for utility classes<html lang>zh-CN / enDefault bg : data-background-color="#fafafa" (light) or "#0033ff" (brand)Cover layout : .slide-hero with .author-block (name / role / email)
Theme B · Milvus — milvus
Three switchable sub-themes (Swiss / Atelier / Ukiyo) via keyboard 1/2/3.
CSS : styles/dify-theme.css + styles/base.css + styles/theme-swiss.css (default)Reveal version : 5Fonts : Söhne (fallback: Inter) + Noto Sans SCwidth × height1920 × 1080Classes available : .grid-2, .callout, .pill, .scribble, .emph, mark, .hl, .centered, section.card, section.accentSub-themes :
theme-swiss.css — minimal, white bg, subtle blue diffusiontheme-atelier.css — richer gradient, warmer, expressivetheme-ukiyo.css — washi paper texture, indigo brush underline on h2
Theme C · Pop Art — aispeech
Bold, comic-strip aesthetics. Best for high-energy keynote-style talks.
CSS : ../aispeech/styles/nordic.css + ../aispeech/styles/popart.cssReveal version : 4.5.0Palette : --pop-yellow #FFE900, --pop-red #FF3333, --pop-cyan #00FFFF, --pop-blue #3366FFHard shadows : 8px 8px 0 #000 — zero border-radiusIcons : Font Awesome @6.5.2
Step 3 — Create the deck files
Nordic HTML skeleton
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reset.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css" id ="theme" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/github.css" >
<link href ="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel ="stylesheet" >
<link
Milvus HTML skeleton (with theme switcher)
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css" id ="reveal-theme" >
<link rel ="stylesheet" href ="../milvus/styles/dify-theme.css" >
<link rel ="stylesheet" href ="../milvus/styles/base.css" >
<link rel ="stylesheet" id ="theme-variant" href ="../milvus/styles/theme-swiss.css" >
</head >
Pop Art HTML skeleton
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reset.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css" id ="theme" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" >
<link
Mirror the same structure for index_en.html with lang="en" and English content.
Step 4 — Common slide patterns
Two-column grid (Nordic / Milvus)
<section >
<h2 > Section Title</h2 >
<div class ="grid-2" style ="margin-top:1.5rem;" >
<div class ="callout" > <strong > Left point</strong > <br > Detail text here.</div >
<div class ="callout" > <strong > Right point</strong > <br > Detail text here.</div >
</div >
</section >
Pill + numbered list (Nordic)
<section data-background-color ="#fafafa" >
<div class ="slide-label" >
<span class ="pill" > Section Name</span >
</div >
<h2 class ="slide-title" > Slide Title</h2 >
<div class ="step-list" >
<div class ="step-item" > <span class ="step-num" > 01</span > <div class ="step-content" > <strong > Point</strong > <p > Description</p > </div > </div >
<div class ="step-item" > <span class ="step-num" > 02</span > <div Dark brand slide (Nordic)
<section data-background-color ="#0033ff" >
<div class ="slide-hero text-center" >
<h2 style ="color:#fff;font-size:2.2rem;" > Key Message</h2 >
<p style ="color:rgba(255,255,255,0.85);" > Supporting detail</p >
</div >
</section >
Closing slide (Milvus style)
<section >
<div class ="centered" >
<img src ="../assets/logo.svg" class ="logo-large" alt ="Dify" >
<h2 > {ZH_CLOSING_HEADLINE}</h2 >
<p class ="meta" > banana@dify.ai</p >
</div >
</section >
Vertical stack (nested sections)
<section >
<section > </section >
<section > </section >
<section > </section >
</section >
Step 5 — Register on index pages
Append inside <div class="deck-grid"> in both /Users/minibanana/Program/dify-x/index.html and index_en.html:
<a class ="card" href ="{DECK_DIR}/index.html" >
<div class ="pill-wrapper" > <span class ="pill" > {PILL_LABEL}</span > </div >
<h3 > {ZH_TITLE}</h3 >
<p > {ZH_DESCRIPTION}</p >
<div class ="card-footer" > Start Presentation<svg width ="16" height ="16" viewBox ="0 0 24 24" fill ="none" stroke ="currentColor" stroke-width ="2" stroke-linecap ="round" stroke-linejoin ="round" > <line x1 ="5" y1 ="12" x2 ="19" y2 ="12" > </line > <polyline Use {DECK_DIR}/index_en.html + EN text for index_en.html.
Step 6 — Verify
New directory and both HTML files exist.
Both index pages contain the new card.
Remind user to open the deck in a browser to check rendering.
Shared asset reference
Path Contents assets/logo.svgDify logo (used in all decks) agent-systems/styles.cssFull Nordic design system (1300+ lines, vars + components) milvus/styles/dify-theme.cssMilvus brand token overrides milvus/styles/base.cssMilvus base typography + layout utilities milvus/styles/theme-swiss.cssSub-theme: Swiss minimal milvus/styles/theme-atelier.cssSub-theme: Atelier gradient milvus/styles/theme-ukiyo.cssSub-theme: Ukiyo washi aispeech/styles/nordic.cssPop Art base reset aispeech/styles/popart.cssPop Art component styles
All CSS files are referenced via relative ../ paths from the deck directory — no copying needed.
rel
"preconnect"
href
"https://fonts.googleapis.com"
<link rel ="preconnect" href ="https://fonts.gstatic.com" crossorigin >
<link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono&display=swap" rel ="stylesheet" >
<script src ="https://cdn.tailwindcss.com" >
</script >
<link rel ="stylesheet" href ="../agent-systems/styles.css" >
</head >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="nordic-logo" >
<img src ="../assets/logo.svg" alt ="Dify" class ="nordic-logo-img" >
<span class ="nordic-logo-text" >
</span >
</div >
<div class ="reveal" >
<div class ="slides" >
<section data-background-color ="#fafafa" >
<div class ="slide-hero text-center" style ="max-width:860px;" >
<h1 style ="font-size:2.8rem;line-height:1.1;" >
</h1 >
<p class ="slide-subtitle" style ="margin:1.2rem auto 0;max-width:560px;" >
</p >
<div style ="width:48px;height:3px;background:var(--dify-blue);border-radius:2px;margin:2rem 0 1.5rem;" >
</div >
<div class ="author-block" style ="align-items:center;margin-top:0;" >
<div class ="author-name" >
</div >
<div class ="author-meta" >
</div >
<div class ="author-email" >
</div >
</div >
</div >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
transition : 'fade' ,
backgroundTransition : 'fade' ,
plugins : [RevealNotes , RevealHighlight ],
});
</script >
</body >
</html >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="brand" >
<img src ="../assets/logo.svg" alt ="Dify" >
</div >
<div id ="bg-shapes" >
<div class ="shape s1" style ="width:900px;height:700px;top:-10%;left:-8%;" >
</div >
<div class ="shape s2" style ="width:700px;height:600px;top:5%;right:-6%;" >
</div >
<div class ="shape s3" style ="width:600px;height:500px;bottom:-12%;left:30%;" >
</div >
</div >
<div class ="reveal" >
<div class ="slides" >
<section >
<h1 class ="title-big" >
</h1 >
<p class ="subtitle" >
</p >
<p class ="meta" >
</p >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
width : 1920 ,
height : 1080 ,
margin : 0.04 ,
controls : true ,
progress : true ,
slideNumber : 'c/t' ,
transition : 'fade' ,
plugins : [RevealNotes ],
});
const themeLink = document .getElementById ('theme-variant' );
const indicator = document .createElement ('div' );
indicator.style .cssText = 'position:fixed;right:20px;top:20px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:14px/1.2 system-ui;z-index:999;opacity:0;transition:opacity .2s;' ;
document .body .appendChild (indicator);
const showIndicator = (t ) => { indicator.textContent = t; indicator.style .opacity ='1' ; clearTimeout (showIndicator._t ); showIndicator._t =setTimeout (()=> indicator.style .opacity ='0' ,1200 ); };
const setTheme = (n ) => { themeLink.href =`../milvus/styles/${n} .css` ; showIndicator ('Theme: ' +n.replace ('theme-' ,'' )); };
window .addEventListener ('keydown' , (e ) => {
if (e.key ==='1' ) setTheme ('theme-swiss' );
if (e.key ==='2' ) setTheme ('theme-atelier' );
if (e.key ==='3' ) setTheme ('theme-ukiyo' );
});
</script >
</body >
</html >
rel
"preconnect"
href
"https://fonts.googleapis.com"
<link rel ="preconnect" href ="https://fonts.gstatic.com" crossorigin >
<link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@500;700&display=swap" rel ="stylesheet" >
<script src ="https://cdn.tailwindcss.com" >
</script >
<link rel ="stylesheet" href ="../aispeech/styles/nordic.css" >
<link rel ="stylesheet" href ="../aispeech/styles/popart.css" >
</head >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="reveal" >
<div class ="slides" >
<section data-background-color ="#FFE900" >
<div style ="border:3px solid #000;padding:48px;box-shadow:12px 12px 0 #000;max-width:900px;" >
<div style ="font-size:1rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;" >
</div >
<h1 style ="font-size:3.2rem;font-weight:900;line-height:1.05;color:#000;" >
</h1 >
<p style ="font-size:1.3rem;margin-top:24px;color:#000;" >
</p >
<div style ="margin-top:32px;font-size:0.9rem;font-weight:700;" >
</div >
</div >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
transition : 'none' ,
backgroundTransition : 'none' ,
plugins : [RevealNotes , RevealHighlight ],
});
</script >
</body >
</html >
class
"step-content"
<strong >
</strong >
<p >
</p >
</div >
</div >
</div >
</section >
points
"12 5 19 12 12 19"
</polyline >
</svg >
</div >
</a >
