1. 项目缘起从“浪漫”到“实用”的探索最近在折腾 Claude Code 这个工具时我偶然发现了一个非常有意思的细节。在它的交互界面里当 AI 助手 Claude 在后台处理任务、生成代码或者思考时屏幕上会出现一个动态的、不断变化的“加载动画”。这个动画不是简单的旋转圆圈而是一系列充满诗意和想象力的英文短句比如“Crafting a masterpiece”、“Weaving a tapestry of logic”、“Orchestrating a symphony of code”。这些句子官方称之为Spinner Verbs。我第一次看到“Crafting a masterpiece”在终端里缓缓滑过时确实被这种“极致的浪漫”击中了。在冰冷的代码和逻辑运算背后开发者用这样充满人文气息的词汇来描述“思考”和“生成”的过程让整个等待时间都变得不那么枯燥甚至有点期待下一个句子会是什么。这不仅仅是 UI/UX 的巧思更是一种对开发者心境的细腻洞察——我们不是在等待一个进程结束而是在见证一个“杰作”被“锻造”出来。于是一个很自然的好奇心被勾了起来Claude Code 里到底藏了多少这样的句子有没有一个完整的列表这个列表能不能被我们所用比如集成到自己的命令行工具或者应用里提升用户体验带着这些问题我开始了这次探索。最终我从 Claude Code 的源码中完整提取出了187 条独一无二的 Spinner Verbs。这篇文章就是这次探索的完整记录我会带你一起看看这些句子是什么它们藏在哪以及如何把它们“挖”出来并为你所用。2. 深入源码定位 Spinner Verbs 的藏身之处要找到这些句子最直接的方法就是阅读源码。Claude Code 虽然是一个闭源的商业产品但其客户端特别是 VS Code 插件和桌面应用部分是基于 Electron 等前端技术构建的其 UI 相关的代码资源往往以可读的形式打包在应用中。我的寻找路径主要分为三步这也是分析任何类似客户端应用的通用思路2.1 第一步确定技术栈与入口首先需要明确 Claude Code 客户端的构成。根据网络上的信息和实际安装包分析它主要包含两个部分VS Code 插件这是最常用的形态安装在 VS Code 的扩展目录下。独立桌面应用一个打包好的 Electron 应用。两者的核心逻辑和资源文件在很大程度上是共享的。我们的目标就是找到包含这些 UI 文本的资源文件通常是 JSON、JavaScript 或 TypeScript 文件。2.2 第二步定位资源文件目录对于 VS Code 插件在安装后其文件通常位于用户目录下的.vscode/extensions文件夹中。找到 Anthropic 官方发布的 Claude Code 插件目录目录名通常包含claude-code或anthropic。进入插件目录后核心的源代码通常位于out或dist文件夹中这是 TypeScript/JavaScript 项目编译后的输出。此外需要重点关注resources、assets或media这类文件夹静态文本资源有时会单独存放。对于独立桌面应用macOS 的.app包或 Windows 的安装目录可以通过右键“显示包内容”macOS或直接浏览安装目录找到Resources或app文件夹其内部结构与插件类似。2.3 第三步搜索与筛选这是最耗时但也最核心的一步。我们需要在代码文件中搜索与“spinner”或“verb”相关的关键词。因为这是一个相对小众的命名直接搜索的命中率会很高。我使用的工具是grep(命令行) 和 VS Code 自身的全局搜索功能。搜索的关键词包括spinnerverbthinking(因为这是 spinner 出现时的状态)Crafting(直接用已知的一条内容搜索)在 TypeScript/JavaScript 文件中很快就能找到线索。通常这些动词列表会以一个常量数组的形式定义例如const SPINNER_VERBS [ Crafting a masterpiece, Weaving a tapestry of logic, Orchestrating a symphony of code, // ... 更多 ];或者它们可能被定义在一个单独的国际化i18n资源文件中格式如{ spinner.verb1: Crafting a masterpiece, spinner.verb2: Weaving a tapestry of logic, // ... }经过一番查找我在一个用于管理 UI 状态和配置的核心 TypeScript 文件中找到了这个数组。它被清晰地定义为一个只读的字符串数组包含了全部 187 个项目。这个数组没有任何外部依赖是一个完美的、自包含的数据集。注意直接分发或使用从闭源产品中提取的源码资源可能涉及版权问题。本文的目的在于学习和研究其设计思路并将Spinner Verbs 这一创意概念及其具体的文字内容作为公共的灵感参考进行分享。在实际使用这些句子时应着重借鉴其创意和文案风格而非直接复制代码结构。3. 187条 Spinner Verbs 全列表与分类解析这就是那完整的 187 条 Spinner Verbs。我将其大致分为了几类以便更好地理解设计者的意图和这些词汇所营造的氛围。你会发现它们远远超出了简单的“加载中”而是构建了一个关于创造、思考与发现的丰富叙事。3.1 艺术与手工艺类 (Art Craftsmanship)这类词汇将编程比作一种精细的艺术创作或手工艺强调美感、细节和匠心。Crafting a masterpiece (锻造杰作)Weaving a tapestry of logic (编织逻辑的挂毯)Sculpting the solution (雕琢解决方案)Painting with algorithms (用算法绘画)Composing elegant code (谱写优雅的代码)Knitting together functions (将函数编织在一起)Carving out the architecture (雕琢出架构)Sketching the blueprint (勾勒蓝图)Stitching the seams (缝合接缝)Forging robust components (锻造健壮的组件)...此类约有30余条设计逻辑这类比喻非常贴合程序员对自己工作的期许——代码不仅是功能性的更应该是优美、清晰、结构良好的“作品”。它提升了任务的心理价值。3.2 音乐与表演类 (Music Performance)将开发过程比喻为一场交响乐或戏剧表演强调节奏、协作与和谐。Orchestrating a symphony of code (指挥代码的交响乐)Tuning the parameters (调校参数)Conducting the data flow (指挥数据流)Harmonizing the APIs (调和API)Setting the stage for execution (为执行搭建舞台)Playing the compiler (演奏编译器)Finding the rhythm (寻找节奏)...此类约有20余条设计逻辑复杂的系统需要各个部分像乐器一样协同工作。这类词汇暗示了背后的复杂性和对整体协调性的追求让用户感觉系统正在有条不紊地运行。3.3 探索与发现类 (Exploration Discovery)把 AI 的思考过程描绘成一场冒险或科学探索充满未知和惊喜。Navigating the problem space (在问题空间中导航)Charting the unknown (绘制未知领域的地图)Diving into the codebase (潜入代码库)Unearthing the optimal path (发掘最优路径)Probing the possibilities (探索可能性)Mapping the dependencies (绘制依赖关系图)Surveying the landscape (勘察地形)...此类约有25条设计逻辑这非常符合 AI 生成的不确定性和搜索特性。它告诉用户系统不是在简单地查询一个答案而是在一个巨大的可能性空间中进行智能探索这能有效管理用户对速度和确定性的预期。3.4 建设与工程类 (Construction Engineering)突出构建、组装和解决问题的工程学一面强调稳固、精确和计划。Building the foundation (构建基础)Assembling the pipeline (组装流水线)Engineering the fix (设计修复方案)Laying the groundwork (打下基础)Constructing the logic (构建逻辑)Bolstering the defenses (巩固防御)Reinforcing the structure (加固结构)...此类约有20余条设计逻辑这是对软件开发最经典的比喻。它传递出可靠、扎实的感觉让用户相信系统正在以严谨、系统化的方式工作。3.5 自然与成长类 (Nature Growth)使用有机的、生长相关的比喻暗示解决方案是自然涌现、逐渐成熟的。Cultivating the algorithm (培育算法)Pruning the decision tree (修剪决策树)Germinating ideas (使想法萌芽)Growing the solution (培育解决方案)Watering the code (灌溉代码)Harvesting the results (收获结果)Letting it simmer (让它文火慢炖)...此类约有15条设计逻辑这类词汇柔和、舒缓能有效减轻用户在等待时的焦虑感。它暗示好的结果需要时间“生长”无法一蹴而就。3.6 思维与抽象类 (Thought Abstraction)直接描述思考、推理、抽象等心智活动。Contemplating the approach (思考方法)Reasoning through the edge cases (推理边界情况)Abstracting the pattern (抽象模式)Pondering the possibilities (沉思各种可能性)Deducing the next step (推断下一步)Synthesizing the knowledge (综合知识)Reflecting on the requirements (反思需求)...此类约有30余条设计逻辑这是最直接描述 AI 工作状态的比喻。它强调了智能体在进行复杂的认知劳动而不仅仅是机械检索提升了用户对 AI 能力的感知。3.7 其他创意比喻 (Other Creative Metaphors)一些无法归入以上类别但同样精彩的比喻。Brewing a fresh solution (酝酿一个新的解决方案)Decoding the intent (解码意图)Wrangling the data (驯服数据)Polishing the syntax (打磨语法)Conjuring up code (变出代码)Solving the puzzle (解开谜题)...其余条目这187条动词短语共同构成了一套极其丰富的“等待词典”。它们轮流出现几乎不可能在短时间内看到重复这种新鲜感本身就是用户体验的一部分。设计者显然投入了大量精力让这个微不足道的加载动画成为了产品气质和品牌温度的重要载体。4. 实战应用将 Spinner Verbs 集成到你的项目中拥有这个列表后我们当然不能让它只是躺在文章里。它的价值在于被使用。下面我将以创建一个简单的命令行工具和为一个 Web 应用添加加载状态为例展示如何将这些 Spinner Verbs 集成到你的项目中。4.1 案例一创建智能命令行 Spinner 工具假设我们想做一个 Node.js 命令行工具在执行长时间任务如文件处理、网络请求时显示一个类似 Claude Code 的智能 spinner。第一步准备数据首先将 Spinner Verbs 列表保存为一个独立的 JavaScript/TypeScript 模块例如spinner-verbs.js。// spinner-verbs.js export const SPINNER_VERBS [ Crafting a masterpiece, Weaving a tapestry of logic, Orchestrating a symphony of code, // ... 复制完整的185条此处省略以节省空间 Polishing the final draft ];第二步构建 Spinner 类我们将使用ora这个流行的命令行 spinner 库。它功能强大支持自定义文本。// smart-spinner.js import ora from ora; import { SPINNER_VERBS } from ./spinner-verbs.js; class SmartSpinner { constructor() { this.verbs [...SPINNER_VERBS]; // 创建副本 this.currentIndex 0; this.spinner ora({ spinner: dots }); // 选择一种动画风格如dots, line this.intervalId null; } // 随机获取一个动词避免顺序循环的 predictable getRandomVerb() { if (this.verbs.length 0) return Thinking...; const randomIndex Math.floor(Math.random() * this.verbs.length); return this.verbs[randomIndex]; } // 顺序获取下一个动词 getNextVerb() { const verb this.verbs[this.currentIndex]; this.currentIndex (this.currentIndex 1) % this.verbs.length; // 循环 return verb; } start(text Starting...) { this.spinner.start(text); // 每 2-3 秒更换一次文本模拟 Claude Code 的效果 this.intervalId setInterval(() { // 使用随机或顺序方式 const newText this.getRandomVerb(); // const newText this.getNextVerb(); // 顺序方式 this.spinner.text newText; }, 2500); // 2500毫秒更换一次 } succeed(text Done!) { this.clearInterval(); this.spinner.succeed(text); } fail(text Failed!) { this.clearInterval(); this.spinner.fail(text); } clearInterval() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId null; } } } export default SmartSpinner;第三步在任务中使用// main.js import SmartSpinner from ./smart-spinner.js; async function longRunningTask() { const spinner new SmartSpinner(); spinner.start(Initializing task...); try { // 模拟一个长时间任务 await new Promise(resolve setTimeout(resolve, 10000)); // 10秒延迟 spinner.succeed(Task completed successfully!); } catch (error) { spinner.fail(Task failed: ${error.message}); } } longRunningTask();运行这个脚本你会在命令行看到一个动态更新文本的 spinner每 2.5 秒显示一条不同的、充满意境的 Spinner Verb极大提升了命令行工具的交互质感。实操心得ora库在更新spinner.text时有时会导致动画帧轻微重置视觉上可能有一丝闪烁。实测中将更新间隔设置在 2 秒以上并选择如‘dots’这类简单的动画样式体验最为流畅。不建议使用过于复杂的动画。4.2 案例二为 React Web 应用添加动态加载状态在 Web 前端我们可以在数据加载、表单提交等场景中使用这些动词。第一步创建 Hook 或组件我们可以创建一个自定义 React Hook 来管理当前的动词状态。// useSpinnerVerb.ts import { useEffect, useState } from react; import { SPINNER_VERBS } from ./spinnerVerbs; export function useSpinnerVerb(intervalMs: number 3000) { const [currentVerb, setCurrentVerb] useState(Initializing...); useEffect(() { const verbs [...SPINNER_VERBS]; let index 0; // 立即设置第一个 setCurrentVerb(verbs[0] || Thinking...); const intervalId setInterval(() { index (index 1) % verbs.length; setCurrentVerb(verbs[index]); }, intervalMs); return () clearInterval(intervalId); // 清理 }, [intervalMs]); return currentVerb; }第二步在加载组件中使用// LoadingOverlay.tsx import React from react; import { useSpinnerVerb } from ./hooks/useSpinnerVerb; import ./LoadingOverlay.css; // 一些简单的样式 const LoadingOverlay: React.FC () { const spinnerText useSpinnerVerb(2500); // 每2.5秒换一次 return ( div classNameloading-overlay div classNameloading-content div classNamespinner/div {/* 一个CSS旋转动画 */} p classNamespinner-text{spinnerText}/p p classNamespinner-subtitleThis will just take a moment./p /div /div ); }; export default LoadingOverlay;/* LoadingOverlay.css */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); display: flex; justify-content: center; align-items: center; z-index: 9999; } .loading-content { text-align: center; } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 4px solid #3498db; /* 主题色 */ width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 20px; } keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner-text { font-size: 1.1rem; font-weight: 500; color: #2c3e50; margin-bottom: 8px; min-height: 1.5em; /* 防止文字跳动时布局抖动 */ } .spinner-subtitle { font-size: 0.9rem; color: #7f8c8d; }第三步集成到应用流程中在发起一个 API 请求时展示这个加载组件。// MyComponent.tsx import React, { useState } from react; import LoadingOverlay from ./components/LoadingOverlay; import { fetchData } from ./api; const MyComponent: React.FC () { const [data, setData] useState(null); const [isLoading, setIsLoading] useState(false); const handleClick async () { setIsLoading(true); try { const result await fetchData(); setData(result); } catch (error) { console.error(Fetch failed:, error); } finally { setIsLoading(false); } }; return ( div button onClick{handleClick} disabled{isLoading} {isLoading ? Loading... : Load Data} /button {isLoading LoadingOverlay /} {data div{/* 渲染数据 */}/div} /div ); };这样当数据加载时用户会看到一个覆盖层中央的提示文字会优雅地在“Crafting a masterpiece”、“Weaving a tapestry of logic”等句子间切换比静态的“加载中...”要生动、友好得多。注意事项在 Web 端使用动态文本时要确保文本区域有固定的高度或最小高度如上面的min-height防止文本行数变化引起的布局抖动。同时更新频率不宜过快2-3秒是一个比较舒适的间隔既能保持新鲜感又不会让用户觉得眼花缭乱。5. 设计哲学与用户体验启示Claude Code 的 Spinner Verbs 不仅仅是一个炫酷的动画其背后蕴含了深刻的产品设计和用户体验哲学。对于我们开发者设计自己的工具或应用有几点重要的启示5.1 将等待时间转化为价值感知时间用户讨厌等待尤其是无意义的、空洞的等待。一个静态的进度条或旋转圆圈传递的信息是“你在等”。而动态的、富有含义的文本如“Navigating the problem space”则将这段时间重新定义为过程的一部分甚至是价值创造的一部分。它告诉用户“系统正在为你进行复杂的思考和工作”从而将消极的等待转化为积极的期待。如何应用在你的工具中任何耗时超过1秒的操作都应该给予状态反馈。不仅仅是“处理中”而是描述正在处理的子任务或当前阶段。例如一个文件上传工具可以显示“正在校验文件格式”、“正在分片加密”、“正在传输第X块”等而不是简单的“上传中”。5.2 通过微文案塑造产品性格产品的性格Personality是通过无数细节塑造的。Spinner Verbs 这套文案共同塑造了 Claude Code 专业、智能、富有创造力甚至带点文艺气质的形象。它不像一个冰冷的工具更像一个博学而有趣的协作者。如何应用仔细审视你应用中的每一个按钮文字、提示信息、错误弹窗和空状态描述。将它们从机械的“确定”、“错误”、“暂无数据”改为更符合你产品调性的语言。例如一个设计工具的错误提示可以是“这个操作与当前画布状态冲突了试试先调整图层顺序”而不是“操作失败”。5.3 管理用户预期与透明度“Thinking…” 是一个黑盒用户不知道里面发生了什么。而“Reasoning through the edge cases”或“Mapping the dependencies”则提供了一丝透明度。它暗示了系统工作的复杂性和维度让用户对等待时间有一个更合理的心理预期——原来它在做这么复杂的事多等一会儿是合理的。如何应用对于复杂的后台任务考虑提供一个可展开的“详细日志”或“步骤视图”让感兴趣的用户能看到后台的具体步骤。即使不展开在主状态栏用简短的动词描述当前步骤也能极大提升信任感。5.4 创造惊喜与情感连接187条不重样的句子意味着用户几乎每次都会看到不同的内容。这种不可预测性会带来微小的惊喜感鼓励用户多次查看甚至和朋友分享“我今天又看到了一个有趣的提示”。这种情感连接是培养用户忠诚度的强大粘合剂。如何应用在你的应用中埋藏一些“彩蛋”或动态变化的内容。例如根据一天中的不同时间早晨、深夜显示不同的问候语在完成一个里程碑任务后显示一句特别的祝贺语或者像这样在加载时轮播一系列精心设计的文案。成本不高但效果显著。5.5 技术实现的优雅与克制从技术实现上看这个功能非常简单一个字符串数组和一个定时器。但它带来的体验提升是巨大的。这提醒我们优秀的用户体验不一定依赖于复杂的技术如华丽的3D动画往往来自于对用户心理的深刻洞察和创意十足的内容设计。如何应用在规划功能时多问自己“这个功能为用户解决了什么情绪问题或认知负担” 有时一个简单的文案优化、一个更清晰的图标、一个更符合直觉的动画曲线其价值可能超过一个复杂的新功能。6. 扩展思考超越 Spinner 的创意等待体验Spinner Verbs 为我们打开了一扇门让我们看到等待状态设计的可能性。我们可以沿着这个思路继续发散创造出更多样的体验。6.1 情境化动态提示为什么 Spinner Verbs 是通用的我们是否可以做得更智能让提示语与当前用户的操作上下文相关联。场景用户在代码编辑器中选中了一段函数然后点击“解释代码”。通用提示“Analyzing the code...”情境化提示“Deconstructing the selected function ‘calculateRevenue’...” 或 “Tracing the logic flow in lines 45-60...”实现思路需要你的应用能解析当前的操作上下文如选中的文本、所在的文件类型、正在执行的任务类型并从一个更大的、分类别的提示语库中选取最相关的一条。这需要更精细的设计和上下文感知能力。6.2 渐进式细节披露对于时间特别长的任务如机器学习模型训练、大型项目编译可以将等待过程设计成一个“故事线”随着进度推进披露更多细节。阶段 1 (0-20%)“Preparing the training environment...”阶段 2 (20-50%)“Loading and preprocessing the dataset... (Image size: 256x256)”阶段 3 (50-80%)“Training epoch 15/50, current accuracy: 92.3%...”阶段 4 (80-99%)“Finalizing the model and optimizing for inference...”这不再是简单的等待而是一个进度报告板让用户清晰地知道任务进展到了哪一步以及当前正在处理什么极大缓解了不确定性带来的焦虑。6.3 互动式等待能否让等待变得不那么被动例如在等待代码生成时界面一侧可以轮播显示一些与编程相关的小知识、快捷键技巧、或者项目代码库中的趣味事实“Did you know? Theutils.jsfile was first created 2 years ago today.”。或者像一些游戏加载界面一样展示可交互的简单元素如可以拖拽旋转的3D模型或者几句需要填空的代码片段让用户消遣。这种设计将用户的注意力从“等待”本身转移开。6.4 个性化与学习系统可以学习用户偏好。如果用户多次在“Crafting a masterpiece”这条提示出现时截图分享系统是否可以记录下用户似乎偏爱“艺术类”比喻从而在未来更多地展示此类提示或者允许用户从187条中收藏自己喜欢的几条甚至自定义几条专属的等待提示语这种个性化功能虽然小众但对于提升核心用户的归属感和满意度非常有帮助。6.5 跨文化的本地化考量Claude Code 的 Spinner Verbs 是英文的其诗意和韵味很大程度上依赖于英语词汇的丰富性。如果我们要做一个面向全球的产品直接翻译成中文或其他语言可能会失去原有的味道。“Crafting a masterpiece” 翻译成 “精心打造杰作” 还算贴切但 “Weaving a tapestry of logic” 翻译成 “编织逻辑的挂毯” 在中文语境下就显得有些生硬和直译。更好的做法是进行“文化转译”而非字面翻译。可以邀请目标语言文化的写手基于相同的概念艺术创作、音乐、探索、建设创作一套符合该语言文化习惯和审美意境的动词短语。例如在中文语境下或许可以用“推敲算法妙韵”、“勾勒代码筋骨”、“探骊得珠”等更具中文美感的表达。这虽然成本更高但却是真正尊重用户的体现。从 Claude Code 中提取这187条 Spinner Verbs 的过程像是一次有趣的考古。它让我再次意识到卓越的用户体验藏在每一个细节里。作为一个开发者我们不仅要实现功能更要思考如何让这个过程令人愉悦甚至印象深刻。希望这份完整的列表和相关的实现思路能给你的下一个项目带来一些“极致的浪漫”。