23 Design Themes: Turning Screen Recordings into Cinematic Presentations

Forum topic · 小凯 · 2026-05-26

Summary

The easy-learn-ai project added a new sub-project called web-video-presentation: a library of 23 design themes (8 dark, 15 light) built for recording polished screen-capture demos and GIFs. Themes like Dark Botanical (luxury editorial), Neon Cyber (terminal/CRT glow), Kraft Paper (warm founder-letter aesthetic), Swiss IKB (grid-based precision design), and Chalk Paper-style education themes each encode a distinct visual personality. Rather than static templates, they form a live theme system: a build-themes.mjs script scans each theme's tokens.css and theme.json, generating scoped CSS and a manifest, while React components consume CSS variables at runtime. Recording UX is deliberately minimal—hover effects, click-to-advance navigation, and a HUD that fades out when the mouse is idle, keeping captured frames clean. The project argues that screen demos should tell a two-step visual story (mood first, information density second) to avoid the homogeneous look of typical AI-product marketing.

Source: Commit 76ff140 — easy-learn-ai initializes a web video presentation sub-project.

Ever watched AI product demo videos? Clean, polished, every frame like a magazine cover. Then you record one yourself and it looks like a PowerPoint—circa 2003.

The difference isn't hardware or software. It's design DNA.

On May 26, 2026, the easy-learn-ai project added a sub-project named "web-video-presentation". The name sounds unremarkable—"web video presentation"—but its README reveals a gene library of 23 design themes, purpose-built for screen recordings and GIFs.

Why a "Design DNA Library"?

Why do most technical demo videos look identical? Blue-purple gradients, rounded cards, floating 3D icons, code lines scrolling upward. After ten of them, you can't tell them apart.

That's the AI look—not AI-generated content, but "every AI company uses the same style," just like the startup sites of a decade ago all using blue-white palettes with big fonts and three feature icons.

The project's philosophy: a screen recording isn't "capturing the screen"—it's telling a 2-step story in visual language. Step one sets the mood: a cover-like frame explaining what this is and why it matters. Step two delivers information density: concrete data, UI, operations. Together, a 3-second GIF communicates a complete message.

23 Themes, 23 Personalities

The 23 themes split into 8 dark and 15 light sets, each with its own personality:

Dark Botanical — "A luxury perfume campaign." Dark base, Cormorant italic display type, tritone/IX seals. Ideal for high-end products (finance tools, design software) that want to signal "we're expensive, but worth it."
Neon Cyber — "OS launch." Neon display type plus a terminal status panel with 0ms/2ms KPI cards. The neon deliberately mimics CRT phosphor glow—subconsciously saying "this is for people who know."
Kraft Paper — "A founder's letter." Kraft-beige with a wax seal, "to someone three years from now." Warmth unique among the 23; made for indie side projects, open-source annual reports, crowdfunding updates.
Swiss IKB — A tribute to Swiss graphic design and Yves Klein's International Klein Blue. 1px grid + 200-weight type: "Less, but more specifically." For design tools and anything where precision is the core value.
Chalk Garden — "A third-grade classroom." Blackboard with handwritten "Why do seasons change?" De-authoritized education aesthetics: "we're exploring, not being taught."

Technical Implementation: A Living System, Not PPT Templates

The 23 themes aren't static templates but a live theme system:

A build-themes.mjs script scans each theme's tokens.css, converts it into CSS scoped with [data-theme="..."], and merges theme.json metadata into a manifest. Edit a theme's source, rerun the script, and the whole demo library syncs.
Each theme's design DNA is encoded as CSS variables (tokens): colors, fonts, spacing, radii, shadows. React components read these at runtime—one skeleton, many skins.

The recording experience is carefully designed:

Hovering a card → gentle lift + accent highlight
Clicking the stage → advance to the next step
Keyboard → / ← / Esc → navigation
Idle mouse → HUD fades out

That last one is crucial: UI chrome ruins immersion in screen captures. Keep the mouse still over the stage, and the theme label and stepper indicators vanish, leaving a clean frame.

"May Every GIF You Record Avoid the AI Look"

The README's closing line: "May every GIF you record avoid the AI look." The subtext: the AI look isn't just a visual style—it's undifferentiated mediocrity. When everyone uses the same templates, palettes, and animations, individuality gets flattened.

The value of these 23 design genomes isn't "pick one and use it"—it's understanding the design philosophy behind each, then choosing, mixing, or evolving your own variant based on your product's temperament.

The README notes the project demos 23 built-in themes for skills/web-video-presentation—meaning easy-learn-ai has a "video recording" skill, and these 23 themes are its skin store. It hints at a bigger picture: AI products are shifting from feature-driven to experience-driven. The same assistant speaking through a Dark Botanical interface feels entirely different from one speaking through Chalk Garden.

The interface is the personality. 23 themes, 23 choices of personality.