“Show HN: A skill that makes people think youre using Claude Code”这个标题我第一眼看到就乐了。在我录屏分享技术内容或者给人远程演示的时候经常有人瞟一眼我的终端就问“你这是在用 Claude Code 改代码”——哪怕当时我只是在跑一个普通的构建脚本。Claude Code 那套标志性的终端画面——彩色的会标、一行接一行的工具调用、todo 列表和 diff 高亮——已经成了“AI 在认真干活”的视觉符号。HN 上这个项目说白了就是把这种“看起来在跑 Claude Code”的体验做成了一个可移植的 skill拿来演示、录教程、或者单纯满足一点恶趣味都挺好用。这篇文章我不只拆它的实现思路还会把真实 Claude Code 的安装、VSCode 配置和上手路径一次讲清楚最后附上我踩过的几个坑。1. “假装在用 Claude Code”从一个梗变成一个开源项目1.1 Claude Code 的终端画面为什么自带“高级感”要说清楚这个项目为什么有意思得先理解 Claude Code 的终端 UI 为什么那么有辨识度。用过的人都知道Claude Code 启动之后会在终端里打印出醒目的 ASCII 风格 logo、版本号、项目路径然后进入一个交互式 REPL。你每提一个需求它会先展示自己“正在读哪些文件”“调用了哪个工具”再给出要修改的 diff。这套界面的核心视觉元素可以拆成几块一个高饱和度的品牌色 Logo通常带橙色/琥珀色调工具调用列表比如Read、Grep、Edit、Bash每一项前面有状态图标进度指示比如转圈或者“Running tests...”这类输出diff 展示绿色表示新增、红色表示删除信息密度很高最下面一个输入框等待你继续追加指令。这些元素单个看都不稀奇但组合在一起就会产生一种心理暗示有一个 AI Agent 正在实时地读取我的项目、修改代码、运行命令并反馈结果。这种“过程的可见性”是 Claude Code 区别于普通gpt命令行工具的一个关键点。它把原本黑盒的推理过程拉到了前台让围观的人产生“这玩意儿真的在帮我写代码”的感觉。也正因为如此终端里一旦出现类似画面懂行的人会立刻联想到 Claude Code。1.2 Show HN 项目的真实定位与合理使用场景HN 上这个项目标题写得很直白“a skill that makes people think youre using Claude Code”。从项目命名方式看它应该是一套封装好的 skill不是简单的 npm 包也不是一个 GUI 应用。它要做的事情就是“让屏幕前的观感像在操作 Claude Code”。这种项目最容易踩的伦理线就是“伪造工作量”。我先把话放前面如果你打算拿它去糊弄 leader 或者给客户演示一个根本不存在的功能那是在给自己埋雷。AI 编程工具的交互记录、文件变更和测试输出本来应该是真实工作过程的副产品刻意造假一旦被识破信任成本比收益大得多。在合理的场景里这东西其实非常有用屏幕共享时的隐私保护你不想把真实的项目路径、私有仓库名、或者自己的编辑器配置暴露给观众可以先拉起一个模拟会话让镜头里出现的只是“一个带着 Claude Code 风格的终端”。录教程和直播暖场讲 AI 编程工具的时候画面里要先有一个 Cloude Code 风格的交互过程用来做氛围铺垫比干巴巴放 PPT 强太多。前端设计参考如果你想给自己的 CLI 工具做一套类似的 Agent 交互界面这个 skill 就是一份“高仿源码”。纯个人娱乐在技术群晒一张“看起来正在用 Claude Code 干大活”的截图本身就是程序员圈子里的行为艺术。我在实际体验后认为这个项目更大的价值不在“骗过别人”而在于它把 Claude Code 的终端交互特征做了一次结构化的拆解。你想让自己的工具也具有这种“高级感”直接参考它的实现思路就行了。1.3 为什么我说它本质上是“终端 UI 语言的解构”如果你只是把这一节当成项目简介那就太可惜了。细看这个 skill 的实现你会发现它其实做了一件很程序员的事情把“Claude Code 的视觉体验”抽象成了数据。具体来说它大概率做了三件事把 Claude Code 的启动 Logo、颜色主题、工具名列表整理成了一份“视觉素材清单”用脚本模拟了工具调用的节奏和日志输出包括时间间隔、状态切换、diff 片段把这些封装成语义化、可传参的接口你只要执行claude-demo就能看一场以假乱真的终端表演。从某种意义上说这就是终端 UI 文化的“二次创作”。就像有人复刻 MacOS 的 Dock 动画有人复刻 IDE 的启动画面一样复刻一个 AI 编程工具的交互界面本身就很有工程趣味。2. 拆解这个 Skill 的实现模拟画面主要由三部分组成2.1 启动层Logo 与初始化提示的复刻第一眼印象是最重要的。Claude Code 的启动层通常包含品牌描绘、版本号、初始化路径和模型信息。高仿 skill 在设计时首先要复刻的就是这一屏。实现上并不复杂核心是 ANSI 转义序列。\033[38;5;208m可以把文字设置成接近 Claude 品牌色的琥珀橙\033[1m是加粗\033[0m重置所有样式。为了保险起见更专业的做法是用tput setaf 208这类命令生成颜色码而不是硬编码转义序列因为不同终端对 ANSI 的支持程度略有差异。初始化提示的节奏感也很重要。真实 Claude Code 启动时会先显示版本信息然后输出一批“Reading workspace metadata”、“Loading conversation history”之类的日志每行之间有短暂的停顿。这给人感觉是在加载上下文而不是瞬间蹦出来。模拟脚本一般用sleep 0.3、sleep 0.8这类间隔来控制节奏。以下是启动层的简化示例#!/usr/bin/env bash # claude-demo.sh —— 让人误以为你在用 Claude Code 的终端模拟器 # 用法: bash claude-demo.sh [项目目录] clear # 品牌色标题 tput bold tput setaf 208 cat EOF ┌───────────────────────────────────────────┐ │ CLAUDE CODE · TERMINAL AGENT SESSION │ └───────────────────────────────────────────┘ EOF tput sgr0 echo printf \033[90mInitializing Claude Code v2.0.0 ...\033[0m\n sleep 0.5 printf \033[90mReading workspace metadata ...\033[0m\n sleep 0.8 printf \033[32m✔ Project context loaded\033[0m\n printf \033[90mWorking directory: \033[0m\033[36m%s\033[0m\n ${1:-.} echo 2.2 交互层工具调用列表、进度条、状态切换的动态输出启动画面只是静态的真正让人“以为是真家伙”的是中间那一段动态的工具调用过程。Claude Code 处理一个需求时会不断输出类似这样的信息⠋ Reading src/cli.ts - 12.4 KB ✓ 1 file read ⠹ Running tests... vitest run --coverage ✓ 42 tests passed in 3.8s ✎ Editing src/cli.ts 25 lines added, -4 lines removed模拟器要复刻的不是某一个画面而是这种“行为流”。实现时通常用for循环加数组驱动tools(Grep: patternfunction Read: src/utils.ts Edit: src/utils.ts Bash: npm test) for item in ${tools[]}; do printf \033[90m%s\033[0m\n ⠋ $item sleep 0.4 printf \r\033[90m%s\033[0m\n ✓ $item done这其中有三个细节值得注意行首的⠋或⠹是 Unicode 的 Braille Pattern用来模拟加载动画的“当前正在执行”状态。严谨的模拟器会做一个小动画用\r回车不断刷新当前行状态图标从⠋切到✓时整行要重绘让旁观者觉得很连贯关键输出前面要带缩进和箭头符号-、这是 Claude Code 工具调用日志的版式特征。diff 块也是交互层的重头戏。Claude Code 在完成编辑之后会展示代码差异diff_line() { printf \033[32m \033[0m%s\n $1 # 新增行 printf \033[31m- \033[0m%s\n $2 # 删除行 printf \033[90m %s\033[0m\n $3 # 上下文行 } diff_line export function add(a: number) { function add() { }这段输出配合高亮色很像真实 Agent 在修改代码后给你看差异的样子。2.3 行为层输出节奏、按键反馈与终端兼容性处理静态颜色和动态工具调用只解决了“画得像”要让整个体验“行为也像”还得处理输出节奏和按键反馈。Claude Code 的输出速度是人机交互设计出来的结果既有等待时长又有批量输出的爽快感。模拟器如果一股脑把全部日志打印完就显得很假。合理的节奏是启动阶段0.3~0.5 秒一行工具调用阶段每条调用停顿 0.3~0.8 秒最终总结阶段一次性输出几行给人“批量出活”的感觉。按键反馈则稍微复杂一点。真实 Claude Code 在等待输入时有闪烁的光标也会响应 Enter、CtrlC中断、CtrlD退出等按键。模拟器可以通过stty -echo隐藏输入字符在收到回车时继续输出下一批日志收到q时退出。不过这里有个风险模拟器接管了 stdin 之后如果用户按 CtrlC可能无法恢复终端属性。稳妥的做法是在脚本开头加一个清理函数cleanup() { stty echo tput cnorm # 恢复光标 tput sgr0 } trap cleanup EXIT INT TERM终端兼容性上tput和trap的组合比硬编码转义更可靠。在 iTerm2、Windows Terminal、VS Code 集成终端里tput setaf 208和\033[90m都能正常工作但在老版的 Linux 终端里256 色支持不全颜色可能显示成空白或者被替换掉。我实测下来最稳的配色方案是先加一层tput setaf再用\033[1m做加粗基本不会出问题。2.4 把它做成一个 Skill从 script 到 SKILL.md如果你的本意是让它在真实 Claude Code 里作为一个可复用技能Agent Skill被调用那就不只是写 shell 脚本了。Anthropic 的 Claude Code 技能格式通常是在.claude/skills/skill-name/SKILL.md文件里用 Markdown 描述技能的触发条件和使用说明再把执行脚本放在同一目录。一个示意的SKILL.md可能是这样的--- name: claude-code-demo description: 模拟 Claude Code 风格的终端输出用于演示、录屏或教学场景。 --- When the user asks for a terminal demo or wants to show a Claude Code-like session, run ./demo.sh and explain that this is a visual simulation.这样设计之后你在真实 Claude Code 里输入“给我跑一个演示会话”Agent 就会调用这个 skill前台看到的是又一堆工具调用日志和进度更新像极了在干活实际上只是在执行一段被编排好的输出脚本。不过要提醒一下如果你把这个 skill 放到团队的公共仓库里别人运行时有可能会误以为真有 Agent 在操作仓库。最好在输出里加一行 “DEMO MODE” 之类的明确标识这也是对这个项目的最佳实践。3. 30 行脚本复刻 Claude Code 风格终端效果附代码3.1 核心代码一个可以跑的 Demo下面这个脚本是我按上面的思路整理出来的一套可以直接跑通的最小版本。它不做夸张的装饰只保留了神韵品牌色标题、初始化日志、工具调用演示、测试执行、diff 展示最后进入一个“等待输入”的假 REPL。代码不长但信息密度已经足够让围观的人产生“这是 Claude Code”的第一印象。#!/usr/bin/env bash # claude-demo.sh # 一个让人以为你在用 Claude Code 的终端模拟器 # 用法: bash claude-demo.sh set -euo pipefail # 退出时恢复终端 cleanup() { stty echo; tput cnorm; tput sgr0; } trap cleanup EXIT INT TERM clear tput bold; tput setaf 208 printf %s\n CLAUDE CODE · DEMO SESSION tput sgr0 printf %s\n printf \033[90mInitializing v2.0.0 ...\033[0m\n; sleep 0.5 printf \033[32m✔ Project context loaded\033[0m\n; sleep 0.4 # 工具调用演示 run_tool() { printf \033[90m⠋ %s\033[0m\n $1 sleep 0.6 printf \r\033[90m✓ %s\033[0m\n $1 } run_tool Grep: patternuseMemo run_tool Read: src/hooks/useDebounce.ts run_tool Edit: src/hooks/useDebounce.ts run_tool Bash: npm run lint -- --fix # 测试进度 printf \033[90m⠹ Running tests ...\033[0m\n; sleep 1 printf \033[32m✔ 47 tests passed in 4.1s\033[0m\n sleep 0.3 # Diff 展示 printf \n\033[1mRefactored files:\033[0m\n printf \033[36msrc/hooks/useDebounce.ts\033[0m\n printf \033[32m export function useDebounceT(value: T, delay 300)\033[0m\n printf \033[31m- export function useDebounce(value, delay)\033[0m\n printf \033[90m { ... }\033[0m\n # 假 REPL printf \n\033[38;5;208m❯\033[0m while read -r -p _; do printf \033[90m( demo mode )\033[0m\n printf \033[38;5;208m❯\033[0m done你可以把它存成claude-demo.sh加上执行权限chmod x claude-demo.sh bash claude-demo.sh我在 macOS 的 Terminal、iTerm2、VS Code 集成终端和 Windows TerminalWSL里都跑过视觉一致性很高。唯一要注意的是 Python 的input()风格阻塞在纯 bash 里不如用while read自然上面这个版本已经足够。3.2 关键实现说明为什么是\r、tput和sleep\r这个细节值得展开讲。终端里如果你只写\n光标会跳到下一行但停留在行首而\r可以把光标拉回当前行的行首。实时更新状态时标准姿势是先\r再输出新内容这样同一个位置会被一次次覆盖形成原地刷新的效果。tput的价值是抽象终端能力。比如tput bold开启加粗tput setaf 208设置 256 色中的琥珀橙tput sgr0重置所有属性tput cnorm恢复光标显示tput civis隐藏光标。这些命令在不同终端里的表现非常一致比写死\033序列更不容易出兼容性问题。sleep则是整个“以假乱真”的灵魂。真实 AI Agent 在做复杂推理时单条工具调用的间隔大概就在 0.3~1 秒之间。模拟器把时间压缩到 0.2 秒以内反而会显得假因为正常情况下终端输出不会那么“顺滑”。3.3 封装成 Skill 或可执行文件一键唤起脚本本身只是第一步。为了在任何目录下都能唤起我习惯再包一层把文件放到~/.local/bin/claude-demo然后确保~/.local/bin在PATH里或者直接写一个 aliasalias claude-demobash ~/.devtools/claude-demo.sh如果你想走 Claude Code 的 Skill 体系就放到.claude/skills/claude-code-demo/下并写好SKILL.md。这样无论你是在录屏、直播还是只是想在同事经过工位的时候按下回车一行命令就能把这个“体面”的画面调出来。4. 真实 Claude Code 的安装与 VSCode 配置指南4.1 环境检查Node.js 版本、系统要求与官方区域支持调侃归调侃模拟器只是影子。真正要用上 Claude Code你还是要安装它。结合网上最新的搜索热词“claude code安装”、“claude code下载”、“vscode配置claude code”我把当前的主流安装和配置路径整理一遍。Claude Code 是基于 Node.js 的命令行工具官方推荐的安装方式是通过 npm 全局安装。安装前的检查项如下检查项具体要求说明Node.js建议使用 LTS 或更新版本node -v查看版本版本过低时工具会拒绝启动npm随 Node.js 安装npm -v验证登录账号Claude 账号或支持 API Key 的平台账号两种认证方式至少准备一种网络环境能正常访问官方服务区域可用性以官方支持列表为准关于地区可用性这里必须多说一句。终端在个别情况下会提示 “might not be available in your country. check supported co...”这是官方根据账号归属地做的限制提示。遇到这个提示正确做法是去官方文档确认当前账号所属区域是否在支持列表内而不是去折腾任何非官方访问通道。很多网络教程为了流量会给你塞一堆“曲线方案”那些东西既不稳定还可能让账号风控完全不值得。我自己的原则是官方支持就用官方不支持就等账号安全比一次尝鲜重要得多。4.2 npm 全局安装与登录认证环境确认没问题之后安装过程其实很快npm install -g anthropic-ai/claude-code安装完成后验证版本claude --version能看到版本号就说明命令已经进入 PATH 了。如果提示command not found大概率是 npm 全局 bin 目录没有加到 PATH 里。你可以先执行npm bin -g拿到全局 bin 路径再把它加进 shell 配置文件。首次运行claude它会检查登录状态然后引导你完成认证。常见有两种方式浏览器登录在终端弹出的链接里用 Claude 账号授权API Key如果你用的是 Anthropic API 服务的 key设置环境变量ANTHROPIC_API_KEY后启动。登录成功后Claude Code 会在项目目录下生成配置和会话索引文件。之后你就可以直接提问了。4.3 VSCode 中配置 Claude Code以及“桌面版”是什么“claude code桌面版”这个热词目前网上说法有点杂。严格来说Claude 官方有 Claude Desktop 客户端但那是面向通用对话的桌面应用不等于 Claude Code 的桌面版。Claude Code 本身的“桌面版”体验通常有两种理解在独立终端窗口运行比如 macOS 的 Terminal 里全屏跑claude视觉效果接近桌面应用通过 VS Code 集成官方提供了 VS Code 扩展安装后可以在编辑器内部打开 Claude Code 面板让它读取当前打开的项目上下文并以内嵌终端的方式交互。如果你主要在 VS Code 里开发推荐这样配置打开 VS Code在扩展市场搜索 “Claude Code”安装官方扩展按CmdShiftPmacOS或CtrlShiftPWindows/Linux执行 “Claude Code: Open in Editor” 之类的命令它会在编辑器右侧或底部拉出一个 Claude Code 面板自动绑定当前工作区目录如果你不想装扩展也可以直接在 VS Code 的内置终端里运行claude效果一样。VS Code 扩展的优势在于它能把你正在打开的文件作为上下文传给 Claude Code。这样你让它修改代码时它会倾向于参考当前标签页里的内容而不是自己在项目里瞎猜。我在实际用下来觉得这个“当前文件上下文”的加持确实能减少很多来回确认。4.4 最简单的使用教程让 Claude Code 帮你改一个函数这里用一个最小例子演示基础流程。假设项目里有一个/src/format.ts里面有个函数写得很冗余我想让 Claude Code 优化一下。启动claude后输入请优化 src/format.ts 里的 formatDate 函数让它更简洁并保持兼容性。回车之后Claude Code 会输出它的推理过程先读取文件内容可能搜索项目中哪些地方引用了这个函数然后给出修改方案。你会在输出里看到它调用了Read、Grep这类工具最后展示 diff。看到 diff 之后如果觉得没问题输入y或者按提示确认应用修改。它还支持一些常用斜杠命令/help查看帮助/status看当前会话资源和状态/clear清空当前会话历史/compact压缩长历史保留上下文但节省 token/model切换使用的模型版本。核心要记住的就是Claude Code 不是“一次性替你写完所有代码”的魔法而是一个“会读、会改、会跑测试”的结对程序员。你把需求说清楚它会主动读取项目相关文件改完之后还会提醒你测试验证。这种闭环的工作方式比在网页端复制粘贴要顺手太多。5. 实测中的意外情况与避坑记录5.1 模拟脚本在不同终端里的表现差异先讲模拟脚本。我在不同终端环境实测后发现主要差异集中在两点颜色渲染和 Unicode 字符宽度。颜色Windows Terminal 和 VS Code 集成终端对 256 色支持很好颜色输出干净但某些老旧的 Linux 终端或 tmux 的默认配色会把 208 号色降级成普通红色观感差一大截。Braille 字符⠋、⠹这类加载图标在某些终端字体会被渲染成方块。如果你的终端字体不支持 Braille Pattern建议换成 ASCII 的- \ | /动画或者直接用[ ]进度条替代。光标控制有些远端开发服务器上用 VS Code Remote 打开终端tput civis隐藏光标可能不生效导致输入框区域看起来有个闪烁的下划线。这个不影响模拟效果但会让细节控抠瑕疵。我给出的建议是在脚本里加一个TERM判断如果包含dumb或linux就自动降级为纯 ASCII 输出。这样无论观众在什么环境看到你都不会翻车。5.2 模拟器与真实 Claude Code 共存的坑一个非常容易踩的坑是你本意是写一个模拟脚本为了防止覆盖真实命令特意给它起了个新名字比如claude-demo但你没注意 PATH 里可能已经存在一个同名命令某些 npm 包会把可执行文件放在同一个全局 bin 目录里。更隐蔽的问题是环境变量冲突。模拟脚本如果也读ANTHROPIC_API_KEY或者复用~/.claude目录的输出文件就有可能在调试时不小心污染真实会话数据。我在测试时曾因为模拟脚本里的一个export变量没有加前缀把终端会话的CLAUDE_CODE_ENTRYPOINT给覆盖了导致真实claude启动时行为异常。解决办法很简单模拟脚本里所有自定义变量都加上_DEMO_之类的前缀不要在模拟脚本里export任何CLAUDE或ANTHROPIC开头的变量起名尽量用claude-demo、fake-claude、mock-claude这类一眼能识别出来的名字避免覆盖真实命令。5.3 Claude Code 真实安装时容易翻车的三个地方再说真实安装。搜索热词里大量出现“claude code安装教程”说明大家在安装过程中确实经常卡壳。我总结下来高频翻车点主要是这三个Node.js 版本太旧。如果你电脑里有系统自带的旧 Node或者通过包管理器装了一个长期不更新的版本npm install -g可能顺利但claude启动时会因为语法不支持直接报错。建议先升级到当前 Active LTS 或更新版本再执行安装。没有处理 EACCES 权限错误。全局安装 npm 包时在某些系统上会遇到权限不足。不要一上来就sudo npm install -g这会把全局目录的属主搞乱。正确做法是把 npm 全局目录迁到当前用户有权限的路径下比如~/.npm-global。登录引导失败后没有清理残留配置。如果第一次登录过程中断会在~/.claude或项目配置里留下半截.json配置。下次启动claude时可能一直卡在授权页面。保险做法是把~/.claude下对应的残留文件备份后删掉再重新登录一次。还有一个比较容易误会的点就是搜索词里提到的“claude code 下载”。Claude Code 本质上没有独立安装包官方推荐的下载路径就是 npm。你从第三方博客下载到的所谓“安装包”反而可能是山寨或者捆绑了东西不如直接在命令行里用 npm 一把梭。5.4 怎么判断终端里跑的到底是真 Claude 还是模拟器这个项目流行起来之后开发群里开始有“鉴伪”需求了。有人会对着别人的截图问这个终端画面是真的在跑 Claude Code还是用了模拟器几个简单的判断维度判断维度真 Claude Code模拟器是否能继续对话能输入新指令后有真实响应大多是固定日志回复空洞文件是否真实修改看 diff 能对应到实际文件变化只是打印文本磁盘上不会有变化网络请求运行期间有 API 调用行为纯本地输出无网络流量CtrlC 之后会中断任务并返回提示符可能直接退出或进入 demo 循环最直接的验证方法是在运行画面出现时打开另一个终端看看当前目录下的文件真实内容有没有被改动。真 Claude Code 改完代码文件里一定会留下痕迹模拟器无论输出多华丽它只动了你的屏幕没动你的代码。这个“鉴伪”清单其实也能反向帮到你如果用了模拟器做演示记得提前跟观众说明“这是 DEMO”。我见过有人演示完没关模拟器结果同事顺手在画面里敲了一行真实指令发现毫无反应场面一度尴尬。给它加上“DEMO MODE”标识是对自己的保护也是对工具的尊重。说到底无论是真的用 Claude Code 重写代码还是用模拟脚本装点门面终端 UI 的设计密码都藏在“可见的过程”里。Claude Code 把 AI 的思考外化成了一串串工具调用日志和 diff模拟器把这些日志重新编排成一场演出这本身就是一个很有意思的产品视角用户买不买单很多时候取决于你能不能把幕后过程转化成台前信任。而我个人的体会是这类小项目最大的价值不是让人少干活而是提醒我——做任何工具都要认真设计那个“给用户看的界面”哪怕这个界面只是一段滚动得恰到好处的终端文字。