10+年产品经理专注分享AI 工具、AI 资讯、AI Coding、Vibe Coding与下一代产品创新,按 Ctrl+D 收藏我们
关于我 留言板 标签云 排行榜

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI编程开发

Claude Code 开放 Mods:用 TypeScript 魔改 AI 编码工具界面和逻辑

47分钟前 AI编程开发 0 0

Claude Code 现在支持装 Mod 了,和 DeepSeek Harness 一样,你可以像给游戏打补丁一样,彻底魔改它的界面、操作逻辑甚至底层功能。DeepSeek 叫"插件",Claude Code 叫"Mod"。

Claude Code Mods

你可以自己写几行 TypeScript,也可以直接打字让 Claude 现场把 Mod 写出来并热加载生效。现在不管是拦截危险命令、在终端画出实时图表,还是逐行回放代码修改记录,都可以通过 Mod 轻松搞定。就连 Claude Code 自带的 /diff 和 AGENTS.md 支持,官方也已经改成了 Mod 实现。

Claude Code 之父 Boris Cherny 表示:现在只需要输入 Prompt,就能让 Claude 按照你想要的方式工作和展现。每个人的工作流都不同,没有理由让所有人都面对一模一样的 Claude。DeepSeek Harness 之父 Tianyi Cui 也第一时间围观点赞。

Boris Cherny 和 Tianyi Cui

官方演示:三个 Mod

Token Weather(上下文天气预报)

在输入框上方实时显示当前上下文窗口占用情况,并画出过去 12 轮交互的柱状图。占用低于 25% 显示晴天,67% 显示阵雨,超过 81% 显示暴风雨。

Blast Radius(爆炸半径拦截器)

防手抖神器。当 Claude 试图执行 rm -rf、git reset --hard 等高危命令时,系统自动暂停执行,并在侧边栏列出该命令会影响哪些文件,等待用户确认。

Replay Theater(修改回放影院)

记录 Claude 在一轮对话中做出的所有文件修改,输入 /replay 就能在侧边面板中逐步查看每处代码 Diff。

Mods 工作原理

Mod 本质上是 TypeScript 或 JavaScript 模块,运行在会话中,监听 Claude Code 产生的各种事件。每个事件发生时,所有 Mod 像中间件一样串联起来:

Mod 中间件架构

一个 Mod 钩子函数具备三种能力:Observe(观察)静默记录数据;Rewrite(重写)在数据传递前篡改;Answer(拦截并接管)直接返回结果不再往下执行。Mod 拥有和 Claude Code 本身完全相同的系统权限,没有沙箱隔离。

开发你的第一个 Mod

以 Token Weather 为例,约 80 行代码即可实现。创建插件目录结构,配置 plugin.json 和 hooks.json,在 hooks/token-weather.mjs 中监听 ui.render 事件绘制 UI,通过 $.session.usage() 获取上下文数据,利用 $.state 持久化数据以支持热重载。

验证与测试:

claude plugin validate ./token-weather
claude plugin test ./token-weather

进阶:Blast Radius 命令拦截

Blast Radius 监听 tool.call 事件,使用 $.process.run 安全调用 git status 预检,防止 Shell 注入。Mod 钩子有 10 秒超时限制,但在 $.process.run 内部等待时间不计入超时。终端窗口足够宽时开侧边面板,变窄时自动降级到输入框上方渲染。

Blast Radius 拦截界面

Replay Theater 改动追踪

利用 turn.start 和 turn.complete 归拢同一轮对话中的多次写入,写入前用 $.fs.read 抓取原内容精准算出 Diff,通过 $.command.register 注册自定义斜杠命令。

Replay Theater 界面

开发避坑指南

  • 善用自动生成的类型声明:每次加载 Mod,系统会在 .claude-plugin/types/ 生成最新类型定义
  • 组件参数在 e.props 里面,不要直接去 e 顶层获取
  • 状态存进 $.state,为热重载做准备,不要用模块内部闭包变量存历史数据
  • 遇事不决查日志:运行 claude --debug 查看组件校验失败报错

