普通视图

发现新文章,点击刷新页面。
今天 — 2026年3月2日首页

🦞别在 OpenClaw 上花冤枉钱了,这份小白指南手把手教你 1 分钟搞定

作者 Lin
2026年3月2日 21:00

火出圈的小龙虾 OpenClaw 不仅能帮人开发软件,还能自动定时总结邮件、设置 To-Do List。
巨大的热度让人靠「上门安装」的业务年入百万,而今天我们教你如何自己动手,不用畏惧黑底白字的终端窗口和代码,一分钟就能搞定。

在电脑上部署之后,它能直接接管你的键盘鼠标和文件。你只要在聊天软件里给它下需求,它就能自己动手干活。甚至有网友直接让它去邮件里找航班信息,顺手把选座值机也办了,一波操作看愣了不少人。

想让这么好用的 AI 助理 24 小时待命,本地部署确实是最好的选择。结果谁也没想到,它凭一己之力带火了 Mac mini。

但问题来了,为了一个免费开源的框架,特意花大几千买台新电脑,是不是有点 “为一碟醋包一顿饺子”?有没有更低成本的体验方式?

今天我们就来聊聊一个极简方案:通过 MiniMax 和 Kimi 这样的国内大模型平台,一键云端部署,直接把它拉进你的飞书聊天框。

过程不到一分钟

以 MiniMax 为例,整个过程不到一分钟。全程不需要你自己写代码、改配置文件,也不需要捣鼓什么端口反向代理,更不需要专门弄台电脑来维护。

具体怎么操作?

打开 MiniMax Agent 官网,点击侧边栏的「MaxClaw」,直接对它说 “我想接入到飞书”,它就会给你发步骤指引。跟着做就行:

第一步: 在飞书开放平台创建应用(建议用个人账号或新建企业号,省去审批),把 AppID 和 Secret 复制发回给 Claw。

第二步: 在飞书的权限管理页点击「批量导入」,把 MaxClaw 发来的代码整个替换进去。系统会提示你开启机器人能力,点确认。

第三步: 进入事件配置,把订阅方式改成「长连接」,勾选接收消息。接着去版本管理里随便填个版本号(比如 0.0.1)和更新日志,点保存发布。

最后,在飞书里给机器人发个消息,它会返回一串匹配码,把这串代码发回给网页端的 MaxClaw。

搞定,你的专属小龙虾就活过来了。是不是比想象中简单得多?

Kimi 的配置过程也大同小异。你只要负责搞定飞书里的应用和权限,Kimi 自己就能修改配置文件,遇到不懂的还能直接问它。

现在 Kimi 的手机 App 也上线了 Kimi Claw,你甚至可以直接在社区里玩网友用龙虾做的小游戏,或者一键制作同款。

普通牛马的赛博打工人

我搞定之后的第一件事,就是让它帮我整理当天的热点资讯。你在飞书发的消息,网页端会同步显示处理过程。对于我们科技编辑来说,这就相当于有了一个定制版的早报助手;

同样的,你也可以用它来追踪自己感兴趣的领域。

那如果是处理繁杂的工作呢?发个月度工作文档链接给它,或者直接开通云文档的访问权限,定好时间、标题和格式,它就能每个月自动帮你整理出一份详尽的工作月报。

至于开会,飞书妙记确实好用,但需要额外付费。

现在,你只需要把会议录音链接发给小龙虾,它马上就能把早会的每个要点给你列得清清楚楚。
除了我们体验过的用法,你还可以参考网友们的用例获取更多灵感,打造出更契合自己需求的龙虾助手。

OpenClaw 官网案例汇总:
https://openclaw.ai/showcase
网友整理的用例集合:
https://github.com/hesamsheikh/awesome-openclaw-usecases

对比本地部署,云端部署的版本确实没办法直接读取电脑里的本地文件,少了一些 “看着鼠标自己动” 的极客感。

但换个角度想,它不需要你折腾硬件,还能极其方便地接入飞书、钉钉等各种通讯软件。

每个月花一杯咖啡的订阅费,就能给自己雇一个随时待命的全能助理,帮你分担工作、节省大把时间。

这笔账算下来,难道不划算吗?

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


移动端开发稳了?AI 目前还无法取代客户端开发,小红书的论文告诉你数据

2026年3月2日 16:09

近期,由小红书联合多伦多大学等高校的研究人员发布了 《SWE-Bench Mobile》(2602.09540) 论文,内容主要是评估 LLM 智能体在处理真实生产级移动端应用开发任务时的能力,并提出了首个针对该领域的基准测试——SWE-Bench Mobile

这个论文对比之前那些简单的需求场景,明显更具备说服力,最重要的是,用真实的数据给目前的 AI 狂热浇一浇冷水

目前的编程基准测试大多集中在孤立的算法问题,而 SWE-Bench 则是关注 GitHub 上的 Bug 修复,然而真实的工业级移动端开发汪汪更为复杂:

  • 多模态输入:开发者需要根据产品需求文档(PRD)和 Figma 设计稿等来写代码
  • 复杂的工程环境:中大厂的移动端代码库通常规模巨大( 5GB 以上),且涉及 Swift 与 Objective-C 混编、特定系统 API 及复杂的 UI 交互,还有编译环境影响
  • 任务类型多样化:不限于 Bug 修复,更多是功能开发和 UI 增强

所以研究团队从目前小红书自己的真实产品流水线中提取了 50 个具有代表性的开发任务,构建了该基准测试:

  • 数据集组成

    • 50 个真实任务:源自实际的产品需求
    • 449 个人工验证的测试用例:平均每个任务 9.1 个测试点,用于评估功能正确性
    • 多模态支持:70% 的任务附带 Figma 设计链接,92% 附带参考图
  • 代码库规模:基于约 5GB 大小的真实 iOS 生产代码库(Swift/Objective-C)

  • 任务复杂度:平均每个任务涉及修改 4.2 个文件,远超之前的基准测试

整个基准的规则是:

  • 70% 任务包含 Figma
  • 92% 包含参考图片
  • 平均 PRD 长度 450 字

每个任务包含:

  • 一个统一 diff 补丁(patch)输出
  • 综合测试套件(平均 9.1 个测试案例)
  • 任务难度分级:从简单 UI 调整到复杂跨模块改造

对于任务两个关键指标:

  • 任务成功率:所有测试通过的任务比例
  • 测试通过率:所有测试案例通过的比率

而对于 LLM,论文评估了 22 种 不同的“智能体-模型”配置,涵盖了四个主流框架:

  • 商业智能体:Cursor、Codex (由 DeepSeek/OpenAI 等模型驱动)、Claude Code
  • 开源智能体:OpenCode

评估维度包括:任务完成率、任务复杂度影响、成本效果对比、多次运行稳定性、Prompt 设计影响等。

