Oil® — 欧呦：把『产品、作品、个人』织成一张网的个人品牌站

本报告是「设计灵感收藏夹」系列第 1 期。站点：https://www.oiloil.org/#products

一句话定位

Oil®（欧呦）是 AI 产品经理 林志煌（Oil） 的个人品牌站：用一屏屏”作品 Demo”代替”简历文字”，把 产品作品 → AI 工具矩阵 → 博客文章 → 咨询服务 → 个人经历 串成一条完整的叙事线。它不只是在展示”我是谁”，而是在展示”我能做出什么”。

结构与信息架构

整站是典型的单页滚动叙事，顶部 Tab 控制内容面板切换：

区块	内容	设计意图
Hero	Oil® makes things. + 个人身份标签 + 一个会”转头的狗”动画	三秒建立记忆点，用趣味动画传递”会做东西的人”
产品	Wolfcha（AI 狼人杀）、Text-Well（AI 写作工具）、Vibe Hub、Selector、NotchNotes	每个产品一张卡片 + 一句话痛点描述 + CTA，直接可玩
交互小课堂	悬停反馈 / 弹性动效 / 毛玻璃 三个可交互 Demo	把设计细节变成”可以摸”的展示，而不是干讲
Skills	oil 系列 AI 工具 + 设计与视觉 / 内容与创作 / Agent 协作分类矩阵	按”能做什么”组织，每个 Skill 配使用量数字（社会证明）
文章	近期博客列表（日期 + 标题 + 摘要）	内容资产反哺个人品牌
咨询	咨询 / 社群 / 唠嗑 / 直播分享 / 作品投稿 五类入口	把流量转化为收入与连接
关于	个人简介 + 经历时间线 + 社交链接	补全”人”的维度，建立信任

亮点：顶部 Tab 把”长单页”切成”可切换的工作台”（products / skills / articles / me / consulting），既保留了单页叙事的沉浸感，又避免了超长页面让人迷失。

创意与设计拆解

1. 文案即门面：极简但有态度

• Hero 文案 Oil® makes things. 只有 3 个词，直接亮明”创作者”身份
• 中文标签 欧 呦 是名字”Oil”的谐音梗，亲切、有记忆点
• 每个产品都用一句话痛点场景开场：如 Wolfcha——“你是猎人，别票我""昨晚我救了 2 号”，用真实对局语言瞬间把玩家拉进游戏氛围

2. 动效不只是装饰，而是”产品演示”

站内动效密度高且都有功能，拆开看可以分为三个层次：

① 封面角色的”呼吸感”（CSS 关键帧动画）

• Hero 里的人偶有整套 person-breathe（5.4s 循环的呼吸起伏）、眼睛瞳孔 blink-pupil 与眼皮 blink-lid（5.6s 同步眨眼）、身体 loader-greet（loading 时的轻微摆动）——用动画让”角色”活起来，比静态插画亲切得多
• 封面还叠加了 hero-illo-enter（入场时从下方淡入展开）与背景 float1/float2（两团色块缓慢漂浮），形成”人物+背景”两层景深
• 实现细节：全部用 @keyframes + transform/opacity，零 JS，性能友好；眨眼用 scaleX 压缩实现，成本极低

② 产品 Demo 的”循环小剧场”（错峰关键帧）

• Wolfcha 狼人杀 Demo 里 5 个角色用 WolfchaDemo_speak（12.5s 一轮的”说话/举起”律动）、头顶飘出 shout 气泡（放大淡入→缩小淡出）、背景星星 twinkle 闪烁——每个角色带不同 --d 延迟（0s/2.5s/5s/7.5s/10s），错峰演出，像一场永不停演的戏
• TextWell 写作 Demo 用 stageCycle 让例句一段段循环”打出来又划掉”，tokWiden 让单词逐个展开宽度——把”AI 在写作”的过程可视化
• Selector 选择器 Demo 用 blink 光标闪烁 + chipIn/hoverIn 标签逐个弹入，模拟真实选择交互

③ 滚轮驱动的”叙事节奏”（视差 + 进度）

• 滚轮视差（--roll-y/--roll-angle 的 perspective 3D 变换）与右上角滚动进度条（bar/progress-value）：强化”往下走有惊喜”的阅读动线
• 卡片 hover 的光晕 / spotlight 效果（card-spotlight）与 card-hover-y 上浮：让每个卡片像在”发光”，暗示可点

可借鉴点：给封面角色加”呼吸/眨眼”等微动效（纯 CSS 就能做）；给多个同类元素用错峰延迟编排循环动画，制造”小剧场”效果；用滚动视差 + 进度条控制阅读节奏。

3. “交互小课堂”：把设计经验变成可玩 Demo

这是全站最惊艳的一节，直接把三条设计原理做成对照实验：

Demo	教什么	手法
悬停反馈	按钮 hover 变色 = “我能点”	可响应 vs 不响应两组对照，让用户亲手感受差异
弹性动效	弹窗出现带 overshoot 回弹	可拖轨道、可重播，把 spring 物理拆开看
毛玻璃	backdrop-filter: blur(10px) 导航栏	一键开关对比有/无模糊的观感差异

把”设计方法论”变成”玩具”，用户玩过就懂了——这是教科书级别的寓教于乐。

4. 数字即社会证明

每个 Skill 卡片都带一个使用量数字（如 Oil Cover 160、Draw UI 318、DeepSeek Subagent 253）。不用”很受欢迎”这种形容词，直接用数字建立可信度，同时暗示”这些工具都是真人在用”。

5. 品牌化内容资产

• 封面图统一风格（oil 系列 8 个工具），形成”家族感”视觉识别
• 博客文章都指向 oil-oil.com/articles，把站内内容沉淀为长期流量资产
• 每个工具都能在 GitHub 找到（github.com/oil-oil），Open Source 人设贯穿始终

亮点特色总结

1. 作品即简历：不写”我擅长 AI 产品”，而是直接摆出 5 个能玩的 Demo，说服力远强于任何自我描述
2. 单页 + Tab 的混合结构：兼顾叙事沉浸感与信息可达性
3. 可交互的设计教学：把悬停、弹性、毛玻璃做成对照 Demo，是”讲设计”的最高段位
4. 数字化的社会证明：用使用量数字替代空洞形容词，可信度 +1
5. 品牌一致性：hero 文案、产品命名、封面风格、开源链接高度统一，人设清晰
6. 性能友好的趣味：狗转头动画用图片序列而非重 JS 框架，暗示作者对性能的尊重
7. 微动效塑造”活人设”：呼吸、眨眼、错峰小剧场，全部 CSS 关键帧实现，让品牌有人格温度

可借鉴的设计亮点

• 给产品/工具卡片加”可玩 Demo”：比截图更打动人
• 用对照实验讲设计原理：适合放在 tips 或 insights 栏目
• 数字代替形容词：任何”很多人用/很受欢迎”都可以换成真实数字
• 统一的封面与品牌色：让内容有”家族感”
• 给封面角色加微动效：呼吸、眨眼、点头等纯 CSS 动画就能让首页”活”起来

---

报告由 CodeBuddy 自动采集生成，收录于设计灵感收藏夹。