dvcrn Frontend Slides Skill
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.
Reference files: When generating CSS, image processing, PPT extraction, HTML structure, edit button, or animation code, read the corresponding file under reference/ (and STYLE_PRESETS.md for presets and CSS Gotchas) so output is correct and complete.
🧠 Core Design Philosophy
1. Visual Style & Material
Principle: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.
| Style Position | Use Cases | Core Characteristics |
|---|---|---|
| Future & Depth | Frontier exploration, tech product launches | Frosted glass + dark mode, halos and transparency for layering |
| Efficiency & Speed | Professional tools, data dashboards | Clean flat style + Bento UI, clear boundaries, modular |
| Trust & Professional | Finance, formal presentations, enterprise solutions | Swiss minimalism, generous whitespace, relies on typography and strict grids |
| Care & Resonance | Humanities, lifestyle, brand stories | Low-saturation natural colors + extreme rounding, ultra-soft diffuse shadows |
| Immersion & Expression | Entertainment, narrative, creative showcases | Skeuomorphic materials + high-contrast emotional colors, breaks conventional grids |
Style Selection Rules:
- Solution deck / presales proposal → Trust & Professional (Swiss Modern) or Efficiency & Speed (Bento UI)
- Product launch / tech showcase → Future & Depth (Dark Botanical / Electric Studio)
- Brand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial)
- Creative proposal / marketing campaign → Immersion & Expression (Neon Cyber / Creative Voltage)
2. Spatial & Typography Organization
- Density Hierarchy: Density is inversely proportional to importance. Core focus areas need low density / large margins. Data lists need high density / small margins.
- Typography System:
- Prefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans)
- Establish significant weight and size contrast between headings and body
- Body line-height:
leading-[1.5]orleading-[1.6]for visual breathability
- Font Size Constraints:
- Minimum readable size:
12px(annotations only) - Standard body:
14px/16px - Headings use
clamp()for responsive scaling
- Minimum readable size:
3. Affordance & Resilience
Although the output is static HTML, when handling multiple similar components (lists, navigation, card groups), you must hardcode and render different interaction states within the same container to exhaustively show the component's full lifecycle.
- ⚠️ Warning: Do not rely solely on Tailwind's
hover:pseudo-class for interactions. You must directly change the base class of specific items to make states simultaneously visible in static screenshots! - Example: In a card group, first card uses default state, second card uses
bg-white/10to simulate hover state, third card usesborder-cyan-400to simulate selected state
4. System Integrity Constraints
All design decisions must map to the following limited variable set (no odd numbers, decimals, or random values allowed):
| System | Constraints |
|---|---|
| Color System | Primary color defines brand; complementary color for strong guidance; analogous colors for soft guidance. No arbitrary colors |
| Spatial Spacing (8-Point Grid) | Spacing and padding limited to: 8 / 12 / 16 / 20 / 24 / 32 / 40 (strictly apply to gap and padding) |
| Corner Radius | Choose based on style, default starts at rounded-[12px]. Care style can use rounded-[24px] or rounded-full |
| Size Minimums | Minimum click hotspot 44px; minimum readable size 12px; standard body 14px/16px |
| Shadow Control | Must use diffuse lighting like shadow-[0_10px_30px_rgba(0,0,0,0.08)], no harsh shadows |
5. 🌀 Emerging Design Trends 2026
Integrate the following four trends organically into presentation design. Select 1-2 dominant trends based on content theme.
Trend 1: Ghostly Agency
Core: Agentic UX — The interface acts like a translucent butler, preparing everything before the user asks
| Design Strategy | Implementation | Use Cases |
|---|---|---|
| Predictive Presence | Progressive content reveal (.reveal animations trigger in stages) |
AI products, automation services, intelligent assistants |
| Invisible Butler | Translucent elements + subtle floating animations (opacity: 0.6~0.8, animation: float 3s ease-in-out) |
Backend systems, data dashboards, settings interfaces |
| Intent Visualization | Use halos/particles to suggest "thinking" (box-shadow pulse animations) |
AI-generated content, smart recommendations |
CSS Prompt Examples:
/* Ghostly Float */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }
/* Predictive Halo */
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); } 50% { box-shadow: 0 0 40px rgba(0,212,255,0.6); } }
.agentic-hint { animation: pulse-glow 2s ease-in-out infinite; }
趋势二：粗砺真实 (The Grain of Truth)
核心：Imperfect & Organic — 反秩序审美，有瑕疵的真实感
| 设计策略 | 实现方式 | 适用场景 |
|---|---|---|
| 数字褶皱 | SVG 噪点纹理叠加 (background-image: url("data:image/svg+xml,...") 含 <feTurbulence>) |
创意品牌、独立工作室、手作品牌 |
| 有机排版 | 轻微旋转 (transform: rotate(-1deg~2deg)), 非严格对齐 |
艺术展览、音乐活动、个人作品集 |
| 触觉质感 | 颗粒感背景 + 不规则边框 (border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%) |
生活方式、食品、时尚 |
CSS Prompt Examples:
/* Grain Texture Background */
.grain-overlay { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); }
/* Organic Shape */
.organic-shape { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: rotate(-1.5deg); }
Trend 3: Liminal Multimodality
Core: Multimodal Seamlessness — Experience flows between voice, gesture, eye tracking, and touch
| Design Strategy | Implementation | Use Cases |
|---|---|---|
| Sensory Flow | Wave animations suggest voice interaction (animation: wave 1.5s ease-in-out) |
Voice assistants, podcasts, audio products |
| Spatial Hints | 3D perspective + parallax scroll hints (perspective: 1000px; transform: translateZ()) |
AR/VR, spatial computing, metaverse |
| Multimodal Icons | Visual elements of sound waves, gesture outlines, eye tracking paths | Cross-device experiences, seamless collaboration tools |
CSS Prompt Examples:
/* Voice Wave */
@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 24px; } }
.voice-wave span { display: inline-block; width: 4px; background: #00d4ff; animation: wave 1s ease-in-out infinite; }
.voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; }
/* Spatial Perspective */
.liminal-space { perspective: 1000px; transform-style: preserve-3d; }
.depth-layer { transform: translateZ(50px); }
Trend 4: Emotional Sovereignty
Core: Hyper-Personalized Ethical — Design for "resonance" rather than "retention"
| Design Strategy | Implementation | Use Cases |
|---|---|---|
| Transparent Explanation | "Why this recommendation" tooltip (data-explanation shows on hover) |
Healthcare, education, finance, AI recommendations |
| User Confirmation | Clear "Accept/Reject" options, not default checkboxes | Privacy settings, data collection, personalization options |
| Personalized Visuals | Dynamic color adjustment based on content theme (--user-theme CSS variables) |
Personal dashboards, learning platforms, health apps |
CSS Prompt Examples:
/* Explanatory Hint */
.explainable-ui { position: relative; }
.explainable-ui::after {
content: attr(data-explanation);
position: absolute; bottom: 100%; left: 0;
background: rgba(0,0,0,0.9); color: #fff;
padding: 8px 12px; border-radius: 8px;
font-size: 12px; max-width: 280px;
opacity: 0; transform: translateY(8px); transition: all 0.2s;
}
.explainable-ui:hover::after { opacity: 1; transform: translateY(0); }
/* Personalized Theme Variables */
:root { --user-primary: #00d4ff; --user-secondary: #7b2fff; --user-accent: #00ffa3; }
.personalized-card { border-left: 4px solid var(--user-primary); }
Trend Application Decision Tree
User Need → Select Dominant Trends
AI / Automation Products → Ghostly Agency + Emotional Sovereignty
Creative / Art Content → Grain of Truth + Immersion & Expression
Tech / Frontier Launches → Ghostly Agency + Liminal Multimodality
Humanities / Lifestyle → Grain of Truth + Care & Resonance
Enterprise / Professional → Emotional Sovereignty + Trust & Professional
⚠️ Notes:
- Apply maximum 2 trends per presentation to avoid visual chaos
- Trends serve content — never use trends for trends' sake
- Explain trend options to users during Style Discovery phase
CRITICAL: Viewport Fitting Requirements
Mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.
The Golden Rule
- Each slide = exactly one viewport height (
100vh/100dvh). - Content overflows? → Split into multiple slides or reduce content. Never scroll within a slide.
Content Density Limits (per slide)
| Slide Type | Maximum Content |
|---|---|
| Title slide | 1 heading + 1 subtitle + optional tagline |
| Content slide | 1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs |
| Feature grid | 1 heading + 6 cards max (2×3 or 3×2) |
| Code slide | 1 heading + 8–10 lines of code |
| Quote slide | 1 quote (max 3 lines) + attribution |
| Image slide | 1 heading + 1 image (max 60vh height) |
Required base CSS: Include the full mandatory base styles in every presentation. Copy from reference/viewport-and-base.css (or inline equivalent). It covers: html/body lock, .slide = 100vh/100dvh + overflow hidden, .slide-content, :root clamp() variables, cards/lists/grids/images, responsive breakpoints (700px, 600px, 500px height; 600px width), and reduced-motion.
Overflow Prevention Checklist
Before generating: (1) Every .slide has height: 100vh; height: 100dvh; overflow: hidden; (2) All font sizes and spacing use clamp() or viewport units (3) Content containers have max-height (4) Images max-height: min(50vh, 400px) or similar (5) Grids use auto-fit + minmax() (6) Breakpoints for heights 700/600/500 (7) No fixed pixel heights on content (8) Per-slide content within density limits.
When Content Doesn't Fit
DO: Split into multiple slides; reduce bullets (max 5–6); shorten text; smaller code snippets; "continued" slide; when adding images, move image to new slide or reduce other content first. DON'T: Shrink fonts below readable; remove padding; allow scrolling; cram.
Testing Viewport Fit
Recommend testing at: Desktop 1920×1080, 1440×900, 1280×720; Tablet 1024×768, 768×1024; Mobile 375×667, 414×896; Landscape 667×375, 896×414.
Phase 0: Detect Mode
- Mode A — New Presentation: User wants slides from scratch → Phase 1 (Content Discovery).
- Mode B — PPT Conversion: User has .ppt/.pptx → Phase 4 (PPT Extraction).
- Mode C — Existing HTML Enhancement: Read file, enhance; always maintain viewport fitting.
Mode C: Modification Rules
Before adding content: check current slide against density limits. Images: max min(50vh, 400px); if slide already full → split into two slides (e.g. new slide for image). Text: max 4–6 bullets or 2 paragraphs per slide; if over → split or continuation slide. After any change: verify .slide has overflow: hidden, new elements use clamp(), new images have viewport max-height, density respected. If modifications cause overflow → automatically split and tell user. Test at 1280×720, 768×1024, 375×667.
Solution PPT (解决方案 PPT) — 售前/销售专用
When purpose is solution deck / 解决方案汇报 / 售前方案 / 投标演示, use this default outline (10–20 slides): (1) Title (2) Agenda (3) Background & objectives (4) Pain points & challenges (5) Solution overview (6–8) Capabilities / product value (9) Case study (10) Implementation / roadmap (11) Next steps & contact. Adjust as needed; respect content density. Style: Prefer Swiss Modern, Electric Studio, Dark Botanical, Notebook Tabs. Avoid highly playful styles unless asked.
Phase 1: Content Discovery (New Presentations)
If AskUserQuestion is available: Collect in one form. If not (e.g. Cursor): Ask the same questions in conversation, in order, and record answers before Phase 2.
Step 1.1: Context + Images (single form or sequence)
Ask these five in one form (AskUserQuestion) or in sequence:
- Purpose: What is this presentation for? — Solution deck (解决方案 PPT) | Pitch deck | Teaching/Tutorial | Conference talk | Internal presentation
- Length: Approximately how many slides? — Short (5–10) | Medium (10–20) | Long (20+)
- Content: Do you have content ready or need help? — I have all content ready | I have rough notes | I have topic only
- Images: No images | ./assets | Other (let user type/paste folder path, e.g. ~/Desktop/screenshots)
- Editing: Do you need to edit text in the browser after generation? — Yes (in-browser edit, auto-save, export) | No
Remember the editing choice — it controls whether Phase 3 includes the edit button (see reference/edit-button-implementation.md).
Get the content: If user said "I have all content ready" → ask them to share it (paste text, bullet points, or path to file). If "I have rough notes" or "I have topic only" → help structure an outline, then ask for or draft the slide-by-slide content. You need concrete titles and body content before Phase 2.
Step 1.2: Image Evaluation (if user provided images)
If "No images" → skip image pipeline; use text + CSS visuals. If folder provided: (1) List image files (2) Read/view each (3) Mark USABLE / NOT USABLE with reason; note content signal, shape, dominant colors (4) Propose slide outline with image assignments (5) Confirm outline via AskUserQuestion or conversation: "Looks good" | "Adjust images" | "Adjust outline". Co-design: usable images shape the outline from the start. Logo in previews: if USABLE logo exists, embed (e.g. base64) in the 3 style previews so user sees their brand in each style.
Phase 2: Style Discovery
Option A — Guided: Ask mood (Impressed/Confident | Excited/Energized | Calm/Focused | Inspired/Moved; multiSelect up to 2). Create directory .claude-design/slide-previews/ if needed. Generate 3 style previews there (style-a.html, style-b.html, style-c.html): single title slide each, self-contained, ~50–100 lines. Pick 3 presets by mood (e.g. Impressed → Bold Signal, Electric Studio, Dark Botanical). Never use: purple gradients on white, Inter/Roboto, standard blue, predictable hero. Use: distinctive fonts (Clash Display, Satoshi, Cormorant Garamond, DM Sans), cohesive colors, atmospheric backgrounds, signature animation. Present previews; user picks Style A/B/C or "Mix elements". Option B — Direct: Ask "Which preset?" and show the preset list (below or from STYLE_PRESETS.md). User picks by name → skip to Phase 3.
Presets (see STYLE_PRESETS.md for full list): Bold Signal | Electric Studio | Creative Voltage | Dark Botanical | Notebook Tabs | Pastel Geometry | Split Pastel | Vintage Editorial | Neon Cyber | Terminal Green | Swiss Modern | Paper & Ink. Mood → preset mapping: Impressed/Confident → Bold Signal, Electric Studio, Dark Botanical; Excited/Energized → Creative Voltage, Neon Cyber, Split Pastel; Calm/Focused → Notebook Tabs, Paper & Ink, Swiss Modern; Inspired/Moved → Dark Botanical, Vintage Editorial, Pastel Geometry.
Phase 3: Generate Presentation
Use content from Phase 1 and style from Phase 2. If no images, generate text-only with CSS visuals. If images: Image pipeline — process before HTML. Operations: See reference/image-processing.py for crop_circle, resize_max, add_padding. Dependency: pip install Pillow. Never repeat same image (except logo on title+closing); add CSS framing (border/glow) when image clashes with style. Save processed images to a new filename (e.g. logo_round.png, screenshot_processed.png); never overwrite originals. Reference in HTML with relative paths (e.g. assets/logo_round.png). Image CSS: .slide-image max-height min(50vh, 400px); .screenshot border+shadow; .logo max-height min(30vh, 200px). Adapt border/shadow to style accent. Placement: title = logo centered; feature = screenshot one side, text other; full-bleed or inline as needed.
File structure: Single: presentation.html + assets/. Multiple: [name].html + [name]-assets/.
HTML architecture: Follow reference/html-architecture.md. Include mandatory viewport base CSS, theme variables (clamp() for all typography/spacing), .slide + .slide-content, responsive breakpoints, .reveal + .visible for animations.
Required JS: Implement SlidePresentation: keyboard (arrows, space), touch/swipe, mouse wheel; progress bar and navigation dots (click dot to jump to slide); Intersection Observer to add .visible when a slide enters the viewport so .reveal animations run. Optional: cursor trail, particles, parallax, tilt, inline editing. Edit button (only if user opted Yes): See reference/edit-button-implementation.md. Use JS hover with delay (no CSS ~ sibling); hotzone + E key + click to toggle.
Code quality: Clear section comments; semantic HTML; keyboard nav; ARIA where needed; reduced motion. CSS negation: Use calc(-1 * clamp(...)), never -clamp(). See STYLE_PRESETS.md "CSS Gotchas". Viewport: always respect density and overflow rules above.
Phase 4: PPT Conversion
- Extract: Run the logic from reference/ppt-extract.py:
extract_pptx(user_pptx_path, output_dir). Dependency:pip install python-pptx. Use an output_dir (e.g. current directory or a new folder) so images are saved tooutput_dir/assets/and the future HTML can useassets/as sibling. Returns slides_data (per slide: title, content[], images[], notes). - Confirm: Present extracted slide list to user; ask to proceed to style selection.
- Style: Phase 2 (Style Discovery) with extracted content in mind.
- Generate: Build the HTML presentation in the same output_dir used in step 1 so that
assets/is next to the .html file. Convert to chosen style; preserve text, images (reference from assets/), slide order, speaker notes (as HTML comments or separate file).
Phase 5: Delivery
- Delete
.claude-design/slide-previews/if present. - Open presentation in browser (e.g.
open [filename].html). - Summary: file, style, slide count; navigation (arrows, space, scroll, dots); customization (:root, fonts, .reveal). If inline editing: hover top-left or E to edit; Ctrl+S or "Save file".
Style Reference: Effect → Feeling
- Dramatic/Cinematic: Slow fades, scale transitions, dark + spotlight, parallax, full-bleed.
- Techy/Futuristic: Neon glow, particles, grid, monospace accents, cyan/magenta palette.
- Playful/Friendly: Bouncy easing, rounded, pastel/bright, floating animations.
- Professional/Corporate: Subtle fast animations (200–300ms), clean sans, navy/slate, minimal decor.
- Calm/Minimal: Slow subtle motion, whitespace, muted palette, serif, content-focused.
- Editorial: Strong type hierarchy, pull quotes, image-text interplay, serif headline + sans body.
Animation patterns (entrance, backgrounds, interactive): See reference/animation-patterns.md.
Troubleshooting
- Fonts not loading: Check Fontshare/Google URL; font names in CSS.
- Animations not triggering: Intersection Observer; .visible class.
- Scroll snap: scroll-snap-type on html; scroll-snap-align on each .slide.
- Mobile: Disable heavy effects at 768px; test touch; reduce particles.
- Performance: Use will-change sparingly; prefer transform/opacity; throttle scroll/mousemove.
Example Flows
New presentation: User wants pitch/solution deck → ask purpose, length, content, images, editing → (if images) evaluate, outline, confirm → ask vibe → 3 previews → user picks style → (if images) run Pillow ops → generate HTML → open in browser.
PPT conversion: User has .pptx → extract with ppt-extract.py → confirm content → style selection → generate HTML with assets.