Skip to main content Início Criadores 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 para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/crazywoola/dify-x --skill new-slide-deckO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação 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 >
