Frontend Slides — 前端幻灯片

Frontend Slides 技能

创建 zero-dependency, animation-rich HTML presentations that 运行 entirely in the browser. This 技能 helps non-de签名ers discover their preferred aesthetic through visual exploration ("show, don't tell"), then 生成s production-质量 slide decks.

Reference files: When generating CSS, image processing, PPT 提取ion, HTML structure, edit button, or animation code, read the cor响应ing file under reference/ (and STYLE_PRE设置S.md for pre设置s and CSS Gotchas) so 输出 is correct and complete.

🧠 Core De签名 Philosophy

• Visual Style & Material

Principle: Form follows function. All visual decisions (color, layout, material) must serve the user's mental 模型 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 工具s, data 仪表盘s 清理 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 机器人anical / Electric Studio) Brand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial) Creative proposal / marketing campAIgn → Immersion & Expression (Neon Cyber / Creative Voltage)

• Spatial & Typography Organization

Density Hierarchy: Density is inversely proportional to 导入ance. Core focus areas need low density / large margins. Data 列出s need high density / small margins. Typography 系统: Prefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans) Establish 签名ificant weight and size contrast between headings and body Body line-height: leading-[1.5] or leading-[1.6] for visual breathability Font Size ConstrAInts: Minimum readable size: 12px (annotations only) Standard body: 14px/16px Headings use clamp() for responsive scaling

• Affordance & Resilience

Although the 输出 is static HTML, when handling multiple similar 组件s (列出s, navigation, card groups), you must hardcode and render different interaction 状态s within the same contAIner to exhaustively show the 组件's full lifecycle.

⚠️ 警告: Do not rely solely on TAIlwind's hover: pseudo-class for interactions. You must directly change the base class of specific items to make 状态s simultaneously visible in static screenshots! Example: In a card group, first card uses default 状态, second card uses bg-white/10 to simulate hover 状态, third card uses border-cyan-400 to simulate selected 状态

• 系统 Integrity ConstrAInts

All de签名 decisions must map to the following limited variable 设置 (no odd numbers, decimals, or random values allowed):

系统 ConstrAInts Color 系统 Primary color defines brand; complementary color for strong 图形界面dance; ana记录ous colors for soft 图形界面dance. No arbitrary colors Spatial Spacing (8-Point Grid) Spacing and p添加ing limited to: 8 / 12 / 16 / 20 / 24 / 32 / 40 (strictly 应用ly to gap and p添加ing) Corner Radius Choose based on style, default 启动s at rounded-[12px]. Care style can use rounded-[24px] or rounded-full Size Minimums Minimum 命令行工具ck 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

• 🌀 Emerging De签名 Trends 2026

Integrate the following four trends organically into presentation de签名. Select 1-2 dominant trends based on content theme.

Trend 1: Ghostly Agency

Core: 代理ic UX — The interface acts like a translucent butler, preparing everything before the user asks

De签名 Strategy Implementation Use Cases Predictive Presence 进度ive content reveal (.reveal animations trigger in stages) AI products, 自动化 服务s, intelligent 助手s Invisible Butler Translucent elements + subtle floating animations (opacity: 0.6~0.8, animation: float 3s ease-in-out) Backend 系统s, data 仪表盘s, 设置tings interfaces Intent 可视化 Use halos/particles to suggest "thinking" (box-shadow pulse animations) AI-生成d content, smart recommendations

CSS Prompt Examples:

/ Ghostly Float / @keyframes float { 0%, 100% { 转换: translateY(0); } 50% { 转换: translateY(-8px); } } .ghostly-card { background: rgba(255,255,255,0.06); backdrop-过滤器: 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