苏米注:Claude Code 开放 Mod 生态是一个重要信号——AI 编码工具正在从"黑盒"走向"可定制平台"。用户不再被动接受官方定义的工作流,而是可以自己定义交互方式。这对于深度使用 Claude Code 的开发者来说意义重大。DeepSeek Harness 之前已经做了类似的事情,但 Claude Code 的用户基数显然更大,这个功能可能会推动整个 AI 编码工具的插件化趋势。

Github:https://claude.dev/blog/getting-started-with-claude-code-mods/

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:Claude Code 开放 Mods:用 TypeScript 魔改 AI 编码工具界面和逻辑
#Claude Code #Mods #AI编码 #TypeScript #插件 
收藏 1
PostBot:开源免费的多平台内容一键分发工具,支持 16+ 平台
easyedit 开源项目:一条命令完成九阶段 AI 视频剪辑流水线
推荐阅读
  • GitHub-MCP-Server:开发必备自动化 AI 助手,从部署到实战
  • Claude Code 双更详解:Routines 云端自动化 + 桌面端多会话,AI 编程效率翻倍
  • 每周30小时深入使用Cursor后,关于Cursor Agent最佳实践与工作流程分享
  • Claude Code Desktop 接入第三方 API 完整教程:无需订阅,直接使用 GLM 等国产模型
  • 深度解析Cursor 0.5版本的 @folders 命令:提升代码开发效率的必备技能
评论 (0)
请登录后发表评论
分类精选
手把手教你用支付宝订阅 Cursor Pro:国内用户最全开通教程(附取消自动扣费)
33772 1年前
Claude Code Rules:claude.md文件配置完全指南
23217 1年前
手把手教你在VS Code & Cline/RooCode 中使用Kimi K2 模型,配置实录+开发实战体验
18161 1年前
学生党0元白嫖!手把手教你解锁Cursor Pro年VIP,超详细申请教程(附避坑指南)
16990 1年前
Claude Code + MCP 实战教程:手把手教你如何在Claude Code里面使用MCP
16852 1年前
Cursor进阶指南:如何解决Cursor上下文长度的限制超出后”降智“问题
16585 1年前
Cursor代码生成器中文使用教程,Cursor新手入门完全指南,全网最全面详细的Cursor使用教程
15021 1年前
Cursor 0.46更新,新增支持Claude 3.7 + GPT 4.5,Cursor Pro 无限续杯攻略,全自动化工具使用说明
14998 1年前
Claude Code 官方已支持Windows系统!手把手教你免费安装使用Claude Code
14937 1年前
一文搞懂所有模型,Cursor 模型选择终极指南:从入门到精通
12608 1年前

文章目录

关于苏米客
分类排行
1 Claude Code 开放 Mods:用 TypeScript 魔改 AI 编码工具界面和逻辑
2 电商视频提示词 Codex 插件:一键生成带货视频脚本和分镜
3 Baizhi Agent Toolkit:一个MCP解锁59个Tool,Codex开挂模式
4 Windows Codex用户必装:Cua Driver让AI操作电脑不再抢鼠标
5 Codex Sub-agent 多 Agent 协作架构源码解析:spawn_agent、消息通信与任务委派
6 Qoder 实测:从 Skill 验证到电子书架产品,一个下午的 AI 编程工作流
7 CrewAI 多智能体开发实践:在自治与确定性之间找到平衡
8 Claude Code 14条隐藏命令:6个月省200小时的开发技巧
9 免费大模型API配置指南:用New API整合四大平台实现token自由
10 Claude Code 插件系统详解:从技能打包到社区分发
苏米客
登录 注册
显示
没有账号? · 立即注册
显示
已有账号? · 直接登录
登录代表你已同意 用户协议 和 隐私政策
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6 网站地图 百度地图
微信文章助手 程序库 免费影视APP 免费字体下载 产品经理导航 爱克硕儿 产品经理AI资讯 Axure元件库下载 申请友联