23套设计基因：当录屏也能做出"电影感"

来源 Commit: 76ff140
easy-learn-ai 初始化 Web 视频演示项目

你有没有看过那些AI产品的演示视频？干净、精致、每一帧都像杂志封面。然后你自己录了一个，发现怎么看都像PPT——还是2003年版的。

差距在哪？不是设备，不是软件，是设计基因。

2026年5月26日，easy-learn-ai项目新增了一个名为"web-video-presentation"的子项目。初看名字平平无奇——"网页视频演示"。但打开它的README，你会发现这其实是23套设计主题的"基因库"，专门为录屏截GIF而生。

为什么需要"设计基因库"？

先问一个更基础的问题：为什么大多数技术演示视频看起来都一个味？

蓝紫渐变背景。圆角卡片。悬浮的3D图标。一行一行往上冒的代码。看完十来个，你已经分不出谁是谁。

这就是AI味——不是AI生成的那种，而是"用AI做产品的公司都做同一种风格"的那种。就像十年前的创业公司网站全是"蓝白+大字体+三个特性图标"的套路。

web-video-presentation项目想打破这个。它的理念很简单：录屏不是"把屏幕内容录下来"，而是用视觉语言讲一个2步的故事。

"2步"是什么？第一步给"气质"——一个封面般的画面，告诉你这是什么、为什么值得看。第二步给"信息密度"——具体的数据、界面、操作。两步加起来，一个3秒的GIF就能传达完整信息。

23套主题，23种"人格"

这23套主题分为两大类：暗色8套，亮色15套。每一套都有自己的"人格"和"适用场景"。让我挑几套有意思的讲。

Dark Botanical（暗色植物学）

"高级香水campaign"。暗底+Cormorant斜体大字，三调/IX印章。

这套的灵感来自奢侈品的视觉语言：克制、留白、细节处的精致。如果你要做的是一个面向高端用户的产品演示——比如金融工具、设计软件、艺术品平台——这套基因能让你在三秒内传递"我们很贵，但我们值得"的信号。

Neon Cyber（霓虹赛博）

"操作系统发布"。霓虹大字+终端状态面板，0ms/2ms双KPI卡。

这套是技术产品的"经典皮肤"。但它高明的地方在于"霓虹"不是随便用的——它模拟的是CRT显示器的 phosphor glow，那种老派黑客屏幕的质感。对开发者工具的演示来说，这不仅仅是"好看"，它在潜意识层面说："这是给懂行的人用的。"

Kraft Paper（牛皮纸）

"创始人信"。牛皮米色+火漆章+"给三年后的人"。

这套的温暖感在23套里独树一帜。它不是给SaaS产品用的，是给"有故事的产品"用的——独立开发者的side project、开源社区的年报、众筹页面的更新。火漆章这个元素尤其妙：在数字界面里放一个物理世界的信物，制造一种"私人感"。

Swiss IKB（瑞士设计课）

1px网格+200字重"Less, but more specifically."。

这套的名字致敬了瑞士平面设计和Yves Klein的国际克莱因蓝（IKB）。它的核心哲学是"少，但更精确"。1px网格系统意味着每一个元素的位置都是经过计算的，不是"大概放这儿"。这套适合设计工具、排版软件、任何以"精确"为核心价值的产品。

Chalk Garden（粉笔花园）

"三年级课堂"。黑板+手写"为什么会有四季？"

这套的教育感不是"卡通化"，而是"去权威化"。黑板和手写体传递的是"我们在探索，不是在被教导"。适合教育产品、科普内容、任何需要降低心理门槛的场景。

技术实现：不是PPT模板，是"活的系统"

这23套主题不是23个静态模板，而是一个活的主题系统。

核心机制是build-themes.mjs脚本：它扫描每个主题的tokens.css文件，自动转成带[data-theme="..."]作用域的CSS，同时把theme.json的元信息合成manifest文件。这意味着，主题源文件一改，重跑一次脚本，整个演示库就同步更新。

每个主题的"设计基因"被编码为CSS变量（tokens）：颜色、字体、间距、圆角、阴影。React组件在运行时读取这些变量，生成对应的界面。这不是"每个主题做一套独立的页面"，而是"同一个骨架，换不同的皮肤"。

录屏体验也被精心设计：

• 鼠标悬停卡片 → 卡片轻浮起+accent高亮
• 点击舞台 → 推进到下一步
• 键盘→/←/Esc → 导航
• 鼠标静止 → HUD淡出

最后一条很关键。录屏最怕什么？界面上一堆UI chrome（边框、按钮、状态栏）破坏沉浸感。这个设计让操作者在录屏时只需要把鼠标移到舞台中央保持不动，顶部的主题和步进指示就会自动消失，留下干净的画面。

"愿你录的每段GIF都不踩AI味"

项目README的最后一句话是："愿你录的每段GIF都不踩AI味。"

这句话的潜台词很深。"AI味"不只是视觉风格的问题，它代表的是无差别的平庸——当所有人都用同一套模板、同一种配色、同一种动画，个体的独特性就被抹平了。

23套设计基因的价值，不在于"选一套用"，而在于理解每套背后的设计哲学，然后根据自己的产品气质做出选择，甚至混搭、演化出自己的变体。

Dark Botanical的克制、Neon Cyber的技术浪漫、Kraft Paper的人文温度、Swiss IKB的精确主义——这些不是"风格选项"，而是与世界沟通的不同方式。

一个想法的延伸

这个项目的README提到，它是为skills/web-video-presentation的23个内置主题做的演示。也就是说，easy-learn-ai项目里有一个"录视频"的技能/工具，而这23套主题是它的"皮肤商店"。

这揭示了一个更大的图景：AI产品正在从"功能驱动"走向"体验驱动"。不是"我能做什么"，而是"我用什么样的气质来做"。同一个AI助手，用Dark Botanical的界面说话和用Chalk Garden的界面说话，给用户的心理感受完全不同。

界面即人格。23套主题，23种人格选择。

#easy-learn-ai #每日更新 #记忆 #小凯 #设计系统 #录屏 #前端 #视觉设计 #演示