如果你妄图通过 Claude 执行 rm -rf node_modules
守护一方安宁的雨姐就会把你拦下：“整这死出呢？这命令不好使！想都别想”
然后面板里“拦下”那一栏记了 +1
Claude 要删目录，雨姐把命令拦在了执行之前
前两天 Claude Code 更新了 Mod 功能，允许用户自定义自己的界面，而大家也都知道，我有些很棒的癖好...于是，我就搭了这个....哎年少不知雨姐好，错把 xx 当成宝
本文我会带着大家一步步地去构建这么一个语解 mode：让雨姐陪你写代码的 Mod。她坐在终端边上，看着 Claude 跑的每一条命令，与你一起喜怒哀乐
网上看到的雨姐版 Codex 界面
当然，这个 mod 我也挂在了 git 上，与诸君分享
第一步：给雨姐搭个工位
我在 Claude Code 里跟 Claude 说：
写一个 Mod，右边给雨姐开个面板，输入框上面放一句她的台词，状态栏写“雨姐在岗”
Claude Code 自带一个叫 plugin-authoring 的技能，Claude 照着它把 Mod 写进当前会话专属的 ~/.claude/dev-mods/ 目录，写下第一个文件时，Claude Code 会问一句要不要给这个会话打开热重载，点同意就行
不想让 Claude 代劳，自己建个文件夹写也一样，启动时用 claude --plugin-dir ./yujie 加载
不管谁来写，核心就三个文件：
yujie/ ├── .claude-plugin/plugin.json 名字、版本、作者 └── hooks/ ├── hooks.json 告诉 Claude Code 代码在哪 └── register.tsx 真正干活的代码hooks.json 只有一行 { "modules": ["./register.tsx"] }。register.tsx 导出一个 register 函数，Claude Code 加载 Mod 时调用它一次，雨姐的工位就是在这里搭的：
export const register: Register = on => { // 会话一开始：注册命令、写状态栏、打开面板 on('session.start', async ($, e, next) => { await $.command.register({ name: 'yujie', description: '打开雨姐工位面板' }) $.ui.status('雨姐在岗 · 铁锅已热') $.ui.open({ id: 'yujie', title: '雨姐工位' }) return next(e) }) // 每次画输入框上方那一行：换成雨姐的台词 on('ui.render', { component: 'AbovePrompt' }, async ($, e) => { const { Box, Text } = $.ui.resolve(e) return <Box><Text color="#e0567a">🍓 雨姐：</Text><Text>{await read($, line)}</Text></Box> }) }Mod 一加载，雨姐就坐进来了
右侧面板、输入框上方的提示条、底部状态栏，都是这个 Mod 画的
这一步已经能看出 Mod 和以前那些扩展方式的区别。Skill 是给 Claude 的一份说明书，MCP 是给 Claude 接上外部工具，settings 里的 hooks 是在固定时机跑一段 shell 脚本，它们都站在 Claude Code 外面
Mod 是一段跑在 Claude Code 进程里面的 JavaScript/TypeScript 代码，所以它能直接在界面上画东西：贴着对话的面板（Pane）、输入框上方的提示条（AbovePrompt）、底部的状态栏，还有角落里几秒就消失的 toast
它怎么知道什么时候该画、什么时候该动？Claude Code 运行时会不停地产生事件：会话开始是 session.start，你按下回车是 prompt.submit，Claude 要跑命令或改文件是 tool.call，界面要画某一块是 ui.render，一轮回答结束是 turn.complete。Mod 做的事，就是在这些事件上挂函数，这些函数叫钩子（hook）。雨姐的工位，就是在 session.start 时打开面板、写好状态栏，再在 ui.render 里把面板内容画出来
调界面时还有个省心的地方：我改完代码一保存，Claude Code 里自动冒出一行 yujie: reloaded (7 hooks…)，雨姐当场换上新代码，会话不用重启。Mods 要求 Claude Code v2.1.287 以上，终端和桌面 App 的 Code 标签页都能用
第二步：给雨姐长脸
工位有了，雨姐还缺个 GUI
大多数终端里不能直接贴图片，Mod 给了一个叫 Raster 的元素，它是一格一格的字符画布。每个格子放一个“▀”（上半块）字符，前景色涂上半格，背景色涂下半格，一个字符格就能装下上下两个像素。画布的内容是一串数字，每个格子三个数：字符、前景色、背景色
words[at] = 0x2580 // ▀ 上半块 words[at + 1] = top // 上面那个像素的颜色 words[at + 2] = bottom // 下面那个像素的颜色所以我需要的是一张像素图。一开始我让 Codex 画了张普通卡通头像，再用程序缩小成像素，结果五官糊成一片。后来干脆让 Codex 直接画成大颗粒、少颜色的像素风，我再写个小脚本按格子取色，一格一格搬进终端，这回就干净了。平静、大笑、生气三张表情用同一个构图，换表情时面板不会跳
左边是 Codex 画的像素图，右边是搬进 Claude Code 之后
搬的过程中也踩了坑。第一次截图，雨姐的暗红 Polo 衫变成了橄榄色，原来我是在 tmux 里跑的 Claude Code，它自动降成了 256 色；后来头发又发绿，因为 Raster 会把每个颜色通道压成 16 档，深灰棕被压偏了。最后把头发换成一个压完也不变色的深棕，脸才算定下来
第三步：让她看见你在干嘛
有了脸，雨姐还得知道你在干嘛，这就要用到 tool.call。Claude 每次要跑命令、改文件，这个事件都会先经过雨姐的钩子，再交给 Claude Code 真正执行
钩子拿到这次调用以后，有三种选择：原样放行、改了再放行，或者干脆自己回答，不放行。下面这张图点一下就会播放一遍：
雨姐后面几步的本事，都是这三种的组合。这一步用的是最简单的“旁观”：记一笔，换个表情，然后调用 next(e) 放行，命令照常执行
写成代码就是先 await next(e) 让命令跑完，拿到结果再决定雨姐的脸色：
on('tool.call', { tool: 'Bash' }, async ($, e, next) => { const ran = await next(e) // 先放行，命令照常跑 if (ran.isError || /ℹ fail [1-9]/.test(ran.text ?? '')) { await say($, 'angry', '哎呀妈呀，又红了。别慌，大姐在呢') $.ui.toast('雨姐：报错了，瞅瞅日志') } return ran })我给她定了几条规矩：命令跑完要是报错了，她脸一沉，“哎呀妈呀，又红了。别慌，大姐在呢”；Claude 用编辑工具改完一个文件，她乐了，“改完第 1 个文件了，手嘎嘎快！”；一轮活儿干完，弹个提示“这把得劲儿！”。面板底下顺手记着账：改了几个文件、跑了几条命令、报了几次错
同一个面板的三个瞬间：开唠嗑模式、测试报错、改完第一个文件
这里有个写 Mod 才会碰到的坑。第一次试的时候，测试明明挂了，雨姐却一点反应没有。翻回去一看，Claude 跑的是 npm test 2>&1 | tail -40：管道最后一截 tail 成功了，整条命令就算成功，Claude Code 不会把它标成报错。后来我让雨姐除了看“是否报错”，再扫一眼输出里有没有“fail 1”这类字样
表情、台词、计数都存在 $.state 里，状态一变，读过它的界面会自动重画，我不用自己去刷新面板
第四步：教她说东北话
雨姐得说东北话。我加了个斜杠命令 /yujie-talk，打开以后，Claude 的回答全变成了大姐口吻：“老妹儿，俩 bug 都整好了，又跑了一遍测试，2 个全过了，嘎嘎得劲儿！”
唠嗑模式下，Claude 用大姐的口吻讲清两个 bug 怎么修的
这一步用的是“改写”。能改写的地方有两个：一个是 prompt.submit，在你发出去的话后面悄悄加一句“请用东北话回答”；另一个是 prompt.compose，在 Claude Code 组装系统提示词时插进一段。我选了后者，你打的字原样留在对话记录里，雨姐只往系统提示词里塞一段“用东北大姐的口吻，技术结论保持准确”。关掉命令，下一轮这段就没了
on('prompt.compose', async ($, e, next) => { const composed = await next(e) // 先拿到 Claude Code 自己拼好的系统提示词 if (!(await read($, isDialect))) return composed return { ...composed, sections: [...composed.sections, { id: 'yujie:dialect', text: DIALECT, scope: 'session' }] } })斜杠命令本身也是 Mod 注册的。/yujie-talk 不经过 Claude，直接跑我写的函数，所以 Claude 正在干活时也能切换
第五步：让她接管
第五步就是开头那一幕，用的是“接管”。我在 tool.call 里加了一条：命令里如果有 rm -rf、强推 git push --force、git reset --hard，雨姐不调用 next，直接回一个 deny
if (DANGER.test(e.command)) { $.ui.toast('雨姐：rm -rf？想都别想') return { deny: '雨姐拦下了这条命令：它会删除或强行改写数据。请换一个更安全的做法，或者让用户自己执行。' } }我在 Claude Code 里说“node_modules 太占地方了，直接 rm -rf node_modules 删了吧”。Claude 很听话，第一条命令就是 rm -rf node_modules && git status -sb && npm test，于是有了开头那张图。命令没跑成，Claude 收到的是雨姐那句拒绝，它接下来的反应挺有意思：
被拦之后，Claude 把删除交还给我自己
它说得很明白，“这命令我刚要整，就让雨姐 Mod 的钩子给拦下来了”，“这是你自己设的安全闸，我不绕着它走”。然后它去看了一眼 node_modules 里有什么（才 4K，就一个一行代码的 left-pad），确认删了不影响测试，最后把命令写好交给我，让我自己决定敲不敲。拒绝的理由原样进了 Claude 的上下文，它就能顺着这条规矩往下想，而不是换个写法再试一次
当然，这条规矩只是演示。我用正则匹配命令字符串，rm -r -f 换个写法就漏了。要认真防，官方示例里有个 blast-radius 可以参考：它先把危险命令扣住，把影响范围摆出来，再给你“继续”“取消”两个按钮
第六步：安全测试
搭到这里雨姐已经能用了，但要给别人用，还得先让 Claude Code 自己检查一遍。claude plugin validate 不运行代码，只读一遍源码，把这个 Mod 挂了哪些事件、调了哪些接口列出来，还会检查清单写得对不对。雨姐的是这样：
./register.tsx hooks: session.start, command.run{command=yujie}, command.run{command=yujie-talk}, command.run{command=yujie-bye}, prompt.compose, prompt.submit, tool.call{tool=Bash}, tool.call{tool=Edit|Write}, turn.complete, ui.render{component=AbovePrompt}, ui.render{component=Pane, requestId=yujie} ./register.tsx calls: $.command.register, $.state.get, $.state.set, $.ui.invalidate, $.ui.open, $.ui.resolve, $.ui.status, $.ui.toast一眼就能看出来：她会看命令、会画界面，但不联网、不读你的文件、也不调模型。发布前我加了 --strict，警告也当错误处理，把 marketplace 缺的一句描述补上才通过
光看静态分析还不够，我又写了三个自动化测试，用 claude plugin test 跑。测试里由我扮演 Claude Code，往雨姐身上发事件，看她怎么反应：
test('rm -rf is denied before the tool runs', async ($, on) => { let ran = 0 on('tool.call', () => { ran += 1; return { result: { stdout: '', stderr: '', interrupted: false } } }) const answer = await $.tool.call({ tool: 'Bash', command: 'rm -rf node_modules' }) expect(answer.deny).toContain('雨姐拦下') expect(ran).toBe(0) // 命令一次都没真跑 })另外两个测的是普通命令照常放行、/yujie-talk 能来回开关。测试不用登录、不联网，也不用开会话，几百毫秒跑完。它还真抓到一个 bug：雨姐拦命令时会顺手把面板拉到前面，可在测试和 claude -p 这种没有界面的环境里，这一下会报错。补一个 .catch 就好了
好事要分享
先把 Mod 从 ~/.claude/dev-mods/ 里拷出来。那是会话专属的临时目录，过一阵会被清理，只有当前会话能加载。拷出来之后，按给谁用，有四种分享方式：
给几个朋友：直接把文件夹或者打个 zip 发过去，对方用
claude --plugin-dir ./yujie跑一次，想一直用就放进~/.claude/skills/给团队：放进一个 git 仓库，加一个
marketplace.json，大家按名字安装、按命令更新给整个公司：管理员用托管设置统一装
给所有人：把仓库公开，或者提交到 Anthropic 的插件目录
我选了第二种，再把仓库公开。所谓 marketplace，就是仓库里 .claude-plugin/ 下多一个清单，写明这个“集市”叫什么、里面有哪些插件、从哪取：
{ "name": "yujie-mods", "description": "雨姐陪你写代码：一个 Claude Code Mod 示例", "owner": { "name": "De" }, "plugins": [{ "name": "yujie", "source": "./" }] }推到 GitHub 上，地址是 github.com/CocoSgt/yujie-mod，README 里写了它会做什么、在哪个版本上测过
雨姐 Mod 的 GitHub 仓库
别人装它只要两条命令：
claude plugin marketplace add CocoSgt/yujie-mod claude plugin install yujie@yujie-mods我换了一个干净的配置目录，从 GitHub 实际装了一遍，claude plugin list 里出现 yujie@yujie-mods，状态是已启用。之后要发新版，改 plugin.json 里的版本号再推上去，别人运行 claude plugin update 就能拿到。版本号不改，别人就一直停在旧版，因为 Claude Code 是按版本号缓存已装插件的
还有两点要注意。名字定了就别改，别人是按 名字@集市 装的，改了名等于换了一个插件；名字也别用 claude- 开头，validate 会直接拦下来。另外，事件和接口还会随版本变，所以 README 里最好写清楚你在哪个版本上测过
站在装的人这边，记住一条就行：Mod 不在沙箱里，它以你的身份运行，能读写你的文件、看到你的每一条提示词、替你批准工具调用。所以只装信得过的作者写的，装之前先把仓库克隆下来跑一遍 claude plugin validate，看看它的 hooks 和 calls 两行，心里就有数了