而根据论文可以得出结论:当前 AI 在生产级的软件工程力存在巨大局限性:

  • 成功率极低表现最好配置的成功率仅为 12% ,大多数任务以“实现不完整”告终,但测试通过率最高可到 28%,说明部分任务可以部分正确生成,但没能完全部署成功
  • 智能体架构十分重要 :同一个底层模型,在 Cursor 框架下的成功率为 12%,但在 OpenCode 下仅为 2%,智能体的工具调用、上下文管理等设计与模型本身同等重要
  • 商业模型占优:商业闭源智能体在处理大型代码库时的稳定性和正确性显著优于开源方案
  • 复杂度陷阱任务涉及 1-2 个文件时成功率为 18%,但当涉及 7 个以上文件时,成功率骤降至 2% ,显示出模型在跨文件长程推理方面的短板
  • “防御性编程”提示词更有效:研究发现,使用基于“防御性编程”(原则的简洁提示词,比复杂的提示词能让成功率提升 7.4%

对于失败,论文还针对失败类型归类:

  • 缺失关键功能标志位或 Feature Flag 是主要的失败原因
  • 其次是 数据模型缺失
  • 再者是 incomplete patch(文件覆盖不足)等问题

这些失败的类似,在一定程度上反映了智能体对真实工程流程、跨文件依赖、与视觉设计的理解严重不足,也就是这些问题是“工程级问题”,而不是“语言问题”:

所以哪怕换成 Android / Flutter,这类跨文件工程理解问题仍然存在。

基于这些数据,论文认为当前 LLM Agent 尽管在单一代码生成上有突破,但在端到端工程上下文(包含设计、代码库理解、工程流程)仍远未达到企业生产标准

另外,论文也有一个有趣的结论数据,主要统计了各 Agent + Model 的每任务成本(美元)和平均耗时(分钟),例如:

  • Cursor + Opus 4.5 : $3.50 / 15 min
  • Codex + GLM 4.6 : $1.30 / 13.3 min
  • OpenCode + GLM 4.6 : $0.13 / 32.5 min
  • OpenCode + Opus 4.5 : $9.33 / 8.2 min

对此可以看出来:

  • Codex + GLM 4.6 是性价比最高
  • OpenCode 极便宜但成功率低
  • OpenCode + Opus 4.5 是最贵但效果很差(2%)

最后,下图是论文的最终结果对比,例如在 Success 和 Pass 上:

  • Cursor + Opus 4.5 → 12% / 28.1%
  • Codex + GLM 4.6 → 12% / 19.6%
  • OpenCode + GLM 4.6 → 8%

这么看,OpenCode 的实际数据表现是真的一般。

这个在同一个模型,在不同 agent 上的成功率也有所体现,OpenCode 再一次被鞭尸:

所以,可以看出来,目前的 AI 智能体离独立完成中大型移动开发还有很大距离,主要瓶颈在于多模态理解、大规模代码导航和跨文件逻辑一致性等。

另外,SWE-Bench Mobile 采用了托管基准挑战(Hosted Benchmark)模式 ,不公开测试集答案,以防止数据泄露到未来的模型训练中。

最后,论文只针对原生 iOS 开发进行测试,没有测试 Android 原生、Flutter、RN 等其他情况,按照一般直觉,这些框架的 AI 表现应该会好于 iOS 原生,当然这也只是我的个人直觉,真实数据还是得有企业做过 Benchmark 才知道。

不过至少从目前看,在移动端开发领域写代码上,至少比前端安全性高一些?你怎么看?

发布了机器人和机器人手机,荣耀是个机器人公司了|MWC 2026

作者 周奕旨
2026年3月2日 16:21

年初的拉斯维加斯 CES 刚刚撤展,科技圈的目光就越过了大西洋,落在了巴塞罗那。

春节刚过,MWC 2026 正式拉开帷幕。相比于 CES 包罗万象的秀场感,MWC 的目光更多聚焦在移动智能设备上,可以说这场盛会,就是未来行业一整年的风向标。

在具身智能概念大热的当下,荣耀不仅带来了新的机器人,还带来了全新的「机器人手机」。

手机安上云台,影像合作阿莱

如果你有留意早前的 CES,大概会对展台上的那台 Robot Phone 有印象。

荣耀将手机背部的影像模组挖空了一半,装进了一套完整的云台结构。这套云台上方,覆盖着一块滑盖,这也是整个组件的物理开关。推开滑盖,云台整体通电,伴随着轻微的电机运转声,这颗镜头缓缓竖起,正式参与工作。

把立体的机械结构塞进寸土寸金的机身并不容易。荣耀的底气,来自这几年在折叠屏研发中攒下的材料学和高精度工程经验。荣耀声称,为了让云台顺畅运转,他们塞进了一颗业界最小的电机,体积比现有的微型电机大幅缩小了 70%。

有了结构基础,接下来是影像能力的堆叠。这套云台相机配备了一枚 2 亿像素的 CMOS 传感器。在 AI 的辅助下,它能牢牢锁定画面中的人物和物体,保持实时跟踪。配合 AI SpinShot 功能,镜头还能完成 180 度的平滑旋转。

除此之外,从现场的信息来看,Robot Phone 应该还有一颗超广角与一颗潜望长焦镜头,在滑盖推开后,超广角镜头可能会被挡住,而潜望长焦镜头则可以透过滑盖上的透明开孔继续工作。

随着 Robot Phone 的正式亮相,荣耀顺势宣布了与 ARRI 的合作,后者是享誉影视行业的电影摄像机品牌,以独特的色彩科学著称。荣耀将其电影标准和专业工作流程带入了移动影像领域,ARRI 的副总裁 Benedikt von Lindeiner 表示,是为了把自然色彩、轻柔的高光晕染和立体的光影质感带入移动影像,为荣耀的成片质感背书。

▲ 图片来自 @Y.M.Cinema

类手持云台这个形态来自大疆的 Pocket 手持云台相机,但将整个结构放在手机上后,想象空间也多了很多——

在 Robot Phone 上,云台成为了手机 AI 观察现实的视觉入口。从 MWC 现场的实际演示来看,AI 可以通过这颗镜头,获取手机前后的环境信息,读懂周围正在发生什么,并通过点头、摇头等「肢体动作」,与用户进行直观的交互。

荣耀 Robot Phone 预计将在今年下半年,于中国市场首发。

旗舰大折叠 Magic V6,厚度达标,电池超大

在 MWC 的展台上,除了形态破圈的 Robot Phone,荣耀还把当家大折叠 Magic V6 带到了聚光灯下。

初看过去,Magic V6 的长相和上一代没太大差别。依然是 7.95 英寸内屏搭配 6.52 英寸外屏,背面也还是熟悉的三摄组合。机身内部做了常规迭代,换上了骁龙 8 Elite Gen 5 芯片。

在外界最关心的厚度上,红、黑、金三款配色维持在 9 毫米,白色版折叠起来则是 8.75 毫米。这个账面数据,刚好压过了 8.9 毫米的三星 Galaxy Z Fold 7 一头。

但零点几毫米的差距,早就无法挑动用户的神经。当折叠屏手机的体积和手感无限逼近直板机时,驱动产品迭代的下一个痛点在哪里?

荣耀给出的解法很务实:在厚度之外,把防护、电池和屏幕体验打磨好。

先把目光放到机身防护上。面对精密复杂的机械铰链,水和灰尘一直是折叠屏的宿敌。Magic V6 这次支持 IP68/69 级防尘防水。相比于在防护上依然相对保守的三星 Galaxy Z Fold 7,荣耀直接将这项指标拉到了目前折叠屏品类的最高标准。

比防水更让人踏实的,是电池。

在厚度没有大幅增加的机身里,荣耀为 Magic V6 配备了一块 6660 mAh 的硅碳负极电池,并支持 80W 有线快充。时至今日,苹果与三星的旗舰直板机大多还在 5000 mAh 的门槛上徘徊,而对比更直接的竞品——三星 Galaxy Z Fold 7,则只有 4400 mAh,高达 2000 多毫安时的容量差,可以很大程度缓解折叠屏的续航焦虑。

回到用户每天盯着看最久的屏幕,体验盲区也在被逐一扫清。为了安抚视觉强迫症,荣耀宣称内屏折痕大幅减少了 44%。外屏则顺势换上了更抗造的纳米微晶玻璃。实用的防反光涂层与荣耀招牌的 4320Hz 高频 PWM 调光也悉数保留。

▲ 图片来自 @T3

Magic V6 另一个升级点是跨平台互通——搭载 Android 16 的 MagicOS 10 这次相当开放,能与 iPhone 或 Mac 无线互传文件,还能作为 Mac 的扩展副屏,甚至可以把消息直接推送到 Apple Watch 上。在跨越操作系统握手的大趋势下,荣耀紧紧跟上了队伍。

按照计划,Magic V6 将于本月 3 月 10 日在国内正式发布,爱范儿也拿到了这台手机,更多详细的日常体验,可以期待我们的后续评测。

手机品牌造机器人,正在成为新趋势

撇开脑洞大开的 Robot Phone 和迭代大折叠 Magic V6,荣耀在今年的 MWC 展台上,还带来了一个更具科幻味道的产品——荣耀机器人。

伴随着 Imagine Dragons 编排的《Believer》,机器人上台,与四位舞伴一起表演了一段舞蹈,还复刻了一段迈克尔·杰克逊的经典太空步。在节目表演后,荣耀机器人与荣耀 CEO 李健握手,并完成了一个后空翻,最后以单手撑地、单膝跪地的姿态落地。虽然最后这个后空翻在结尾时尚有些踉跄,但还算顺利地完成了整个表演。

花哨的后空翻终究只是用来秀肌肉的,荣耀给这台机器人的未来,圈定了三个极其务实的落地场景:购物协助、工作巡检以及情感陪伴。

为什么一家卖手机的公司要跑去造机器人?在李健看来,这是人类能力的延伸:

AI 必须进入真实的物理世界。如果说智能手机是人类思维的延伸,那么机器人,就是我们双手的延伸。

把视线拉宽,造机器人早已成为中国科技企业的一门显学。同样起家于手机的小米宣布了自己家的人形机器人 CyberOne,电动车品牌小鹏也将自家的人形机器人推出了圈。科技制造企业扎堆涌入机器人赛道,正在汇聚成趋势。

▲ 图片来自 @CNET

根据 Counterpoint Research 的数据,2025 年整年,荣耀市场占有率为 13.4%,排名第六,在手机这片早就杀成红海的存量阵地里,位次之争异常惨烈。

单靠常规的直板机型死磕参数,已经很难让厂家建立品牌护城河。荣耀显然清楚,想要在牌桌上拿下更多筹码,就必须立住「先锋探索者」的人设。带有实验性质的 Robot Phone,以及科幻感拉满的人形机器人,就是他们拉升品牌势能最锋利的武器。

▲ 图片与数据来自 @Counterpoint Research

另一方面,纵观荣耀在今年 MWC 上打出的牌,更清晰地看到在 AI 时代,这个手机品牌的理解——向物理世界要答案。

过去的十几年,随着智能手机的进化,人们热衷于将一切搬到屏幕里、搬到云上。但到了 2026 年初春的这个节点,AI 逐渐成为常态化的基础设施。单靠屏幕背后的代码,已经很难再讲出让人兴奋的新故事了。

Robot Phone 给冰冷的算法装上了可以转动的脖子,人形机器人让 AI 长出了双手和双脚,跨度极大的产品,实际上都在指向同一个朴素的行业观察:算力,不能永远只停留在玻璃板背后。

十多年前,初代 iPhone 凭借一块多点触控屏抹平了实体键盘,把几乎所有的交互都封印在了玻璃之下,开启了轰轰烈烈的移动互联时代。而现在,以荣耀为代表的中国厂商们,正在把那些被收走的物理结构、具象的「躯体」,重新拿回到台面上。

让我有个美满旅程

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


Everything Claude Code 文档

作者 王小酱
2026年3月2日 15:17

一、项目概述

Everything Claude Code(ECC) 是一个 AI Agent 工作框架性能优化系统,由 Anthropic Hackathon 获奖者 Affaan Mustafa 开发,历经 10 个月以上的生产环境实战积累。

它不只是配置文件的集合,而是一套完整的系统,包含:

  • Skills(技能):可复用的工作流定义
  • Instincts(直觉):持续学习,自动从会话中提取模式
  • Memory Optimization(记忆优化):跨会话上下文持久化
  • Security Scanning(安全扫描):AgentShield 集成,102 条规则
  • Research-first Development(研究优先开发):先调研再编码

支持平台:Claude Code、Codex CLI、Cursor IDE、OpenCode、Cowork 及其他 AI Agent 工作框架。


二、核心架构

目录结构总览

everything-claude-code/
├── .claude-plugin/         # 插件和市场清单(plugin.json, marketplace.json)
├── agents/                 # 13 个专业子代理(.md 文件)
├── .agents/skills/         # 技能定义(SKILL.md + openai.yaml)
├── commands/               # 32 个斜杠命令(.md 文件)
├── rules/                  # 编码规范(common/ + typescript/ + python/ + golang/)
├── hooks/                  # 触发式自动化(hooks.json + 脚本)
├── scripts/                # 跨平台 Node.js 脚本
├── contexts/               # 动态系统提示注入上下文
├── examples/               # CLAUDE.md 配置示例(Next.js、Go、Django 等)
├── mcp-configs/            # MCP 服务器配置(GitHub、Supabase、Vercel 等)
├── .cursor/                # Cursor IDE 适配层
├── .codex/                 # Codex CLI 适配层
├── .opencode/              # OpenCode 适配层
└── docs/                   # 完整文档

三、快速开始(2 分钟上手)

步骤一:安装插件(推荐)

# 添加为市场源
/plugin marketplace add affaan-m/everything-claude-code

# 安装插件
/plugin install everything-claude-code@everything-claude-code

或者直接在 ~/.claude/settings.json 中添加:

{
  "extraKnownMarketplaces": {
    "everything-claude-code": {
      "source": {
        "source": "github",
        "repo": "affaan-m/everything-claude-code"
      }
    }
  },
  "enabledPlugins": {
    "everything-claude-code@everything-claude-code": true
  }
}

步骤二:安装规则(必须手动)

⚠️ Claude Code 插件系统不支持自动分发规则文件,需手动安装。

git clone https://github.com/affaan-m/everything-claude-code.git
cd everything-claude-code

# 使用安装脚本(推荐)
./install.sh typescript          # TypeScript 项目
./install.sh python              # Python 项目
./install.sh typescript python   # 多语言项目

# 针对 Cursor
./install.sh --target cursor typescript

步骤三:开始使用

# 规划新功能
/everything-claude-code:plan "Add user authentication"

# 查看所有可用命令
/plugin list everything-claude-code@everything-claude-code

安装完成后你即可使用:13 个 Agents + 56 个 Skills + 32 个 Commands


四、核心模块详解

4.1 Agents(专业子代理)—— 13 个

Agent 描述
planner 功能实现规划
architect 系统设计决策
tdd-guide 测试驱动开发指导
code-reviewer 代码质量与安全审查
security-reviewer 漏洞分析(OWASP Top 10)
build-error-resolver 构建错误修复
e2e-runner Playwright E2E 测试
refactor-cleaner 死代码清理
doc-updater 文档同步更新
go-reviewer Go 代码审查
go-build-resolver Go 构建错误修复
python-reviewer Python 代码审查
database-reviewer 数据库/Supabase 审查

调用示例:

/everything-claude-code:plan "Add OAuth authentication"  # 触发 planner
/code-review                                              # 触发 code-reviewer
/security-scan                                            # 触发 security-reviewer

4.2 Skills(技能库)—— 56+ 个

Skills 是可复用的工作流定义,按领域分类:

通用开发:

  • coding-standards — 语言最佳实践
  • tdd-workflow — TDD 方法论(先写测试,80% 覆盖率)
  • security-review — 安全检查清单
  • eval-harness / verification-loop — 验证循环评估
  • search-first — 先调研再编码工作流
  • api-design — REST API 设计与分页、错误响应
  • deployment-patterns — CI/CD、Docker、健康检查、回滚

前端:

  • frontend-patterns — React、Next.js 模式
  • frontend-slides — 零依赖 HTML 演示文稿(含 PPTX 转换)
  • e2e-testing — Playwright E2E 测试 + Page Object Model

后端 & 数据库:

  • backend-patterns — API、数据库、缓存模式
  • clickhouse-io — ClickHouse 分析查询
  • postgres-patterns — PostgreSQL 优化
  • database-migrations — Prisma、Drizzle、Django、Go 迁移
  • docker-patterns — Docker Compose、网络、卷、容器安全

Python / Django:

  • django-patterns / django-security / django-tdd / django-verification
  • python-patterns / python-testing

Java Spring Boot:

  • springboot-patterns / springboot-security / springboot-tdd / springboot-verification
  • java-coding-standards / jpa-patterns

Go:

  • golang-patterns / golang-testing

Swift / iOS:

  • swift-actor-persistence — 基于 Actor 的线程安全数据持久化
  • swift-protocol-di-testing — 协议依赖注入可测试 Swift 代码
  • liquid-glass-design — iOS 26 Liquid Glass 设计系统
  • foundation-models-on-device — Apple 设备端 LLM
  • swift-concurrency-6-2 — Swift 6.2 并发特性

C++:

  • cpp-coding-standards — C++ Core Guidelines
  • cpp-testing — GoogleTest + CMake/CTest

学习与优化:

  • continuous-learning / continuous-learning-v2 — 自动从会话提取模式(含置信度评分)
  • strategic-compact — 手动压缩建议
  • cost-aware-llm-pipeline — LLM 成本优化、模型路由、预算追踪
  • iterative-retrieval — 子代理的渐进式上下文精炼

内容创作(新增):

  • article-writing — 无 AI 腔调的长文写作
  • content-engine — 多平台社交内容工作流
  • market-research — 带来源标注的市场研究
  • investor-materials — 融资 Pitch Deck、备忘录、财务模型
  • investor-outreach — 个性化融资外联与跟进

4.3 Commands(斜杠命令)—— 32 个

开发流程:

命令 用途
/plan "..." 创建功能实现计划
/tdd 强制执行 TDD 工作流
/code-review 审查代码变更
/build-fix 修复构建错误
/e2e 生成 E2E 测试
/refactor-clean 清除死代码
/security-scan 安全漏洞扫描
/test-coverage 测试覆盖率分析

Go 专项:

命令 用途
/go-review Go 代码审查
/go-test Go TDD 工作流
/go-build 修复 Go 构建错误

多代理编排:

命令 用途
/multi-plan 多代理任务分解
/multi-execute 编排多代理工作流
/multi-backend 后端多服务编排
/multi-frontend 前端多服务编排
/multi-workflow 通用多服务工作流
/pm2 PM2 服务生命周期管理
/orchestrate 多代理协调

持续学习系统:

命令 用途
/learn 会话中提取模式
/learn-eval 提取、评估并保存模式
/instinct-status 查看已学习的直觉(含置信度)
/instinct-import <file> 导入他人直觉
/instinct-export 导出直觉供分享
/evolve 将相关直觉聚类为技能

其他实用命令:

命令 用途
/checkpoint 保存验证状态
/verify 运行验证循环
/eval 按标准评估
/sessions 会话历史管理
/update-docs 更新文档
/skill-create 从 Git 历史生成技能
/setup-pm 配置包管理器

4.4 Hooks(触发式自动化)

Hooks 在工具事件发生时自动触发,示例:

{
  "matcher": "tool == \"Edit\" && tool_input.file_path matches \"\\.(ts|tsx|js|jsx)$\"",
  "hooks": [{
    "type": "command",
    "command": "grep -n 'console\\.log' \"$file_path\" && echo '[Hook] Remove console.log' >&2"
  }]
}

内置 Hook 脚本(Node.js,全平台兼容):

  • session-start.js — 会话开始时自动加载上下文
  • session-end.js — 会话结束时自动保存状态
  • pre-compact.js — 压缩前保存状态
  • suggest-compact.js — 建议压缩时机
  • evaluate-session.js — 从会话中提取模式

4.5 Rules(编码规范)

按语言分目录组织,安装时按需选择:

rules/
├── common/            # 通用原则(必装)
│   ├── coding-style.md    # 不可变性、文件组织
│   ├── git-workflow.md    # Commit 格式、PR 流程
│   ├── testing.md         # TDD、80% 覆盖率要求
│   ├── performance.md     # 模型选择、上下文管理
│   ├── patterns.md        # 设计模式
│   ├── hooks.md           # Hook 架构
│   ├── agents.md          # 子代理委托时机
│   └── security.md        # 强制安全检查
├── typescript/        # TypeScript/JavaScript 专项
├── python/            # Python 专项
└── golang/            # Go 专项

五、生态工具

5.1 AgentShield — 安全审计工具

Anthropic x Cerebral Valley Hackathon(2026年2月) 上构建,1282 个测试,98% 覆盖率,102 条静态分析规则。

# 快速扫描(无需安装)
npx ecc-agentshield scan

# 自动修复安全问题
npx ecc-agentshield scan --fix

# 深度分析(三个 Opus 4.6 代理:红队/蓝队/审计员)
npx ecc-agentshield scan --opus --stream

# 从零生成安全配置
npx ecc-agentshield init

扫描范围: CLAUDE.md、settings.json、MCP 配置、hooks、agent 定义、skills,覆盖 5 大类别:

  • 密钥检测(14 种模式)
  • 权限审计
  • Hook 注入分析
  • MCP 服务器风险评估
  • Agent 配置审查

输出格式: 终端彩色(A-F 评级)、JSON(CI 管道)、Markdown、HTML。

--opus 模式会运行三个 Claude Opus 4.6 代理组成红队/蓝队/审计员流水线:攻击者寻找漏洞链,防御者评估保护,审计员综合出优先级风险报告。这是对抗性推理,而非单纯的模式匹配。

在 Claude Code 中直接运行:/security-scan

5.2 Skill Creator — 技能生成器

方式 A:本地分析(内置)

/skill-create                  # 分析当前仓库
/skill-create --instincts      # 同时生成直觉

方式 B:GitHub App(高级)

适用于 10k+ commits、自动 PR、团队共享:

  • 安装:github.com/marketplace…
  • 在任意 Issue 中评论:/skill-creator analyze
  • 支持 push 到主分支时自动触发

5.3 持续学习系统 v2

/instinct-status    # 查看已学习的直觉及置信度
/instinct-import    # 导入他人的直觉
/instinct-export    # 导出自己的直觉分享给团队
/evolve             # 将相关直觉聚类成可复用技能

六、多平台支持详情

6.1 各平台功能对比

功能 Claude Code Cursor IDE Codex CLI OpenCode
Agents ✅ 13 个 共享(AGENTS.md) 共享 ✅ 12 个
Commands ✅ 33 个 共享 指令式 ✅ 24 个
Skills ✅ 50+ 共享 10 个 ✅ 37 个
Hook 事件数 8 种 15 种 ❌ 暂不支持 11 种
Rules ✅ 29 条 ✅ 29 条(YAML) 指令式 13 条
MCP 服务器 ✅ 14 个 共享 4 个 完整
自定义工具 通过 Hook 通过 Hook ✅ 6 个原生

6.2 Cursor IDE 快速接入

./install.sh --target cursor typescript
./install.sh --target cursor python golang swift

Cursor 的 Hook 使用 DRY 适配器模式,adapter.js 将 Cursor 的 stdin JSON 转换为 Claude Code 格式,复用现有脚本无需重写。

关键 Hook:

  • beforeShellExecution — 阻止在 tmux 外启动开发服务器,审查 git push
  • afterFileEdit — 自动格式化 + TypeScript 检查 + console.log 警告
  • beforeSubmitPrompt — 检测提示词中的密钥(sk-ghp_AKIA 等)
  • beforeTabFileRead — 阻止读取 .env.key.pem 文件

6.3 Codex CLI 快速接入

cp .codex/config.toml ~/.codex/config.toml
codex  # AGENTS.md 自动被检测

⚠️ Codex CLI 暂不支持 Hooks(GitHub Issue #2109,430+ 赞),安全策略通过 persistent_instructions 和沙箱权限系统实现。

6.4 OpenCode 快速接入

npm install -g opencode
opencode  # 从仓库根目录运行,自动检测 .opencode/opencode.json

OpenCode 的插件系统比 Claude Code 更强大,支持 20+ 事件类型(包括 file.editedmessage.updatedlsp.client.diagnostics 等)。


七、Token 优化指南

推荐配置(加入 ~/.claude/settings.json

{
  "model": "sonnet",
  "env": {
    "MAX_THINKING_TOKENS": "10000",
    "CLAUDE_AUTOCOMPACT_PCT_OVERRIDE": "50",
    "CLAUDE_CODE_SUBAGENT_MODEL": "haiku"
  }
}
设置 默认值 推荐值 效果
model opus sonnet 约降低 60% 成本
MAX_THINKING_TOKENS 31,999 10,000 约降低 70% 隐藏推理成本
CLAUDE_AUTOCOMPACT_PCT_OVERRIDE 95 50 更早压缩,长会话质量更好

日常工作流命令

命令 使用时机
/model sonnet 默认,适用于大多数任务
/model opus 复杂架构设计、深度调试
/clear 切换到无关联任务时(免费、即时重置)
/compact 完成里程碑后、开始下一任务前
/cost 监控会话中的 Token 消耗

上下文窗口管理

⚠️ 不要同时启用所有 MCP 服务器。 每个 MCP 工具描述都会消耗 200k 上下文窗口中的 Token,可能将可用上下文压缩到 ~70k。

// 在项目 .claude/settings.json 中禁用不需要的 MCP
{
  "disabledMcpServers": ["supabase", "railway", "vercel"]
}

建议:每个项目启用 不超过 10 个 MCP,活跃工具不超过 80 个


八、典型工作流示例

开发新功能

# 1. 规划
/everything-claude-code:plan "Add user authentication with OAuth"
# → planner 代理创建实现蓝图

# 2. 测试驱动开发
/tdd
# → tdd-guide 强制先写测试

# 3. 代码审查
/code-review
# → code-reviewer 检查回归问题

修复 Bug

# 1. 写一个能复现 bug 的失败测试
/tdd
# → tdd-guide:先写失败测试

# 2. 实现修复,验证测试通过

# 3. 审查
/code-review
# → code-reviewer:捕获潜在回归

上线前检查

/security-scan      # → 安全漏洞审计(OWASP Top 10)
/e2e                # → 关键用户流程 E2E 测试
/test-coverage      # → 验证 80%+ 覆盖率

代理选择速查表

我想要... 使用命令 调用代理
规划新功能 /plan "Add auth" planner
系统架构设计 /plan + 架构师模式 architect
TDD 写代码 /tdd tdd-guide
审查刚写的代码 /code-review code-reviewer
修复失败构建 /build-fix build-error-resolver
E2E 测试 /e2e e2e-runner
安全漏洞扫描 /security-scan security-reviewer
清理死代码 /refactor-clean refactor-cleaner
更新文档 /update-docs doc-updater
审查 Go 代码 /go-review go-reviewer
审查 Python 代码 /python-review python-reviewer

九、版本更新历史

v1.7.0(2026年2月)— 跨平台扩展 + 演示文稿构建器

  • Codex app + CLI 支持 — 基于 AGENTS.md 的直接 Codex 支持
  • frontend-slides 技能 — 零依赖 HTML 演示文稿构建器,含 PPTX 转换指导
  • 5 个新通用业务技能article-writingcontent-enginemarket-researchinvestor-materialsinvestor-outreach
  • 更广泛的工具覆盖 — Cursor、Codex 和 OpenCode 支持更完善
  • 992 内部测试 — 扩展了插件、Hooks、技能和打包的验证覆盖

v1.6.0(2026年2月)— Codex CLI、AgentShield 与市场

  • Codex CLI 支持 — 新增 /codex-setup 命令生成 codex.md
  • 7 个新技能search-firstswift-actor-persistenceswift-protocol-di-testingregex-vs-llm-structured-text
  • AgentShield 集成/security-scan 可直接运行 AgentShield(1282 测试,102 规则)
  • GitHub Marketplace — ECC Tools GitHub App 上线,含免费/专业/企业层级
  • 30+ 社区 PR 合并

v1.4.0(2026年2月)— 多语言规则、安装向导 & PM2

  • 交互式安装向导configure-ecc 技能提供引导式设置
  • PM2 & 多代理编排 — 6 个新命令
  • 多语言规则架构common/ + typescript/ + python/ + golang/
  • 中文(zh-CN)翻译 — 80+ 文件完整翻译
  • GitHub Sponsors 支持

v1.3.0(2026年2月)— OpenCode 插件支持

  • 完整 OpenCode 集成 — 12 个代理、24 个命令、16 个技能(含 Hook 支持)
  • 3 个原生自定义工具run-testscheck-coveragesecurity-audit
  • LLM 文档llms.txt 提供完整 OpenCode 文档

v1.2.0(2026年2月)— 统一命令 & 技能

  • Python/Django 支持 — Django 模式、安全、TDD、验证技能
  • Java Spring Boot 技能 — 模式、安全、TDD、验证
  • 会话管理/sessions 命令
  • 持续学习 v2 — 基于直觉的学习,含置信度评分

十、系统要求

  • Claude Code CLI:最低版本 v2.1.0+
  • 检查版本claude --version

⚠️ 贡献者注意:不要在 .claude-plugin/plugin.json 中添加 "hooks" 字段。Claude Code v2.1+ 会从已安装插件自动加载 hooks/hooks.json,显式声明会导致重复检测错误(详见 Issue #29、#52、#103)。


十一、常见问题

Q:如何查看已安装的 agents/commands?

/plugin list everything-claude-code@everything-claude-code

Q:Hooks 不工作 / 出现"Duplicate hooks file"错误? 检查 .claude-plugin/plugin.json 中是否有 "hooks" 字段,有则删除。

Q:上下文窗口迅速缩小? 禁用未使用的 MCP 服务器(见第七节),保持活跃 MCP 不超过 10 个。

Q:可以只使用部分组件吗? 可以,使用手动安装方式(Option 2),按需复制文件。每个组件完全独立。

Q:如何贡献新技能? Fork 仓库 → 在 skills/your-skill-name/SKILL.md 创建技能(含 YAML frontmatter)→ 提交 PR。

昨天 — 2026年3月1日首页

UI UX Pro Max:AI 驱动的专业级 UI/UX 设计智能体实战教程

作者 光影少年
2026年3月1日 09:28

一句话总结ui-ux-pro-max-skill 不是一个普通的设计插件,而是一个嵌入式 AI 设计智能体AI Skill,它将专业 UI/UX 知识库直接注入你日常使用的 AI 编程助手(如 Cursor、Claude、Copilot 等),让你在写代码的同时,自动生成符合行业规范、美学原则与平台最佳实践的高质量界面。

一、为什么我们需要 UI UX Pro Max?

在当前 AI 编程工具爆发式增长的背景下,开发者已经可以借助 Copilot、Cursor、Windsurf 等工具快速生成基础代码。然而,当我们尝试让这些通用 AI 帮助我们“设计一个好看的页面”时,往往会遇到以下问题:

  • 生成的 UI 风格陈旧(比如还在用 Bootstrap 3 的卡片样式)
  • 配色混乱,缺乏品牌一致性
  • 字体搭配随意,影响可读性
  • 表格、图表等复杂组件交互逻辑缺失
  • 移动端适配差,无障碍支持为零

这些问题的本质在于:通用大模型没有经过结构化的 UI/UX 专业知识训练,它们知道“HTML 怎么写”,但不知道“SaaS 后台仪表盘应该怎么设计”。

ui-ux-pro-max-skill 正是为解决这一痛点而生。它不是一个独立应用,而是一个可嵌入的 AI 技能包(AI Skill),通过将数千个优秀设计案例、行业规范、色彩系统、字体组合等知识结构化后注入到你的 AI 助手中,使其在生成 UI 代码时具备“专业设计师”的判断力。


二、传统 AI 工具 vs UI UX Pro Max:本质差异在哪?

❌ 传统 AI(如 Copilot 原生、通义灵码等)的局限:

  1. 通用性强,专业性弱 能生成基础 HTML/CSS,但缺乏对设计趋势(如 Glassmorphism)、行业配色(如 Fintech 蓝金系)、无障碍规范的理解。
  2. 无上下文感知 你写“做一个 SaaS 登录页”,它可能返回一个过时的 Bootstrap 风格,而非现代 Tailwind + 深色模式 + 微交互动效。
  3. 无法联动设计系统 字体搭配混乱、间距不一致、色彩对比度不达标,需人工反复调整。
  4. 输出不可控 每次生成结果差异大,难以形成统一的产品语言。

✅ UI UX Pro Max 的突破:

维度 传统 AI UI UX Pro Max
知识源 通用训练数据 结构化专业数据库(57 种 UI 风格 + 95 套行业配色 + 56 组字体组合)
响应方式 盲目生成 先匹配场景 → 再推荐设计系统 → 最后生成代码
平台适配 无差别输出 支持 React/Next.js/Vue/SwiftUI/Flutter 等 8 大技术栈专属规范
可集成性 独立工具 作为“技能”无缝嵌入主流 AI 编程助手
输出一致性 随机波动 基于同一套设计语言,保证跨页面一致性
可维护性 代码杂乱 自动清理冗余样式,遵循原子化 CSS 原则

核心理念:不是取代设计师,而是让开发者在编码阶段就具备“专业 UI 设计师”的决策能力。


三、真实使用体验:一次完整的重设计对话

为了让大家更直观地理解它的价值,我分享一段我在 Cursor IDE 中的真实使用记录。

背景

我正在开发一个内部监控系统,名为“接口哨兵”,包含两个核心页面:

  • 异常列表页:展示 API 异常调用记录
  • 数据分析:可视化错误率、响应时间等指标

这两个页面目前是临时搭建的,样式粗糙,信息层级混乱,急需专业级重构。

操作步骤

  1. 在 Cursor 中启用 ui-ux-pro-max-skill(安装方法见下文)
  2. 在聊天窗口输入:

“帮我重新设计一下列表和数据分析页”

AI 的回复(原样复制):

代码语言:javascript


AI代码解释

我会按 ui-ux-pro-max 的流程来做:先用内置 search.py 快速拿一套适合“内部质效/监控类 Dashboard”的风格方案(配色/字体/图表/表格交互),然后把它落地到「异常列表」和「数据分析」两页(统一信息层级、间距、链接展示、状态标签与空态),最后再检查一遍可读性与响应式。

并且自己建了3条TODO-LIST:
1. 重设计「接口哨兵-异常列表」:信息层级、筛选区、表格密度、链接展示、空态与编辑交互统一
2. 重设计「接口哨兵-数据分析」:卡片分区、图表视觉规范(配色/网格/tooltip/slider)、高频case表格呈现
3. 清理无用代码/样式并修复可能的lint问题

我的感受

  • 专业感极强:它没有直接甩代码,而是先分析场景(“内部质效/监控类 Dashboard”),这说明它真的理解业务上下文。
  • 结构化思维:自动拆解任务为可执行的 TODO,极大降低认知负担。
  • 细节关注:提到“空态”“状态标签”“tooltip”等 UX 关键点,远超普通 AI 的能力。

随后,它逐项完成了上述任务,生成的代码不仅美观,还包含:

  • 使用 Inter 作为主字体(高可读性)
  • 表格行高设为 48px(符合移动端最小点击区域)
  • 错误状态用 #ef4444(WCAG AA 对比度合规)
  • 图表配色采用深蓝 + 青绿渐变(科技感 + 数据可信度)

最终效果:原本需要 1-2 天的手工调整,现在 20 分钟内完成,且质量更高。


四、功能全景:它到底能做什么?

🎨 1. 智能风格推荐(57 种预设)

  • 输入关键词如 “SaaS 后台”、“电商商品页”、“医疗健康 App”

  • 自动匹配最合适的视觉风格:

    • Glassmorphism(毛玻璃效果,适合社交/创意类)
    • Neumorphism(软拟物,适合工具类)
    • Bento Grid(模块化卡片,适合数据仪表盘)
    • Brutalism(粗野主义,适合极客产品)
    • Dark Mode Professional(深色专业风,适合监控/金融)

🎨 2. 行业专属配色系统(95 套)

行业 主色 辅色 应用场景
SaaS #3b82f6(科技蓝) #8b5cf6(渐变紫) 控制台、设置页
E-commerce #f97316(活力橙) #ffffff(白底) 商品列表、购物车
Fintech #0f172a(深空黑) #f59e0b(金色) 交易看板、资产页
Healthcare #0ea5e9(宁静蓝) #10b981(生态绿) 健康数据、预约系统

所有配色均通过 WebAIM Contrast Checker 验证,确保文本可读性。

🔠 3. 专业字体搭配(56 组)

  • 自动组合 Google Fonts 字体对,例如:

    • Inter + JetBrains Mono(现代 SaaS 首选)
    • Manrope + Space Mono(数据密集型界面)
    • Figtree + IBM Plex Mono(优雅企业级应用)
  • 自动生成 <link>@import 语句,并设置 font-display: swap 避免 FOIT(字体闪烁)

📊 4. 数据可视化建议

根据数据类型智能推荐图表:

  • 趋势分析 → 带区域填充的折线图(Area Chart)
  • 占比分布 → 环形图(Doughnut Chart,比饼图更现代)
  • 多维对比 → 分组柱状图 + 悬停 tooltip
  • 实时监控 → 动态流图(Streaming Graph)

同时提供 Recharts / Chart.js / ApexCharts 的合规实现模板。

♿ 5. UX 与无障碍合规

  • 自动应用 WCAG 2.1 标准:

    • 文本与背景对比度 ≥ 4.5:1
    • 所有交互元素有 :focus-visible 样式
    • 图标按钮附带 aria-label
    • 表单字段关联 <label>
  • 移动端优化:

    • 最小点击区域 48×48px
    • 触摸目标间距 ≥ 8px
    • 禁用 user-select: none 防止误操作

五、如何上手?5 分钟极速集成(手把手教程)

无论你是前端新手还是资深工程师,只要按以下步骤操作,即可立即获得专业级 UI 生成能力。

前提条件

  • 已安装 Node.js(v16+)
  • 已安装 Python 3.x(用于运行内置的 search.py 脚本)
  • 使用支持 AI 插件的编辑器(推荐:Cursor、VS Code + Copilot Chat、Windsurf)

步骤 1:全局安装 CLI 工具

打开终端,执行:

代码语言:javascript


AI代码解释

npm install -g uipro-cli

如果提示权限错误,可加 sudo(Mac/Linux)或以管理员身份运行(Windows)。

验证安装成功:

代码语言:javascript


AI代码解释

uipro --version
# 输出类似:uipro-cli v1.2.3

步骤 2:进入你的项目目录

代码语言:javascript


AI代码解释

cd your-project-folder

注意:必须在已有前端项目的根目录下操作(包含 package.json)。


步骤 3:初始化对应 AI 助手

根据你使用的 AI 工具,选择以下命令之一:

✅ Cursor 用户(推荐)

代码语言:javascript


AI代码解释

uipro init --ai cursor
✅ GitHub Copilot Chat 用户

代码语言:javascript


AI代码解释

uipro init --ai copilot
✅ Claude(via Cursor 或 Poe)

代码语言:javascript


AI代码解释

uipro init --ai claude
✅ Windsurf 用户

代码语言:javascript


AI代码解释

uipro init --ai windsurf
✅ 全部支持(如果你不确定)

代码语言:javascript


AI代码解释

uipro init --ai all

执行后,CLI 会自动:

  • 下载 ui-ux-pro-max-skill 的知识库(约 15MB)
  • 在项目根目录创建 .uipro/ 文件夹
  • 生成 search.py 脚本(用于本地语义搜索)
  • 注入提示词模板到 AI 上下文

步骤 4:在编辑器中使用

在 Cursor 中:

打开聊天侧边栏

输入指令前加上技能标识:

代码语言:javascript


AI代码解释

/ui-ux-pro-max 创建一个电商商品详情页

或直接描述需求:

“用 Next.js 14 App Router 重构我们的用户管理页面,要求深色主题、响应式表格、带搜索和分页”

在 VS Code + Copilot Chat 中:

打开 Copilot 聊天窗口

输入:

代码语言:javascript


AI代码解释

/ui-ux-pro-max 设计一个医疗健康 App 的首页
在 Windsurf 中:

直接对话即可,Windsurf 会自动识别 .uipro/ 目录并加载技能。


常见指令模板(可直接复制使用)

代码语言:javascript


AI代码解释

/ui-ux-pro-max 重做登录页,要求现代感、带动画、支持深色模式

六、落地实战:从需求到生产代码(完整流程)

项目背景

为一家金融科技初创公司开发内部监控系统“接口哨兵”,包含:

  • 异常列表页:展示失败 API 调用
  • 数据分析页:可视化错误率、P95 延迟等指标

第一步:明确需求

“用 React + Tailwind 重做这两个页面,要求专业、可信、深色主题,适合工程师日常使用。”

第二步:调用 UI UX Pro Max

在 Cursor 中输入:

“/ui-ux-pro-max 重设计「接口哨兵」的异常列表和数据分析页,深色主题,Fintech 风格”

第三步:AI 的处理流程(自动执行)

  1. 场景识别 通过 search.py 匹配到 “Internal Monitoring Dashboard” 模板,启用:

    • 配色:slate-900(背景) + amber-400(强调色)
    • 字体:Inter(正文) + JetBrains Mono(代码片段)
    • 布局:Bento Grid + 卡片分区
  2. 异常列表页设计

    • 行高 48px
    • 状态标签:成功(green)、警告(yellow)、错误(red)
    • 链接:蓝色下划线 + hover 效果
    • 筛选区:固定顶部,紧凑布局(节省垂直空间)
    • 表格:
    • 空态:插画 + “暂无异常” 提示 + “刷新” 按钮
  3. 数据分析页设计

    • 折线图:青绿色渐变(#0ea5e9 → #00c6ff)
    • 网格线:slate-700
    • Tooltip:深色背景 + 白色文字
    • 卡片分区:4 个核心指标(错误率、延迟、吞吐量、成功率)
    • 图表:
    • 高频 Case 表格:固定列宽,支持横向滚动
  4. 代码生成与优化

    • 使用 clsx 管理动态类名
    • 提取公共组件:StatusBadge, DataTable, MetricCard
    • 自动删除未使用的 Tailwind 类
    • 添加 ESLint/Fix 建议

第四步:查看生成结果

异常列表页关键代码片段:

代码语言:javascript


AI代码解释

// components/ExceptionList.tsx
import { StatusBadge } from '@/components/ui/StatusBadge';

export default function ExceptionList() {
  return (
    <div className="bg-slate-900 text-slate-100 p-6 rounded-xl">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-amber-400">API 异常列表</h1>
        <div className="flex gap-3">
          <input 
            type="text" 
            placeholder="搜索接口..." 
            className="bg-slate-800 border border-slate-700 rounded px-3 py-2"
          />
          <select className="bg-slate-800 border border-slate-700 rounded px-3 py-2">
            <option>全部状态</option>
            <option>错误</option>
            <option>警告</option>
          </select>
        </div>
      </div>

      {data.length === 0 ? (
        <div className="text-center py-12">
          <div className="text-slate-500 mb-4">✅ 一切正常</div>
          <button className="text-amber-400 hover:underline">手动触发检测</button>
        </div>
      ) : (
        <table className="w-full">
          <thead>
            <tr className="text-left text-slate-400 text-sm">
              <th className="pb-3">接口</th>
              <th className="pb-3">状态</th>
              <th className="pb-3">时间</th>
              <th className="pb-3">操作</th>
            </tr>
          </thead>
          <tbody>
            {data.map(item => (
              <tr key={item.id} className="border-t border-slate-800 hover:bg-slate-850">
                <td className="py-3">
                  <a href="#" className="text-blue-400 hover:underline">{item.endpoint}</a>
                </td>
                <td><StatusBadge status={item.status} /></td>
                <td>{formatTime(item.timestamp)}</td>
                <td>
                  <button className="text-slate-400 hover:text-white">详情</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}
数据分析页图表配置:

代码语言:javascript


AI代码解释

// lib/chartConfig.ts
export const errorRateChart = {
  chart: {
    background: 'transparent',
    toolbar: { show: false }
  },
  colors: ['#0ea5e9', '#00c6ff'],
  stroke: { width: 2, curve: 'smooth' },
  xaxis: {
    labels: { style: { colors: '#94a3b8' } },
    axisBorder: { color: '#334155' }
  },
  yaxis: {
    labels: { style: { colors: '#94a3b8' } },
    min: 0
  },
  grid: {
    borderColor: '#334155',
    strokeDashArray: 3
  },
  tooltip: {
    theme: 'dark',
    x: { format: 'dd MMM yyyy' }
  }
};

第五步:效果验证

  • 视觉一致性:两页面使用同一套颜色、间距、字体
  • 开发效率:从 8 小时 → 45 分钟
  • 用户体验:工程师反馈“终于不像临时页面了”

七、高级技巧:最大化你的生产力

技巧 1:自定义设计系统

你可以在 .uipro/custom.yaml 中覆盖默认配置:

代码语言:javascript


AI代码解释

brandColor: "#6366f1"  # 自定义主色
fontPrimary: "Manrope"
spacingUnit: 8         # 8px 基准网格

技巧 2:批量重设计

代码语言:javascript


AI代码解释

uipro batch --pages "src/pages/dashboard,src/pages/users"

自动扫描指定目录,生成重设计建议。

技巧 3:与 Figma 协同

虽然它不直接连接 Figma,但你可以:

  1. 在 Figma 中导出颜色/字体变量
  2. 将其填入 custom.yaml
  3. 让 AI 生成完全一致的代码

八、资源与社区支持

  • 官方文档ui-ux-pro-max-skill.nextlevelbuilder.io
  • GitHub 仓库:github.com/nextlevelbuilder/ui-ux-pro-max-skill(MIT 开源)
  • Star 数:2.4k+(截至 2026 年 1 月)
  • Discord 社群:500+ 开发者实时交流

九、结语:让每个开发者都拥有“设计超能力”

在 AI 编程助手普及的今天,真正的生产力差距不再是谁会写代码,而是谁能让 AI 写出“专业级”代码。 UI UX Pro Max 正是填补这一鸿沟的关键工具——它让每个开发者,都拥有一位随叫随到的 UI/UX 专家。

立即行动

代码语言:javascript


AI代码解释

npm install -g uipro-cli && cd your-project && uipro init --ai cursor

下一次你在 Cursor 中输入 /ui-ux-pro-max 时,就是在调用一个由数千个优秀设计案例训练出的智能体。

从此,告别“丑页面”,拥抱“专业级 UI”,只需一条指令。

编程最强的模型,竟然变成了国产的它

作者 张拭心
2026年3月1日 11:37

f4bafcaa0f5b323a57ec23714eb0732d.jpg OpenRouter 是一个聚合了上百个模型的 API 调用平台,每周和每月会发布一次模型排行榜。

最近这个榜单的格局,变了。

ffe4b0322de8efcbf5cd39d588e3e83c.jpg

本月「模型排行榜」的前 10 名里,国产模型占了 4 席:
第 1 名 MiniMax M2.5(5.26T tokens)
第 2 名 Kimi K2.5(4.23T tokens,环比增长 5221%)
第 4 名 DeepSeek V3.2
第 8 名 GLM-5

90058b205e814a6daf95781fa28f7e93.jpg 而「编程排行榜」的前 10 名里,国产模型同样有 4 个:
第 1 名 MiniMax M2.5
第 2 名 GLM-5
第 4 名 MiniMax M2.1
第 5 名 Kimi K2.5

出乎意料的是,国产的 MiniMax M2.5 成为了本月 AI 模型榜单的整体第一名,包括编程领域!

它的核心优势有两点:

bfa1a95d6904d3e0398ea7dd488b1687.png

  1. 编程能力还不错:M2.5 的 SWE-Bench Verified 得分 80.2%,编程能力接近行业顶尖;Multi-SWE-Bench(多语言编程)达到 51.3%。端到端完成一个 SWE-Bench 任务只需 22.8 分钟,比 Claude Opus 4.6 的 22.9 分钟还快 0.1。

2.价格实惠:token 费用是 Claude Sonnet 4.6的六分之一左右。98/月可以满足常规使用,再不够还有其他档位。

让我欣喜的是,从中外模型格局上看,国产模型的编程能力已经逐渐进入国际前列,相信用不了多久,我们就可以打破「国外模型更好」的迷信,期待那一天!

你使用哪个模型更多?欢迎留言讨论~

# 我的 Agent 开发转型完整经历

Claude Code 创始人 Boris 揭秘:团队 10 倍效率技巧

作者 王小酱
2026年2月28日 23:00

核心观点

当 AI 成为程序员的标配,真正拉开差距的不是工具本身,而是使用方式。

Boris(Claude Code 创始人)首次公开团队内部使用手册,这些技巧来自 Claude Code 核心团队的真实工作场景,可以让工作效率比以前高出 5–10 倍。他的原话颇具代表性:

"我已有 6 个月没写过一行 SQL 代码了。"


十大效率技巧

1. 并行作业:构建多线程作战环境

这是团队给出的 Top 1 建议。

同时开启 3–5 个 git 工作树(worktree),每个运行独立的 Claude 会话:

  • 一个 Claude 负责重构代码
  • 一个 Claude 负责写测试
  • 一个 Claude 负责分析日志

进阶技巧: 给工作树命名并设置 shell 别名(如 zazbzc),一键切换不同任务环境。也可专门维护一个「分析专用」工作树,只用来跑 BigQuery 和看日志。


2. 计划模式(Plan Mode):复杂任务必须先规划

团队铁律:每个复杂任务都从计划模式开始,而不是直接编码。

  • 把精力投入计划阶段,让 Claude 一次性完美实现
  • 进阶玩法: 让一个 Claude 写方案,开第二个 Claude 扮演「主任架构师」审核
  • 避坑指南: 代码一旦跑偏,立刻跳回 Plan Mode 重新规划,而不是反复打补丁

3. CLAUDE.md:让 AI「记住」你的所有规则

这是 Claude 的长期记忆系统,也是普通用户最容易忽视的一点。

每次 Claude 犯错后,在反馈末尾加上:

Update your CLAUDE.md so you don't make this mistake again.

Boris 透露,Claude 非常擅长给自己写规则。持续迭代 CLAUDE.md 文件直到错误率显著下降。有经验的工程师甚至让 Claude 为每个任务/项目维护专门的笔记目录,每次 PR 后更新,并在 CLAUDE.md 中引用这些笔记。


4. 重复的事,一定要变成 Skill

原则:如果某件事每天重复做超过两次,就该把它写成 Skill,提交到 git,在所有项目间复用。

真实案例:

  • /techdebt:每天结束前扫描重复代码
  • 一个 Slash Skill:同步 7 天的 Slack / GDrive / Asana / GitHub 数据
  • 数据工程 Agent:写 dbt、Review、测试

Claude Code 的威力,不在「对话」,而在可复用能力的积累。


5. 90% 的 Bug,Claude 可以自己修

Claude 团队修 Bug 的方式非常「反直觉」——不要去教 Claude 怎么 fix,让 Claude 自己决定。

操作示例:

  • 开 Slack MCP,把一个 Bug 讨论串丢给 Claude,只说一个字:fix
  • 或者直接:Go fix the failing CI tests.(不指定步骤、不微操)
  • 分布式系统中:直接把 docker logs 给 Claude 分析

6. 提升 Prompt 技巧:从「请示」到「挑战」

不要只会求 AI 帮写代码,要学会「挑战」它,像对待高级同事一样协作。

三个改变游戏规则的 Prompt 技巧:

  1. 角色反转审查"证明给我看这能工作",让 Claude 对比主分支和功能分支的行为差异
  2. 优雅重构"已知目前所有条件,把这个垃圾删了,重写一个优雅的方案。"
  3. 详细规格:提前编写详细规格说明,减少歧义——你越具体,输出质量越高

示例 Prompt:"质问我这些变更,直到我通过你的测试才创建 PR。"


7. 终端环境优化:工具配置决定效率上限

Claude Code 团队的偏爱配置:

  • 终端:Ghostty(同步渲染、24-bit 颜色、Unicode)
  • 状态栏:用 /statusline 显示当前 git 分支 + Context 使用率
  • 多任务:tmux / 多 tab,每个标签对应一个任务/worktree,并对标签进行颜色编码和命名

一个被严重低估的技巧:语音输入。 说话比打字快 3 倍,Prompt 质量反而更高。


8. 子代理(Subagents):更多算力,但不污染主上下文

使用原则:

  • 在任何请求后加「使用子代理」,让 Claude 投入更多算力
  • 把单个任务卸载给子代理,保持主代理的上下文窗口干净聚焦
  • 通过 hook 将权限请求路由到 Opus 4.5,自动扫描并批准安全请求,实现权限管理自动化

9. 数据分析:告别手写 SQL 的时代

Claude 团队几乎已经不用手写 SQL

  • 使用 Claude Code 调用 bq 命令行工具即时拉取和分析指标
  • 在代码库中维护 BigQuery 技能,团队每个成员直接在 Claude Code 中进行分析查询
  • 这种方法适用于任何有 CLI、MCP 或 API 的数据库

实战示例:"帮我分析上周用户增长异常的原因"——AI 会自动写 SQL、拉数据、出图表、给结论。


10. 用 Claude 学习:而不只是让它干活

Claude 团队内部的学习用法:

  • /config 中开启「Learning / Explanatory」输出模式,让 Claude 解释改动背后的原因
  • 对于不熟悉的代码,让 Claude 生成可视化 HTML 演示文稿
  • 要求 Claude 绘制新协议和代码库的 ASCII 图表,帮助理解
  • 构建间隔重复学习 Skill(你讲 → 它追问 → 存储)

Claude 不只是生产工具,也是放大理解力的杠杆。


总结

Boris 在开头就强调:使用 Claude Code 没有唯一正确的方式,每个人的设置都不同。

这 10 条技巧只是起点,真正的效率提升来自于:

  • 大胆实验,找到适合自己工作流的方式
  • 持续迭代,不断优化技能和配置
  • 分享交流,从团队中汲取智慧

AI 时代的编程,拼的不是打字速度,而是定义问题的边界以及调度算力的能力。

结合OpenSpec 与 Everything-Claude-Code (ECC) 的构建团队工作流程

作者 王小酱
2026年2月28日 21:06

一、两者定位本质差异

这两个项目解决的是 AI 辅助开发流程中完全不同层面的问题,理解这一点是最关键的。

OpenSpec 解决的是 "做什么"(What) 的问题 —— 它是一个规格驱动开发(Spec-Driven Development)框架。核心理念是:在 AI 写代码之前,先让人和 AI 就需求规格达成共识。它通过 proposal → specs → design → tasks 的制品(artifact)依赖图来管理每一个变更的完整生命周期。

ECC 解决的是 "怎么做"(How) 的问题 —— 它是一个AI 编码助手的配置工具箱。核心理念是:提供一整套生产就绪的 agents、skills、hooks、commands、rules 和 MCP 配置,让 Claude Code(以及 Cursor/OpenCode/Codex)的执行能力最大化。

打个比方:OpenSpec 相当于项目经理的需求管理系统,ECC 相当于开发者的瑞士军刀。


二、核心机制对比

OpenSpec 的核心机制

OpenSpec 的核心是一个 制品依赖图引擎(Artifact DAG)。每个变更(change)被组织为一个独立文件夹,包含四类制品:

proposal.md 记录意图和范围,specs/ 通过 Delta 格式(ADDED/MODIFIED/REMOVED)描述行为变化,design.md 记录技术方案和架构决策,tasks.md 则是带复选框的实施清单。这些制品形成有向无环图的依赖关系,状态通过文件系统存在性自动检测(BLOCKED → READY → DONE)。

它的 OPSX 工作流打破了传统线性阶段的限制,采用流动式操作:你可以在实施过程中随时回头修改设计,不存在阶段门禁。同时它支持 24+ AI 编码工具(Claude Code、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Kiro 等),做到了真正的工具无关性。

特别值得一提的是它的 Delta Spec 概念 —— 不是重写整个规格,而是描述变化量,这对存量项目(brownfield)极其友好。变更完成后通过 archive 操作将 delta 合并回主规格,形成持续演进的系统行为文档。

ECC 的核心机制

ECC 是一套模块化的配置组件库,包含 13 个专用子代理(planner、architect、tdd-guide、code-reviewer、security-reviewer 等),56 个 skills 覆盖前后端模式、持续学习、安全审计等领域,32 个斜杠命令(/plan、/tdd、/code-review、/e2e 等),以及 hooks 系统实现会话记忆持久化、自动格式化、战略性上下文压缩等自动化行为。

它的 Instinct 持续学习系统(v2)是亮点:自动从会话中提取模式,赋予置信度评分,支持跨团队导入导出,并可通过 /evolve 命令将相关直觉聚合为技能。

此外 ECC 的 AgentShield 安全扫描器(1282 个测试、102 条规则)可以扫描你的 AI 配置(CLAUDE.md、hooks、MCP 等)中的漏洞和注入风险,甚至支持三个 Opus 代理的红队/蓝队/审计流水线。


三、各自优缺点

OpenSpec

优点: 工具无关性是它最大的战略优势。支持 24+ AI 工具意味着团队不会被锁定在某个特定 IDE 或 AI 提供商上,前端用 Cursor、后端用 Claude Code 的团队可以共享同一套规格流程。Delta Spec 机制为存量项目提供了优雅的增量规格管理。自定义 schema 能力让团队可以定义自己的制品类型和依赖关系,比如加入 research 步骤。作为 npm 包分发(openspec init 一条命令初始化)降低了团队推广门槛。同时,制品文件夹结构天然支持 Git 版本控制和代码评审。

缺点: 它不涉及代码执行层面的优化,不提供 agent、hook 或 coding skill。对于小型快速迭代任务(hotfix、小 bug)流程可能显得重。需要团队养成写规格的习惯,存在文化适配成本。它也没有 token 优化、上下文管理、会话持久化等运行时增强能力。

ECC

优点: 开箱即用的生产级配置经过了实际产品构建的验证(Anthropic 黑客松获奖作品)。token 优化策略具体且实用(模型选择、thinking token 限制、compaction 阈值),能显著降低成本。多语言 rules 架构(common/ + typescript/ + python/ + golang/)适配不同技术栈。Instinct 学习系统让团队经验可以积累和传承。AgentShield 安全扫描填补了 AI 配置安全性的空白。同时跨平台支持(Claude Code、Cursor、Codex CLI、OpenCode)也相当完善。

缺点: 以 Claude Code 为主要目标,对其他工具的支持虽在扩展但存在功能差距。缺少需求-设计-实施的结构化流程管理,/plan 命令只是调用 planner agent 生成蓝图,不像 OpenSpec 那样有制品依赖图和生命周期管理。配置项繁多(56 skills + 32 commands),新用户需要时间理解哪些组件适合自己。Rules 无法通过插件自动分发(Claude Code 平台限制),需要手动安装。


四、最佳实践姿势

OpenSpec 最佳实践

适合的场景是中大型功能、跨团队协作、需要需求对齐的工作。推荐的流程是:对于明确需求用 /opsx:propose 快速启动然后 /opsx:apply 实施;对于模糊需求先用 /opsx:explore 探索再决定方案;保持每个 change 聚焦于一个逻辑单元;archive 前用 /opsx:verify 验证实现与规格的一致性。

命名规范也很重要:用 add-dark-mode、fix-login-redirect 这种描述性名称,避免 feature-1、wip 这种模糊命名。

ECC 最佳实践

token 管理是关键:默认使用 sonnet,只在复杂架构推理时切换 opus;将 MAX_THINKING_TOKENS 设为 10000,CLAUDE_AUTOCOMPACT_PCT_OVERRIDE 设为 50;MCP 服务器保持 10 个以内,工具总数 80 以内。

工作流模式上:新功能用 /plan → /tdd → /code-review 三步走;修复 bug 先用 /tdd 写失败测试再修复;发布前用 /security-scan + /e2e + /test-coverage 三重验证。任务之间用 /clear 重置上下文,逻辑断点处用 /compact 压缩。


五、面向公司前后端团队的整合方案

基于对两者的深入分析,我推荐的整合策略是 OpenSpec 做流程骨架 + ECC 做执行引擎,两者互补而非替代。

第一层:需求与规格管理(OpenSpec)

在项目根目录执行 openspec init 初始化,所有非 trivial 的功能开发都从 /opsx:propose 或 /opsx:explore 开始。前端和后端开发者在同一个 openspec/changes/ 目录下协作,但各自维护各自领域的 specs(如 specs/api/、specs/ui/)。利用 OpenSpec 的工具无关性,让用不同 IDE 的团队成员共享同一套规格流程。

第二层:编码执行增强(ECC)

在每个开发者的环境中安装 ECC 插件并配置对应语言的 rules(前端装 common/ + typescript/,后端根据栈选择 python/ 或 golang/)。利用 ECC 的 agents 体系:planner 和 architect 辅助 OpenSpec 的 proposal 和 design 阶段,tdd-guide 和 code-reviewer 在 /opsx:apply 实施阶段提供质量保障。配置 token 优化策略统一降本。

第三层:质量与安全闭环

实施完成后,用 /opsx:verify 验证规格一致性(OpenSpec),同时用 ECC 的 /security-scan、/test-coverage、/e2e 进行技术层面验证。用 AgentShield 定期扫描团队的 AI 配置安全性。

第四层:知识积累与传承

利用 ECC 的 Instinct 系统自动学习团队模式,定期 /instinct-export 导出分享。OpenSpec 的 archive 机制自动积累系统行为规格,新人 onboard 时直接阅读 openspec/specs/ 了解系统当前行为。

推荐的完整工作流

一个典型的功能开发流程如下:

  1. PM/开发者启动 → /opsx:explore(OpenSpec,厘清需求)
  2. 需求明确后 → /opsx:propose(OpenSpec,生成 proposal + specs + design + tasks)
  3. 前后端评审制品 → 在 Git PR 中 review openspec/changes/feature-name/
  4. 实施阶段 → /opsx:apply + ECC 的 /tdd/code-review(OpenSpec 管进度,ECC 保质量)
  5. 验证阶段 → /opsx:verify + /security-scan + /e2e
  6. 完成归档 → /opsx:archive(delta specs 合并回主规格)

这套方案的核心价值是:OpenSpec 确保团队在写代码前达成共识(减少返工),ECC 确保写代码时效率和质量最大化(降低成本)。两者结合覆盖了从需求到交付的完整 AI 辅助开发链路。

昨天以前首页

从 Next.js 完全迁移到 vinext 的实战踩坑指南

作者 HashTang
2026年2月27日 13:46

一次真实项目从 Next.js (Cloudflare Pages) 迁移到 vinext (Cloudflare Workers) 的全过程记录,涵盖构建、部署、运行时、国际化、认证等 16+ 个坑位及其解决方案。

项目简介

本文基于开源项目 edge-next-starter 的真实迁移经验撰写。

edge-next-starter 是一个面向 Cloudflare 全栈开发的 Next.js 生产级启动模板,集成了 D1 数据库、R2 对象存储、KV 缓存、better-auth 认证、next-intl 国际化、Stripe 支付等企业级能力,开箱即用。项目采用 Repository 模式 + Edge Runtime 架构设计,所有代码均运行在 Cloudflare Workers 全球边缘网络上。

GitHub: github.com/TangSY/edge… ⭐ 欢迎 Star

背景与动机

2026 年 2 月 24 日,Cloudflare 发布了一篇震动 Web 开发社区的博客:How we rebuilt Next.js with AI in one week。一名 Cloudflare 工程师 Steve Faulkner 使用 Anthropic 的 Claude AI 模型,仅花费约 1100 美元的 token 费用,在一周内从零重建了 Next.js 94% 的 API。产物就是 vinext(发音 "vee-next")—— 一个基于 Vite 构建的 Next.js 替代实现,专门针对 Cloudflare Workers 优化。

Cloudflare CTO Dane Knecht 称之为「Next.js 的解放日」。项目绝大部分代码由 AI 编写,人类负责架构方向、优先级和设计决策。

vinext 相比传统的 @cloudflare/next-on-pages 或 OpenNext 方案,有以下显著优势:

  • 原生 Workers 部署:不再需要逆向工程 Next.js 的构建输出,一条命令直接部署
  • Vite 构建:取代 Turbopack/webpack,生产构建速度最高提升 4 倍
  • 更小的 bundle:客户端包体积最高缩小 57%
  • 开发环境一致性vite dev 直接在 Workers 运行时中运行,可以测试 D1、KV、Durable Objects 等平台 API
  • RSC 原生支持:完整的 React Server Components、流式渲染、Server Actions 支持

但 vinext 仍处于实验阶段(🚧 Experimental),迁移过程远非一帆风顺 — 本文记录了我们在真实生产项目中遇到的 16 个坑位

项目技术栈

组件 技术
框架 Next.js App Router (RSC)
运行时 Cloudflare Workers (Edge Runtime)
数据库 Cloudflare D1 (SQLite)
ORM Prisma + @prisma/adapter-d1
认证 better-auth (从 NextAuth v5 迁移)
国际化 next-intl (en/zh)
存储 Cloudflare R2
缓存 Cloudflare KV
包管理 pnpm

迁移概览

整个迁移涉及 25 个 commits,修改了 50+ 个文件。问题主要集中在以下几个维度:

构建阶段 ─── Prisma Client 模块解析 (3 次迭代)
          └── Wrangler 配置格式转换

运行时 ───── ESM 导入方式变更
          ├── Proxy 导出签名
          ├── 环境变量访问方式
          └── NextURL 只读属性

框架兼容 ─── Middleware matcher 语法
          ├── notFound() 错误处理
          ├── RSC 条件导出
          ├── .rsc 请求处理
          └── Link 组件 vs 原生 <a>

认证系统 ─── DateInt 类型转换
          ├── OAuth State 清理查询
          ├── VerificationToken 主键
          ├── String ↔ Int ID 转换
          └── emailVerified BooleanInt

第一关:Vite 构建 — Prisma Client 解析

症状pnpm build 失败,报 No such module ".prisma/client/default"

原因:Prisma 生成的客户端使用 .prisma/client/default 作为裸模块标识符 (bare specifier)。虽然它以 . 开头,但并不是相对路径 — Node.js 会从 node_modules 中解析它。Vite 把它当作相对路径处理,找不到模块后将其标记为 external,导致 Workers 运行时报错。

踩坑过程(3 次迭代):

第一次:resolve.alias(失败)

// vite.config.ts — 第一次尝试
export default defineConfig({
  resolve: {
    alias: {
      '.prisma/client/default': resolve(import.meta.dirname, 'node_modules/.prisma/client/wasm.js'),
    },
  },
});

问题import.meta.dirname 在 Vite 编译 TypeScript 配置时,可能解析到临时目录而非项目根目录,导致 CI 环境路径错误。

第二次:process.cwd()(部分成功)

// 改用 process.cwd()
'.prisma/client/default': resolve(
  process.cwd(),
  'node_modules/.prisma/client/wasm.js'
),

问题:在 pnpm 的 store 布局下,.prisma/client/wasm.js 不在 node_modules 直接目录中,ENOENT 错误。

第三次:Vite resolveId 插件(最终方案)

function prismaClientResolve(): Plugin {
  const _require = createRequire(import.meta.url);
  let prismaDir: string | null = null;

  // 策略 1: 项目根目录直接查找
  const directPath = resolve(process.cwd(), 'node_modules', '.prisma', 'client');

  // 策略 2: 从 @prisma/client 包位置反向查找(兼容 pnpm store)
  let pnpmPath: string | null = null;
  try {
    const prismaClientPkg = _require.resolve('@prisma/client/package.json');
    pnpmPath = resolve(dirname(prismaClientPkg), '..', '..', '.prisma', 'client');
  } catch {}

  // 选择第一个存在的路径
  for (const candidate of [directPath, pnpmPath].filter(Boolean) as string[]) {
    if (existsSync(candidate)) {
      prismaDir = candidate;
      break;
    }
  }

  return {
    name: 'prisma-client-resolve',
    enforce: 'pre',
    resolveId(source) {
      if (!source.startsWith('.prisma/client')) return null;
      if (!prismaDir) return null;

      const subpath = source === '.prisma/client' ? '' : source.slice('.prisma/client/'.length);

      if (subpath === 'default' || subpath === '') {
        // 优先使用 wasm.js(Workers WASM 引擎)
        const wasmPath = resolve(prismaDir, 'wasm.js');
        if (existsSync(wasmPath)) return wasmPath;

        // 回退到 default.js
        const defaultPath = resolve(prismaDir, 'default.js');
        if (existsSync(defaultPath)) return defaultPath;
      }
      return null;
    },
  };
}

关键点

  • 使用 createRequire@prisma/client 的实际位置反向定位 .prisma/client
  • existsSync 检查避免路径猜测
  • 优先 wasm.js(Workers 兼容)而非 default.js(Node.js 专用)

第二关:Wrangler 配置 — Pages → Workers 格式转换

症状:部署到 Cloudflare 后,环境变量显示为 "preview" 而非 "production"

原因:vinext 使用 Workers 部署(wrangler deploy),但项目的 wrangler 配置还是 Cloudflare Pages 格式。

修改前(Pages 格式):

pages_build_output_dir = ".vercel/output/static"

修改后(Workers 格式):

main = "dist/server/index.js"
no_bundle = true

# vinext 的构建产物是预打包的,告诉 Wrangler 不要重新用 esbuild 打包
[[rules]]
type = "ESModule"
globs = ["**/*.js", "**/*.mjs"]

[assets]
not_found_handling = "none"
directory = "dist/client"

关键点

  • no_bundle = true 是必须的,否则 Wrangler 会用 esbuild 重新打包 vinext 的构建产物,遇到 .prisma/client/default 外部导入时直接报错
  • [[rules]] ESModule 类型声明让 Wrangler 正确处理 vinext 输出的 ES Module 文件
  • [assets] 替代 pages_build_output_dir,指向 vinext 的客户端构建产物

第三关:Workers 运行时 — ESM 与 Proxy 导出

症状:部署后访问任何页面返回 500,Workers 日志无明显错误

问题 1cloudflare:workers 模块必须用静态 ESM 导入

// ❌ 错误 — CJS 动态导入在 Workers 中不工作
const { env } = require('cloudflare:workers');

// ✅ 正确 — 静态 ESM 导入
import { env as cloudflareEnv } from 'cloudflare:workers';

问题 2:vinext 要求 proxy 使用命名导出而非默认导出

// ❌ 错误 — Next.js middleware 的默认导出
export default function middleware(req) { ... }

// ✅ 正确 — vinext 要求命名导出 { proxy }
export async function proxy(req: NextRequest) { ... }

Vitest 兼容cloudflare:workers 在测试环境中不存在,需要 mock:

// vitest.cloudflare-stub.ts
export const env = {};
export default { env };

// vitest.config.ts
resolve: {
  alias: {
    'cloudflare:workers': resolve(__dirname, 'vitest.cloudflare-stub.ts'),
  },
}

第四关:Middleware → Proxy — matcher 语法不兼容

症状:所有页面返回 404,/en 路径抛出 Error 1101(next-intl locale context 缺失)

原因:vinext 的 matchMiddlewarePath 实现中对 matcher pattern 做了 .replace(/\./g, "\\.") 处理。这会破坏 Next.js 标准的正则表达式 matcher:

// Next.js 标准 matcher(包含正则语法)
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\..*).*)'],
};
// 经过 vinext 的 .replace 后变成:
// /((?!api|_next/static|_next/image|.*\\.\\..*)\\..*)
// 完全无法匹配任何路径 → proxy 永远不执行

解决方案:使用 vinext 支持的 :param 语法:

export const config = {
  matcher: ['/:path*'],
};
// vinext 将 :path* 转换为 (?:.*) → 匹配所有路径

附带说明:在 Workers 中不需要排除 _next/static 等静态资源路径,因为 Cloudflare CDN 在请求到达 Worker 之前就会直接提供静态文件。但为了安全,我们在 proxy 中增加了静态文件扩展名检测:

const STATIC_EXTENSIONS =
  /\.(ico|png|jpg|jpeg|gif|svg|webp|css|js|map|woff2?|ttf|eot|webmanifest|txt|xml|json)$/i;

export async function proxy(req: NextRequest) {
  if (STATIC_EXTENSIONS.test(req.nextUrl.pathname)) {
    return NextResponse.next();
  }
  // ...
}

第五关:next-intl — NextURL.port 只读属性

症状:访问任何页面抛出 TypeError: Cannot set property port which has only a getter

原因next-intlcreateIntlMiddleware 内部会修改 NextURL 对象的 port 属性。在标准 Next.js 中 NextURL.port 是可读写的,但 vinext 的 Workers 运行时将其实现为只读 getter。

解决方案:用轻量级的自定义 i18n 路由处理器替代 createIntlMiddleware

function handleI18nRouting(req: NextRequest): NextResponse {
  const { locales, defaultLocale } = routing;
  const pathname = req.nextUrl.pathname;

  // 路径已包含 locale 前缀,直接通过
  const hasLocale = locales.some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );
  if (hasLocale) return NextResponse.next();

  // 从 Accept-Language 检测首选 locale
  const acceptLanguage = req.headers.get('accept-language') || '';
  let detectedLocale = defaultLocale;
  for (const locale of locales) {
    if (acceptLanguage.toLowerCase().includes(locale)) {
      detectedLocale = locale;
      break;
    }
  }

  // 使用原生 URL 重定向(避免 NextURL setter 问题)
  const url = new URL(req.url);
  url.pathname = `/${detectedLocale}${pathname}`;
  return NextResponse.redirect(url);
}

关键点:使用 new URL(req.url) 而非 req.nextUrl.clone(),因为后者会触发 NextURL 的 setter 逻辑。


第六关:环境变量 — cloudflare:workers vs process.env

症状:认证功能在本地开发正常,部署后报 CLIENT_ID_AND_SECRET_REQUIRED

原因:通过 wrangler secret put 设置的密钥(如 GOOGLE_CLIENT_IDNEXTAUTH_SECRET),只能通过 cloudflare:workersenv 绑定访问,不会出现在 process.env 中。

// ❌ 在 Workers 中永远是 undefined
const secret = process.env.NEXTAUTH_SECRET;

// ✅ 正确方式
import { env as cloudflareEnv } from 'cloudflare:workers';
const secret = (cloudflareEnv as Record<string, unknown>).NEXTAUTH_SECRET;

最终方案:创建统一的环境变量解析函数:

function getEnvVar(key: string): string | undefined {
  // 优先从 Cloudflare Workers 绑定读取
  const cfEnv = cloudflareEnv as Record<string, unknown>;
  if (cfEnv?.[key]) return String(cfEnv[key]);
  // 回退到 process.env(本地开发、测试环境)
  return process.env[key];
}

第七关:notFound() 异常 — NEXT_NOT_FOUND 未捕获

症状:某些页面间歇性返回 500,日志显示 NEXT_NOT_FOUND 异常

原因:vinext 在错误恢复时会用 undefined params 重新渲染 locale layout。代码中的 notFound()(来自 next/navigation)抛出 NEXT_NOT_FOUND 错误,但 vinext 不会像标准 Next.js 那样捕获它,导致整个 RSC 渲染链崩溃。

// ❌ vinext 中不工作
export default async function LocaleLayout({ params }: Props) {
  const { locale } = await params;
  if (!routing.locales.includes(locale)) {
    notFound(); // 抛出 NEXT_NOT_FOUND → 500
  }
}

// ✅ 回退到默认 locale
export default async function LocaleLayout({ params }: Props) {
  const resolvedParams = await params;
  const locale = routing.locales.includes(resolvedParams?.locale)
    ? resolvedParams.locale
    : routing.defaultLocale;
  // 继续渲染...
}

第八关:NextIntlClientProvider — RSC 条件导出冲突

症状:所有页面路由报 Error 1101,日志显示 headers() is not a function

原因next-intlNextIntlClientProvider 使用了 package.json 的 exports 条件导出。在 vinext 的 RSC 环境中,它解析到了一个异步服务端版本,该版本会调用 headers()(来自 next/headers)。但 vinext 不支持在该上下文中调用 headers()

解决方案:创建本地的 'use client' 包装组件:

// app/[locale]/intl-provider.tsx
'use client';

import { IntlProvider } from 'use-intl';

export function ClientIntlProvider({
  locale,
  messages,
  children,
}: {
  locale: string;
  messages: Record<string, unknown>;
  children: React.ReactNode;
}) {
  return (
    <IntlProvider locale={locale} messages={messages as IntlMessages}>
      {children}
    </IntlProvider>
  );
}

关键点

  • 直接从 use-intl(next-intl 的底层库)导入 IntlProvider
  • 'use client' 指令确保 vinext 将其序列化为客户端引用
  • 不使用 NextIntlClientProvider,避免触发服务端条件导出

第九关:RSC 导航 — .rsc 请求被 Auth 拦截

症状:浏览器前进/后退按钮导致页面空白

原因:vinext 使用 .rsc 后缀进行客户端 RSC payload 请求(例如 /en/dashboard.rsc)。proxy 将这些请求当作普通页面请求处理,检查认证状态后重定向到 /login。但 .rsc 请求期望的是 RSC 流数据,收到重定向后 React 无法解析,导致页面空白。

解决方案:在 proxy 中对 .rsc 请求只做 i18n 路由,跳过 auth 检查:

if (pathname.endsWith('.rsc')) {
  // 去掉 .rsc 后缀检查 i18n 路由
  const cleanPath = pathname.slice(0, -4);
  const hasLocale = locales.some(
    locale => cleanPath.startsWith(`/${locale}/`) || cleanPath === `/${locale}`
  );

  if (hasLocale) return NextResponse.next();

  // 添加 locale 前缀并重定向
  const url = new URL(req.url);
  url.pathname = `/${detectedLocale}${pathname}`;
  return NextResponse.redirect(url);
}

安全性:认证在服务端组件层(getSessionSafe())强制执行,不依赖 proxy。


第十关:Link 组件与 API 路由 — RSC 流损坏

症状:用 <Link> 跳转到 API 端点后,浏览器后退显示原始 JSON 而非页面

原因:Next.js 的 <Link> 组件触发客户端 RSC 导航。API 端点返回 JSON 而非 RSC payload,React 尝试解析 JSON 作为 RSC 流失败,破坏了浏览器历史记录中的 React 根节点。

解决方案:对 API 链接使用原生 <a> 标签:

// ❌ 会触发 RSC 导航
<Link href="/api/health">Health Check</Link>

// ✅ 强制全页面导航
<a href="/api/health" target="_blank" rel="noopener noreferrer">
  Health Check
</a>

第十一关:better-auth — Date ↔ Int 类型不匹配

症状:better-auth 的所有数据库写入操作失败

原因:better-auth 内部所有日期字段使用 JavaScript Date 对象,但我们的 Prisma schema 使用 Int(Unix 时间戳,秒)来兼容 D1/SQLite。Prisma 的 SQLite provider 不会自动做这个转换。

解决方案:创建 Prisma Client Proxy,拦截所有 auth 相关模型的操作:

// lib/db/auth-prisma-proxy.ts
const AUTH_DATE_FIELDS: Record<string, string[]> = {
  user: ['emailVerified', 'createdAt', 'updatedAt'],
  account: ['expiresAt', 'createdAt', 'updatedAt'],
  session: ['expires', 'createdAt', 'updatedAt'],
  verificationToken: ['expires', 'createdAt', 'updatedAt'],
};

function deepConvertInputs(obj: unknown, parentKey?: string): unknown {
  if (obj instanceof Date) return Math.floor(obj.getTime() / 1000);
  if (Array.isArray(obj)) return obj.map(item => deepConvertInputs(item));
  if (obj !== null && typeof obj === 'object') {
    const result: Record<string, unknown> = {};
    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
      result[key] = deepConvertInputs(value, key);
    }
    return result;
  }
  return obj;
}

export function createAuthPrismaProxy<T>(prisma: T): T {
  return new Proxy(prisma as object, {
    get(target, prop, receiver) {
      const value = Reflect.get(target, prop, receiver);
      if (typeof prop !== 'string') return value;
      const modelKey = resolveModelKey(prop);
      if (!modelKey) return value;

      // 为 auth 模型的每个方法创建代理
      return new Proxy(value as object, {
        get(modelTarget, methodName, modelReceiver) {
          const method = Reflect.get(modelTarget, methodName, modelReceiver);
          if (typeof method !== 'function') return method;
          if (!ALL_OPS.has(methodName as string)) return method.bind(modelTarget);

          return async function (...args: any[]) {
            // 输入:递归转换 Date → Unix timestamp
            if (args[0] && typeof args[0] === 'object') {
              args[0] = deepConvertInputs(args[0]);
            }
            const result = await method.apply(modelTarget, args);
            // 输出:Unix timestamp → Date(仅已知日期字段)
            return convertOutputDates(result, modelKey);
          };
        },
      });
    },
  }) as T;
}

使用方式:

// lib/auth/index.ts
export const auth = betterAuth({
  database: prismaAdapter(createAuthPrismaProxy(prisma), { provider: 'sqlite' }),
  // ...
});

第十二关:OAuth 状态管理 — deleteMany 中的 Date 未转换

症状:Google OAuth 回调后重定向到 ?error=please_restart_the_process

原因:better-auth 的 OAuth 流程中,findVerificationValue 函数在查找状态后会执行清理操作:

// better-auth 内部代码 (state.mjs)
await adapter.deleteMany({
  model: 'verification',
  where: [{ field: 'expiresAt', operator: 'lt', value: new Date() }],
});

我们的 proxy 第一版只拦截了 createupdatefind 操作,且只转换 datacreate/update 字段中的 Date。deleteManywhere 子句中的 new Date() 没有被转换,导致 SQLite 比较失败。

修复:将拦截范围扩展到所有 Prisma 操作(ALL_OPS),并使用递归的 deepConvertInputs 处理整个 args 树:

const ALL_OPS = new Set([
  'create',
  'createMany',
  'update',
  'updateMany',
  'upsert',
  'delete',
  'deleteMany',
  'findFirst',
  'findUnique',
  'findMany',
  'count',
  'aggregate',
]);

第十三关:VerificationToken — 主键缺失与 ID 类型错误

症状:Google OAuth 回调返回 internal_server_error,Workers 日志显示两个错误

错误 1verificationToken.delete({ where: { id: null } })

原因:VerificationToken 模型的 id 字段定义为 String?(可选),没有设置为主键。配合 generateId: false,better-auth 不会为 VerificationToken 生成 ID,导致删除操作传入 id: null

错误 2user.findFirst({ where: { id: "1" } })

原因:better-auth 内部使用 z.coerce.string() 将所有 ID 转换为字符串。但 Prisma schema 中 User 的 idInt,字符串 "1" 无法匹配整数 1

修复

  1. 数据库迁移 — 重建 verification_tokens 表:
-- 0007_fix_verification_token_pk.sql
CREATE TABLE IF NOT EXISTS verification_tokens_new (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  identifier TEXT NOT NULL,
  token TEXT NOT NULL UNIQUE,
  expires INT NOT NULL,
  created_at INT DEFAULT (strftime('%s', 'now')),
  updated_at INT DEFAULT (strftime('%s', 'now')),
  UNIQUE(identifier, token)
);
INSERT INTO verification_tokens_new (identifier, token, expires, created_at, updated_at)
  SELECT identifier, token, expires, created_at, updated_at FROM verification_tokens;
DROP TABLE verification_tokens;
ALTER TABLE verification_tokens_new RENAME TO verification_tokens;
CREATE INDEX idx_verification_tokens_expires ON verification_tokens(expires);
  1. Prisma schema 更新
model VerificationToken {
  id    Int    @id @default(autoincrement())  // 原来是 String?
  // ...
}
  1. 启用 useNumberId — better-auth 内置的 String ↔ Int ID 转换:
// lib/auth/index.ts
export const auth = betterAuth({
  advanced: {
    database: {
      useNumberId: true, // 替代 generateId: false
    },
  },
});

useNumberId: true 让 better-auth 的适配器层自动做 String → Number(输入)和 Number → String(输出)的 ID 转换。


第十四关:emailVerified — Boolean vs Int

症状:Google OAuth 登录时,创建用户失败

原因:当用户通过 Google OAuth 登录时,better-auth 认为邮箱已被 Google 验证,设置 emailVerified: true(布尔值)。但 schema 中 emailVerifiedInt?(Unix 时间戳)。

修复:在 proxy 的 deepConvertInputs 中添加布尔值 → 时间戳转换:

const BOOLEAN_TO_TIMESTAMP_FIELDS = new Set(['emailVerified']);

function deepConvertInputs(obj: unknown, parentKey?: string): unknown {
  if (obj instanceof Date) return Math.floor(obj.getTime() / 1000);

  // 特定字段的 boolean → timestamp 转换
  if (typeof obj === 'boolean' && parentKey && BOOLEAN_TO_TIMESTAMP_FIELDS.has(parentKey)) {
    return obj ? Math.floor(Date.now() / 1000) : null;
  }

  // ... 递归处理
}

第十五关:D1 迁移 — ALTER TABLE 不支持动态默认值

症状wrangler d1 migrations apply 报错 non-constant default

原因:SQLite 的 ALTER TABLE ADD COLUMN 语句不允许使用非常量默认值(如 strftime('%s', 'now'))。

-- ❌ 错误
ALTER TABLE accounts ADD COLUMN created_at INT DEFAULT (strftime('%s', 'now'));

-- ✅ 正确 — 先用常量默认值,再用 UPDATE 回填
ALTER TABLE accounts ADD COLUMN created_at INT DEFAULT 0;
UPDATE accounts SET created_at = strftime('%s', 'now') WHERE created_at = 0;

第十六关:CI/CD — Workers 域名包含账户子域

症状:GitHub Actions 部署成功但健康检查失败(HTTP 000)

原因:Cloudflare Workers 的默认域名格式是 <worker-name>.<account-subdomain>.workers.dev,而不是 <worker-name>.workers.dev。CI 配置中的回退 URL 少了账户子域。

# ❌ 错误
DEPLOYMENT_URL="https://my-worker.workers.dev"

# ✅ 正确
DEPLOYMENT_URL="https://my-worker.t-ac5.workers.dev"

最佳实践:在 GitHub Repository Variables 中配置 TEST_DEPLOYMENT_URLPRODUCTION_DEPLOYMENT_URL,不要依赖 hardcoded 回退值。


核心代码清单

迁移后的核心文件结构:

├── vite.config.ts              # Vite 配置 + Prisma resolveId 插件
├── proxy.ts                    # 替代 middleware.ts(i18n + auth + CORS/CSRF)
├── wrangler.toml               # 本地开发配置(Workers 格式)
├── wrangler.test.toml          # 测试环境配置
├── wrangler.prod.toml          # 生产环境配置
├── vitest.cloudflare-stub.ts   # cloudflare:workers 测试 mock
├── lib/
│   ├── auth/
│   │   ├── index.ts            # better-auth 配置 + getEnvVar
│   │   ├── session.ts          # getSessionSafe (RSC 安全包装)
│   │   └── password.ts         # PBKDF2 密码哈希(Edge 兼容)
│   └── db/
│       ├── client.ts           # Prisma 单例 + cloudflare:workers ESM 导入
│       └── auth-prisma-proxy.ts # Date↔Int + Boolean→Int 类型转换代理
├── app/[locale]/
│   └── intl-provider.tsx       # 本地 'use client' IntlProvider 包装
└── migrations/
    └── 0007_fix_verification_token_pk.sql  # VerificationToken 主键修复

总结

从 Next.js 迁移到 vinext 不是简单的"换个构建工具"那么简单。主要挑战来自三个层面:

  1. Vite vs webpack 的模块解析差异:Prisma 的裸模块标识符、条件导出的解析优先级等,在两个构建系统中行为完全不同。

  2. Workers vs Node.js 运行时差异process.env 不可用、NextURL 属性只读、notFound() 未被捕获 — 这些都是 Workers 运行时的限制。

  3. 第三方库假设:next-intl 假设 NextURL.port 可写,better-auth 假设日期字段是 Date 对象 — 这些假设在标准 Next.js 中成立,但在 vinext 的 Workers 环境中全部失效。

核心教训:vinext 不是 Next.js 的替代品,而是 Next.js API 在 Workers 运行时上的重新实现。任何依赖 Next.js 实现细节(而非公开 API)的代码,都可能需要适配。

本文基于 2026 年 2 月的实际迁移经验,vinext 仍在快速迭代中,部分问题可能在后续版本中得到解决。

Everything Claude Code 完全长篇指南

作者 王小酱
2026年2月27日 16:54

image.png


在上一篇Everything Claude Code 速查指南中,我涵盖了基础配置:技能(skills)和命令(commands)、钩子(hooks)、子代理(subagents)、MCPs、插件(plugins),以及构成高效 Claude Code 工作流骨干的配置模式。那是一份配置指南和基础设施。

这篇长篇指南深入探讨了将高效会话与浪费性会话区分开来的技术。如果你还没有读过简明指南,请先回去配置好你的设置。接下来的内容假设你已经配置好了技能、代理、钩子和 MCPs 并且它们已正常运行。

这里的主题包括:token 经济学、记忆持久化、验证模式、并行化策略,以及构建可复用工作流的复合效应。这些是我在超过10个月的日常使用中精炼出的模式,它们决定了你是在第一个小时内就被上下文腐烂(context rot)所困扰,还是能够维持数小时的高效会话。

简明和长篇文章中涵盖的所有内容都可在 GitHub 上获取:everything-claude-code


Context & Memory Management

上下文与记忆管理

对于跨会话共享记忆,最好的方法是使用一个技能或命令来总结并检查进度,然后保存到你的 .claude 文件夹中的 .tmp 文件,并在会话结束前持续追加内容。第二天它可以将其作为上下文来使用,从你上次中断的地方继续,为每个会话创建一个新文件,这样你就不会把旧的上下文污染到新的工作中。最终你会有一个很大的会话日志文件夹——只需将其备份到有意义的地方,或者修剪你不需要的会话对话。Claude 会创建一个总结当前状态的文件。查看它,如果需要可以要求修改,然后开始新的对话。对于新对话,只需提供文件路径。当你达到上下文限制并需要继续复杂工作时,这特别有用。这些文件应该包含——哪些方法有效(可验证且有证据)、哪些尝试过的方法没有效果、哪些方法尚未尝试以及还剩什么要做。

image.png 会话存储示例 -> github.com/affaan-m/ev…

策略性清除上下文:

一旦你的计划设定好并且上下文已清除(现在是 Claude Code 计划模式中的默认选项),你就可以从计划开始工作。当你积累了大量不再与执行相关的探索性上下文时,这很有用。对于策略性压缩,禁用自动压缩。在逻辑间隔处手动压缩,或创建一个技能为你执行此操作,或在某些定义的标准下提出建议。


Strategic Compact Skill(直接链接):

(嵌入以供快速参考)

#!/bin/bash
# Strategic Compact Suggester
# Runs on PreToolUse to suggest manual compaction at logical intervals
#
# Why manual over auto-compact:
# - Auto-compact happens at arbitrary points, often mid-task
# - Strategic compacting preserves context through logical phases
# - Compact after exploration, before execution
# - Compact after completing a milestone, before starting next

COUNTER_FILE="/tmp/claude-tool-count-$$"
THRESHOLD=${COMPACT_THRESHOLD:-50}

# Initialize or increment counter
if [ -f "$COUNTER_FILE" ]; then
  count=$(cat "$COUNTER_FILE")
  count=$((count + 1))
  echo "$count" > "$COUNTER_FILE"
else
  echo "1" > "$COUNTER_FILE"
  count=1
fi

# Suggest compact after threshold tool calls
if [ "$count" -eq "$THRESHOLD" ]; then
  echo "[StrategicCompact] $THRESHOLD tool calls reached - consider /compact if transitioning phases" >&2
fi

将它挂钩到 Edit/Write 操作的 PreToolUse 上——当你积累了足够多的上下文、压缩可能有帮助时,它会提醒你。


进阶:动态系统提示注入(Advanced: Dynamic System Prompt Injection)

我学到并正在试运行的一种模式是:不要只把所有东西放在 CLAUDE.md(用户范围)或 .claude/rules/(项目范围)中(这些每次会话都会加载),而是使用 CLI 标志来动态注入上下文。

claude --system-prompt "$(cat memory.md)"

这让你可以更精确地控制何时加载什么上下文。你可以根据当前工作内容在每个会话中注入不同的上下文。

为什么这比 @ 文件引用更重要: 当你使用 @memory.md 或将内容放在 .claude/rules/ 中时,Claude 通过 Read 工具在对话过程中读取它——它作为工具输出传入。当你使用 --system-prompt 时,内容在对话开始前被注入到实际的系统提示中。

区别在于指令层级(instruction hierarchy)。系统提示内容的权威性高于用户消息,用户消息的权威性高于工具结果。对于大多数日常工作来说,这种差异是微不足道的。但对于诸如严格的行为规则、项目特定的约束,或你绝对需要 Claude 优先考虑的上下文——系统提示注入确保它得到适当的权重。

实际配置:

一种有效的方法是将 .claude/rules/ 用于你的基线项目规则,然后为场景特定的上下文设置 CLI 别名,可以在它们之间切换:

# Daily development
alias claude-dev='claude --system-prompt "$(cat ~/.claude/contexts/dev.md)"'

# PR review mode
alias claude-review='claude --system-prompt "$(cat ~/.claude/contexts/review.md)"'

# Research/exploration mode
alias claude-research='claude --system-prompt "$(cat ~/.claude/contexts/research.md)"'

System Prompt Context Example Files(直接链接):

  • dev.md 专注于实现
  • review.md 专注于代码质量/安全
  • research.md 专注于行动前的探索

同样,对于大多数情况,使用 .claude/rules/context1.md 和直接将 context1.md 附加到系统提示之间的区别是微乎其微的。CLI 方法更快(无需工具调用)、更可靠(系统级权威)且稍微更节省 token。但这是一个小优化,对许多人来说开销大于收益。


进阶:记忆持久化钩子(Advanced: Memory Persistence Hooks)

有一些钩子(hooks)是大多数人不知道的,或者知道但没有真正利用的,它们有助于记忆管理:

SESSION 1                    SESSION 2
─────────                    ─────────
[Start]                      [Start]
   │                            │
   ▼                            ▼
┌──────────────┐          ┌──────────────┐
│ SessionStart │ ◄─── reads ─────── │ SessionStart │◄── loads previous
│    Hook      │    nothing yet     │    Hook      │    context
└──────┬───────┘          └──────┬───────┘
       │                         │
       ▼                         ▼
   [Working]                 [Working]
       │                    (informed)
       ▼                         │
┌──────────────┐                 ▼
│  PreCompact  │──► saves state [Continue...]
│    Hook      │    before summary
└──────┬───────┘
       │
       ▼
   [Compacted]
       │
       ▼
┌──────────────┐
│  Stop Hook   │──► persists to ──────────►
│ (session-end)│    ~/.claude/sessions/
└──────────────┘
  • PreCompact Hook: 在上下文压缩发生之前,将重要状态保存到文件中
  • SessionComplete Hook: 在会话结束时,将学习成果持久化到文件中
  • SessionStart Hook: 在新会话开始时,自动加载之前的上下文

Memory Persistent Hooks(直接链接):

(嵌入以供快速参考)

{
  "hooks": {
    "PreCompact": [{
      "matcher": "*",
      "hooks": [{
        "type": "command",
        "command": "~/.claude/hooks/memory-persistence/pre-compact.sh"
      }]
    }],
    "SessionStart": [{
      "matcher": "*",
      "hooks": [{
        "type": "command",
        "command": "~/.claude/hooks/memory-persistence/session-start.sh"
      }]
    }],
    "Stop": [{
      "matcher": "*",
      "hooks": [{
        "type": "command",
        "command": "~/.claude/hooks/memory-persistence/session-end.sh"
      }]
    }]
  }
}

这些的作用:

  • pre-compact.sh:记录压缩事件,用压缩时间戳更新活动会话文件
  • session-start.sh:检查最近的会话文件(最近7天),通知可用的上下文和已学习的技能
  • session-end.sh:创建/更新每日会话文件模板,跟踪开始/结束时间

将这些串联起来,即可实现跨会话的持续记忆,无需手动干预。这建立在第一篇文章中的钩子类型(PreToolUse、PostToolUse、Stop)之上,但专门针对会话生命周期。


Continuous Learning / Memory

持续学习 / 记忆

我们之前讨论了以更新代码地图(codemaps)的形式进行持续记忆更新,但这也适用于其他方面,比如从错误中学习。如果你不得不多次重复提示,而 Claude 遇到了相同的问题或给了你以前听过的回答,那这部分就适用于你。很可能你需要发送第二个提示来"重新引导(resteer)"并校准 Claude 的方向。这适用于任何此类场景——这些模式必须被追加到技能中。

现在你可以通过简单地告诉 Claude 记住它或将其添加到你的规则中来自动完成此操作,或者你可以有一个技能来专门做这件事。

问题: 浪费 token,浪费上下文,浪费时间,你的皮质醇飙升,因为你沮丧地对 Claude 大喊不要做你在之前会话中已经告诉它不要做的事情。

解决方案: 当 Claude Code 发现一些非平凡的东西——调试技术、变通方法、某些项目特定的模式——它会将该知识保存为新技能。下次出现类似问题时,技能会自动加载。


Continuous Learning Skill(直接链接)

为什么我使用 Stop hook 而不是 UserPromptSubmit?UserPromptSubmit 在你发送的每条消息上都会运行——这会带来很大的开销,给每个提示增加延迟,坦率地说对这个目的来说是大材小用。Stop 在会话结束时只运行一次——轻量级,不会在会话期间拖慢你的速度,而且评估的是完整会话而非碎片化的内容。

安装:

# Clone to skills folder
git clone https://github.com/affaan-m/everything-claude-code.git ~/.claude/skills/everything-claude-code

# Or just grab the continuous-learning skill
mkdir -p ~/.claude/skills/continuous-learning
curl -sL https://raw.githubusercontent.com/affaan-m/everything-claude-code/main/skills/continuous-learning/evaluate-session.sh > ~/.claude/skills/continuous-learning/evaluate-session.sh
chmod +x ~/.claude/skills/continuous-learning/evaluate-session.sh

Hook Configuration(直接链接):

{
  "hooks": {
    "Stop": [
      {
        "matcher": "*",
        "hooks": [
          {
            "type": "command",
            "command": "~/.claude/skills/continuous-learning/evaluate-session.sh"
          }
        ]
      }
    ]
  }
}

这使用 Stop hook 在每个提示上运行一个激活脚本,评估会话中值得提取的知识。该技能也可以通过语义匹配激活,但钩子确保了一致的评估。

Stop hook 在你的会话结束时触发——脚本分析会话中值得提取的模式(错误解决方案、调试技术、变通方法、项目特定模式等),并将它们保存为 ~/.claude/skills/learned/ 中的可复用技能。

手动提取 - /learn:

你不必等到会话结束。仓库中还包含一个 /learn 命令,你可以在会话中途刚解决了一些非平凡的问题时运行它。它会提示你立即提取模式,起草一个技能文件,并在保存前征求确认。参见这里

会话日志模式:

该技能期望会话日志保存在 .tmp 文件中。模式为:~/.claude/sessions/YYYY-MM-DD-topic.tmp——每个会话一个文件,包含当前状态、已完成项目、阻碍因素、关键决定和下次会话的上下文。示例会话文件在仓库的 examples/sessions/ 中。


其他自我改进的记忆模式:

来自 @RLanceMartin 的一种方法涉及反思会话日志以提炼用户偏好——本质上是建立一个记录什么有效、什么无效的"日记"。每次会话后,一个反思代理(reflection agent)提取哪些做得好、哪些失败了、你做了哪些修正。这些学习成果会更新一个记忆文件,在后续会话中加载。

来自 @alexhillman 的另一种方法是让系统每15分钟主动建议改进,而不是等你注意到模式。代理审查最近的交互,提出记忆更新建议,你批准或拒绝。随着时间推移,它会从你的批准模式中学习。


Token Optimization

Token 优化

我从价格敏感的消费者那里收到了很多问题,或者那些作为重度用户经常遇到限制问题的人。在 token 优化方面,有一些技巧可以使用。

主要策略:子代理架构

主要是优化你使用的工具和子代理架构,旨在将最便宜的、足以完成任务的模型委派出去以减少浪费。你有几个选项——可以尝试试错法并随着进展调整。一旦你了解了什么是什么,你就可以区分哪些委派给 Haiku、哪些委派给 Sonnet、哪些委派给 Opus。

基准测试方法(更深入):

另一种更深入的方法是,你可以让 Claude 设置一个基准测试,在一个有明确目标、任务和明确计划的仓库中。在每个 git worktree 中,让所有子代理都使用同一个模型。在任务完成时记录日志——理想情况下在你的计划和任务中记录。你必须至少使用每个子代理一次。

一旦完成一轮完整测试并且任务已从你的 Claude 计划中勾选完毕,停下来审核进度。你可以通过比较差异(diffs)、创建在所有 worktree 中统一的单元测试、集成测试和端到端测试来做到这一点。这将给你一个基于通过/失败案例的数值基准。如果所有 worktree 都全部通过,你需要添加更多的边界测试用例或增加测试的复杂度。这可能值得也可能不值得做,取决于这对你来说到底有多重要。

模型选择快速参考:

image.png

各种常见任务上子代理的假设配置及选择背后的推理

90% 的编码任务默认使用 Sonnet。当首次尝试失败、任务跨越5个以上文件、架构决策或安全关键代码时升级到 Opus。当任务是重复性的、指令非常清晰,或在多代理设置中作为"工人(worker)"使用时降级到 Haiku。坦率地说,Sonnet 4.5 目前处于一个尴尬的位置,每百万输入 token 3,每百万输出token3,每百万输出 token 15,与 Opus 相比成本节省约66.7%,绝对值来说这是不错的节省,但相对而言对大多数人来说微不足道。Haiku 和 Opus 组合最有意义,因为 Haiku 与 Opus 有5倍的成本差异,而与 Sonnet 只有1.67倍的价格差异。

image.png

来源:platform.claude.com/docs/en/abo…

在你的代理定义中,指定模型:

---
name: quick-search
description: Fast file search
tools: Glob, Grep
model: haiku  # Cheap and fast
---

工具特定优化:

想想 Claude 最频繁调用的工具。例如,用 mgrep 替换 grep——在各种任务上,与传统 grep 或 ripgrep(Claude 默认使用的)相比,平均有效 token 减少约一半。

image.png

来源:github.com/mixedbread-…

后台进程:

适用时,如果你不需要 Claude 处理整个输出并实时流式传输,请在 Claude 之外运行后台进程。这可以通过 tmux 轻松实现(参见简明指南Tmux Commands Reference(直接链接))。获取终端输出后,要么总结它,要么只复制你需要的部分。这将节省大量输入 token,这是大部分成本的来源——Opus 4.5 每百万 token 5,输出每百万token5,输出每百万 token 25。

模块化代码库的好处:

拥有更模块化的代码库,包含可复用的工具函数、函数、钩子等——主文件在数百行而非数千行——既有助于 token 优化成本,也有助于第一次就正确完成任务,两者是相关的。如果你必须多次提示 Claude,你就在大量消耗 token,尤其是当它反复读取非常长的文件时。你会注意到它需要进行大量工具调用才能读完文件。中间过程中,它会告诉你文件非常长,它将继续读取。在这个过程中的某个地方,Claude 可能会丢失一些信息。而且,停止和重新读取会消耗额外的 token。这可以通过拥有更模块化的代码库来避免。示例如下 ->

root/
├── docs/              # Global documentation
├── scripts/           # CI/CD and build scripts
├── src/
│   ├── apps/          # Entry points (API, CLI, Workers)
│   │   ├── api-gateway/    # Routes requests to modules
│   │   └── cron-jobs/
│   │
│   ├── modules/       # The core of the system
│   │   ├── ordering/       # Self-contained "Ordering" module
│   │   │   ├── api/             # Public interface for other modules
│   │   │   ├── domain/          # Business logic & Entities (Pure)
│   │   │   ├── infrastructure/  # DB, External Clients, Repositories
│   │   │   ├── use-cases/       # Application logic (Orchestration)
│   │   │   └── tests/           # Unit and integration tests
│   │   │
│   │   ├── catalog/        # Self-contained "Catalog" module
│   │   │   ├── domain/
│   │   │   └── ...
│   │   │
│   │   └── identity/       # Self-contained "Auth/User" module
│   │       ├── domain/
│   │       └── ...
│   │
│   ├── shared/        # Code used by EVERY module
│   │   ├── kernel/         # Base classes (Entity, ValueObject)
│   │   ├── events/         # Global Event Bus definitions
│   │   └── utils/          # Deeply generic helpers
│   │
│   └── main.ts        # Application bootstrap
├── tests/             # End-to-End (E2E) global tests
├── package.json
└── README.md

精简代码库 = 更便宜的 Token:

这可能很明显,但你的代码库越精简,token 成本就越低。关键是要通过使用技能来持续清理代码库,利用技能和命令进行重构来识别死代码。另外在某些时候,我喜欢通读整个代码库,寻找那些让我觉得突出或看起来重复的东西,手动拼凑这些上下文,然后将其与重构技能和死代码技能一起输入给 Claude。

系统提示精简(进阶):

对于真正注重成本的人:Claude Code 的系统提示占用约18k token(200k 上下文的约9%)。这可以通过补丁减少到约10k token,节省约7,300 token(静态开销的41%)。如果你想走这条路,参见 YK 的 system-prompt-patches,我个人不这样做。


Verification Loops and Evals

验证循环与评估

评估和框架调优——取决于项目,你需要使用某种形式的可观测性和标准化。

可观测性方法:

一种方法是让 tmux 进程挂钩到追踪思维流和输出上,每当技能被触发时。另一种方法是使用 PostToolUse 钩子来记录 Claude 具体执行了什么以及确切的变更和输出是什么。

基准测试工作流:

将其与不使用技能地要求相同的事情进行比较,检查输出差异以进行相对性能基准测试:

           [Same Task]
                │
    ┌────────────┴────────────┐
    ▼                         ▼
┌───────────────┐     ┌───────────────┐
│  Worktree A   │     │  Worktree B   │
│  WITH skill   │     │ WITHOUT skill │
└───────┬───────┘     └───────┬───────┘
        │                     │
        ▼                     ▼
   [Output A]            [Output B]
        │                     │
        └──────────┬──────────┘
                   ▼
              [git diff]
                   │
                   ▼
          ┌────────────────┐
          │ Compare logs,  │
          │ token usage,   │
          │ output quality │
          └────────────────┘

分叉对话,在其中一个中启动一个没有技能的新 worktree,最后查看差异,看看日志记录了什么。这与持续学习和记忆部分相关联。

评估模式类型:

更高级的评估和循环协议在这里登场。分为基于检查点的评估和基于强化学习任务的持续评估。

CHECKPOINT-BASED              CONTINUOUS
─────────────────             ──────────
[Task 1]                      [Work]
    │                            │
    ▼                            ▼
┌─────────┐                  ┌─────────┐
│Checkpoint│◄── verify       │ Timer/  │
│   #1     │    criteria     │ Change  │
└────┬────┘                  └────┬────┘
     │ pass?                      │
  ┌───┴───┐                       ▼
  │       │                  ┌──────────┐
 yes   no ──► fix ──┐       │Run Tests │
  │               │  │       │ + Lint   │
  ▼           └────┘ │       └────┬─────┘
[Task 2]              │            │
    │                 │       ┌────┴────┐
    ▼                 │       │         │
┌─────────┐           │      pass     fail
│Checkpoint│          │       │         │
│   #2     │          │       ▼         ▼
└────┬────┘           │   [Continue]  [Stop & Fix]
     │                │
    ...            └────┘

Best for: Linear workflows    Best for: Long sessions
with clear milestones         exploratory refactoring

基于检查点的评估:

  • 在工作流中设置明确的检查点
  • 在每个检查点根据定义的标准进行验证
  • 如果验证失败,Claude 必须在继续之前修复
  • 适合具有明确里程碑的线性工作流

持续评估:

  • 每 N 分钟或在重大变更后运行
  • 完整测试套件、构建状态、lint 检查
  • 立即报告回归
  • 在继续之前停下来修复
  • 适合长时间运行的会话

决定因素是你工作的性质。基于检查点适用于具有明确阶段的功能实现。持续评估适用于探索性重构或维护,因为你没有明确的里程碑。

我会说,通过一些干预,验证方法足以避免大部分技术债务。让 Claude 在完成任务后通过运行技能和 PostToolUse 钩子来验证有助于此。持续更新代码地图也有帮助,因为它保持了变更日志以及代码地图如何随时间演变的记录,作为仓库本身之外的事实来源。通过严格的规则,Claude 会避免创建杂乱的随机 .md 文件、为相似代码创建重复文件,以及留下一片死代码的荒原。

评分器类型(来自 Anthropic - 直接链接)

基于代码的评分器(Code-Based Graders): 字符串匹配、二元测试、静态分析、结果验证。快速、便宜、客观,但对有效变体很脆弱。

基于模型的评分器(Model-Based Graders): 评分标准打分、自然语言断言、成对比较。灵活且能处理微妙之处,但非确定性且更昂贵。

人工评分器(Human Graders): 专家审查、众包判断、抽样检查。金标准质量,但昂贵且缓慢。

关键指标:

pass@k: At least ONE of k attempts succeeds
┌─────────────────────────────────────┐
│ k=1: 70%    k=3: 91%    k=5: 97%   │
│ Higher k = higher odds of success   │
└─────────────────────────────────────┘

pass^k: ALL k attempts must succeed
┌─────────────────────────────────────┐
│ k=1: 70%    k=3: 34%    k=5: 17%   │
│ Higher k = harder (consistency)     │
└─────────────────────────────────────┘

当你只需要它能工作且任何验证反馈就足够时,使用 pass@k。当一致性至关重要且你需要接近确定性的输出一致性(在结果/质量/风格方面)时,使用 pass^k

构建评估路线图(来自同一 Anthropic 指南):

  • 尽早开始——从真实失败中提取20-50个简单任务
  • 将用户报告的失败转化为测试用例
  • 编写明确的任务——两个专家应达成相同结论
  • 构建平衡的问题集——测试行为应该和不应该出现的情况
  • 构建健壮的测试框架——每次试验从干净环境开始
  • 评分代理产生的结果,而非它走过的路径
  • 阅读许多试验的记录
  • 监控饱和度——100%通过率意味着需要添加更多测试

Parallelization

并行化

在多 Claude 终端设置中分叉对话时,确保分叉中的操作范围和原始对话的操作范围都有明确定义。在代码变更方面尽量减少重叠。选择彼此正交的任务以防止干扰的可能性。

我的首选模式:

个人而言,我更喜欢主聊天用于处理代码变更,而我做的分叉是用于我对代码库及其当前状态的问题,或者做外部服务的研究,比如拉取文档、在 GitHub 上搜索适用的开源仓库来帮助任务,或其他有用的一般性研究。

关于任意终端数量:

Boris @bcherny(创建 Claude Code 的传奇人物)有一些关于并行化的建议,我对此有赞同也有不赞同的地方。他建议过类似在本地运行5个 Claude 实例和5个上游实例这样的事情。我建议不要设置这样的任意终端数量。增加一个终端和增加一个实例应该出于真正的必要性和目的。如果你可以用脚本来处理该任务,就用脚本。如果你可以留在主聊天中让 Claude 在 tmux 中启动一个实例并在单独的终端中流式传输,那就那样做。

引用推文:Boris Cherny @bcherny · 1月3日 回复 @bcherny 1/ 我在终端中并行运行5个 Claude。我给我的标签页编号1-5,并使用系统通知来知道何时 Claude 需要输入 code.claude.com/docs/en/ter…

image.png

你的目标真的应该是:用最小可行的并行化量完成尽可能多的工作。

对于大多数新手,我甚至建议在你熟练掌握单实例运行和管理一切之前远离并行化。我不是主张限制自己——我是说要小心。大多数时候,即使是我也只使用大约4个终端。我发现通常只需打开2或3个 Claude 实例就能完成大部分事情。

扩展实例时:

如果你要开始扩展你的实例,并且有多个 Claude 实例在相互重叠的代码上工作,使用 git worktrees 并为每个实例制定非常明确的计划是必不可少的。此外,为了在恢复会话时不会混淆或迷失哪个 git worktree 是做什么的(除了树的名称之外),使用 /rename <name here> 来命名你所有的聊天。

Git Worktrees 用于并行实例:

# Create worktrees for parallel work
git worktree add ../project-feature-a feature-a
git worktree add ../project-feature-b feature-b
git worktree add ../project-refactor refactor-branch

# Each worktree gets its own Claude instance
cd ../project-feature-a && claude

好处:

  • 实例之间没有 git 冲突
  • 每个都有干净的工作目录
  • 容易比较输出
  • 可以在不同方法之间对同一任务进行基准测试

级联方法(The Cascade Method):

当运行多个 Claude Code 实例时,使用"级联"模式来组织:

  • 在右侧的新标签页中打开新任务
  • 从左到右扫描,从最旧到最新
  • 保持一致的方向流
  • 根据需要检查特定任务
  • 一次最多关注3-4个任务——超过这个数量,心理开销的增长速度会快于生产力

Groundwork

基础工作

从零开始时,实际的基础非常重要。这应该是显而易见的,但随着代码库的复杂性和规模增加,技术债务也会增加。管理它非常重要,如果你遵循一些规则,其实并不困难。除了为当前项目有效配置你的 Claude 之外(参见简明指南)。

双实例启动模式(The Two-Instance Kickoff Pattern):

对于我自己的工作流管理(不是必须的但很有帮助),我喜欢用2个打开的 Claude 实例来启动一个空仓库。

实例 1:脚手架代理(Scaffolding Agent)

  • 负责搭建脚手架和基础工作
  • 创建项目结构
  • 配置设置(CLAUDE.md、规则、代理——简明指南中的所有内容)
  • 建立约定
  • 把骨架搭好

实例 2:深度研究代理(Deep Research Agent)

  • 连接到你所有的服务、网络搜索等
  • 创建详细的 PRD(产品需求文档)
  • 创建架构 mermaid 图
  • 用实际文档中的实际片段编译参考资料

image.png

启动配置:左侧终端用于编码,右侧终端用于提问——使用 /rename 和 /fork。

最小化启动所需的内容就够了——这比每次都用 Context7 或喂链接让它抓取或使用 Firecrawl MCP 站点要快。当你已经深入某件事情且 Claude 明显语法出错或使用过时的函数或端点时,那些方法才派上用场。

llms.txt 模式:

如果可用的话,你可以在许多文档参考上通过在到达其文档页面后访问 /llms.txt 来找到一个 llms.txt 文件。这是一个示例:www.helius.dev/docs/llms.t…

这给你一个干净的、为 LLM 优化的文档版本,你可以直接提供给 Claude。

理念:构建可复用模式(Philosophy: Build Reusable Patterns)

来自 @omarsar0 的一个我完全认同的见解:"早期,我花时间构建可复用的工作流/模式。构建起来很繁琐,但随着模型和代理框架的改进,这产生了疯狂的复合效应。"

值得投资的方面:

  • 子代理(简明指南)
  • 技能(简明指南)
  • 命令(简明指南)
  • 计划模式
  • MCP 工具(简明指南)
  • 上下文工程模式

为什么会产生复合效应(@omarsar0):"最棒的部分是所有这些工作流都可以转移到其他代理,如 Codex。"一旦构建完成,它们可以跨模型升级工作。投资于模式 > 投资于特定模型的技巧。


Best Practices for Agents & Sub-Agents

代理和子代理的最佳实践

在简明指南中,我列出了子代理结构——planner、architect、tdd-guide、code-reviewer 等。在这一部分,我们关注编排和执行层。

子代理上下文问题(The Sub-Agent Context Problem):

子代理的存在是为了通过返回摘要而非倾倒所有内容来节省上下文。但编排器(orchestrator)拥有子代理所缺乏的语义上下文。子代理只知道字面上的查询,不知道请求背后的目的/推理。摘要通常会遗漏关键细节。

来自 @PerceptualPeak 的类比:"你的老板让你去参加一个会议并要求你做个总结。你回来给他汇报情况。十次有九次,他会有后续问题。你的总结不会包含他需要的所有内容,因为你没有他拥有的隐含上下文。"

迭代检索模式(Iterative Retrieval Pattern):

┌─────────────────┐
│  ORCHESTRATOR   │
│  (has context)  │
└────────┬────────┘
         │ dispatch with query + objective
         ▼
┌─────────────────┐
│   SUB-AGENT     │
│ (lacks context) │
└────────┬────────┘
         │ returns summary
         ▼
┌─────────────────┐    ┌─────────────┐
│    EVALUATE     │─no──►│  FOLLOW-UP  │
│   Sufficient?   │    │  QUESTIONS  │
└────────┬────────┘    └──────┬──────┘
         │ yes                │ sub-agent
         ▼                    │ fetches answers
      [ACCEPT]                │
         ◄──────────────────────┘
                        (max 3 cycles)

要修复这个问题,让编排器:

  • 评估每个子代理的返回结果
  • 在接受之前询问后续问题
  • 子代理回到源头,获取答案,返回
  • 循环直到充分(最多3个循环以防止无限循环)

传递目标上下文,而不仅仅是查询。 当派遣子代理时,同时包含具体查询和更广泛的目标。这有助于子代理确定在其摘要中优先包含什么内容。

模式:带有顺序阶段的编排器(Pattern: Orchestrator with Sequential Phases)

Phase 1: RESEARCH (use Explore agent)
- Gather context
- Identify patterns
- Output: research-summary.md

Phase 2: PLAN (use planner agent)
- Read research-summary.md
- Create implementation plan
- Output: plan.md

Phase 3: IMPLEMENT (use tdd-guide agent)
- Read plan.md
- Write tests first
- Implement code
- Output: code changes

Phase 4: REVIEW (use code-reviewer agent)
- Review all changes
- Output: review-comments.md

Phase 5: VERIFY (use build-error-resolver if needed)
- Run tests
- Fix issues
- Output: done or loop back

关键规则:

  • 每个代理获得一个明确的输入并产生一个明确的输出
  • 输出成为下一阶段的输入
  • 永远不要跳过阶段——每个阶段都有价值
  • 在代理之间使用 /clear 保持上下文新鲜
  • 将中间输出存储在文件中(不仅仅是记忆中)

代理抽象层级列表(Agent Abstraction Tierlist)(来自 @menhguin):

第1层:直接增益(容易使用)

  • 子代理(Subagents) ——防止上下文腐烂和临时专业化的直接增益。只有多代理一半的用处,但复杂度低得多
  • 元提示(Metaprompting) ——"我花3分钟来提示一个20分钟的任务。"直接增益——提高稳定性并对假设进行健全性检查
  • 在开始时多问用户(Asking user more at the beginning) ——通常是增益,尽管你必须在计划模式中回答问题

第2层:高技能门槛(较难用好)

  • 长时间运行的代理(Long-running agents) ——需要理解15分钟任务 vs 1.5小时 vs 4小时任务的形态和权衡。需要一些调整,而且显然是非常长的试错过程
  • 并行多代理(Parallel multi-agent) ——方差非常高,仅在高度复杂或分段良好的任务上有用。"如果2个任务需要10分钟,而你花了任意时间在提示上,或者更糟糕的是合并变更,那就适得其反了"
  • 基于角色的多代理(Role-based multi-agent) ——"模型演进太快,硬编码的启发式规则除非套利非常高否则没意义。"难以测试
  • 计算机使用代理(Computer use agents) ——非常早期的范式,需要大量调教。"你在让模型做一年前它们绝对不应该做的事情"

要点:从第1层模式开始。只有在掌握了基础知识并有真正的需求时才升级到第2层。


Tips and Tricks

提示与技巧

一些 MCP 是可替代的,将释放你的上下文窗口

方法如下。

对于版本控制(GitHub)、数据库(Supabase)、部署(Vercel、Railway)等 MCP——这些平台中的大多数已经有健壮的 CLI,MCP 本质上只是对它们的包装。MCP 是一个不错的包装器,但它有成本。

要让 CLI 更像 MCP 一样工作,而实际上不使用 MCP(以及随之而来的上下文窗口缩减),考虑将功能捆绑到技能和命令中。剥离 MCP 暴露的使事情变得简单的工具,并将它们转化为命令。

示例:不要始终加载 GitHub MCP,而是创建一个 /gh-pr 命令来包装 gh pr create 并使用你偏好的选项。不要让 Supabase MCP 消耗上下文,而是创建直接使用 Supabase CLI 的技能。功能是一样的,便利性相似,但你的上下文窗口被释放出来用于实际工作。

这与我收到的一些其他问题相关。自从我发布原始文章以来的过去几天里,Boris 和 Claude Code 团队在记忆管理和优化方面取得了很大进展,主要是 MCP 的懒加载,使它们不再从一开始就消耗你的窗口。以前我会建议在可能的地方将 MCP 转换为技能,以两种方式之一卸载执行 MCP 的功能:在当时启用它(不太理想,因为你需要离开并恢复会话)或者拥有使用 MCP 的 CLI 类似物的技能(如果它们存在的话),让技能成为它的包装器——本质上让它充当伪 MCP。

通过懒加载,上下文窗口问题基本上已经解决。但 token 使用和成本并没有以同样的方式解决。CLI + 技能方法仍然是一种 token 优化方法,其效果可能与使用 MCP 相当或接近。此外,你可以通过 CLI 而不是在上下文中运行 MCP 操作,这显著减少了 token 使用,对于数据库查询或部署等繁重的 MCP 操作特别有用。

Everything Claude Code 速查指南

作者 王小酱
2026年2月27日 16:20

这是黑客松冠军日常使用 10 个月后的完整配置:技能(skills)、钩子(hooks)、子代理(subagents)、MCP、插件(plugins),以及真正好用的部分。

自从 2 月份实验性发布以来,我一直是 Claude Code 的深度用户,并且在 Anthropic x Forum Ventures 黑客松上与 @DRodriguezFX 一起完全使用 Claude Code 构建了 Zenith 并获胜。

cogsec @affaanmustafa · 2025年9月16日

在纽约的 @AnthropicAI x @forumventures 黑客松上拿下了冠军,感谢主办方举办这次精彩的活动(还有 15k 的 Anthropic Credits)

@DRodriguezFX 和我构建了 PMFProbe,帮助创始人从 0 到 1,在 MVP 阶段前验证你的想法,后续还有更多内容

图片1图片2图片3图片4


Skills and Commands

技能与命令

技能类似于规则,被限定在特定的作用域和工作流中。它们是执行特定工作流时的快捷提示词。

在用 Opus 4.5 长时间编码后,想清理无用代码和零散的 .md 文件?运行 /refactor-clean。需要测试?/tdd/e2e/test-coverage。技能和命令可以在一条提示词中链式调用。

链式调用命令链式调用命令

我可以创建一个在检查点更新代码地图(codemap)的技能——让 Claude 快速导航你的代码库,而不必在探索上消耗上下文。

~/.claude/skills/codemap-updater.md

命令是通过斜杠命令执行的技能。它们有重叠,但存储方式不同:

  • Skills: ~/.claude/skills - 更广泛的工作流定义
  • Commands: ~/.claude/commands - 快速可执行的提示词
# Example skill structure
~/.claude/skills/
  pmx-guidelines.md           # Project-specific patterns
  coding-standards.md          # Language best practices
  tdd-workflow/                # Multi-file skill with README.md
  security-review/             # Checklist-based skill

Hooks

钩子

钩子是基于触发器的自动化,在特定事件上触发。与技能不同,它们被限定在工具调用和生命周期事件中。

钩子类型

  • PreToolUse - 工具执行前(验证、提醒)
  • PostToolUse - 工具完成后(格式化、反馈循环)
  • UserPromptSubmit - 当你发送消息时
  • Stop - 当 Claude 完成响应时
  • PreCompact - 上下文压缩前
  • Notification - 权限请求

示例:在运行长时间命令前提醒使用 tmux

{
  "PreToolUse": [
    {
      "matcher": "tool == \"Bash\" && tool_input.command matches \"(npm|pnpm|yarn|cargo|pytest)\"",
      "hooks": [
        {
          "type": "command",
          "command": "if [ -z \"$TMUX\" ]; then echo '[Hook] Consider tmux for session persistence' >&2; fi"
        }
      ]
    }
  ]
}

image.png

在 Claude Code 中运行 PostToolUse 钩子时获得的反馈示例

专业提示: 使用 hookify 插件通过对话方式创建钩子,而不是手动编写 JSON。运行 /hookify 并描述你想要的功能。


Subagents

子代理

子代理是主编排器(主 Claude)可以委派任务的进程,具有有限的作用域。它们可以在后台或前台运行,为主代理释放上下文。

子代理与技能配合很好——一个能够执行你部分技能的子代理可以被委派任务并自主使用这些技能。它们还可以通过特定的工具权限进行沙盒化。

# Example subagent structure
~/.claude/agents/
  planner.md                   # Feature implementation planning
  architect.md                 # System design decisions
  tdd-guide.md                 # Test-driven development
  code-reviewer.md             # Quality/security review
  security-reviewer.md         # Vulnerability analysis
  build-error-resolver.md
  e2e-runner.md
  refactor-cleaner.md

为每个子代理配置允许的工具、MCP 和权限,以实现合理的作用域划分。


Rules and Memory

规则与记忆

你的 .rules 文件夹存放 Claude 应该始终遵循的最佳实践 .md 文件。两种方式:

  • 单一 CLAUDE.md - 所有内容放在一个文件中(用户级或项目级)
  • Rules 文件夹 - 按关注点分组的模块化 .md 文件
~/.claude/rules/
  security.md                  # No hardcoded secrets, validate inputs
  coding-style.md              # Immutability, file organization
  testing.md                   # TDD workflow, 80% coverage
  git-workflow.md              # Commit format, PR process
  agents.md                    # When to delegate to subagents
  performance.md               # Model selection, context management

示例规则:

  • 代码库中不使用 emoji
  • 前端避免紫色调
  • 部署前始终测试代码
  • 优先使用模块化代码而非超大文件
  • 永远不要提交 console.log

MCPs (Model Context Protocol)

MCP(模型上下文协议)

MCP 将 Claude 直接连接到外部服务。它不是 API 的替代品——而是围绕 API 的提示驱动封装,在信息导航方面提供更多灵活性。

示例: Supabase MCP 让 Claude 可以拉取特定数据、直接在上游运行 SQL,无需复制粘贴。数据库、部署平台等同理。

Supabase MCP 列出公共 schema 中的表的示例Supabase MCP 列出公共 schema 中的表的示例

Chrome in Claude: 是一个内置的插件 MCP,让 Claude 可以自主控制你的浏览器——点击查看各种功能。

关键:上下文窗口管理

对 MCP 要精挑细选。我把所有 MCP 放在用户配置中,但禁用所有不用的。导航到 /plugins 并向下滚动或运行 /mcp

你 200k 的上下文窗口在压缩前可能只有 70k,如果启用了太多工具的话。性能会显著下降。

使用 /plugins 导航到 MCP 查看当前已安装的及其状态使用 /plugins 导航到 MCP 查看当前已安装的及其状态

经验法则: 配置中放 20-30 个 MCP,但保持启用的不超过 10 个 / 活跃工具不超过 80 个。


Plugins

插件

插件将工具打包以便于安装,而不需要繁琐的手动设置。一个插件可以是技能 + MCP 的组合,或者钩子/工具的捆绑。

安装插件:

# Add a marketplace
claude plugin marketplace add https://github.com/mixedbread-ai/mgrep
# Open Claude, run /plugins, find new marketplace, install from there

显示新安装的 Mixedbread-Grep 市场显示新安装的 Mixedbread-Grep 市场

LSP 插件: 如果你经常在编辑器外运行 Claude Code,这特别有用。语言服务协议(Language Server Protocol)为 Claude 提供实时类型检查、跳转到定义和智能补全,无需打开 IDE。

# Enabled plugins example
typescript-lsp@claude-plugins-official     # TypeScript intelligence
pyright-lsp@claude-plugins-official        # Python type checking
hookify@claude-plugins-official            # Create hooks conversationally
mgrep@Mixedbread-Grep                      # Better search than ripgrep

与 MCP 同样的警告——注意你的上下文窗口。


Tips and Tricks

技巧和窍门

快捷键

  • Ctrl+U - 删除整行(比疯狂按退格快)
  • ! - 快速 bash 命令前缀
  • @ - 搜索文件
  • / - 启动斜杠命令
  • Shift+Enter - 多行输入
  • Tab - 切换思考模式显示
  • Esc Esc - 中断 Claude / 恢复代码

并行工作流

/fork - 分叉对话,在不重叠的任务上并行工作,而不是排队发送消息

Git Worktrees - 用于有重叠的并行 Claude,避免冲突。每个 worktree 是独立的检出

git worktree add ../feature-branch feature-branch
# Now run separate Claude instances in each worktree

tmux 用于长时间运行的命令: 流式查看和监控 Claude 运行的日志/bash 进程。

tmux new -s dev
# Claude runs commands here, you can detach and reattach
tmux attach -t dev

mgrep > grep: mgrep 比 ripgrep/grep 有显著提升。通过插件市场安装,然后使用 /mgrep 技能。支持本地搜索和网络搜索。

mgrep "function handleSubmit"                    # Local search
mgrep --web "Next.js 15 app router changes"      # Web search

其他有用命令

  • /rewind - 回到之前的状态
  • /statusline - 自定义显示分支、上下文百分比、待办事项
  • /checkpoints - 文件级撤销点
  • /compact - 手动触发上下文压缩

GitHub Actions CI/CD

在你的 PR 上用 GitHub Actions 设置代码审查。配置后 Claude 可以自动审查 PR。

Claude 批准一个 bug 修复 PRClaude 批准一个 bug 修复 PR

沙盒化

对有风险的操作使用沙盒模式——Claude 在受限环境中运行,不影响你的实际系统。(使用 --dangerously-skip-permissions 则相反,让 Claude 自由操作,如果不小心的话可能会造成破坏。)


On Editors

关于编辑器

虽然不需要编辑器,但它可能正面或负面地影响你的 Claude Code 工作流。虽然 Claude Code 可以在任何终端上工作,但配合一个强大的编辑器可以解锁实时文件追踪、快速导航和集成命令执行。

Zed(我的首选)

我使用 Zed——一个基于 Rust 的编辑器,轻量、快速、高度可定制。

为什么 Zed 与 Claude Code 配合良好:

  • Agent Panel Integration(代理面板集成) - Zed 的 Claude 集成让你在 Claude 编辑时实时追踪文件变更。在 Claude 引用的文件间跳转,无需离开编辑器
  • Performance(性能) - 用 Rust 编写,即时打开,处理大型代码库无延迟
  • CMD+Shift+R Command Palette(命令面板) - 在可搜索的 UI 中快速访问所有自定义斜杠命令、调试器和工具。即使你只想运行一个快速命令而不切换到终端
  • Minimal Resource Usage(最小资源占用) - 在繁重操作期间不会与 Claude 争夺系统资源
  • Vim Mode(Vim 模式) - 完整的 vim 键绑定

Zed 编辑器使用 CMD+Shift+R 的自定义命令下拉菜单。右下角靶心图标显示跟随模式。Zed 编辑器使用 CMD+Shift+R 的自定义命令下拉菜单。右下角靶心图标显示跟随模式。

  • Split your screen(分屏) - 一边终端运行 Claude Code,一边编辑器
  • Ctrl + G - 在 Zed 中快速打开 Claude 正在编辑的文件
  • Auto-save(自动保存) - 启用自动保存,确保 Claude 的文件读取始终是最新的
  • Git integration(Git 集成) - 使用编辑器的 Git 功能在提交前审查 Claude 的更改
  • File watchers(文件监视器) - 大多数编辑器自动重新加载已更改的文件,确认已启用

VSCode / Cursor

这也是一个可行的选择,与 Claude Code 配合良好。你可以以终端格式使用,通过 \ide 启用 LSP 功能实现与编辑器的自动同步(现在与插件有些冗余)。或者你可以选择扩展版本,它与编辑器集成度更高,有匹配的 UI。

来自文档来自文档,地址:code.claude.com/docs/en/vs-…


My Setup

我的配置

插件

已安装:(我通常同时只启用其中 4-5 个)

ralph-wiggum@claude-code-plugins         # Loop automation
frontend-design@claude-code-plugins      # UI/UX patterns
commit-commands@claude-code-plugins      # Git workflow
security-guidance@claude-code-plugins    # Security checks
pr-review-toolkit@claude-code-plugins    # PR automation
typescript-lsp@claude-plugins-official   # TS intelligence
hookify@claude-plugins-official          # Hook creation
code-simplifier@claude-plugins-official
feature-dev@claude-code-plugins
explanatory-output-style@claude-code-plugins
code-review@claude-code-plugins
context7@claude-plugins-official         # Live documentation
pyright-lsp@claude-plugins-official      # Python types
mgrep@Mixedbread-Grep                    # Better search

MCP 服务器

已配置(用户级):

{
  "github": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-github"]
  },
  "firecrawl": {
    "command": "npx",
    "args": ["-y", "firecrawl-mcp"]
  },
  "supabase": {
    "command": "npx",
    "args": ["-y", "@supabase/mcp-server-supabase@latest", "--project-ref=YOUR_REF"]
  },
  "memory": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-memory"]
  },
  "sequential-thinking": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
  },
  "vercel": {
    "type": "http",
    "url": "https://mcp.vercel.com"
  },
  "railway": {
    "command": "npx",
    "args": ["-y", "@railway/mcp-server"]
  },
  "cloudflare-docs": {
    "type": "http",
    "url": "https://docs.mcp.cloudflare.com/mcp"
  },
  "cloudflare-workers-bindings": {
    "type": "http",
    "url": "https://bindings.mcp.cloudflare.com/mcp"
  },
  "cloudflare-workers-builds": {
    "type": "http",
    "url": "https://builds.mcp.cloudflare.com/mcp"
  },
  "cloudflare-observability": {
    "type": "http",
    "url": "https://observability.mcp.cloudflare.com/mcp"
  },
  "clickhouse": {
    "type": "http",
    "url": "https://mcp.clickhouse.cloud/mcp"
  },
  "AbletonMCP": {
    "command": "uvx",
    "args": ["ableton-mcp"]
  },
  "magic": {
    "command": "npx",
    "args": ["-y", "@magicuidesign/mcp@latest"]
  }
}

按项目禁用(上下文窗口管理):

# In ~/.claude.json under projects.[path].disabledMcpServers
disabledMcpServers: [
  "playwright",
  "cloudflare-workers-builds",
  "cloudflare-workers-bindings",
  "cloudflare-observability",
  "cloudflare-docs",
  "clickhouse",
  "AbletonMCP",
  "context7",
  "magic"
]

这是关键——我配置了 14 个 MCP,但每个项目只启用约 5-6 个。保持上下文窗口健康。

关键钩子

{
  "PreToolUse": [
    // tmux reminder for long-running commands
    {
      "matcher": "npm|pnpm|yarn|cargo|pytest",
      "hooks": ["tmux reminder"]
    },
    // Block unnecessary .md file creation
    {
      "matcher": "Write && .md file",
      "hooks": ["block unless README/CLAUDE"]
    },
    // Review before git push
    {
      "matcher": "git push",
      "hooks": ["open editor for review"]
    }
  ],
  "PostToolUse": [
    // Auto-format JS/TS with Prettier
    {
      "matcher": "Edit && .ts/.tsx/.js/.jsx",
      "hooks": ["prettier --write"]
    },
    // TypeScript check after edits
    {
      "matcher": "Edit && .ts/.tsx",
      "hooks": ["tsc --noEmit"]
    },
    // Warn about console.log
    {
      "matcher": "Edit",
      "hooks": ["grep console.log warning"]
    }
  ],
  "Stop": [
    // Audit for console.logs before session ends
    {
      "matcher": "*",
      "hooks": ["check modified files for console.log"]
    }
  ]
}

自定义状态栏

显示用户、目录、git 分支(带脏标记)、剩余上下文百分比、模型、时间和待办事项数量:

Mac 根目录中的示例状态栏Mac 根目录中的示例状态栏

规则结构

~/.claude/rules/
  security.md          # Mandatory security checks
  coding-style.md      # Immutability, file size limits
  testing.md           # TDD, 80% coverage
  git-workflow.md      # Conventional commits
  agents.md            # Subagent delegation rules
  patterns.md          # API response formats
  performance.md       # Model selection (Haiku vs Sonnet vs Opus)
  hooks.md             # Hook documentation

子代理

~/.claude/agents/
  planner.md             # Break down features
  architect.md           # System design
  tdd-guide.md           # Write tests first
  code-reviewer.md       # Quality review
  security-reviewer.md   # Vulnerability scan
  build-error-resolver.md
  e2e-runner.md          # Playwright tests
  refactor-cleaner.md    # Dead code removal
  doc-updater.md         # Keep docs synced

Key Takeaways

关键要点

  • 不要过度复杂化 - 把配置当作微调,而非架构设计
  • 上下文窗口很宝贵 - 禁用未使用的 MCP 和插件
  • 并行执行 - 分叉对话,使用 git worktrees
  • 自动化重复工作 - 用钩子处理格式化、代码检查、提醒
  • 限定子代理的作用域 - 有限的工具 = 专注的执行

References

参考链接


注: 这只是部分细节。如果大家感兴趣,我可能会发更多关于具体内容的帖子。

【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得

作者 HashTang
2026年2月27日 13:25

12 篇文章、一个完整的小程序、从需求分析到性能优化,这是我和 AI 协作开发心动恋聊的全过程。这篇文章作为系列收官,分享项目的完整回顾、AI 协作的心得体会、以及对未来开发模式的思考。

系列专栏【AI 编程实战】专栏目录

本篇主题:项目总结与 AI 协作心得

实战项目:心动恋聊 - AI 恋爱聊天助手

一、项目回顾:从 0 到 1 的历程

1.1 项目概览

心动恋聊是一个 AI 恋爱聊天助手小程序,帮助用户在社交场景中获得更好的聊天回复建议。

📊 项目规模:

技术栈:
- 前端:UniApp + Vue 3 + TypeScript + Pinia
- 后端:Next.js + Prisma + AI API
- UI:UnoCSS + UView Pro

代码量:
- 前端代码:~15,000 行
- 组件数量:30+ 个
- 页面数量:15+ 个
- Hooks:10+ 个

开发周期:
- 总耗时:约 4 周
- 迭代次数:3 个大版本

1.2 系列文章脉络

📚 12 篇文章的完整脉络:

【基础搭建】(第 1-5 篇)
├── 第 1 篇:项目启动 - 需求分析、技术选型、AI 配置
├── 第 2 篇:创建项目 - UniApp 项目初始化与配置
├── 第 3 篇:页面结构 - 首页布局与 TabBar 配置
├── 第 4 篇:样式系统 - UnoCSS 原子化 CSS 实战
└── 第 5 篇:状态管理 - Pinia 持久化与用户状态

【核心功能】(第 6-9 篇)
├── 第 6 篇:网络请求 - HTTP 封装与拦截器设计
├── 第 7 篇:登录流程 - 微信授权与多步骤弹窗
├── 第 8 篇:组件封装 - 可复用组件设计方法
└── 第 9 篇:Hooks 封装 - 逻辑复用的最佳实践

【质量保障】(第 10-12 篇)
├── 第 10 篇:错误处理 - 防御性编程与边界情况
├── 第 11 篇:性能优化 - 分包、懒加载、缓存策略
└── 第 12 篇:项目总结 - 回顾与 AI 协作心得(本篇)

1.3 每篇文章的核心产出

篇章 主题 核心产出
第 1 篇 项目启动 需求文档、技术架构图
第 2 篇 创建项目 项目脚手架、目录结构
第 3 篇 页面结构 首页布局、TabBar 配置
第 4 篇 样式系统 UnoCSS 配置、主题色方案
第 5 篇 状态管理 userStore、持久化方案
第 6 篇 网络请求 HTTP 封装、拦截器
第 7 篇 登录流程 LoginModal、多步骤流程
第 8 篇 组件封装 XButton、Modal、VipCard
第 9 篇 Hooks useRequest、useUpload
第 10 篇 错误处理 Toast 封装、防御性编程
第 11 篇 性能优化 分包、懒加载、缓存
第 12 篇 项目总结 方法论、心得体会

二、AI 协作的正确姿势

2.1 什么样的对话最有效

通过 12 篇文章的实践,我总结出和 AI 对话的几个关键点:

❌ 低效的对话方式:

我:帮我写一个登录功能

这样的提问太宽泛,AI 不知道:

  • 是什么平台?小程序/H5/App?
  • 用什么登录方式?微信/手机号/密码?
  • 登录后跳哪里?需要什么回调?
  • UI 是弹窗还是页面?

✅ 高效的对话方式:

我:需要设计一套登录系统,要求:
    1. 微信小程序环境
    2. 支持微信登录 + 手机号授权
    3. 新用户要引导填性别和年龄
    4. 任意页面都能触发登录弹窗
    5. 登录成功后能执行回调

这样 AI 能给出精准的方案,因为:

  • 明确了环境(小程序)
  • 明确了功能(微信登录 + 手机号)
  • 明确了流程(新用户引导)
  • 明确了交互(弹窗 + 回调)

2.2 对话的层次感

我发现最有效的对话是分层推进的:

第一轮:说清楚要做什么
我:需要封装一个通用的请求 Hook

第二轮:AI 询问细节,我补充
AI:需要支持哪些功能?immediate?初始数据?
我:需要立即执行选项,需要初始数据

第三轮:AI 给出设计,我确认
AI:我来设计接口结构...
我:开始吧

第四轮:AI 生成代码,我追问
AI:(生成代码)
我:为什么用 Promise 链式而不是 try-catch?

第五轮:AI 解释原理,我学到了
AI:两种写法对比...

这种层层递进的对话,比一次性给出"完美 Prompt"更有效,因为:

  1. 渐进明确:需求是在对话中逐步清晰的
  2. 双向确认:AI 的设计决策需要你确认
  3. 深度学习:追问"为什么"让你真正理解

2.3 AI 不是银弹

在实践中,我也发现了 AI 的局限:

📊 AI 擅长的事:

✅ 生成样板代码(CRUD、配置)
✅ 解释技术概念
✅ 分析代码问题
✅ 提供多种方案对比
✅ 重构和优化建议

📊 AI 不擅长的事:

❌ 理解业务上下文(需要你提供)
❌ 做产品决策(需要你判断)
❌ 处理边界情况(需要你验证)
❌ 了解项目历史(需要你说明)

核心认知:AI 是工具,不是替代品。你需要:

  • 清晰地描述需求
  • 评估 AI 给出的方案
  • 验证生成的代码
  • 理解背后的原理

三、效率提升的真实数据

3.1 开发效率对比

📊 单项任务耗时对比:

| 任务 | 传统方式 | AI 辅助 | 提升倍数 |
|------|---------|---------|----------|
| HTTP 封装 | 4 小时 | 1 小时 | 4x |
| 登录弹窗 | 8 小时 | 3 小时 | 2.7x |
| 组件封装 | 6 小时 | 2 小时 | 3x |
| Hooks 设计 | 4 小时 | 1.5 小时 | 2.7x |
| 错误处理 | 3 小时 | 1 小时 | 3x |
| 性能优化 | 6 小时 | 2 小时 | 3x |

3.2 效率提升的来源

📊 效率提升分析:

1. 减少"从零开始"的时间
   - 传统:Google 搜索 → 看文档 → 试错
   - AI:描述需求 → 获得可用代码 → 微调

2. 减少"踩坑"的时间
   - 传统:遇到问题 → Stack Overflow → 找答案
   - AI:描述问题 → 获得解决方案 → 理解原因

3. 减少"重复劳动"
   - 传统:复制粘贴 → 手动修改
   - AI:描述模式 → 批量生成

4. 加速"学习理解"
   - 传统:看源码 → 猜测用法
   - AI:问"为什么" → 获得解释

3.3 质量提升的体现

📊 代码质量对比:

【代码规范性】
- 一致的命名风格
- 完整的类型定义
- 合理的代码注释

【架构合理性】
- 清晰的分层设计
- 合理的职责划分
- 可扩展的接口设计

【可维护性】
- 抽象复用的组件
- 封装良好的 Hooks
- 统一的错误处理

四、最佳实践总结

4.1 项目结构最佳实践

📂 推荐的项目结构:

src/
├── api/              # API 接口定义
│   ├── user.ts
│   └── chat.ts
├── components/       # 通用组件
│   ├── XButton.vue
│   ├── Modal.vue
│   └── LoadingIndicator.vue
├── composables/      # 组合式函数
│   ├── useLoginFlow.ts
│   └── useSystemInfo.ts
├── hooks/            # 通用 Hooks
│   ├── useRequest.ts
│   └── useUpload.ts
├── http/             # HTTP 封装
│   ├── http.ts
│   ├── interceptor.ts
│   └── types.ts
├── pages/            # 页面
│   ├── index/
│   └── my/
├── store/            # 状态管理
│   ├── user.ts
│   └── loginModal.ts
├── subPackages/      # 分包
│   ├── vip/
│   └── agreement/
└── utils/            # 工具函数
    ├── toast.ts
    └── platform.ts

4.2 代码规范最佳实践

// ✅ 推荐的代码风格

// 1. 类型定义清晰
interface Props {
  text?: string;
  loading?: boolean;
  disabled?: boolean;
}

// 2. 默认值合理
const props = withDefaults(defineProps<Props>(), {
  text: '',
  loading: false,
  disabled: false,
});

// 3. 事件定义明确
const emit = defineEmits<{
  click: [];
  success: [data: any];
  error: [error: Error];
}>();

// 4. 计算属性缓存
const formattedData = computed(() =>
  rawData.value.map(item => ({
    ...item,
    displayName: formatName(item.name),
  }))
);

// 5. 错误处理完整
const handleSubmit = async () => {
  if (loading.value) return;

  loading.value = true;
  try {
    const res = await doSubmit();
    emit('success', res.data);
  } catch (error) {
    console.error('提交失败:', error);
    toast.error('提交失败,请重试');
  } finally {
    loading.value = false;
  }
};

4.3 AI 协作最佳实践

📋 AI 协作清单:

【开始前】
□ 明确功能需求
□ 了解技术约束
□ 准备上下文信息

【对话中】
□ 分层描述需求
□ 确认设计方案
□ 追问实现原理
□ 要求代码解释

【生成后】
□ 阅读理解代码
□ 验证功能正确
□ 检查边界情况
□ 优化代码细节

五、踩过的坑与解决方案

5.1 常见问题汇总

📊 开发中遇到的典型问题:

1. Token 获取位置
   ❌ 从 Store 获取(拦截器执行时 Store 未初始化)
   ✅ 从 Storage 获取

2. 响应式数据依赖
   ❌ 静态对象引用 store 数据
   ✅ 使用 computed 保持响应式

3. 枚举类型存储
   ❌ 字符串存储('男'/'女')
   ✅ 数字枚举(1/2)

4. 条件编译位置
   ❌ 运行时判断平台
   ✅ 使用 #ifdef 编译时判断

5. 组件职责边界
   ❌ 组件内处理业务逻辑
   ✅ 组件只负责 UI,业务逻辑在 Store/Service

5.2 避坑指南

// 1. Token 获取
// ❌ 错误
const { token } = userStore.userInfo;

// ✅ 正确
const token = uni.getStorageSync('token');

// 2. 响应式依赖
// ❌ 错误
const menuItems = {
  label: userStore.genderDisplay
};

// ✅ 正确
const menuItems = computed(() => ({
  label: userStore.genderDisplay
}));

// 3. 平台判断
// ❌ 错误
if (process.env.UNI_PLATFORM === 'mp-weixin') {
  // ...
}

// ✅ 正确
// #ifdef MP-WEIXIN
// 小程序专用代码
// #endif

六、对未来的思考

6.1 AI 辅助开发的趋势

📊 我的观察:

【现在】
- AI 生成代码片段
- 人工整合和调试
- 需要理解才能用

【未来可能】
- AI 理解整个项目上下文
- 自动化测试和修复
- 更智能的代码审查

【不变的是】
- 需求分析能力
- 架构设计能力
- 问题诊断能力

6.2 开发者的核心竞争力

📊 AI 时代的开发者能力:

1. 问题定义能力
   - 把模糊需求转化为清晰描述
   - 识别真正要解决的问题

2. 方案评估能力
   - 评估 AI 给出的多种方案
   - 选择最适合当前场景的

3. 架构设计能力
   - 理解系统整体结构
   - 做出合理的技术决策

4. 持续学习能力
   - 通过 AI 加速学习新技术
   - 保持技术敏感度

七、系列总结

7.1 本系列的价值

📚 这个系列想传达的:

1. AI 辅助开发是可行的
   - 不是概念,是实践
   - 有真实的效率提升

2. 对话比 Prompt 更重要
   - 不是"写好 Prompt 就行"
   - 而是"多轮对话逐步明确"

3. 理解比复制更重要
   - 不是"复制代码就完了"
   - 而是"理解原理才能用好"

4. 人的判断不可替代
   - AI 是工具,不是替代
   - 技术决策需要人来做

7.2 给读者的建议

📋 如果你想开始 AI 辅助开发:

1. 从小项目开始
   - 不要一开始就用于生产项目
   - 先在 Side Project 中积累经验

2. 保持学习心态
   - 每次对话都是学习机会
   - 追问"为什么"比"给我代码"更重要

3. 建立验证习惯
   - AI 生成的代码要验证
   - 边界情况要自己考虑

4. 积累对话模式
   - 总结有效的对话方式
   - 建立自己的"提问模板"

7.3 最后的话

心动恋聊从一个想法,到一个完整的小程序,
再到这 12 篇文章,是我和 AI 协作的一次深度实践。

我最大的感受是:
AI 没有让编程变得"不需要思考",
反而让我更清晰地思考"该怎么做"。

因为你需要:
- 清晰地描述需求
- 评估多种方案
- 理解生成的代码
- 验证实际效果

这些,都需要思考。

希望这个系列对你有帮助。
如果有问题,欢迎评论区交流!

系列完结!

12 篇文章,完整记录了心动恋聊小程序从 0 到 1 的开发过程。

这不是教你"如何写 Prompt",而是展示如何和 AI 协作解决实际问题

如果这个系列对你有帮助,请点赞、收藏、转发!

刚刚,Nano Banana 2 发布!便宜又大碗,体验后我发现这些细节

作者 莫崇宇
2026年2月27日 10:40

用 AI 生图,总绕不开一道两难题:要快,还是要好?

但速度与质量之间,未必是鱼和熊掌不可兼得。就在刚刚,Google 正式发布了他们的新一代图像生成模型:Nano Banana 2(Gemini 3.1 Flash Image)。

没有太多颠覆世界的口号,它只是把更好的画质和更懂人话的理解力,一起塞进了全新的底层架构里。就这一件事,却让 AI 生图少了几分「看运气」的感觉,多了几分真正能用的踏实。

▲官方博客地址:https://blog.google/innovation-and-ai/technology/ai/nano-banana-2/

接入了整个互联网,这次的 AI 真的懂你在说什么

要说清楚这次的变化,得先回想一下三年前 AI 生图有多难用。

你让它画「红烧肉」,它可能老老实实给你画一块正在燃烧的肉;你让它在海报上写句中文,它往往会给你凑出一堆毫无意义的鬼画符。缺乏对真实世界的常识,是第一代 AI 最容易让人崩溃的地方。

现在的 Nano Banana 2,改变了不少。它和前代 Nano Banana Pro 一样,接入了 Gemini 积累的庞大真实世界知识库,还能结合网页搜索的实时信息,用起来更像是一个见过世面、懂点常识的人。

最先感受到的变化,是它开始更好地理解空间和比例了。

▲提示词:画面中,【东方明珠广播电视塔】被一只超级巨大、超级可爱的【猫】占据。周围的建筑物看起来就像玩具模型一样小,而【猫】则非常巨大。游戏背景设定在一个逼真的城市环境中。整体氛围安静、温暖、舒缓、可爱。

在上面这个案例中,AI 精准地还原了上海的地标,并极其自然地处理了巨猫与微缩城市之间的光影和透视关系。

最直观的改变,是它终于认字、也会写字了。比如让它画一幅《枫桥夜泊》的水墨画。画面上方不仅端端正正地用书法写出了「月落乌啼霜满天」等全句,甚至连排版和水墨的意境都拿捏得比较准。

▲当然,也不是没有瑕疵,仔细看上方悄悄多出了一个「满」字。

除了诗意,它还能处理相当复杂的 UI 场景——在下面这张图里,复杂的半透明数据面板、悬浮的购物清单、精准的中文显示,被 AI 有条不紊地安排得井井有条,信息之间的层级关系也真正理清楚了。

▲提示词:第一人称视角,置身于灯光明亮的超市货架通道中。人类双手将一瓶芬达汽水举到镜头前方。鲜艳的橙色饮料装在其标志性的品牌瓶身里,周围环绕着多层全息增强现实界面,用中文展示营养相关数据,包括热量数值、含糖量、咖啡因水平、新鲜度指示、保质/到期日期,以及基于芬达推荐的清爽饮品配方和鸡尾酒调制方案。玻璃质感的 UI 面板,柔和的环境光晕,逼真的光照与阴影,自然的景深效果,沉浸式第一人称交互界面,2K

排版极其讲究的双页黑白日式漫画,也是手拿把掐。

▲提示词:设计一份逼真的双页漫画杂志样张。每一页都应包含多个漫画风格分镜,以富有动感的版式排列,呈现出专业印刷的日本漫画质感。整体风格为黑白稿,使用粗犷有力的墨线、网点效果(screen tones)以及富有表现力的人物绘制。画面中加入对白气泡、中文拟声词,并通过分镜之间的过渡来传达动作、情绪与节奏。左右两页需要连贯衔接,像同一场景或同一话章节的一部分。采用传统漫画镜头语言:特写、远景、斜向分镜以及戏剧化的视角与构图。整体观感要真实可信,仿佛来自一本真正的漫画杂志的跨页内容。

或者这张带步骤说明的「功夫茶」中文信息图,从排版到意境,都给出了一套可以直接用的视觉方案。

▲生成提示词:一张关于中国传统功夫茶道设计精美的垂直信息图。中国传统水墨画背景。顶部有巨大的、优雅的中文书法标题,明确写着「功夫茶」。向下有三个图文并茂的步骤:步骤 1 展示用沸水温杯,配有中文「温杯」;步骤 2 展示将茶叶放入盖碗,配有中文「投茶」;步骤 3 展示倒出茶汤,配有中文「出汤」。优雅、极简、温暖的大地色调,平衡的布局。

一位很早就接触到 Nano Banana 2 的内测用户,给出了一个相当中肯的评价:「它并不完美,但它是第一个能够以一定一致性,去处理真正复杂图像和图表的模型。」

为了测试这个新模型的理解极限,他随手甩出了一道极其刁钻的测试题:「给我画一张设定在古威尼斯的《寻找沃尔多(Where’s Waldo)》,但里面要找的不能是人,得是一只穿着蓝色条纹飞行服的水獭。」

Nano Banana 2 最终也真的理清了逻辑,不仅没画串,还稳稳地交出了答卷。

快和好,终于不用二选一了?

除了懂常识,强大的「主体一致性」是这次 Nano Banana 2 更新的另一大杀手锏。

在一次生成过程中,它最多能保持 5 个角色的脸不崩,或者 14 个物品的样子不变。这意味着,你可以放心大胆地拿它来画连载漫画或者做影视分镜了。

不仅如此,它的画质也达到了可以直接干活的标准。

从 512px 的配图到 4K 级别的超高清海报,它都能拿捏。输入一段关于「重庆老火锅」的提示词,它能生成一张赛博朋克风的雨夜街景,湿漉漉的柏油路上,红蓝霓虹灯的倒影和「24 小时营业」的招牌都细致入微。

▲提示词:一张繁忙亚洲城市雨夜的电影感街头照片。一个巨大的、发光的红色霓虹灯牌挂在一座老建筑上,上面清晰地写着「重庆老火锅」。在它下面,一个较小的蓝色霓虹灯牌写着「24 小时营业 – 欢迎光临」。湿漉漉的柏油路反射着霓虹灯光。

色彩张力极强的波普艺术风格,它也驾驭得住。

或者是这种带着几分荒诞、又透着高级感的时尚大片:

▲提示词:This high-resolution bird’s-eye view photograph was taken with a LOMO Ic-a. The ground is covered with countless black-and-white billboard advertisements of beautiful fashion models, and standing on top of the advertisements is an incredibly beautiful chinese film actress wearing a long black coat.

在这个俯视视角的案例中,AI 极好地模拟了老式 LOMO 相机的特殊质感。女演员孑然独立于铺满黑白海报的地面上,画面的电影张力和故事感呼之欲出。

不过也不是没有明显短板,让它将二次元人物、铅笔素描和黏土人强行塞进同一个真实咖啡馆的场景中,素描人物的融入就显得十分生硬,边缘过渡也不够自然。

显然,在跨维度融合上,它远不及前代模型效果来得自然,还有进步的空间。

▲提示词:A photo of an everyday scene at a busy cafe serving breakfast. In the foreground is an anime man with blue hair, one of the people is a pencil sketch, another is a claymation person

其实整体体验下来,尽管官方博客将 Nano Banana 2(Gemini 3.1 Flash Image)吹的天花乱坠,但实际体感中,生成的质量效果和速度并未得到肉眼可见的提升,甚至在部分场景中还不及前代模型。

真正让 Nano Banana 2 站稳脚跟的,其实是它极其接地气的性价比。

今天起,在 Gemini 应用和 Google 搜索框里,你都能顺手用上它。没有订阅方案的普通用户,24 小时内也能白嫖 100 张;而 Pro 订阅用户的额度则高达 1000 张。

对于开发者而言,API 的价格更是直接腰斩,仅为上一代 Pro 模型的一半。折算下来,生成一张 4K 高清图的成本被硬生生打到了 0.15 美元左右。

▲ 附上地址:https://ai.google.dev/gemini-api/docs/pricing#gemini-3.1-flash-image-preview

当然,当 AI 能够以极低的成本、极快的速度批量生产高清图片时,大家心里其实越没底。现在网上的假图满天飞,「眼见为实」这句话早就靠不住了。如果任何人都能在一秒钟内生成一张几可乱真的照片,我们该如何分辨图片?

Google 自己也十分清楚这一点,所以他们也一并升级了防伪技术。Nano Banana 2 继续加深了对 SynthID 数字水印和 C2PA 内容凭证的支持,能够更清楚地看到一张图到底是不是 AI 画的,以及它是怎么被修改的。

据统计,自去年 11 月以来,Gemini 里的这个验证功能已经被调用了超过 2000 万次。

AI 绘图这两年的发展,确实快得让人眼花缭乱。我们经历过 Nano Banana Pro 的一眼惊艳,也经历过繁琐的调教与漫长的等待。Nano Banana 2 的出现,则尝试进一步把好和快揉在了一起,并大大降低了使用的门槛。

你脑子里的一个灵感,不用再经过反复的修改和焦躁的等待。敲下回车的瞬间,它就在那里了。自然、简单,且立等可取,这件事听起来平常,但能做到,其实已经很难得了。

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


AI辅助开发实战:会问问题比会写代码更重要

作者 牛奶
2026年2月26日 21:22

AI辅助开发实战:会问问题比会写代码更重要

系列第二篇。我想聊聊怎么用好 AI 这个工具。不是教你怎么敲代码,而是教你,怎么真正用好AI辅助开发工具。


原文地址

墨渊书肆/AI辅助开发实战:会问问题比会写代码更重要


你有没有过这样的经历?

打开Cursor(或者TraeCopilot),对着空白编辑器发了半天呆,不知道该让AI帮你干什么。

或者你问了一句「帮我写个登录功能」,AI 噼里啪啦写了一大堆代码,你看都看不懂,最后只能硬着头皮复制粘贴。

再或者,你问 AI:「这个报错是什么意思?」它回了一堆你看不懂的术语,你更迷茫了。

如果你有以上任何一种经历,这篇文章就是写给你的。


会问问题,比会写代码更重要

这是我最近一年用 AI 辅助开发最大的感悟。

以前我觉得,AI 嘛,就是个更聪明的搜索引擎。我不会的代码问它,它告诉我怎么写呗。

后来发现不是这么回事。

同样一个问题,不同的问法,AI 给出的答案质量可以差十倍。

AI 不会读心术。你得把自己的需求翻译成 AI 能理解的语言。

举两个例子感受一下:

第一种问法:「帮我写个登录功能。」

AI给你一个标准答案:用户名密码输入框、提交按钮、后端接口、数据库查询。看起来很全,但放到你的项目里可能完全不适用。你要改吧,改到猴年马月。不要吧,扔掉又可惜。

第二种问法:「我的项目用Next.jsPrisma,用户表字段是 email 和 passwordHash。请帮我写一个登录API,要支持邮箱密码登录,密码用 bcrypt 加密,返回 JWT token,7天有效期。」

AI给你的代码,直接就能用。稍微调一下就能跑。

这就是差距。好的 Prompt 不是更长的Prompt,而是更精确的 Prompt。


几个基本概念

在开始讲技巧之前,先简单说几个你经常会遇到的术语:

LLM:Large Language Model,大语言模型。你可以把LLM理解为"大脑",GPT、Claude、DeepSeek 都是 LLM。ChatGPT、Cursor背后的 AI 都是LLM在驱动。

Prompt:提示词,你给AI说的话。「帮我写个登录功能」就是一个Prompt。

Agent:你可以理解为"能自己干活"的AI。传统AI是你问一句它答一句,Agent 是你告诉它一个目标,它自己规划步骤去执行。Cursor 的 Agent 模式就是这个原理。

MCP:Model Context Protocol,模型上下文协议。这是 2024 年出来的一个标准,让 AI 能统一地访问外部工具和数据。比如 AI 可以通过 MCP 直接读取你电脑上的文件、查询你的数据库、控制浏览器。2026年的 Cursor 已经支持 MCP,用起来很方便。

Token:你可以理解为 AI 处理文字的"计量单位"。英文约4个字符=1个 Token,中文约1-2个汉字=1个 Token。

为什么要注意 Token?因为 AI API 是按 Token 收费的。你输入的文字要花钱,AI输出的文字也要花钱。知道这些就够了,继续往下看。


我的AI辅助开发经验

2026年了,AI辅助开发工具已经成为程序员的标配。CursorTraeCopilotOpenCode……不管你用哪个,核心技巧都是互通的。

我用了一年多,从一开始的「这有啥」到现在的「真香」,总结了一些真正有用的经验。

1. 搞清楚什么时候用什么模式

Cursor 有两个核心模式:AgentChat。用对了,效率翻倍;用错了,就是折磨。

Chat模式:你问一句,它答一句。像跟人聊天一样。

我一般用来:

  • 问具体问题:「这个报错是什么意思?」
  • 查知识点:「PostgreSQL的索引类型有哪些?」
  • 解释代码:「这个函数做了什么?」
  • 帮我想名字:「帮我给这个函数起个名字」

Agent模式:你描述一个任务,它自己去分析和改代码。威力更大,但需要把需求说清楚。

我一般用来:

  • 帮我重构整个模块:「把这个登录从JWT改成Session」
  • 帮我修bug:「登录一直返回401,帮我看看是什么原因」
  • 帮我转换代码:「把这个JavaScript文件改成TypeScript」
  • 帮我实现一个功能:「帮我实现用户注册功能,包含表单验证、数据库存储、发送欢迎邮件」

简单说:小问题用Chat,大任务用Agent。

2. 喂上下文是有技巧的

Cursor 最强的地方是它能理解你的整个项目。你打开一个文件,问它这个组件是做什么的,它能根据文件名、代码内容、项目结构给你答案。

但有时候它也会犯傻——给你一些牛头不对马嘴的回答。

这时候,你得学会喂上下文

我犯过的错误:

「怎么优化这个查询?」

AI回了半天,什么加索引、分页、缓存讲了一套,我根本不知道它说的是什么,因为我连我的表结构都没告诉它。

后来我学乖了:

「我的Prisma查询是这样的:prisma const users = await prisma.user.findMany() 数据量大概10万条,现在查询要3秒,请问怎么优化?」

这次AI直接告诉我:1. 加索引 2. 用select只查需要的字段 3. 考虑分页。

我的习惯是:至少告诉AI三件事

  1. 我用的技术栈是什么(Next.js + Prisma + PostgreSQL)
  2. 当前代码长什么样(贴上代码)
  3. 遇到了什么问题(查询慢、报错、不知道怎么做)

3. Tab键补全真的好用

大部分 AI 辅助开发工具都有代码补全功能,会预测你下一行要写什么。按 Tab 键直接采纳预测。

刚开始我还不太信这个功能,觉得 AI 哪有那么聪明。后来真香了。

我经常这样用:

  • 写TypeScript类型定义,AI能猜到我要的类型
  • 写React组件props,AI能帮我补全大部分
  • 写数据库schema,AI知道我想要什么字段
  • 写import语句,AI知道我要导入什么

10次有8次是准的,能省很多打字的时间。

4. 选中代码让AI帮你改(核心技巧)

选中一段代码,让AI帮你修改。这是一个通用技巧,大部分工具都支持,只是快捷键不太一样。

这是我最常用的功能,没有之一。

比如我选中一个函数,这样用:

「请帮我添加错误处理和类型定义」

AI直接在原代码基础上帮我改好了,我只需要确认一下就行。

比让它生成一段新代码然后我再替换,效率高很多。

再举几个我常用的场景:

  • 选中一段面条式代码:「请帮我重构这段代码」
  • 选中一个API接口:「请帮我添加参数校验」
  • 选中一个组件:「请把这个组件改成响应式」

5. 打开对话窗口做复杂任务

有时候你想让AI帮你做比较复杂的任务,比如生成一个完整的组件。

选中代码后打开对话窗口,可以详细描述你的需求。

我经常这样用:

  1. 选中一段代码
  2. 打开对话窗口
  3. 详细描述我要做什么
  4. AI生成代码,我可以逐行确认

这个功能特别适合:

  • 生成一个新组件
  • 实现一个复杂功能
  • 写测试用例

6. @符号引用文件

@符号引用特定内容。

  • @File :引用当前打开的文件
  • @components/UserCard.tsx :直接引用某个文件
  • @Folder :引用整个文件夹
  • @Docs :引用官方文档
  • @Search :搜索项目内的代码

最常用的场景:

@components/UserCard.tsx 请帮我在这个组件里添加一个编辑用户信息的功能

AI直接读取文件内容,在正确的位置帮我添加代码。

@Docs 请帮我查一下Next.js的metadata怎么用来做SEO

AI直接读官方文档,给我准确的答案。

7. 设置好项目规范

我在每个项目都会设置Rules。这是Cursor的一个特色功能,其他工具类似功能还在发展中。

在项目根目录创建.cursor/rules/目录,放.mdc文件:

---
name: 项目规范
description: Next.js 15 App Router 项目规范
---

# 技术栈
- 框架:Next.js 15 App Router
- 语言:TypeScript strict
- 样式:Tailwind CSS
- 数据库:PostgreSQL + Prisma

# 目录结构
- app/:页面
- components/:组件
- lib/:工具函数
- prisma/:数据库schema

# 代码规范
1. 默认使用 Server Components
2. 客户端用 'use client' 标记
3. API错误格式:{ success: boolean, error?: string }

设置好之后,Cursor每次生成代码都会自动遵循这些规范。

举个例子:我不用每次都说「API错误要返回success和error字段」,Cursor自己就知道。

而且Rules是可以复用的。我做了几个模板:

  • Next.js项目规范
  • NestJS项目规范
  • React组件规范

每次建新项目,直接复制过来改一下就行。

8. 用好Skills,让AI更专业

如果说Rules是「项目规范」,那Skills就是「专业能力」。

你可以在.cursor/skills/目录放一些专业技能文件:

# .cursor/skills/database.md

你是一个数据库专家,精通 PostgreSQL 和 Prisma。

在回答数据库相关问题时:
1. 优先考虑查询性能,避免 N+1 问题
2. 合理使用索引,解释为什么加这个索引
3. 更新用 update,删除用 delete,别用 updateMany

回答时先解释原理,再给代码示例。

用的时候告诉AI:「请用数据库专家的角度,帮我审查以下Prisma查询...」

它回答的专业度明显比普通模式高。

我目前积累了几个Skills:

  • database.md:数据库专家
  • security.md:安全专家
  • performance.md:性能优化专家
  • typescript.md:TypeScript专家

9. MCP让AI更强大

前面提到了MCP,这是2026年特别值得关注的特性。

简单说,MCP 让 AI 能从"只懂训练数据"变成"能操作真实世界":

  • MCP + 文件系统:AI 可以直接读取、修改你本地项目的代码
  • MCP + 数据库:AI 可以直接查询你的数据库
  • MCP + 浏览器:AI 可以控制浏览器,帮你填表单、截图
  • MCP + 搜索:AI 可以帮你搜Google、搜文档

Cursor、Trae 等新一代工具已经开始支持 MCP,装好对应的插件就能用。

装好 MCP 插件后,我可以直接问AI:「帮我查询数据库里最近注册的10个用户」

AI真的会去查数据库,然后给我结果。

这个功能还在快速进化中,未来能做的事情会越来越多。

10. 节省Token是有技巧的

前面提到了 Token 的概念。Token 是 AI 处理文字的计量单位,AI API 是按 Token 收费的。

这是我总结的节省 Token 经验:

  1. 别一上来就贴全栈代码:只贴和问题相关的代码片段,AI不需要看你的整个项目才能回答问题。

  2. 问完一个问题可以开新会话:如果新问题和上一个问题不相关,别在同一个会话里继续聊。AI需要记住之前对话的内容,这些也会算Token。

  3. 让AI一次性完成:比如你要写一个组件,别分开问「先帮我写HTML」「再帮我写样式」「再加个交互」。直接说「帮我写一个登录组件,包含表单验证、错误提示、暗色模式支持」,一次搞定。

  4. 精简你的Prompt:Prompt不是越长越好,是越精确越好。把无关的废话去掉,AI能更专注,Token也花得值。

  5. 用@引用代替复制粘贴:用@File引用文件,AI会自己去读,比你复制粘贴一长串代码省Token。


这些场景我天天用AI

1. 读报错信息

以前遇到报错,我要把错误信息复制到Google搜半天。

现在直接问Cursor:「这个报错是什么意思?TypeError: Cannot read properties of undefined (reading 'map')」

它会告诉我:错误原因是什么、最可能出在哪个地方、怎么修复。

80%的情况下,它能帮我省掉搜索的时间。

有时候我甚至直接截图给它看,它也能分析个大概。

2. 代码Review

以前代码Review都是同事做。现在我先让AI Review一遍,发现低级问题,再交给同事。

效率高很多,而且有些话AI说得,我作为开发者反而不好开口。

「请审查以下代码,指出:1. 潜在安全问题 2. 性能问题 3. 代码规范问题」

它会从安全性、性能、代码规范等角度帮我分析一遍。

3. 重构代码

觉得某段代码写得烂,但不知道怎么改?

问AI:「请帮我重构以下代码,要求:1. 使用TypeScript类型 2. 提取可复用逻辑 3. 增加错误处理」

AI会给一个全新的版本,我可以参考它的思路自己改,也能学到东西。

有时候我还会让它用不同的方式重构,让我对比学习。

4. 帮我想名字

我经常让AI帮我给变量、函数起名字。

「我有一个函数,接受用户ID,返回用户名、邮箱、头像、最后登录时间。请帮我想一个合适的函数名」

AI会给三四个建议:

  • getUserById
  • fetchUserDetails
  • getUserProfile

我会选一个最合适的。

比自己想半天强多了。而且AI起的名字通常都比较规范,符合命名习惯。

5. 写测试

写测试很枯燥,但很重要。

我会让AI帮我:

「请为以下函数编写单元测试,覆盖:正常情况、空输入、错误输入」

AI生成测试代码,我再根据需要调整。能省不少时间。

有时候我还会让它帮我补充边界情况的测试。

6. 查文档

以前遇到问题,我先去 Google 搜,然后看 Stack Overflow,最后实在不行才去翻文档。

现在我直接问 Cursor:

`@Docs 请帮我查一下Next.js 15怎么做密码重置」

或者

`@Docs Vercel AI SDK怎么实现流式响应」

AI直接从文档里给我准确的答案,比我自己搜快多了。

7. 帮我写SQL

有时候我需要写一些复杂的SQL查询,直接问AI:

「帮我写一个SQL,查询过去7天每天的新增用户数,按日期排序」

AI会给我SQL,我稍微改改就能用。

8. 帮我理解别人的代码

接手别人的项目,看不懂代码怎么办?

问AI:

`@components/OldCode.tsx 请帮我解释这个组件做了什么」

AI会把代码逻辑梳理一遍,比我自己看快多了。


积累自己的Prompt模板库

这是我想聊的最后一个话题。

有些 Prompt 我会反复使用,慢慢就积累了一套模板:

// 解释代码
请用三句话解释以下代码做了什么

// 解释报错
这个报错是什么意思?{报错信息}

// 生成类型
请为以下接口生成 TypeScript 类型定义

// 代码审查
请审查以下代码,指出:1. 潜在问题 2. 性能优化点 3. 代码规范问题

// 重构
请重构以下代码,要求:{你的要求}

// 写测试
请为以下函数编写测试用例,覆盖:{场景1}、{场景2}、{场景3}

// 查文档
@Docs {你的问题}

我保存在一个markdown文件里,用的时候直接复制粘贴,稍微改改就能用。

我的经验总结

用多了,你会发现有些规律:

  • 1. 模板要简单通用

    我的模板都很简单,就是一个开头。比如「请用三句话解释」,这个模板可以用在任何代码上。

    不要把模板写得太具体,比如「帮我写一个登录表单要包含用户名、密码、验证码」。这样反而不好复用。

  • 2. 遇到好的Prompt就保存下来

    有时候你会发现,同样的问题,不同的问法,AI回答的质量差很多。

    遇到好的Prompt,就把它保存下来。下次遇到类似的问题,直接用或者改改再用。

  • 3. Rules模板可以复用

    Rules模板也是一样的道理。

    我做了几个模板:

    • Next.js项目规范
    • NestJS项目规范
    • React组件规范

    每次建新项目,直接复制过来改一下就能用。做到第三个项目,你会发现很多规范是可以复用的。

  • 4. 定期整理和迭代

    我的模板库每个月会整理一次。把不用的删掉,好的留下来。

    有时候会发现之前写的模板不够好,就改改。

    这是一个持续迭代的过程,不用急。


写在最后

回到开头的问题:会问问题,为什么比会写代码更重要?

因为 AI 时代,写代码的门槛会越来越低。但提问的能力——把模糊的需求翻译成精确的描述——这个能力反而越来越值钱。

你能不能清楚地描述你想要什么?能不能给 AI 足够的上下文?能不能判断 AI 给出的答案对不对?

这些才是 AI 时代真正的核心竞争力。

AI 辅助开发工具会越来越好用,Cursor、Trae、Copilot、OpenCode……不管你用哪个,核心技巧都是互通的。用好工具的人,永远是那些懂得思考的人。

下一篇文章,我们会开始真正的技术内容:《全栈开发环境搭建:Git + monorepo + 开发工具链》。

感兴趣的话,下一篇见。

为什么2026年还要学全栈?

作者 牛奶
2026年2月26日 21:17

为什么2026年还要学全栈?

系列开篇,写给想要真正做事的人。


原文地址

墨渊书肆/为什么2026年还要学全栈


你有没有过这样的经历?

做了一套很酷的前端界面,发到群里求赞。朋友问:「能线上访问吗?」你愣了一下:「还在本地跑着呢。」

搭建了一个API接口,测试数据跑得好好的。放到线上就开始报错,你对着日志看了半天,不知道是数据库连接问题还是CORS没配好。

买了个云服务器,SSH连上后对着黑屏发呆——接下来该干什么?域名怎么绑定?HTTPS怎么配置?

如果你有过类似的经历,说明你和我一样,曾经被困在某个技术边界里。

前端会一点,后端也懂一点,但真的要把一个想法变成线上能用的东西,总是差了那么一口气。

我想聊聊这件事。


全栈这件事,被误解了很多年

一提到「全栈工程师」,很多人脑海里浮现的是这样一个形象:什么框架都会,什么语言都能写,数据库也能碰,服务器也能捣鼓。

换句话说,「什么都会一点」。

这种理解,在五年前或许还能成立。那时候做Web开发,确实需要前后端都懂一点才能混得下去。

但2026年了,这种理解该过时了。

真正的全栈,不是「什么都会一点」,而是「能独立交付一个完整的、可运行的互联网产品」。

这两个定义有本质区别。

「什么都会一点」说的是技术广度,你掌握了ABCDE各种技术。 「能交付完整产品」说的是能力深度,你能够从0到1,把想法变成现实。

前者是堆砌,后者是整合。

这十年,全栈经历了什么

让我简单回顾一下这段历史,你可能会更有感触。

  • 2010-2015年:全栈的黄金时代

那时候,一个创业者想要做个网站,真的需要一个人搞定所有事情。PHP就是最典型的全栈语言——一个文件,从数据库到HTML全写了。

没有选择,只能全栈。

  • 2015-2020年:前后端分离,全栈「衰落」

前端技术越来越复杂,React、Vue、Angular各自一套生态。后端技术也在深化,微服务、容器化、云原生,一个领域比一个领域深。

很多人开始专注于一个方向。全栈这个词渐渐变成了「什么都会一点,什么都不精」的代名词。

我见过很多前端工程师,后端代码一行都不敢改。也见过很多后端工程师,写个表单样式就头皮发麻。

技术栈在变宽,人在变窄。

  • 2020年至今:AI时代,全栈复兴

转折来自两个力量:

一是Serverless和全栈框架的成熟。Next.jsSupabase让一个人能覆盖的场景越来越广。

二是AI的爆发。代码可以自动生成了,一个人能做的事情边界再次扩大。

但这次不一样。

这次的全栈,不是回到过去那种「什么都会一点」的状态,而是有了AI的辅助,你可以更专注于「整合」而非「实现」

你不需要记住每个API的用法,AI可以帮你查。但你需要知道一个系统需要哪些模块、它们怎么配合。

这才是2026年「全栈」的真正含义。


我见过太多「会技术」但「做不出东西」的人

我自己也是这么走过来的。

刚学编程的那几年,我痴迷于学新东西。React出来了,学React。Vue火了,学Vue。Node.js流行,学Node。Docker热门,学Docker。

感觉自己越来越厉害,简历上技术栈越来越长。

但有一次,我做一个个人博客系统,前前后后做了俩个月。

不是技术难,而是我在每个环节都卡住:

  • 前端写到一半,发现后端API设计不合理,推倒重来
  • 数据库表结构改了三版,每次都要改前端对应的字段
  • 好不容易做完了,部署上线又折腾了一周
  • 刚上线就被别人注册了一堆垃圾数据,才发现自己没做接口限流

一个看似简单的博客系统,真正从零做到上线,才发现之前学的那些技术都是散的,根本连不起来。

后来我反思:不是我技术不够,而是我从来没有站在「完整产品」的角度去规划一个系统。

这就是问题所在。

但现在,在春节前,我使用 AI 辅助开发和腾讯云的轻量服务器,3天就成功上线了我的个人博客站。

————墨渊书肆

后面,也会根据这个博客站,和我在开发的另一个出海产品,分享我的实战经验。


全栈到底学什么?

说了这么多,你可能想问:所以全栈到底要学什么?

我的回答是:不是学更多技术,而是理解技术之间的关系。

举两个例子。

第一个例子。

你想实现「用户登录后可以评论」这个功能。你需要懂:

  • 前端表单验证
  • 后端接口设计
  • 数据库表结构
  • 密码怎么加密存储
  • Token怎么验证
  • HTTPS怎么配
  • Rate Limiting怎么加

每一项单拎出来都不难。但如果你不懂它们之间的关系,就会出现:前端验证了后端没验证、密码存明文了、Token没过期时间、接口被人刷爆等各种问题。

第二个例子。

你做一个博客系统。要发文章、要看文章、要评论、要搜索、要做SEO、要做推荐。

每个功能你都能找到对应的技术方案。但关键问题是:

  • 先做哪个后做哪个?
  • 数据库表之间怎么关联?
  • 哪些数据要缓存哪些不用?
  • 搜索要做全文检索还是简单like查询?

这些问题没有标准答案,需要你根据实际需求去权衡去决策。

全栈的核心能力,就是理解这些技术怎么配合,然后做出合理的决策。


2026年的全栈技术图谱

既然说到全栈,我把一个现代 Web 应用涉及到的技术领域整理一下。不用全部记住,但需要知道大概有哪些东西,以及每个部分是干嘛的。


前端部分 —— 用户能看到的一切

前端就是用户打开浏览器能看到的所有东西。按钮能不能点、页面好不好看、表单能不能提交,这些都归前端管。

框架:用来构建用户界面。React是现在最主流的选择,Vue在国内用得也比较多,Next.js比较特殊,它既是前端框架,又自带后端能力,属于「全栈框架」。

样式:让界面好看。Tailwind CSS是现在的主流,因为它不用写单独的CSS文件,直接在HTML里写样式,很方便。

状态管理:管理页面数据。比如用户登录了,他的信息存在哪里?购物车有几件商品?这些数据的变化需要统一管理,Zustandmobx是轻量级的选择,Redux功能更全但也 更重。

UI组件:现成的界面零件。shadcn/ui现在特别火,它不是传统意义上的组件库,而是提供代码让你自己修改,这样你可以完全控制样式。


后端部分 —— 用户看不到但每天在用的

后端是服务器上运行的代码,你看不见它,但它在默默处理各种请求。用户登录、提交订单、查询数据——这些都需要后端来处理。

运行时:JS 可以在服务器上运行了,这就是Node.js,目前最成熟。Bun更快,Deno更现代(Node.js的原作者重新写的)。

框架:写后端代码的工具。Next.js API Routes是前后端一起写的方式,适合小项目。Hono非常轻量,而且天然支持 Edge 部署(边缘计算,后面会讲)。NestJS是企业级的,结构更严谨,适合大项目。

数据库:存数据的地方。PostgreSQL是目前最强悍的关系型数据库,MySQL是老牌稳定选手。简单理解:重要数据放数据库。

ORM:数据库和代码之间的翻译官。Prisma用起来很舒服,Drizzle更快且更轻, typeORM 功能更全。它们让你用 JS 的语法去操作数据库,不用写原始SQL。


基础设施 —— 让你的应用能跑起来

这部分是很多前端开发者最头疼的——代码写完了,怎么让它能被所有人访问?这就是基础设施要解决的问题。

服务器:一台24小时开机的电脑。国内的阿里云腾讯云,国外的VercelNetlify,都是提供服务器的服务商。

容器:把应用和它依赖的所有东西打包,这样在任何环境下都能跑。Docker是标配,Docker Compose用来在本机编排多个服务。

CDN:让用户访问更快。CDN就是一堆分布在世界各地的服务器,用户访问时从最近的服务器拿资源,速度会快很多。国际首选Cloudflare,国内用阿里云CDN

域名和SSL:域名是网站的地址,SSL是让访问变成https://的那个加密协议。Let's Encrypt提供免费SSL,Cloudflare可以自动帮你处理HTTPS。


运维监控 —— 保障服务稳定运行

应用上线了,怎么知道用户访问快不快?出错了怎么知道?这些就是运维监控要做的。

日志:记录系统发生了什么。ELK(Elasticsearch + Logstash + Kibana)是经典方案,Loki更轻量。现在很多云服务也自带日志功能。

监控:看系统健康不健康。Sentry专门追踪错误,谁的代码出错了第一时间知道。Prometheus + Grafana是看指标的,比如服务器CPU用了多少、数据库响应多快。

CI/CD:自动化部署。代码提交后自动测试、自动部署到服务器。GitHub Actions最常用,国内有阿里云效腾讯云CODING


安全 —— 保护你的应用

不做安全防护的应用,就像没装门的房子,谁都能进来。

前端安全:XSS是别人在你的页面里注入恶意脚本,CSRF是别人伪造你的身份发请求,CSP是限制页面能加载哪些资源。

后端安全:SQL注入是通过输入框往数据库里塞恶意代码,参数校验是确保用户传的数据是你期望的,Rate Limiting是限制一个人1分钟内只能发10次请求,防止被刷。

数据安全:HTTPS加密传输是最基本的,敏感数据(比如密码)要加密存储,密钥不要写在代码里。


AI能力 —— 新时代的必备技能

2026年了,如果你说自己是全栈但不懂 AI 用法,就像做前端不会用Git一样说不过去。

集成框架Vercel AI SDK是最流行的AI功能集成框架,支持流式响应(就是 ChatGPT 那种一个字一个字蹦出来的效果),对接各种模型很方便。

模型提供商:国外用OpenAI(GPT)、Anthropic(Claude),国内用硅基流动DeepSeek。国内外使用体验和成本差异很大,后面实战会分别讲。

向量数据库:AI场景专用。传统数据库存文字,向量数据库存「意思」。比如你搜「苹果」,它不仅能匹配到「苹果」,还能匹配到「iPhone」、「水果」,因为它理解「苹果」的含义。PineconeMilvus是代表。


这就是现代全栈的完整图谱。你不需要每样都精通,但需要知道它们各自负责什么,以及什么时候该用什么。


AI时代,全栈反而更重要了

我知道你可能会有疑问:现在AI这么强,Cursor敲几下代码就出来了,我还需要学全栈吗?

我的答案是:恰恰相反。

AI可以帮你写一个登录API,但它不知道:

  • 你的产品需不需要短信验证码登录
  • 你的用户数据存储在哪里
  • 你要不要支持微信登录
  • 登录失败几次要锁号
  • Token过期时间设多长

AI可以帮你写一个数据库查询,但它不知道:

  • 你的数据量级需要什么索引
  • 哪些查询需要加缓存
  • 读写分离怎么做

AI可以帮你部署上线,但它不知道:

  • 选择Vercel还是阿里云
  • 国内用户访问慢怎么办
  • 怎么做成本优化

AI擅长的是「点」,你需要的是「面」。

你告诉AI「帮我写个用户登录」,它会给你写一个标准答案。但具体怎么设计,这是你需要决策的事情。

而且,只有当你真正理解一个系统是怎么运转的,你才能:

  • 准确描述你想要什么(而不是永远在改需求)
  • 发现AI写的代码哪里有问题(而不是全盘接受)
  • 把不同模块组合在一起(而不是拼都拼不起来)

这才是整合能力的价值。

AI不是取代你,而是放大你。你原本只能做前端,AI帮你写了后端,你就能做全栈。但前提是,你本来就具备全栈思维,知道一个完整的产品需要什么。


怎么学?T型发展

说了这么多,到底怎么学?我的建议是「T型发展」:

先广度,后深度。

首先,对全栈技术有个整体认知。前端、后端、数据库、运维、安全……每个领域都了解一下,知道它们各自负责什么、解决什么问题。

这个阶段不需要深入,掌握概念就够了。

然后,选择一个方向深挖。

如果你对前端感兴趣,就深入React/Next.js。如果你对后端感兴趣,就深入Node.js/PostgreSQL。深入到能独立完成一个完整项目的程度。

最后,按需补充。

在实际项目中遇到什么问题,就去学什么。需要做支付,就去学Stripe。需要做搜索,就去学Elasticsearch。需要做 AI 功能,就去学Vercel AI SDK

这种「实战驱动」的学习方式,效率最高。


这个系列想带你做什么

市面上不缺技术教程。React入门、Node.js实战、Docker部署——这种内容一搜一大把。

但我发现很多人学完这些教程,还是做不出东西。

因为技术是散的,需要一条线把它们串起来。

这个系列我想带你做的事情很简单:从零开始,构建一个真正能上线的产品。

不是demo,不是练习,而是真实的、可访问的、能在生产环境跑的系统。

我会分成这几个阶段:

  • 第一阶段:认知重建

先理解全栈到底要学什么,怎么学(就是这篇)。

  • 第二阶段:基础设施

服务器、域名、CDN、Docker、日志、监控——那些「不太技术」但非常重要的东西。

  • 第三阶段:前端开发

React、Next.js、TypeScript、UI体系。

  • 第四阶段:后端开发

API设计、数据库、认证、缓存。

  • 第五阶段:AI集成

Vercel AI SDK、流式响应。

  • 第六阶段:部署上线

国内(阿里云)和国外(Vercel)两套方案。

  • 第七阶段:安全与性能

生产环境必须注意的那些事。

  • 第八阶段:实战

两个完整项目,从0到上线的全过程。

在这个过程中,你会看到我踩过的坑、做过的错误决策、总结出的经验。我不是为了告诉你「这个技术怎么用」,而是告诉你「这个系统该怎么搭」。


写在最后

回到开头的问题。

你是不是经常感觉学了很多技术,但真正要用的时候还是不知道从哪里开始?

这很正常。

技术本身不是目的,产品才是。

2026年了,AI 可以帮你写代码,但不能帮你交付产品。能做到这一点的人,永远有市场。

而这,就是我们这个系列要一起做的事情。

下一篇文章,我会讲讲AI辅助开发这件事——怎么用好CursorTraeOpenCode,以及一个更重要的道理:会问问题比会写代码更重要。

感兴趣的话,下一篇见。

不用折腾部署 OpenClaw,我用 MiniMax Agent 一键养「龙虾」,还拍了个短剧

作者 张子豪
2026年2月26日 17:07

春节假期,帮亲戚朋友们部署 OpenClaw 成了我一份额外的工作。虽然不一定能真正用上,但这只龙虾是不得不拥有。

AI 进入我们的工作流,在 OpenClaw 爆火之后,这种感觉变得更加强烈。在「不用 AI 会被淘汰,用了 AI 也像是能被替代」的悖论下,不错过任何一个能放大自身价值的 AI 工具,让人陷入了无止境的 FOMO。

越来越多的「龙虾变体」也涌现出来,但是当被问到打算怎么把这个部署好的 OpenClaw 融入工作流,答案往往又是个未知数。更不用说光是部署好 OpenClaw,就有两道大关,一是要手动部署和配置复杂的模型 API,二是让人心疼的额外 API 费用。

今天,更新后的 MiniMax Agent 推出了两项新功能。

专业度更高,更会干活的 Expert 智能体社区,涵盖从技术开发、创意写作到音视频图片生成等多模态领域,超过 1.6 万个专家,且还在持续增长。大多数场景下,我们几乎都能直接找到现成可用的专家;即便没有完全匹配的,用几句话还能快速创建一个自己的 Expert。

另一项新增的 MaxClaw 模式,能让我们一键打通 OpenClaw 生态,而且完全不需要自己配置 API,以及承担额外的 API 费用,解决了「不知道 OpenClaw 能做什么」和「怎么部署 OpenClaw」这两个问题。

这也就意味着,即便是纯小白,现在也能拥有开箱即用的专属 AI 专家团队了

APPSO 也实测了一波智能体专家和 MaxClaw 这两项新功能,它确实和一般的智能体 Agent 不同,结合了 Skills 的能力和 OpenClaw 的兼容能力,我们直接就能操作飞书、钉钉等即时通讯软件。

而和市面上不同版本的 OpenClaw 对比,MiniMax Agent 的 MaxClaw 又有了预置的专家智能体,整个体验会更加友好。

体验地址:国内版🔗 https://agent.minimaxi.com
海外版🔗 https://agent.minimax.io

超过 1.6 万个 Experts 的大社区

对于 AI 创作来说,无论是文本还是多媒体,大多数时候用大模型,最痛苦的就是「AI 味太重」或者「废话连篇」。究其原因,往往是「提示词不当」、「模型不够强」,总结在普通的聊天形式缺乏深度的垂直领域优化。

MiniMax Agent 这次推出的 Expert(专家智能体) 虽然还是在聊天对话里进行,但底层逻辑做了一些改变。它主打即开即用,提供了针对各种深度垂类场景优化的 Agent

▲MiniMax Agent 内提供了办公效率、商业金融、教育学习、生活娱乐等上万个专家

在处理对应垂直领域的任务上,和非专家的单纯对话形式相比,专家能交付更专业、质量更高的结果。为了验证这一点,我们直接从它目前已经 1.6w+公开的 Expert 库(大部分是用户创作)里,挑了几个热门的场景进行实测。

PPT、网页、行业分析,AI 开始按场景分工干活

从目前 Expert 社区的使用热度来看,用户最先跑起来的,往往还是那些直接指向生产力的刚需场景,比如办公制作、内容搭建,以及金融与行业分析。

在 MiniMax Agent 首页,我们点击左侧边栏的「探索专家」,就能进入已经按场景分好类的专家社区。不同专家不仅标注了能力方向,还能看到背后调用的「子代理」和完整项目指令,相当于把一套成熟工作流直接摆在用户面前。

找到合适的专家后,点击「开始聊天」,输入需求,它就会按既定流程自动推进任务。

▲股票价值分析专家介绍

在办公与内容生产场景中,落地页生成和 PPT 制作依然是浏览量最高的一类专家。

我们先测试了 Landing Page Builder 专家。输入需求:「我要给初中生做一个五代十国历史的网页,得让他们真的能听进去,内容翔实有考据,一节课 45 分钟的内容。要解释清楚、配图到位、动效得当、沉浸感强,举的例子能让他们产生共鸣,再加几道题检验下理解程度。」

整个过程中,专家几乎不需要额外干预,而是按照预设流程自动完成结构设计、内容填充和页面生成。

▲预览链接:https://qvwu1nyvju2u.space.minimax.io/

从最终效果来看,这类 Expert 和传统 Agent 最大的区别在于,它从边聊天边拼凑,转成了沿着一条完整生产流程在推进,结果的稳定性和完成度明显更高。

生成的网页不仅信息完整,画面和动效也有一定沉浸感,相比过去一些 vibe coding 产品常见的模板化和渐变紫风格,要更克制也更可用。

在偏专业的分析类任务上,Expert 的优势会更明显。我们选择了 McKinsey PPT(麦肯锡风格演示文稿生成)专家进行测试。按照介绍,它会自动补充数据、图表以及行业洞察。

实际测试中,我们只输入了一句非常简单的需求,「制作一份关于全球机器人市场的10页幻灯片演示文稿」。但最终生成的 PPT,在信息密度、结构完整度和图表配置上都没有明显缩水,基本具备拿来就能用的初稿质量。

这类场景也很能体现 Expert 的定位,它尝试把一整段专业工作流程产品化,从增强单次问答的模式里彻底跳了出来。

有了多模态能力的专家,一句话拍出顾北辰的短剧宇宙

还没听说过有能生成视频的通用 Agent 产品,但现在结合多个不同的 Skills、Agents 的专家,输入一段剧情,直接就能给我们一部短剧。

▲提示词:霸总重生在电子厂打螺丝,宫崎骏动漫风格,1-3分钟视频长度,台词激烈有冲突,剧情跌宕起伏有反转。

我们使用 AI 短剧导演+摄影+剪辑师专家进行测试,和一般的视频生成模型只能产出 5-10s 左右的视频不同,这个专家能自动生成完整的分镜,并且把视频进行剪辑和拼接。

最后生成的视频,完成度很高,虽然没能对口型把台词一字一句说出来,但是也配了一段应景的 BGM。而且大概率是检测到了提示词里面的「宫崎骏」,整个动画的风格,乃至角色和公司名字,都透露着一股日漫的味道。

简单对话,每个人都能创建一个专家

如果觉得官方或别人做的专家,还不够贴合我们的使用习惯和工作场景,MiniMax Agent 也提供了自定义功能,通过简单的一两句话就能创建一个专家。

我们完全不需思考什么是 Skill 或者专家,也不用遵守标准文件的规则设置等,只需要通过自然语言交互,就能更方便地把个性化的工作流、SOP 等集成,创建专属 Expert。

热点追踪是媒体编辑一项非常重要的工作,我们在 MiniMax Agent 的专家社区里,也使用过多次热点追踪的专家。例如当我们要求它基于输入的「春晚被机器人刷屏」这个主题,去搜索最新消息和近期热门话题时;它最后能给我们一份完整详细的长文,但是不够个性化。

于是,我们开始自己来创建一个 APPSO 的热点追踪。

▲在探索专家页面右上角点击「创建专家」,输入自己的需求,MiniMax Agent 会自动帮我们完成创建

创建专家的过程是可以连续对话,如果对目前专家的输出不满意,我们可以继续在对话框内要求 MiniMax Agent 进行更新。

创建完成之后,我们只需要发送一句「开始,帮我整理今天的科技快讯」,专家就会给我们 24h 内最值得关注的 AI 消息,并且以早报的文风和格式要求写好。此外,这些自己创建的专家,MiniMax 还提供了 15 轮免费,即不消耗积分的优惠,体验门槛更低。

▲APPSO 自定义的专家,现在可以自主完成一份快讯早报

除了大量可以直接使用和自定义的 Experts,更值得关注的是即将上线的 Marketplace。用户创建的 Expert,如果被使用,就能获得相应的积分,可以用来在 MiniMax Agent 里完成更多的任务。

而后续 MiniMax 还将开放专家自行定价,这意味着如果你在某个垂直领域有真正的专业积累,封装成 Expert 除了分享自用,还可能是一种新的变现路径。

说白了,一个 Skills 专家的应用商店雏形,已经摆在我们面前了。

一键接入 OpenClaw 的 MaxClaw

如果说 Expert 是强大的大脑,那么 MaxClaw 就是让大脑连接到现实的双手,这也是 MiniMax Agent 这次升级里,玩法最丰富的一个功能。我把它叫做升级版的 OpenClaw。

根据网络上到处都是的 OpenClaw 指南,想要真正好用的OpenClaw生态,我们要先学会手动部署、配置复杂的模型API,还要时刻盯着后台,生怕一不小心跑出天价的 API 账单。

对于绝大多数不懂代码的普通小白来说,这门槛属实是太高了。我只是想把好用的 AI 接入自己的飞书或钉钉,创建一个机器人,但是第一步就困住了。

MiniMax Agent 新增的 MaxClaw 模式,一键打通了 OpenClaw 生态,不需要繁琐的手动部署和配置模型 API,通过MiniMax Agent 网页端就可以快速上手。

目前,它也兼容手机端多个即时通讯交互工具,我们可以在飞书、钉钉、Telegram、WhatsApp、Discord、Slack 中使用。

拿部署到飞书机器人举例,甚至不用额外的部署指南,我们只需要点开首页左侧边栏的 MaxClaw 按钮,点击「立即开始」,我们可以选择使用默认配置,或者其他专家。

这也是 MaxClaw 对比 OpenClaw 的一大亮点,除了能像 OpenClaw 一样连接到不同的聊天应用,在自己常用的 App 里就能指挥 AI 干活;我们在初始配置时,就可以直接选择那些已经有的预置专家 Agent 配置。

创建之后,在对话框里发送消息,「我想连接到飞书」,按照 MaxClaw 回复的消息,我们点击飞书开放平台的链接,登录之后,按照流程,创建一个企业自建应用,获取 App ID 和 App Secret。接着把复制的信息发送给 MaxClaw,它会提示重启,重启之后在飞书的配置事件订阅里选择添加对应的事件就能启用。

不出所料,整个过程肯定会有一些问题。例如我们在拿公司飞书账号测试时,就被提示相关的授权需要审核才能发布,以及在权限管理和事件配置部分,飞书里面的内容太多太杂乱,根本不知道授予哪些权限。

这个时候,直接回到 MaxClaw,把遇到的问题统统发给它,跟着它的提示走,基本上都能解决。

顺利部署之后,我们在自己的飞书里,就能看到一个对应名字的机器人,然后直接开启对话,所有的对话也会同步在 MiniMax Agent 网页里的 MaxClaw 显示。

▲现在,飞书就能指挥你的 MaxClaw

让 MaxClaw 帮我们干活,都只用在飞书里面指挥它。我们直接把之前创建的「热点追踪」专家的指令发给它,然后在飞书里对话,输入一句简单指令,「帮我整理今天的快讯」。

很快,一份结构完整的 AI 早报就直接回到了飞书对话框里,完全按照要求的格式,摘要、关键信息提炼、标题等全部都有。并且还能设置定时任务,让 MaxClaw 在飞书里主动给我们发送消息。

除了热点追踪,之前的股票价值分析等专家,我们现在也可以直接通过飞书聊天的方式,就让 MaxClaw 为我们总结出一份逻辑清晰的完整报告。同时,继续让它为我们监控英伟达最新的动态。

而如果直接在配置的时候,选择对应的专家,我们可以看到它的 Skills 情况,MaxClaw 会自动添加开箱即用的 Skills 来帮助我们更好的上手。

▲在效率工具里面有「博客监控」和「内容摘要」等 Skills 用于「热点追踪」专家

时间一到,MaxClaw 在飞书里,准时给我们推送了最新的资讯。

「Claw」是 Agent 之后一种新的智能阶段

这次更新,真正值得关注的,其实不是又多了一个 Agent 工具。

OpenClaw 的爆火,让我们看到了一个能真正干活的「Agent」是什么样。它是个性化的,部署在自己的电脑上,告别了过去一个网页解决所有用户问题的统一;它是互联互通的,打穿了终端设备上不同应用的壁垒,在 Telegram 也能指挥 AI 帮助我们回复工作邮件……

▲知名博主 Simon Willison 提到 Claw 似乎正在成为像 Agent 一样的专用术语,用来描述一种新的智能体类别|图片来源:https://simonwillison.net/2026/Feb/21/

这本质上是在提醒我们一件事:AI 正在从「辅助回答问题」,走向「直接进入工作流」。当 AI 开始能够调用工具、跨应用执行任务、甚至在后台持续运转,我们原有的工作组织方式,本身就已经在发生变化。

问题只在于,大多数普通用户其实卡在门外。

▲全球 81 亿人中, 84% 的人从未用过 AI,而只有 0.3% 的用户愿意为 AI 付费|图片来源:https://global-ai-adoption.netlify.app/

一边是大家都知道 Agent 很强、OpenClaw 很火;另一边,是复杂的部署流程、看不懂的 API 配置,以及随时可能失控的调用成本。很多人不是不想用,而是很难真正用起来。

MiniMax Agent 这次做的事情,某种程度上就是在把这道门槛往下搬,让普通打工人也能轻松搭建自己的顶级 AI 工作流。

▲MiniMax Agent 会员定价|对比大部分 AI 动辄 20 美元一个月的订阅费用,MiniMax Agent 39 元的价格,大约一杯咖啡的钱,却已经足够能帮我们把写稿、做 PPT、跑多 Agent 工作流一口气打通,让这只「龙虾」多线程干活

Expert 把过去需要反复调 Prompt、反复试错的专业流程,打包成了即开即用的专家社区;MaxClaw 则把原本偏极客向的 OpenClaw 生态,压缩成了一键可用的连接能力。

对于普通用户来说,这种变化的意义很直接,我们不用懂什么是终端,不用让自己费尽力气做个半吊子「工程师」,也能开始搭建自己的 AI 工作流。

▲METR 此前的研究显示 AI 工具对开发人员生产力的影响,导致生产力下降了 20%;但 METR 表示现在这一发现已经过时,生产力提升似乎更有可能|图片来源:https://x.com/METR_Evals/status/2026355544668385373/

当越来越多「Agent」能够被像软件一样使用,AI 对工作方式的影响,才会真正开始外溢。

从这个角度看,MiniMax 推出这些产品,价值或许不只在于功能多了两个按钮,更在于它正在把一套原本属于少数人的先进工作范式,逐步变成更多人可以上手的日常工具。

对普通用户来说,这或许才是 Agent 真正开始变得有用的时刻。

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


AI 写代码总是半途而废?试试这个免费的工作流工具

作者 仿生狮子
2026年2月26日 17:04

作为一个用过多种 IDE 的开发者,我想分享一个让我效率 up up 的小工具。

你有没有遇到过这种情况?

  • 跟 AI 聊了半天需求,代码写了一半,上下文满了,AI "失忆"了
  • 项目做到一半搁置,一周后回来完全忘了做到哪了
  • 想加一个功能,结果 AI 把之前的代码改坏了

这些问题都有一个共同原因:上下文衰减(Context Rot)

简单来说,AI 的"记忆"是有限的。当对话太长时,它会慢慢忘掉之前说过的话,导致代码质量下降。

GSD 是什么?

GSD = Get Shit Done(把事做完)

它是一个开源的 AI 编程工作流框架,核心思路很简单:

把项目信息存到文件里,而不是全部塞给 AI。

就像你写代码会用 Git 做版本控制一样,GSD 帮你做"AI 对话的版本控制"。

GSD for Trae

原版 GSD 是为 Claude Code 设计的。因为我日常用 Trae,所以做了这个适配版本。

安装只需一行命令:

npx gsd-trae

或者:

bash <(curl -s https://raw.githubusercontent.com/Lionad-Morotar/get-shit-done-trae/main/install.sh)

它能帮你做什么?

1. 新项目规划

输入 /gsd:new-project,它会:

  • 问你一系列问题,搞清楚你要做什么
  • 自动研究技术方案(可选)
  • 生成项目路线图

2. 阶段式开发

大项目拆成小阶段:

  • /gsd:plan-phase 1 - 规划第一阶段
  • /gsd:execute-phase 1 - 执行第一阶段
  • /gsd:verify-work - 验证做得对不对

每完成一个阶段,进度都会被记录,随时可以接着做。

3. “断点续传”

关掉电脑、明天再来,输入 /gsd:progress,AI 马上知道:

  • 项目做到哪了
  • 接下来该做什么
  • 之前的决策是什么

实际使用感受

我用了一个月,相比 Trae 的 Plan Build 模式最明显的变化:

以前:一个功能聊到一半,AI 开始"胡言乱语",只能新开对话重来

现在:每个阶段都有清晰的目标和验收标准,AI 一直保持在正确的方向上

以前:同时开多个功能,代码互相冲突

现在:按阶段来,做完一个再做下一个,井井有条(进阶用户也可以选择 Worktree 模式)

以前:Plan 文档随意仍在 .trae 的文档目录,没有管理,很难查找

现在:结构化的目录,GSD 和开发者都能轻松阅读

适合谁用?

  • 用 Trae/Gemini/Claude 写代码的开发者
  • 做独立项目、 side project 的人
  • 觉得 AI 编程"聊不动"的新手

相比其他工具的优势

市面上有不少 AI 编程工作流工具,比如 GitHub 的 Spec Kit、OpenSpec、BMAD 等。GSD 的定位不太一样:

工具 特点 GSD 的区别
Spec Kit 企业级、严格阶段门控、30分钟启动 GSD 更轻量,5分钟上手,没有繁琐的仪式
OpenSpec 灵活快速、Node.js 运行 GSD 额外解决了 Context Rot 问题,支持断点续传
BMAD 21个 AI Agent、完整敏捷流程 GSD 不模拟团队,而是聚焦"让开发者高效完成项目"

简单说:如果你期待快速而结构化的流程,又不想被复杂的企业开发规范束缚的同时,确保 AI 编程能稳定输出,GSD 可能是目前最合适的选择。

它是免费的

开源项目,GitHub 地址: github.com/Lionad-Moro…

MIT 协议,可以随便用、随便改。

最后说一句

AI 编程工具越来越强大,但工具只是工具。

好的工作流能让你事半功倍,而 GSD 就是这样一套经过验证的工作流。

不需要改变你现有的开发习惯,安装后输入 /gsd:new-project 试试看。


如果你试过觉得好用,欢迎点个 Star ⭐

如果发现问题,也欢迎提 Issue

微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案

作者 FliPPeDround
2026年2月26日 15:43

FliPPeDround

前端工程师 · 开源爱好者 · 正在找工作

对我的项目感兴趣?查看我的简历 · resume

如果你曾尝试配合 AI 代理(如 Claude、Cursor 编写微信小程序,你大概率会遇到这样的困境:测试工具与 AI 代理集成困难、缺乏统一的自动化框架支持、无法充分利用 AI 的智能分析能力。更糟糕的是,当你想要使用 Claude、Cursor 等 AI 辅助工具来提升测试效率时,却发现没有合适的微信小程序自动化集成方案。

为了解决这些痛点,wechat-devtools-mcp 应运而生。作为一款基于 MCP(Model Context Protocol)协议的微信开发者工具自动化服务,它让小程序的自动化测试与 AI 智能分析变得前所未有的简单和高效。

📖 介绍

📚 官方文档:更多详细的安装和配置说明,请参考 GitHub 仓库

wechat-devtools-mcp 是一个专门为微信小程序设计的 MCP 服务,通过 MCP 协议与 AI 代理(如 Claude、Cursor)深度集成。它基于微信官方的 miniprogram-automator 库,提供了完整的小程序自动化能力,让你能够在 AI 的辅助下,高效地完成小程序的自动化测试和调试。

这个工具的出现,填补了小程序自动化测试与 AI 智能分析之间的空白。它不仅保持了与微信开发者工具的完全兼容性,还充分发挥了 MCP 协议的标准化优势,为开发者提供了一个更智能、更高效的自动化测试解决方案。

🚀 核心功能与技术优势

1. 无缝集成 MCP 协议生态

wechat-devtools-mcp 完全兼容 MCP 协议,可以轻松集成到支持 MCP 的 AI 代理中:

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

2. 全面的页面导航支持

工具提供了丰富的 API 来操作小程序页面导航:

  • 保留当前页面跳转:通过 navigateTo 跳转到非 tabBar 页面
  • 关闭当前页面跳转:通过 redirectTo 关闭当前页面并跳转
  • 返回上一页:通过 navigateBack 返回上一页面或多级页面
  • 重新加载页面:通过 reLaunch 关闭所有页面并重新打开
  • 切换 TabBar:通过 switchTab 跳转到 tabBar 页面
  • 获取页面栈:通过 pageStack 获取当前页面栈列表

3. 强大的元素操作能力

工具提供了完整的元素操作 API,支持各种用户交互模拟:

  • 元素获取:通过 getElementgetElements 获取页面元素
  • 用户交互:支持点击、长按、触摸、输入等操作
  • 元素信息:获取元素尺寸、位置、文本、属性、样式等信息
  • 组件方法:调用自定义组件的方法和数据操作

4. 智能日志和异常监听

工具内部实现了智能的日志和异常监听机制:

  • 自动监听控制台日志(console.log、console.info、console.warn、console.error)
  • 自动捕获运行时异常,包括错误名称、堆栈跟踪和发生时间
  • 支持日志和异常的查询和过滤
  • 内置日志数量限制,避免内存溢出

5. 灵活的配置选项

支持丰富的配置选项,满足不同测试场景的需求:

  • 自定义小程序项目路径
  • 微信开发者工具 CLI 路径配置
  • 连接超时时间设置
  • WebSocket 端口配置
  • 用户账号和登录票据支持
  • 项目配置文件覆盖

6. 微信 API 模拟与调用

工具提供了强大的微信 API 操作能力:

  • 调用微信 API:通过 callWxMethod 调用 wx 对象上的任意方法
  • Mock 微信 API:通过 mockWxMethod 模拟 API 返回值,便于测试
  • 恢复微信 API:通过 restoreWxMethod 恢复被 Mock 的方法

🧪 为什么 E2E 测试如此重要

在软件开发中,单元测试固然重要,但 E2E(End-to-End)测试在构建高质量代码过程中扮演着不可替代的角色。

提升代码可靠性

E2E 测试模拟真实用户的使用场景,从用户界面到后端服务的完整流程进行验证。与单元测试不同,E2E 测试能够发现:

  • 页面间的导航和状态传递问题
  • 用户交互与业务逻辑的集成异常
  • 微信 API 调用的错误处理
  • 不同设备和系统版本的兼容性问题

对于微信小程序这种运行在特殊环境中的应用,E2E 测试尤为重要。它能够确保你的小程序在不同设备、不同微信版本、不同网络环境下都能正常运行,避免出现"在开发环境正常,上线后出问题"的尴尬情况。

降低维护成本

虽然编写 E2E 测试 需要投入一定的时间成本,但从长远来看,它能显著降低维护成本:

  • 减少回归测试时间:自动化测试可以在几分钟内完成原本需要数小时的手动测试
  • 快速定位问题:当出现 bug 时,E2E 测试能够快速定位问题所在
  • 增强重构信心:有了完善的测试覆盖,你可以放心地进行代码重构,而不必担心破坏现有功能
  • 文档化业务逻辑:测试代码本身就是最好的业务逻辑文档

提升团队协作效率

E2E 测试作为项目质量的"守门员",能够:

  • 统一团队对功能实现的理解
  • 减少 code review 时的争议
  • 让新成员快速理解项目功能
  • 建立持续集成的质量保障体系

📦 快速上手

安装依赖

wechat-devtools-mcp 是一个 npm 包,可以直接通过 npx 运行,无需额外安装:

npx -y wechat-devtools-mcp --projectPath=/path/to/your/miniprogram

配置 MCP 服务器

在你的 AI 代理(如 Claude、Cursor)的配置文件中添加 MCP 服务器配置:

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

命令行参数说明

参数 类型 说明
--projectPath string 小程序项目路径(必填)
--cliPath string 微信开发者工具 CLI 路径
--timeout number 连接超时时间(毫秒),默认 30000
--port number WebSocket 端口号,默认 9420
--account string 用户 openid
--ticket string 开发者工具登录票据
--projectConfig string 覆盖 project.config.json 中的配置

使用示例

配置完成后,你就可以在 AI 代理中使用 wechat-devtools-mcp 提供的工具了。以下是一些典型的使用场景:

1. 启动小程序

// 使用 launch 工具启动微信开发者工具并连接小程序
await launch()

2. 页面导航测试

// 跳转到指定页面
await navigateTo({ url: '/pages/detail/detail?id=123' })

// 获取当前页面信息
const currentPage = await currentPage()

// 返回上一页
await navigateBack({ delta: 1 })

3. 元素操作测试

// 获取页面元素
const element = await getElement({ selector: '.submit-button' })

// 点击元素
await tapElement({ selector: '.submit-button' })

// 输入文本
await inputElement({ selector: '#username', value: 'testuser' })

// 获取元素文本
const text = await getElementText({ selector: '.welcome-text' })

4. 页面数据操作

// 获取页面数据
const pageData = await getPageData({ path: 'userInfo.name' })

// 设置页面数据
await setPageData({ data: { count: 10, status: 'active' } })

5. 日志和异常监听

// 获取控制台日志
const logs = await getlogs({ type: 'error', limit: 10 })

// 获取异常信息
const exceptions = await getexceptions({ limit: 5 })

6. 微信 API 调用和 Mock

// 调用微信登录 API
const loginResult = await callWxMethod({ method: 'login', args: [] })

// Mock 用户信息 API
await mockWxMethod({ method: 'getUserInfo', result: { nickName: '测试用户' } })

// 恢复 API
await restoreWxMethod({ method: 'getUserInfo' })

🎯 高级功能详解

截图功能

工具支持对小程序当前页面进行截图,返回 Base64 编码的图片数据:

const screenshot = await screenshot()

系统信息获取

获取小程序运行所在的系统信息,包括手机品牌、型号、屏幕尺寸、操作系统版本、微信版本等:

const systemInfo = await systemInfo()

体验评分

支持微信小程序体验评分(Audits)功能,可以获取性能最佳实践、Accessibility 可访问性等方面的评分和建议:

// 停止体验评分并获取报告
const auditResult = await stopAudits({ path: './audits.json' })

测试账号管理

支持获取微信开发者工具多账号调试中添加的测试用户列表,可用于模拟不同用户登录场景的测试:

const accounts = await testAccounts()

🔧 技术实现细节

wechat-devtools-mcp 的实现基于 MCP 协议和微信官方的 miniprogram-automator 库,核心架构包括以下几个部分:

  1. Automator 类:负责微信开发者工具的启动、连接和生命周期管理
  2. MiniProgram 工具类:提供小程序级别的操作,如页面导航、API 调用、系统信息获取等
  3. Page 工具类:提供页面级别的操作,如元素获取、数据操作、方法调用等
  4. Element 工具类:提供元素级别的操作,如点击、输入、属性获取等

工具内部还实现了智能的状态管理和错误处理机制,确保自动化测试的稳定性和可靠性。

🌟 总结

wechat-devtools-mcp 为微信小程序开发者提供了一个现代化、智能化的自动化测试解决方案。它不仅解决了传统测试工具与 AI 代理集成困难的问题,还充分发挥了 MCP 协议和 miniprogram-automator 的技术优势。

通过完善的 E2E 测试和 AI 智能分析,你可以:

  • 提升代码质量和可靠性
  • 降低长期维护成本
  • 增强团队协作效率
  • 建立持续集成的质量保障体系
  • 充分利用 AI 的智能分析能力

如果你正在开发微信小程序项目,并且想要建立完善的自动化测试体系,wechat-devtools-mcp 绝对值得一试。它会让你的测试工作变得前所未有的简单和高效。

📚 相关资源


最后

wechat-devtools-mcp 是一个免费的开源软件,遵循MIT协议,社区的赞助使其能够有更好的发展。

你的赞助会帮助我更好的维护项目,如果对你有帮助,请考虑赞助一下😊

你的star🌟也是对我的很大鼓励,Github

欢迎反馈问题和提pr共建

2025前端技术趋势:从智能到沉浸的新时代

2026年2月25日 10:27

引言

前端技术正处于一个前所未有的快速发展阶段。从早期的静态网页到如今的复杂单页应用,前端开发已经经历了多次重大变革。随着WebAssembly、人工智能、虚拟现实等技术的不断成熟,2025年的前端技术将进入一个全新的时代。在这个新时代,前端开发者需要掌握的技能不再局限于HTML、CSS和JavaScript。他们需要了解WebAssembly、机器学习、3D渲染等跨领域技术,并能够将这些技术有机地结合,创造出前所未有的用户体验。

1. WebAssembly 3.0:突破Web性能极限

WebAssembly(Wasm)自2017年推出以来,已经成为前端性能优化的重要工具。2025年,WebAssembly 3.0将带来一系列重大改进,进一步突破Web应用的性能极限。

1.1 架构演进

image.png

1.2 WebAssembly 3.0 核心特性

WebAssembly 3.0将引入以下核心特性:

  • 增强的垃圾回收支持:更高效的内存管理,减少内存泄漏和性能问题

  • 原生DOM访问:直接操作DOM,消除JavaScript桥接开销

  • 多线程与并行计算:更强大的并行处理能力,支持复杂计算任务

  • WASI 2.0:更完善的WebAssembly系统接口,支持更多系统级功能

1.3 性能对比

WebAssembly 3.0在性能方面将有显著提升:

image.png

1.4 应用场景

WebAssembly 3.0将在以下场景中发挥重要作用:

  1. 复杂数据可视化:处理大规模数据并实时渲染

  2. 游戏开发:创建接近原生性能的Web游戏

  3. 音视频处理:实时编解码和特效处理

  4. 科学计算:在浏览器中运行复杂算法

  5. 3D建模 与渲染:支持复杂的3D场景和模型

2. AI原生前端框架:智能交互的新范式

2025年,前端框架将深度集成人工智能技术,形成AI原生前端框架。这些框架将能够理解用户意图,自动优化性能,并提供更加智能的用户体验。

2.1 AI原生框架核心特性

AI原生前端框架将具备以下核心特性:

  • 智能组件:能够根据用户行为自动调整UI和功能

  • 预测渲染:预测用户下一步操作并提前渲染

  • 自适应布局:根据设备、用户偏好和上下文自动调整布局

  • 智能性能优化:自动识别和优化性能瓶颈

  • 自然语言交互:支持语音和文本的自然语言界面

2.2 架构设计

image.png

2.3 智能组件示例

以下是一个AI原生前端框架中的智能组件示例:

// AI原生组件示例
import { SmartComponent } from 'ai-frontend-framework';

class AdaptiveButton extends SmartComponent {
  constructor(props) {
    super(props);
    this.state = {
      variant: 'primary',
      size: 'medium'
    };
  }
  
  // AI驱动的自适应逻辑
  async adaptToUserContext() {
    const userBehavior = await this.aiContext.getUserBehavior();
    const deviceInfo = await this.aiContext.getDeviceInfo();
    
    // 根据用户行为调整按钮样式
    if (userBehavior.clickSpeed > 5) {
      this.setState({ size: 'large' });
    }
    
    // 根据设备类型调整按钮变体
    if (deviceInfo.type === 'mobile') {
      this.setState({ variant: 'secondary' });
    }
    
    // 预测用户操作并提前加载资源
    if (userBehavior.predictedAction === 'submit') {
      this.aiContext.preloadResource('/api/submit');
    }
  }
  
  render() {
    return (
      <button 
        variant={this.state.variant}
        size={this.state.size}
        onClick={this.props.onClick}
        onMouseEnter={this.adaptToUserContext}
      >
        {this.props.children}
      </button>
    );
  }
}

2.4 应用场景

AI原生前端框架将在以下场景中得到广泛应用:

  1. 个性化用户体验:根据用户行为和偏好自动调整界面

  2. 智能表单:自动填充、验证和优化表单流程

  3. 预测性加载:预测用户下一步操作并提前加载内容

  4. 无障碍设计:自动适配不同用户的无障碍需求

  5. 实时数据可视化:智能分析和展示数据趋势

3. 沉浸式Web体验:从2D到3D的转变

2025年,Web将从平面的2D体验向沉浸式的3D体验转变。随着WebXR、WebGL 2.0和WebGPU的不断成熟,浏览器将能够提供接近原生的3D和虚拟现实体验。

3.1 核心技术栈

沉浸式Web体验的核心技术栈包括:

  • WebXRAPI:支持虚拟现实(VR)和增强现实(AR)体验

  • WebGL 2.0:高性能3D图形渲染

  • WebGPU:下一代图形API,提供更好的性能和功能

  • Three.js/Rapier.js:成熟的3D库和物理引擎

3.2 架构设计

image.png

3.3 应用场景

沉浸式Web体验将在以下场景中得到广泛应用:

  1. 虚拟会议与协作:创建沉浸式的远程会议空间

  2. 在线教育:提供交互式的3D学习体验

  3. 虚拟购物:允许用户在虚拟环境中试穿和体验产品

  4. 虚拟旅游:提供沉浸式的虚拟旅游体验

  5. 工业设计与原型:在浏览器中进行3D设计和原型开发

4. 去中心化前端架构:Web3的新范式

随着Web3技术的不断发展,2025年将出现去中心化前端架构,彻底改变前端应用的部署和运行方式。

4.1 核心概念

去中心化前端架构的核心概念包括:

  • 去中心化存储:使用IPFS、Arweave等去中心化存储协议

  • 智能合约集成:直接与区块链上的智能合约交互

  • 去中心化身份(DID) :用户控制自己的身份和数据

  • 零信任安全:基于区块链的安全模型

4.2 架构设计

image.png

4.3 开发示例

以下是一个基于去中心化前端架构的应用示例:

// 去中心化前端应用示例
import { createDApp } from 'decentralized-frontend-framework';
import { ethers } from 'ethers';
import { create } from 'ipfs-http-client';

// 连接到IPFS
const ipfs = create('https://ipfs.infura.io:5001/api/v0');

// 连接到以太坊区块链
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();

// 初始化DApp
const dapp = createDApp({
  ipfs,
  provider,
  signer,
  contracts: {
    myContract: {
      address: '0x1234567890abcdef1234567890abcdef12345678',
      abi: [...]
    }
  }
});

// 从IPFS加载内容
async function loadContent(cid) {
  const content = await dapp.ipfs.get(cid);
  return content;
}

// 与智能合约交互
async function interactWithContract() {
  const contract = dapp.contracts.myContract;
  const result = await contract.functions.myFunction();
  return result;
}

// 保存数据到IPFS并记录到区块链
async function saveData(data) {
  const { cid } = await dapp.ipfs.add(data);
  const transaction = await dapp.contracts.myContract.functions.saveData(cid.toString());
  await transaction.wait();
  return cid;
}

// 渲染应用
function renderApp() {
  return (
    <DAppProvider dapp={dapp}>
      <App />
    </DAppProvider>
  );
}

4.4 应用场景

去中心化前端架构将在以下场景中得到广泛应用:

  1. 去中心化金融(DeFi) :构建安全、透明的金融应用

  2. 数字身份管理:用户控制自己的身份和数据

  3. 内容创作与分发:消除中间商,直接连接创作者和用户

  4. 供应链管理:构建透明、可追溯的供应链系统

  5. 去中心化社交网络:用户控制自己的社交数据和关系

5. 量子计算在前端的初步应用

随着量子计算技术的不断发展,2025年量子计算将开始在前端领域得到初步应用,为前端开发带来新的可能性。

5.1 核心概念

量子计算在前端的应用基于以下核心概念:

  • 量子算法:利用量子力学特性解决复杂问题

  • 量子机器学习:结合量子计算和机器学习

  • 量子安全:基于量子力学的安全加密

  • 量子云服务:通过云服务访问量子计算机

5.2 应用示例

以下是一个使用量子计算的前端应用示例:

// 量子计算前端应用示例
import { QuantumSDK } from 'quantum-frontend-sdk';
import { QuantumMachineLearning } from 'quantum-ml';

// 初始化量子SDK
const quantumSDK = new QuantumSDK({
  apiKey: 'your-quantum-cloud-api-key',
  provider: 'ibm-quantum'
});

// 创建量子机器学习模型
const qml = new QuantumMachineLearning(quantumSDK);

// 训练量子模型
async function trainQuantumModel(data) {
  // 准备量子数据
  const quantumData = await qml.prepareData(data);
  
  // 选择量子算法
  const algorithm = qml.selectAlgorithm('quantum-kernel');
  
  // 训练模型
  const model = await qml.train(quantumData, algorithm);
  
  return model;
}

// 使用量子模型进行预测
async function predictWithQuantumModel(model, input) {
  // 准备输入数据
  const quantumInput = await qml.prepareData(input);
  
  // 进行量子预测
  const result = await qml.predict(model, quantumInput);
  
  // 转换结果为经典数据
  const classicResult = qml.toClassic(result);
  
  return classicResult;
}

// 量子安全加密
async function encryptDataWithQuantumSecurity(data, publicKey) {
  // 使用量子密钥分发生成安全密钥
  const secureKey = await quantumSDK.generateQuantumKey();
  
  // 使用安全密钥加密数据
  const encryptedData = quantumSDK.encrypt(data, secureKey);
  
  // 使用公钥加密安全密钥
  const encryptedKey = quantumSDK.encrypt(secureKey, publicKey);
  
  return { encryptedData, encryptedKey };
}

// 渲染应用
function renderApp() {
  return (
    <QuantumProvider sdk={quantumSDK}>
      <App 
        trainModel={trainQuantumModel}
        predict={predictWithQuantumModel}
        encryptData={encryptDataWithQuantumSecurity}
      />
    </QuantumProvider>
  );
}

5.3 应用场景

量子计算在前端的初步应用将包括:

  1. 量子机器学习:处理复杂的机器学习任务,如图像识别、自然语言处理

  2. 量子安全:提供更安全的加密和认证机制

  3. 优化问题:解决复杂的优化问题,如路径规划、资源分配

  4. 模拟与仿真:进行复杂的物理、化学模拟

  5. 数据分析:处理大规模数据集

6. 总结

2025年的前端技术进入一个全新的时代,从智能到沉浸,从中心化到去中心化,从经典计算到量子计算。这些技术的发展将彻底改变前端开发的方式和前端应用的能力。作为前端开发者,我们需要不断学习和适应这些变化,掌握新的技术和工具,以创造出更加智能、沉浸、安全和高效的用户体验。只有这样,我们才能在未来的前端开发领域保持竞争力,为用户创造出真正有价值的产品和服务。

未来的前端世界充满了无限可能,让我们一起拥抱这个新时代,共同创造更加美好的数字未来!

7. 参考文献

  1. WebAssembly 3.0 官方文档
  2. AI原生前端框架白皮书
  3. WebXR API 规范
  4. IPFS 官方文档
  5. 量子计算在前端的应用
  6. Web3 前端开发指南
  7. Three.js 文档
  8. 前端性能优化最佳实践

8. 团队介绍

智慧家技术平台-应用软件框架开发」主要负责设计工具的研发,包括营销设计工具、家电VR设计和展示、水电暖通前置设计能力,研发并沉淀素材库,构建家居家装素材库,集成户型库、全品类产品库、设计方案库、生产工艺模型,打造基于户型和风格的AI设计能力,快速生成算量和报价;同时研发了门店设计师中心和项目中心,包括设计师管理能力和项目经理管理能力。实现了场景全生命周期管理,同时为水,空气,厨房等产业提供商机管理工具,从而实现了以场景贯穿的B端C端全流程系统。

❌
❌