OKEight — 快捷回复悬浮 Panel
接手一个已上线的产品，六周内把设计系统、品牌、首页、导航和核心面板全部重做，并亲手合进主干。
About the project
OKEight 是一个“快捷回复”客户端：双击热键，在任意输入框上方弹出草稿面板，翻牌、上屏、用自然语言“调一下”改写并记住你的偏好。它起初是一位工程师的 side project；随着功能越做越多、种子用户越聚越多，产品长到了需要有人为体验负责的时候——我在这个节点加入，成为它唯一的设计师。约束都是真的：服务不能停，已有用户的操作习惯不能动，而视觉语言还停留在毛玻璃时代，装不下不断长出的新功能。
我是这个产品唯一的设计师，也是六周里视觉侧代码的主要提交者。工作方式与 Clico 同一条链路：Claude Design 定稿 → Claude Code 还原 → 真机验收 → 合进主干；六周里 11 个 PR、一万两千多行新增代码进入生产，其中相当一部分由我自己合并。
What we did
先立法，再动手。接手第一周不画界面，先把设计系统写成法：三条铁律、五层影值、token 纪律。之后六周所有产出都从这套法里长出来。
毛玻璃，还是黏土。上线版是流行的毛玻璃；我论证了十种风格路线后放弃跟风，选了能贯穿到组件层的 Soft Clay：哑光黏土底 + 一点高能量荧光绿。
热梗，还是 MBTI 直译。十六型人格宇宙没有照搬 MBTI 的学术叫法，用中美职场热梗重写命名。传播物要先让人会心一笑，再谈类型学。
接手：前后六周的两个样子
接手一个已上线的产品，最难的不是重做，而是决定什么不能动。
2026 年 7 月中，我加入 OKEight（一个由工程师开启、已经上线的产品），接过它的设计侧。已有用户的操作习惯不能动：双击唤起、翻牌、上屏，这些肌肉记忆是产品的资产。必须动的是视觉语言：毛玻璃面板在新功能不断长出来之后，已经没有延展空间：层级挤在一起，品牌无处安放。六周后，打开同一个客户端，首页已经换上了哑光黏土的新语言，底下是一整套设计系统。
左：接手时的首页。右：六周后的首页。中间隔着一套设计系统。
先立法：论证出 Soft Clay × Volt
风格不是选出来的，是论证出来的：十天里我把十种风格路线推演到组件层，才定下 Soft Clay × Volt，然后把它写成法。
接手前一周我就开始做功课：拿真实客户端截图，让 AI 分别按三个开源设计系统出方案，再自定一版对照。
接手第二天，我把“”完整落到界面上试穿；同一周又做了一块十种风格的策略板，逐一判断哪些只能活在海报里、哪些能贯穿到组件层，结论只剩三条路。
二十四小时后我转向其中之一：Soft Clay × Volt，哑光黏土底，全局只留一点高能量荧光绿。然后立法：三条铁律、五层厚粘土影值、图标独占 SF Symbols、CSS 与 SwiftUI 的换算表，从 v1.1 写到 v1.3。这套系统后来养活了两个产品——Clico 的设计系统正是用同一套方法论做的第二次实例。
规范长什么样：每条规则一张卡，写到能逐条自检。
这套系统共 24 张规范卡、18 个组件、五页 ui kit；Clico 的设计系统是同一方法论的第二次实例，见 Clico 案例。
Panel 三次换皮，最后做成能切九款皮肤的实验台
核心组件我交付的不是一张定稿，而是一个能切九款皮肤的实验台。决策在真实界面上做，不在评审会的投影里做。
悬浮 Panel 是这个产品的脸。第一段：从毛玻璃出发做了三个方向（品牌双边缘、高程玻璃、黏土乐器），选定 Clay Instrument；
第二段：在它下面继续拆 Footer 子方案，“纸底座”版本上线；
第三段：上线之后我又开了一轮不设限探索，不参考既有规范，从材质和打光重新出发，收敛出九款皮肤。这一轮只花了不到一天。九款不是九张图，而是一个可切换的 Design Lab：同一块面板，颗粒、磨砂、撞色、荧光四个方向当场对比。
你可以在下方这块面板里亲手切换看看。
这不是截图，是当时做决策用的那个工具：切一切壁纸试试。
Reply16：把回复风格做成一套人格宇宙
一套完整的品牌机制：四条二元轴 → 十六种回复人格 → 十六个黏土角色 → 分享卡与中英海报。类型学与全部文案是我写的，形象渲染由 AI 按我的规格批量生成。
OKEight 不做吉祥物，做类型学。工程师定义了四条二元轴——结构、力度、表情、密度； 我在这个骨架的基础上结合中英双市场不同的文化语境中时下热梗， 把 MECE 出来的共 16 型人格用易传播的热梗语气包装一下， 归入四个色系家族；每一型配一张“工牌”式中文标题、一句 LinkedIn 风格的英文 badge、三条特征。命名不用 MBTI 的学术直译，结合中美职场热梗重写。
人偶头身比、整体气质、 3D 拟物粘土质感...我定义了这些视觉语言，并用 AI 批量跑出 16 款造型设计的效果图。海报排版规则迭代到 v3.1，细到“三条特征优先单行、靠自动缩字号不靠折行”。最后长成一套会传播的机制：测完型，分享卡替你说“经检测，已确认为——XXXX（线上沟通语气的人格类型）”。
十六型的骨架：四条轴，每条都是一道二选一。
四条二元轴，十六种回复人格。点一张卡，翻过来看看。
同一张脸的十六个角色：类型学落到形象上。
测完型，分享卡替你开口：“经检测，已确认为——”。命名结合中美职场热梗。
首页与导航：审过别人，也被审过，最后全部合进主干
这六周里我既当过审计者，也当过被审计者：审别人时给出十二条分级修法，被审时逐条回应、据理部分否决，最后以真机 demo 验收通过收尾。
审别人：用产品、UI、交互三个视角，给同事快速搭出的首页落了十二条分级问题与修法。
被审：导航与信息架构，来自领导的体验审计。我逐条回应：能修的修，依据不足的明确否决、给出理由，最后用真机 demo 验收通过。
首页、导航和全部审计修复，一并合进主干。