frontend-slides

Files (12)

• origin.json · .clawhub/
• README.md
• REVIEW.md
• SKILL.md
• STYLE_PRESETS.md
• _meta.json
• animation-patterns.md · reference/
• edit-button-implementation.md · reference/
• html-architecture.md · reference/
• image-processing.py · reference/
• ppt-extract.py · reference/
• viewport-and-base.css · reference/

SKILL.md (first lines)

# 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]` 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

### 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/10` to simulate hover state, third card uses `border-cyan-400` to 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:**
```css
/* 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:**
```css
/* 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:**
```css
/* Voice Wave */

From ViewWay/hermes-by-everythings, MIT.

More from ViewWay/hermes-by-everythings