Clico — macOS 桌面 AI Coworker
从一份激进的首页方案出发，为它定义交互语法、设计 IP，再把代码合进主干。
Clico 概念片：脚本、分镜、生成、配音、剪辑，一人完成。除脚本环节外，剩余环节总耗时仅 0.5 个工作日。
About the project
Clico 是一个常驻 macOS 桌面的 AI coworker：一枚会变形的 IP 住在桌面上，Notch 是它的第二个身体，客户端窗口只在需要深度操作时出现。产品在半年里改了三次名（Myco → Invoko → Clico），形态也从“窗口里的助手”长成“桌面上的同事”。约束很实在：这种形态没有先例可抄；团队小，设计和前端由一个人负责；每一个激进的想法都要过“用户能不能接受”这一关。
我是唯一的专职设计师，负责产品架构、交互、品牌与 IP、动效，以及大部分界面的前端实现。工作方式是一条固定链路：在 Claude Design 里探索并定稿 → 交给 Claude Code 做工程还原 → 在自己搭的 Lab 窗口里验收 → 真机确认 → 合进主干。半年里 40+ 个 PR 进了生产，其中 17 个由我自己合并。
What we did
IP 在窗口里，还是在桌面上。第一版把 IP 放在客户端正中，被判定过于激进；我把它搬到了窗口外：客户端保留用户熟悉的侧栏布局，IP 则以悬浮挂件的形式常驻桌面。保守的留在窗口里，激进的放到窗口外。
拟人，还是几何。云朵有眼睛、会表情，但拟人形象的表现力上限低、也容易和别家撞脸；最终选了等高线几何体 Contour，靠形变而不是五官表达状态。
Rive，还是 Lottie。云朵时代用 Rive；换 Contour 时先做了一个 .json 的可行性验证，确认 Lottie 能承载十态与形变后才整体切换。
第一份方案：IP 在 C 位——被否，然后换了落点活下来
三月，我就把 IP 当“同事”而不是“助手图标”来设计。方案没有上线，但想法换了一个落点活了下来。
2026 年 3 月，我给客户端画的第一版首页把 IP 放在窗口正中：一张员工卡写着它的名字、职位和雇主，主导航是窗口底部两枚 Dock 式图标，待办是贴在空白处的便签，便签。界面随 IP 的状态变化：它在整理、在执行、在写代码，你一眼就知道它在干什么。这份方案因为与主流客户端差异太大没有上线，客户端最终采用了常规的侧栏加内页布局——这版常规布局也由我交付。两个月后，这个想法以妥协后的形式落地：窗口回到常规布局，IP 搬到窗口之外，成为常驻桌面的悬浮挂件，并有了 Notch 这个第二身体——激进的部分保住了，只是不再在窗口里。
三月的第一版首页：IP 居中、Dock 式底部导航、便签式模块，界面随 IP 状态变化。
五月：同一个想法的新落点，IP 住在桌面上，任务完成时在窗口旁庆祝。
任务类型按 MECE 分四类（文本生成 / 图像与视频生成 / 完整任务 / 其他），每类对应一个 IP 姿态。
唤起语法：触发 × 载体 × 层级，以及 Notch 与 IP 的互斥
整个产品的交互语法是我定义的：先回答“它什么时候出现、出现在哪、能做什么”，再画任何界面。
在画界面之前，我先定义了 Clico 的“唤起语法”：三种触发（戳一下 IP、双击 ⌥、自动弹出）× 两种载体（桌面 IP、Notch）× 三个层级（完整面板、最大面板、单意图提醒）。在这之上是三层动作系统（常驻、唤起、主动），分别对应“它一直在”、“你叫它”、“它来找你”。Notch 与桌面 IP 是同一套语法的两个载体，同一时刻只有一个在场；IP 可以被收进 Notch，也可以从 Notch 里拉出来。后面所有界面，包括主动式方案的四个章节和 onboarding 的每一版，都是这套语法的变位。
唤起语法映射图：触发方式 × 载体 × 面板层级。
这不是效果图，是当时推方案用的设计 Lab：IP 与 Notch 的唤起语法、不同的主动程度，全部做成了开关。切一切试试。
IP：四代躯体，一份状态契约
章鱼、云朵、几何四条线、Contour——躯体换了四代，状态名一次都没改，所以挂件、Notch 和 onboarding 可以换皮不换逻辑。
IP 是这个产品的脸，也是它的状态指示器。三月是章鱼，五月是有眼睛的云朵（15 个 Rive 状态上线客户端），七月并行推了四条几何路线并决定放弃拟人，八月定稿等高线几何体 Contour，用 Lottie 管线接进生产。中间我还完整论证过一条梗图风格的路线，结论是画风可以学、角色不能碰，商用前要过 IP 法务审查，最后以此为由放弃。四代躯体共用一份状态契约：idle、listening、thinking、outputting、done……名字从未改变，这是换皮不伤逻辑的前提。Contour 的视觉规则被写成一份可逐条自检的“基因清单”，从截面比例到扭转角度都有数。
四代躯体。最终选择 Contour：放弃五官，靠形变表达状态。
被放弃的方向：梗图风格。画风可学、角色有主，商用前需 IP 法务审查。
点一下状态名，这是 Contour 在客户端里真实使用的 Lottie 资源。
十个状态，一份手册：每个状态的形变、节奏与用途。
从范式到像素：交给工程的是数字，不是感觉
我能把审美翻译成参数，也能把 AI 写的代码修到根因。
IP Widget 的交接文档里没有“再大一点”“再柔和一些”这种话。环半径 82 → 132 pt，步角 30° → 22°，情境动作缓存 60 秒，图标一律用 SF Symbols。每一条都能直接写进代码。设计稿和真机 as-built 并排，差异以数值描述。反过来，当 AI 生成的代码不对，我也会追到根因：一次改了源文件效果却没变，最后查出是 Swift 里内嵌了一份副本；一次按钮样式跑偏，查出是它被错误地挂在了一个不属于它的字号 token 上。
左：交接稿上的气泡环。右：真机上的它。差异用数字说。
给自己造验收工具：IP Lab · IP Lottie Lab · Onboarding Lab
我不只交稿。设计在真机上验收，而不是在 Figma 里想象。所以我在客户端里给自己建了三个实验台。
客户端的 Debug 菜单里有三个由我建立的 Lab 窗口。IP Lab 切形象与状态；IP Lottie Lab 播放 Contour 的十个状态循环和九段形变，可切 Light / Dark / 桌面三种背景、拖动尺寸、倒放出场；Onboarding Lab 重放首次启动的引导。这套工具后来长成了产品功能：五月的“切换 IP 形象”只是开发者用的下拉框，八月它变成了设置页里两张会动的预览卡（Contour / Cloud，即选即换、重启保留），再往前挪到 onboarding 的第 0 步——“选一个住在你桌面上的同事”。团队工程师搭建的 Notch Lab 沙盒我也一直在用，四月起在里面调了六轮 Notch 的状态与动作语义。
IP Lottie Lab：十态、两段形变、三种背景、尺寸滑杆、倒放出场。
从开发者开关到用户功能：设置页的形象选择卡，五秒 showcase 循环。
Default Cloud · Ghost · FreeHand Cloud · FreeHand Cube · Glass Cube · MrBean · Contour… 即选即换，无保存按钮，重启保留。
IP Lottie Lab 实录：点一下状态名，Contour 先形变、再进入该状态的自循环。
Onboarding 六轮，和一条用 AI 做出来的动画流水线
新用户首次启动的 onboarding 引导，前后迭代了六轮，全部由我主导，其中三轮的代码也由我提交。一轮留下了完整的 AI 动画工作流，一轮留下了 435 行会尊重“减弱动态效果”的 SwiftUI。
四月还是三支教学视频，五月底改成三步流程、每步配一段 AI 生成的 3D 动画。为此我立了一条从核心叙事拆分镜、到关键帧生视频的四步流水线，此后所有引导动画都由它产出。六月初我写了 Homing Path：一条从 IP 画向 Notch 的发光弧线，教用户“随时把我收进刘海”。起点不写死——IP 被拖到桌面哪里，弧线就从哪里实时算起，贝塞尔控制点随起终点动态生成，任何位置出发都是一条顺滑的弧，多的是“它知道我在哪”的贴身感；系统开启“减弱动态效果”时退化为静态发光路径。之后的“Poke me!”提示、七月的完整可交互原型、八月的第 0 步选角色，都长在同一条路线上：把“教新用户”一步步做成产品能力，终点是打开真实的首页。
六轮 onboarding，全部由我主导；③④⑥ 三轮的代码也由我提交。
05.24 过程版：每一镜一段风格锁定的 prompt，一列候选帧，选一张定稿。
Homing Path 静态设计图。弧线起点跟随 IP 的实时位置动态计算，图示为其中一种位置。
品牌层：设计系统三代、LOGO v9、四支概念片
设计系统跟着代码长；LOGO 从七个 AI 提案到手绘双 C 矢量化；四支概念片沿用同一条动画流水线：脚本、分镜、生成、配音、剪辑全流程一人完成，落成 79 秒成片。刨去脚本环节，剩余执行环节总耗时仅 0.5 个工作日。
设计系统是从代码里长出来的：立新一代视觉时，我不从情绪板开始，而是从客户端真实的主题代码反推出五条视觉基因，再据此立规范。
LOGO 走了四轮：AI 给出七个提案，我组合出三个方向，最后把手绘的双 C 描摹成矢量。
概念片是这条动画流水线的放大版：18 帧脚本剪成 11 帧 60% cut（原定两周的排期突然压缩到次日发布，当天临时精简脚本的结果），每一镜有情绪板、运镜、指令、旁白和剪辑备注。这些字段不散在文档里，而是住在我快速搭建的网页工具“脚本放映室”里，逐镜放映、逐镜过审；AI 生成实拍与合成 UI 混用，11 段人声旁白，8K 成片配字幕。
同一镜头的三个阶段：分镜卡 → 关键帧 → 成片。
我为这支片子快速搭的网页工具「脚本放映室」：顶部一排镜序，中央当前镜关键帧，下方每镜六字段（画面 / 运镜 / 导演注记 / 字卡 / 旁白 / 剪辑注记），写脚本、审片、定剪辑决策都在同一页完成，60% cut 就是在它里面逐镜砍出来的。
脚本 → 分镜（六字段）→ 生成 prompt 包 → 关键帧 → 旁白 → 成片 + 字幕
Memory 星图：从情绪板到手写渲染器，再镜像进客户端
六天，四个并行会话，四个 PR。我给“记忆”起了一个宇宙的语义，自己写了渲染器，再发明一条镜像链路把它合进主干、正式上线。
Memory 页需要一种让人愿意回来看的形态。我先定语义：用户是中心的恒星，每一类记忆是一颗环绕它的行星，最终上线的正是这几颗二级行星。然后自己写了渲染器，Canvas 2D 的伪 3D：透视投影、深度排序、程序化的行星表面、粒子环，两千多行，跑在客户端的 WebView 里。视觉验收全部数值化：轨道从 0° 的 2 px 渐变到 180° 的 6 px，四芒星有四条线，主星背后的行星要被挡住，光源一律来自母星。
因为客户端把这段脚本作为内嵌字符串加载，我定下一条镜像链路：在网页里打磨 → 镜像进 Swift → 类型检查 → Xcode 验收，并把四个 AI 会话分成“一个专职镜像与 git、两个专职网页打磨、一个专职视觉”。六天后，星图合进了主干。
先有语义，再有像素：动手写渲染器之前定下的星空情绪板。
拖一拖、滚一滚、点一颗行星。
真机里的 Memory 星图。
Galaxy 登录页（原生 SwiftUI + SceneKit，附交接包）是同一套星空语言的另一处落点。
三次系统级改造，全部合进主干
到这里为止，你看到的一切都不是停在提案里的东西：它们分三次进入了生产环境。
三次改造的节奏在下面的时间轴上。半年下来，40+ 个 PR、110+ 次提交、两万六千多行新增代码，其中 17 个 PR 由我自己合并。团队把“设计 → 代码”这条路当作正式交付通道，而不是设计师的实验分支。
这半年里走得最深的一份交付，是 Daily Rewind（日报卡片）的设计→工程规格书。我没有停在画三档卡片，而是把卡片拆成 10 个模块、抽象出唯一输入的数据结构，再给 LLM 生成写下完整的行为契约：排版结构与统计数字由客户端代码负责，LLM 按严格 JSON 契约只填六个文案字段；事实只准来自输入，输出先过 schema 校验、失败重试一次后回退模板文案，再按内容指纹缓存。设计师不只定义界面长什么样，也定义模型说什么话、错了怎么兜底。
Daily Rewind 的设计→工程规格书：从三档卡片基准，到数据结构，到 LLM 行为契约，工程拿到即可开工。
同期另有一项基础改造：字号 token 拆分。