阅读视图

发现新文章,点击刷新页面。

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

一次真实项目从 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 完全长篇指南

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 速查指南

这是黑客松冠军日常使用 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 协作心得

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 发布!便宜又大碗,体验后我发现这些细节

用 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辅助开发实战:会问问题比会写代码更重要

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年还要学全栈?

系列开篇,写给想要真正做事的人。


原文地址

墨渊书肆/为什么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 一键养「龙虾」,还拍了个短剧

春节假期,帮亲戚朋友们部署 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 写代码总是半途而废?试试这个免费的工作流工具

作为一个用过多种 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

前端工程师 · 开源爱好者 · 正在找工作

对我的项目感兴趣?查看我的简历 · 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前端技术趋势:从智能到沉浸的新时代

引言

前端技术正处于一个前所未有的快速发展阶段。从早期的静态网页到如今的复杂单页应用,前端开发已经经历了多次重大变革。随着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端全流程系统。

硅谷最贵华人放弃 14 亿天价 offer,上交校友庞若鸣提桶投奔 OpenAI

没有永远的东家,只有永远的 offer。

就在刚刚,据 The Information 报道,七个月前刚加入 Meta 的技术大牛庞若鸣(Ruoming Pang),在上周悄悄加入了 OpenAI。

这名字你可能没印象,但履历相当硬核。庞若鸣本科毕业于上海交通大学,硕士毕业于南加州大学,同时也是普林斯顿大学计算机博士。

在 ChatGPT 一炮而红的前一年,他就因为在开发和训练大规模 AI 系统方面经验丰富,精通从模型本身到背后支撑的软件等各个环节,而被 Giannandrea 从 Google DeepMind 招募到苹果。

苹果为他大开绿灯,允许常驻纽约,不用搬去库比蒂诺总部,这在苹果高管安排中相当罕见。他从几个人的小团队起步,逐步把基础模型团队扩到 100 人左右,成员来自 DeepMind、Meta、微软、亚马逊,货真价实的全明星班底。

2024 年 WWDC,苹果高调发布 Apple Intelligence,写作工具、图像生成、接入 ChatGPT,背后大头都是他团队的成果。后来落地到 iPhone 的 Genmoji、邮件摘要这些功能,也基本出自他团队之手。

用一句话概括,他此前正是苹果 AI 战略的中轴线人物之一。

然后,求才若渴的 Meta 出手了。

据当时彭博社报道,Meta 开价超过 2 亿美元,横跨数年,大头是股票和签约奖金,且需完成特定里程碑才能全部兑现。知情人士透露,为了让庞若鸣放弃苹果团队以及过往在 Google 积累的资源,Meta 还为他量身定制了一套补偿机制。

这个数字几乎刷新了外界对顶级 AI 人才的估值认知。

进入 Meta 后,他在扎克伯格亲自组建的超级智能实验室负责 AI 基础设施工作。据他本人对同事的说法,在 Meta 干得挺开心,基础设施也给力。

但,转折点就是这么猝不及防。OpenAI 在他入职数月后就开始积极接触他,于是不到一年,庞若鸣挥一挥衣袖,转身拥抱了 OpenAI。

值得一提的是,他加入 Meta 时,还带走了部分原苹果团队成员。其中有个叫 Tom Gunter 的研究员,原本已经跳去了 OpenAI,听说庞若鸣去 Meta,直接掉头跟过去了,如今老大挪窝,他的去留也成了悬念。

庞若鸣的离开,也侧面反映了 Meta 在 AI 转型期所面临的复杂局面。

Llama 4 折戟之后,扎克伯格憋着一口气,要重新打造一支「超级智能」梦之队,为此几乎是不计成本地砸钱、砸资源、砸人脉。

143 亿美元买下 Scale AI 近半股份,把 Alexandr Wang 拉进来直接向自己汇报;四处挖角 OpenAI、Anthropic、Google 的核心骨干。

甚至据 OpenAI 首席研究官 Mark Chen 在播客中透露,扎克伯格为了从 OpenAI 挖走顶尖 AI 研究员,亲自下厨煮汤,并亲手递送到目标人选手中。

这番努力已初见成效。1 月 21 日,Meta CTO Andrew Bosworth 在瑞士达沃斯世界经济论坛期间正式宣布,Meta 超级智能实验室已完成首批核心 AI 模型的内部交付,表现「非常出色」。

不过他也坦承,「训练之后仍有大量工作要做」。稳定性、成本、安全合规,一堆问题还没解决,离真正可用还有距离。

庞若鸣的出走,恰好在这个节骨眼上发生,难免让外界对 Meta 超级智能实验室的前景多打几个问号。硅谷不相信忠诚,最顶级的 AI人才争夺战,也远未到终局。至于小扎能否得偿所愿,我们很快就会知晓。

附上参考地址:
https://www.theinformation.com/briefings/openai-hires-meta-ai-researcher-previously-led-apples-models-team?rc=qmzset

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

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


三星 Galaxy S26 上手体验:全球首块「防窥屏」,不贴膜也能防窥?

爱范儿刚刚已经上手了昨晚发布的三星 S26 系列手机。

作为节后的第一台重磅发布,三星为 2026 年的一众骁龙 8E5 大旗舰拉开了一个有趣的序幕。

 

和先期的预测相同:在经历过 S25 Edge 的销量折戟之后,三星取消了超薄款机型的换代计划。

S26 系列仍然由我们熟悉的标准版、Plus 和 Ultra 组成。

作为每年的定番,三星再一次对机器的外观设计进行了一些微调,最大改变就是取消了镜头外围的 CD 纹金属环,换成了与 Z Fold7 类似的「中岛」凸起:

除此之外,S26 与 S26+ 在外观上几乎与前代别无二致——对于三星 S 系列偏向稳健的设计语言来说,倒也不失为一种幸事。

但最小号的标准版 S26 带来了一个令小屏党落泪的改变。

S26 的屏幕尺寸从去年的 6.2 寸扩大到了 6.3 寸,机身也变高了一些,单手握持的手感不如 S25 那么灵巧轻便了。

尽管如此,S26 和 S26+ 依然是目前市面上除了 iPhone Air 之外难得兼具「薄」和「轻」的直板机型。

另一方面,和几乎没有变化的外观一样,S26 与 S26+ 的硬件基础配置也没有掀起什么波澜——

除了处理器升级到最新的骁龙 8 Elite Gen 5 for Galaxy、S26 因为尺寸扩大电池从 4000 提升到了 4300mAh 之外,S26 与 S26+ 的参数表和去年别无二致——

换句话说:这两位依然没有抗反射屏幕、充电功率依然是熟悉的 25W 和 45W 封顶,甚至前一段时间传得沸沸扬扬的磁吸充电也没有加入。

不过磁吸充电没来,eSIM 倒是来了:今年的国行 S26 系列三款新机全部为双实体 SIM + eSIM 的配置,「国际化」程度在 2026 年的新机中暂时排在榜首。

如果你用惯了三星,同时还停留在 S22 或者 S23 系列的话,那么今年的 S26 和 S26+ 还是值得升级的。

但除此之外,这两款「普通杯」的吸引力依然主要取决于折扣力度,以及二手价格。

只不过 S26 和 S26+ 虽然外围的升级不大,它俩搭载的 OneUI 8.5 却是一次不小的升级——尤其是在语音助手 Bixby 的功能丰富程度以及端侧处理能力上。

如果你经历过 Galaxy S8、S9 时代的话,一定还记得当年那个能够直接代管微信发红包的超夯 Bixby:

那个时候的三星语音助手,不仅做到了字面意义上的简体中文语音助手第一,更是在软硬件联动方面超过了当年的 Google Assistant。

可惜后来的 Bixby 随着各种软件限制,「智能程度」直线下降,都快沦落到要和 Siri 坐一桌吃饭的程度了。

而在最新的 OneUI 8.5 中,三星对 Bixby 有了不少新的期望。

这一版本的 Bixby 不仅是盖乐世 AI 的入口,更是一跃成为了一个「Agentic AI」——

没错,最新版的 Bixby 获得了提权,在你的指挥下帮你点外卖、叫车、下载视频、订酒店、电商比价和下单样样都行。

根据现场的体验效果,新版 Bixby 几乎是从手机品牌队尾一跃回到了中等偏上的位置。

如果你希望自己手机的 AI 助手不那么具有「侵入性」,同时又不欠缺基础功能的话,那 S26 系列的 Bixby 还真是一个值得考虑的选项。

除了新 Bixby,三星的 AI 能力还体现在了本次一同发布的 Galaxy Buds 4 Pro 上面。

新的外观设计之外,这次的新耳机主打一个主动智能:辨别播放内容和周围环境,全自动调节 EQ,让音乐在所有场合听起来都足够悦耳。

在 S26 和 S26+ 之外,还有今年的重头戏——S26 Ultra。

除了极具辨识度的左上角 3+2 镜组排列,以及沿袭 Z Fold7 的「中岛」之外,S26 Ultra 在外观上同样没什么冲击。

然而由于边框从钛合金换回了三星装甲铝,S26 Ultra 的颜色选择反而多了很多:

结合现场观感,今年 S26 Ultra 共计 6 款配色中,「映雪白」、「浅云蓝」和专属色「绯霞金」的效果都非常不错,调色很有格调。

▲ S26 Ultra 映雪白|三星官网

在基础配置方面,S26 Ultra 和去年的 S25 Ultra 变化不大——

依然是我们熟悉的 5000mAh 电池、无缘蓝牙功能的 S-Pen,以及一块 6.9 寸的旗舰级 2K 屏。

▲ 三星传统艺能:6 种机身颜色,只有 2 种颜色的笔

不过三星似乎终于重视起了电源管理问题,S26 Ultra 的有线充电功率破天荒地提升到了 60W,从「遥遥落后」变成了「微微落后」。

由于机身边框换回铝合金,S26 Ultra 相比前代轻了 4g,拿在手上也有铝合金的微凉感觉,叠加机身 R 角变大,手感整体上是有所升级的。

但进一步增大的 R 角也让 S-Pen 的笔尾变成了一个楔形——虽然左右换个方向依然能插进去,但会留下一个凸起小三角,看上去不太讲究:

而作为 S26 Ultra 的标志性功能,这一代新增的「隐私屏幕」在现场上手期间给我们留下了深刻的印象。

通过在屏幕上设置广角发光和窄角发光两种不同的 OLED 像素,S26 Ultra 可以在硬件层面实现字面意义上的「像素级控光」。

不过这种方案不是完美的——如果只点亮那些窄角发光像素,屏幕的分辨率和亮度会受到一些细微影响。

▲ 图|YouTube @Dave2D

这种时候三星 2K 屏足够好的底子就发挥作用了,在 S26 Ultra 上,打开全屏防窥模式之后几乎察觉不到清晰度的折损,可用度非常高。

直观地说,相比贴一张防窥膜,S26 Ultra 的防窥模式可以自由开关、不影响独处时的观感,并且可以有效避免防窥贴膜透光率低导致的眼疲劳

此外由于像素级控光,S26 Ultra 可以只让通知弹窗或者敏感信息区域防窥,灵活性是防窥膜完全无法比拟的。

根据现场体验,S26 Ultra 可以设置在出现密码键盘、指定 app 内以及所有弹窗类通知时,全自动启用防窥模式,将可视角度缩窄到手机正面大约 80 度的范围内——

防窥模式还有两档强度可调。打开第二档高强度防窥之后,屏幕基础亮度会略微降低,但侧看过去屏幕会黑得更彻底:

▲ 左为第一档,右为第二档

从日常使用的角度考虑,第一档防窥强度基本上就完全足够了,几乎不影响屏幕显示素质。

但如果是早晚高峰挤广州地铁三号线的时候,倒是可以考虑打开第二档。

和当年的 UTG 玻璃一样,S26 Ultra 的防窥屏幕同样是一个我们等不及看到全行业普及的功能,尤其对于折叠屏来说,防窥模式的重要性甚至更上一层楼——

总的来说,在 2026 年「手机几乎卷无可卷」的背景下,三星通过一项原理并不复杂的屏幕硬件技术,实现了「局部分时防窥」这种从前没有过的新体验点——

就像智能手机之前融合掉了卡片机、随身听和 PDA 一样,现在的手机也还在不断融合外设配件的功能:抗反射涂层如此,防窥膜亦如此。

这种化繁为简的能力,就是每年的新硬件最令人着迷的地方。

然而不可避免地,我们也要谈到 S26 系列的售价——

今年的三星可不是小涨价,而是结结实实大涨了一波。

根据三星官网,标准版 S26 国行仅提供 12+256GB 一种配置,价格相比去年上涨 1000,来到了 6999 元起:

大屏的 S26+ 则有 12+256 和 12+512GB 两种可选,标价分别为 7999 和 9599,曾经的免费升杯也变成了「加 800 元升杯」,512 机型实际到手价为 8799 元:

至于 S26 Ultra,国行依然有 12+256、12+512 和 16+1TB 三款,但起步价同比去年均上涨了一千多元,从 8699 起涨到了 9999 起:

换言之,S26 系列绝对算不上是便宜的手机,同时也是 2026 年手机市场全线涨价的冰山一角。

但如果你想要一款足够与众不同的「安卓机皇」,三星似乎又是目前的唯一选择。

持续关注爱范儿,我们后续会为大家带来 S26 Ultra 的详细评测。

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

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


三星 Galaxy S26 系列发布:6999 元起!AI 很聪明,防窥接地气

相信你也有过屏幕被陌生人偷瞄的尴尬。

为了隐私,大家往往只能贴上防窥膜,代价是屏幕瞬间暗沉、画质受损,极易让眼睛疲劳。

今天凌晨,三星正式召开 Galaxy 全球新品发布会,交出开年旗舰答卷 Galaxy S26 系列,作为 2026 年手机圈的第一波重头戏,尤其是 S26 Ultra 拿出的最大升级点出人意料地接地气,解决了一个极其普遍的日常烦恼:防偷窥。

爱范儿也在现场,第一时间上手体验了这台新机。

世界首个「隐私屏」,用技术防偷看

在这台机身的屏幕上,三星推出了名为隐私屏幕(Privacy Display)的技术,顾名思义,它能让屏幕只朝固定角度显示信息,一旦视角偏离,屏幕将会呈现黑色,帮助你屏蔽周围的视线。

看到这里,有的人就会问了:

这不是防窥膜吗?

没错,它和我们熟悉的防窥贴膜看起来是一样的效果,但传统的防窥贴膜主要依靠内部排列极其细密的黑色光栅,只有正对着手机时,眼睛才能接收到垂直透出的光线,但这种方案的缺点也很明显——透光率和亮度都会急剧变低、有细密条纹干扰的屏幕容易让眼睛疲劳。

▲ 传统防窥膜结构,图片来自@上海复瞻智能科技

而三星的隐私屏幕,是让屏幕自己在硬件层面控制光线。这项技术脱胎于 2024 年 MWC 上展出的 Flex Magic Pixel。通过在屏幕基板上分别蒸镀【广视角像素】和【窄视角像素】。

S26 Ultra 可以在系统设置里实现两档强度的硬件防窥,从爱范儿现场的上手来看,第一档强度会对屏幕做个大概限制,从旁边看过去只有模糊的轮廓,而如果把火力开到最大,屏幕的视场角会被死死限制在左右 45 度以内,旁边的人看过来只能看到一片死寂的暗色。

既然是硬件层面的可控反馈,就意味着这个功能还有软件加持的想象空间——由于在单颗像素的层面进行控光,隐私屏幕可以实现「局部遮蔽」。比如在拥挤的地铁上看手机,屏幕上只有通知弹窗或者来电信息的一小块区域会瞬间进入防窥模式。整体反黑,局部防窥,想开就开,关掉时丝毫不影响这块顶级屏幕原本的通透感。

物理遮蔽光线,永远比纯靠前置摄像头识别人脸去隐藏通知或是干脆贴上物理的光栅防窥膜来得更彻底。这项技术一旦铺开,那些劣质防窥膜大概率会被彻底扫进历史的垃圾堆。

顺带一提,在各家都在普及 1.5K 屏以换取续航的今天,S26 Ultra 依然坚守着 2K 分辨率。不过为了塞下更复杂的传感器,前置挖孔的面积相比上一代变大了些,位置也略微下沉。那些高喊着「无 2K 不旗舰」的硬核玩家,在 2026 年几乎只剩下这一个选择了。

猎户座重返赛场,AI 再引外援

在屏幕之外的核心配置上,S26 系列毫无悬念地搭载了定制版骁龙 8 Elite Gen 5 for Galaxy,但也有消息称,时隔多年,凭借着全新 2 纳米 GAA 工艺和 AMD RDNA4 架构的加持,最新的 Exynos 2600 处理器将在韩版 S26 标准版上重出江湖。

从之前泄露的跑分来看,这颗芯片终于在光追和综合性能上重新站回了可以和高通正面掰手腕的擂台上。

在核心参数外,AI,依旧是 Galaxy S26 系列的重头戏。在发布会开场,三星就宣布了 Galaxy AI 进一步深入系统,并强调三星理解的 AI,有三个要点:

  • 普及性
  • 开放性
  • 安全性

经过这三个方面的结合,三星认为 AI 应该成为手机上的基础工具,最终目的,是让其进化为智能体,这也是三星为 Galaxy S26 系列贴上的最贴合时代,也最重要的标签——Agentic AI 手机。

Agentic 的具体表现,是更为聪明、且可以主动介入你的动作——

Google Gemini 现在支持任务自动化功能。在三星 Galaxy S26 上,用户可以向 Gemini 发出提示,比如「帮我叫一辆车去美术馆」,随后 Gemini 就会在用户的设备上通过虚拟窗口启动程序,并在后台逐步完成过程。

如果在执行过程中遇到选项,它会停止并让用户接管,整体操作体验和豆包手机差不多。

除此之外,在好友向你索取上周末的照片时,Galaxy AI 可以免去用户翻找相册的烦恼,直接将符合时间条件的照片推送到你眼前。

外版的 Galaxy S26 系列两年前与 Gemini 合作达成的识别功能也更进一步,支持识别多个对象;还引入了 Perplexity 搜索引擎能力,新版 Bixby 现在的交互显得前所未有的聪明,可以更高效地搜索你想要的信息。

当年那个只会讲冷笑话的语音助手,终于进一步靠近能够理解复杂语境的赛博管家,再换个比喻,也可以说这也是海外首款「豆包手机」。

影像方面,S26 Ultra 维持了 2 亿像素主摄、5000 万超广角、1000 万 3 倍加上 5000 万 5 倍长焦的组合。表面上看参数没变,但从爱范儿现场的上手观察,S26 Ultra 的长焦端,光孔变成了圆形,具体表现可以等待我们进一步实测。

值得一提的是,整场发布会,都由 Galaxy S26 Ultra 直播拍摄。

在依旧稳定的影像上,AI 带来了一些新体验——在 AI 的帮助下,用户可以轻松转换照片的风格,无论是水彩还是 3D 风格都不在话下;也可以用 AI 修复被朋友吃掉的蛋糕;但最有趣的,属于元素拼贴——你可以将另一张图的小狗放进一张合影中,只需要用简单的自然语言告诉 AI 你想怎么抱着它,就可以轻松获得结果。

至于续航,三星 Galaxy S26 Ultra 配备了 5000 毫安时电池,好消息是,45W 的祖传快充终于退休了,S26 Ultra 首次支持最高 60W 的充电功率,回血速度有了实质性的改善;但坏消息是,YTECHB 报道,从尚未公布的欧盟标签及电池续航评级显示,三星 S26 系列的电池健康度,会在 1200 次充电后降低到 80%,前代的数据则是 2000 次充电才会降低到 80%。

好手感回归,但设计更保守了

内部配置在暗暗较劲,S26 系列的外观却选择了「退让」。

前两代被视作高端标配的钛金属中框,在 S26 系列上悄悄退场,换回了熟悉的铝合金。抛开营销层面的高级感不谈,铝合金在机身散热、重量控制和加工精度上,其实能提供更扎实的日常握持体验。只不过,iPhone 17 Pro 系列在换回铝合金后,抗击打能力收到大量用户的质疑,「珠玉在前」,S26 系列上铝合金机身的抗摔能力也需要进一步测试。

随着中框材质变化的,是整机边缘的设计语言改变,S26 Ultra 的机身 R 角进一步变大,边框过渡变得圆润,终于不再像前两代那样,握在手里仿佛握着一块硌手的切菜板。

但手感上的回归,往往需要付出一些代价。

从爱范儿现场上手来看,由于机身倒角的倒逼,位于左下角的 S-Pen 笔尾现在从边框微微凸起了一截。并且,这是近十年来第一款带有明确正反面限制的带笔机型,如果左右调转,虽然还能正常插进去,但会在边框上凸出一个小三角。

在机身内部寸土寸金的当下,S-Pen 近两年的处境确实有些尴尬:先是失去了蓝牙,如今又告别了左右反插。在实用主义和外观设计的双重挤压下,这根超大杯的标志性触控笔,似乎不可避免地一直在妥协。

但这其实是种错觉,在 Galaxy S26 系列上,期待中类似 iPhone 的 Qi2.2 磁吸充电并没有出现。原因很简单——物理学不存在奇迹。内置的强磁体依然会严重干扰 S-Pen 的电磁感应层。

在迎合大众的磁吸充电和这支笔的底层体验之间,三星毫不犹豫地选择力保继承自 Note 系列的灵魂体验。

转到机身背面,过往标志性的独立镜头排列不见了。S26 全系向自家的折叠屏老大哥 Z Fold7 看齐,老老实实加回了一个带有中岛的模组,这个设计见仁见智,个人觉得没有往代那么干净利落,但在这个各家厂商都在手机背面背着一个巨大奥利奥或者滚筒洗衣机的年代,S26 Ultra 反倒成了市面上为数不多的、正常单手握持时食指能够舒舒服服安放,而不会频繁摸到镜头的旗舰。

此外,三星 S26 系列国行全系支持双实体卡槽,同时支持 eSIM,共推出六款配色,分别为幽夜紫、映雪白、旷宇黑、浅云蓝,以及两款三星直销平台专属色的绯霞金与镜月银。

在手机介绍大致结束后,三星还在本场发布会上发布了新一代的无线耳机——Galaxy Buds 4 与 Galaxy Buds 4 Pro。

简单来说,这次更新让耳机佩戴更舒适、支持 24-bit/96kHz 高解析音频;三星还研发了基于深度神经网络(DNN)技术,清晰捕捉声音细节,再通过超宽频(SWB)技术还原语音信号,进一步屏蔽嘈杂环境中的噪音;同时支持 AI 驱动的翻译功能(需使用 Galaxy AI),并搭载了 AI 助手,只需用自然语言,就可以与手机进行交互(同样需要 Galaxy AI)。

而对于 Galaxy Buds 4 Pro 来说,除了以上的特征,Buds 4 Pro 改为了入耳式,还搭载了新升级的双路扬声器系统和双功放功能,呈现更通透均衡的高保真音质,两者均支持主动降噪。

Galaxy Buds 4 与 Galaxy Buds 4 Pro 售价分别为 1399 元与 1899 元。

在手机不能缺席的未来,三星给出的答案

目光转回手机,今年 S26 系列的背后,其实藏着一段颇为滑稽的内部博弈。

关注半导体供应链的朋友都知道,过去一年内存颗粒的价格一路狂飙。这在三星内部造就了一个奇特的景象:负责生产颗粒的半导体部门赚得盆满钵满,而负责造手机的移动通信部门却深陷成本上涨的泥潭。俗话说亲兄弟也要明算账,Galaxy S26 系列大容量版本不可避免地迎来了溢价:

  • 三星 Galaxy S26,仅提供 12GB + 256GB 版本,售价为 6999 元
  • 三星 Galaxy S26+,提供 12GB + 256GB / 512GB 两个版本,售价分别为 7999/9599 元
  • 三星 Galaxy S26 Ultra,提供 12GB + 256GB/512GB 两个 12GB 版本,售价分别为 9999/11599 元
  • 三星 Galaxy S26 Ultra 16GB+1TB 顶配版,售价为 13999 元

如果将 iPhone 发布的 2007 年视为智能手机的元年,那么到今天,已经狂奔了近二十年。

手机的创新速度,随着手机形态的挖掘和现有科技的限制,大大降低,这个社会与行业的共识已经基本形成。在现有的产品形态下,指望智能手机还能像早期那样,掏出接踵而至的大创新,几乎是不切实际的幻想。

另一边,AI 浪潮愈演愈烈,各种形态新奇的 AI 硬件试图上位,但至今也没有哪个设备能证明自己能替代手机,成为下一个版本的标准答案。

在目光可及的未来里,智能手机依旧是每个人的必需品,那么接下来,手机的答卷,该怎么答?

带着这样的问题,我们再转头看看刚刚发布的三星 Galaxy S26 系列——它的影像或许没有国内大厂在特定场景下那么激进抢眼,但胜在整体素质依然稳健;OneUI 的本地化虽然还有进步空间,但日常用起来也不拖后腿;最重要的是,三星在系统级 AI 的布局上来得非常早,直接拉来了 Gemini 和 Perplexity 强强联手,早早抢占了先机。

尤其 S26 上面的最新版 Bixiby,在新模型的加持下也获得了帮你操作手机的能力,点外卖、叫车、订酒店、电商比价下单,统统都是【信口拈来】。

可以说,这是一台没有明显短板,基础很扎实的水桶机,而三星的回答,就是在参数卷进边际效应递减的死胡同、影像只剩下喜好而无客观差距的时代,在扎实的产品基础上,打造类似于隐私屏幕这样瞄准微小痛点,更聚焦、更人文的创新。

谁也无法断言未来,但颠覆发生之前,我们依然需要一台更好用的手机。

三星 Galaxy S26 系列,就是这样的产品。

让我有个美满旅程

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

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


Claude Code 构建完全指南:十大核心功能深度解析

一、创建自定义子代理(Subagents)

1. 是什么

子代理是运行在独立上下文窗口中的专用 AI 助手。每个子代理拥有自己的系统提示、工具访问权限和权限设置。当 Claude 遇到与某个子代理描述匹配的任务时,会自动将任务委派给该子代理,子代理独立工作并返回结果。Claude Code 内置了 Explore(只读代码搜索,使用 Haiku 模型)、Plan(计划模式研究代理)和 general-purpose(全工具通用代理)等子代理,用户也可以创建自定义子代理。

2. 怎么用

创建子代理最简单的方式是在 Claude Code 中运行 /agents 命令,进入交互式界面选择"Create new agent",然后选择作用域(用户级或项目级),输入描述后由 Claude 自动生成配置。也可以手动创建 Markdown 文件,放在 .claude/agents/(项目级)或 ~/.claude/agents/(用户级)目录中:

---
name: code-reviewer
description: Reviews code for quality and best practices
tools: Read, Glob, Grep
model: sonnet
---
You are a code reviewer. Analyze the code and provide actionable feedback.

还可以通过 CLI 标志以 JSON 传递临时子代理:

claude --agents '{ "code-reviewer": { "description": "Expert code reviewer.", "prompt": "Focus on code quality and security.", "tools": ["Read","Grep","Glob","Bash"], "model": "sonnet" } }'

3. 使用场景与痛点

子代理解决的核心痛点是主对话上下文膨胀和工具权限失控。典型场景包括:运行测试套件时大量输出占用上下文(委派给子代理后只返回摘要)、需要对代码库进行并行研究(多个子代理同时探索不同模块)、需要强制只读权限(如代码审查只允许读不允许写)、多步骤工作流的链式委派(先审查再优化),以及通过路由到 Haiku 模型来控制 Token 成本。

4. 使用示例

入门示例——只读代码审查器:

---
name: code-reviewer
description: Expert code review specialist. Use immediately after writing or modifying code.
tools: Read, Grep, Glob, Bash
model: inherit
---
You are a senior code reviewer. Run git diff, focus on modified files, check for readability, error handling, security, and test coverage. Organize feedback by priority: Critical, Warnings, Suggestions.

使用时只需说:"Use the code-reviewer subagent to look at my recent changes."

进阶示例——带持久化记忆的调试器:

---
name: debugger
description: Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.
tools: Read, Edit, Bash, Grep, Glob
memory: user
---
You are an expert debugger. Capture error messages, identify reproduction steps, isolate failure location, implement minimal fix, verify solution. Before starting, consult your memory for patterns you've seen before. After fixing, save what you learned.

记忆功能使调试器跨会话积累知识——它会记住之前遇到的 bug 模式和修复策略,随着使用越来越高效。

高级最佳实践——带 Hook 验证的数据库查询代理:

---
name: db-reader
description: Execute read-only database queries. Use when analyzing data or generating reports.
tools: Bash
hooks:
  PreToolUse:
    - matcher: "Bash"
      hooks:
        - type: command
          command: "./scripts/validate-readonly-query.sh"
---
You are a database analyst with read-only access. Execute SELECT queries only.

配合验证脚本,通过 Hook 在每个 Bash 命令执行前检查是否包含 INSERT/UPDATE/DELETE 等写操作,退出码 2 阻止执行。这是"工具级允许、操作级限制"的精细控制模式。其他高级实践包括:使用 skills 字段预加载团队编码规范、用 isolation: worktree 在独立 git worktree 中运行子代理避免影响主分支、用 Task(worker, researcher) 语法限制主代理只能生成特定子代理。

5. 适用角色

个人开发者: 创建用户级子代理(~/.claude/agents/)用于个人常用任务,如代码审查、调试、日志分析。推荐从 /agents 交互式界面入手,用 Haiku 模型的 Explore 子代理快速搜索代码库以节省成本。

团队开发者: 创建项目级子代理(.claude/agents/)并提交到版本控制。统一团队的代码审查标准、API 开发规范。使用 skills 字段预加载团队编码规范,确保每个成员使用的子代理行为一致。

Tech Lead / 架构师: 设计子代理体系——为不同任务领域(前端、后端、数据库、安全)创建专门的子代理,使用权限模式和工具限制确保安全边界。利用 memory: project 让子代理积累项目架构知识。

DevOps / CI 工程师: 通过 --agents CLI 标志在自动化脚本和 CI/CD 流水线中动态定义子代理,用于自动化测试、代码扫描、构建验证等。结合 bypassPermissions 模式实现全自动化执行。


二、运行代理团队(Agent Teams)

1. 是什么

代理团队是一项实验性功能,允许多个独立的 Claude Code 实例协同工作。一个会话充当"团队负责人"(Lead),协调工作、分配任务和综合结果;其他"团队成员"(Teammates)各自拥有独立的上下文窗口,可以直接相互通信、挑战彼此的发现。与子代理的关键区别是:子代理只能向主代理报告结果,而代理团队成员之间可以直接发送消息和协作。

2. 怎么用

首先需要启用实验性功能,在 settings.json 中添加:

{ "env": { "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" } }

然后用自然语言告诉 Claude 创建团队:

Create an agent team to review PR #142. Spawn three reviewers:
- One focused on security implications
- One checking performance impact
- One validating test coverage

Claude 会创建团队、生成共享任务列表、生成成员并协调工作。在进程内模式中用 Shift+Down 切换成员;在分屏模式中(需 tmux 或 iTerm2)每个成员有独立窗格。用 Ctrl+T 切换任务列表视图。

3. 使用场景与痛点

代理团队解决的核心痛点是单一会话的线性工作模式无法高效处理需要并行探索的复杂任务。最强场景包括:并行代码审查(安全、性能、测试覆盖各一个审查员,避免单个审查员的视角偏见)、竞争假设调试(多个成员调查不同理论并相互辩论反驳,避免锚定效应)、新功能多模块开发(每个成员负责一个独立模块不会冲突)以及跨层协调(前端、后端、测试各由不同成员负责)。

不适合的场景:顺序任务、同文件编辑、依赖关系多的工作——这些情况下单会话或子代理更高效。

4. 使用示例

入门示例——并行代码审查:

Create an agent team to review PR #142. Spawn three reviewers:
- One focused on security implications
- One checking performance impact
- One validating test coverage
Have them each review and report findings.

每个审查员从不同角度审查同一个 PR,Lead 综合所有发现。

进阶示例——竞争假设调试:

Users report the app exits after one message instead of staying connected.
Spawn 5 agent teammates to investigate different hypotheses.
Have them talk to each other to try to disprove each other's theories,
like a scientific debate. Update the findings doc with whatever consensus emerges.

辩论式结构是关键——多个独立调查者主动尝试推翻对方的理论,幸存的理论更可能是真正的根因。

高级最佳实践:

要求成员在实施前提交计划审批:

Spawn an architect teammate to refactor the authentication module.
Require plan approval before they make any changes.

成员以只读计划模式工作,提交计划后由 Lead 审批或驳回。可以通过提示影响 Lead 的判断标准,如"只批准包含测试覆盖的计划"。其他高级实践包括:使用 TeammateIdle 和 TaskCompleted Hook 实施质量门禁、保持 3-5 个成员和每人 5-6 个任务的最佳比例、给成员充足的上下文(spawn 提示中包含具体的任务细节而非依赖继承)。

5. 适用角色

个人开发者: 从研究和审查任务开始尝试——审查一个 PR、研究一个库、调查一个 bug。这些任务展示并行探索的价值,又没有并行实施的协调挑战。

团队 Lead / 项目经理: 用代理团队进行全方位的代码审查、架构评估和技术方案论证。通过设定审批流程(require plan approval)控制实施质量。

高级工程师: 用于复杂调试(竞争假设模式)、跨模块重构(每个成员负责一个模块)和大规模代码迁移(并行处理不同组件)。注意 Token 消耗——代理团队的成本随成员数线性增长。

注意: 代理团队目前是实验性功能,不建议在关键生产流程中使用。已知限制包括不支持进程内成员的会话恢复、任务状态可能滞后、每个会话只能管理一个团队。


三、创建插件(Plugins)

1. 是什么

插件是 Claude Code 的打包扩展机制,将技能、代理、钩子、MCP 服务器和 LSP 服务器封装成可分发的单元。每个插件有一个 .claude-plugin/plugin.json 清单文件定义元数据,以及按功能组织的目录结构。插件的技能使用命名空间(/plugin-name:skill-name)来避免多插件之间的冲突。

与独立配置(.claude/ 目录中的文件)相比,插件更适合需要跨项目、跨团队共享的场景——独立配置适合个人实验和项目专属定制,插件适合版本化发布和市场分发。

2. 怎么用

创建插件的步骤:

# 1. 创建插件目录和清单
mkdir -p my-plugin/.claude-plugin
# 2. 编写 plugin.json
cat > my-plugin/.claude-plugin/plugin.json << 'EOF'
{ "name": "my-plugin", "description": "My extension", "version": "1.0.0" }
EOF
# 3. 添加技能
mkdir -p my-plugin/skills/hello
cat > my-plugin/skills/hello/SKILL.md << 'EOF'
---
description: Greet the user with a friendly message
---
Greet the user warmly and ask how you can help.
EOF
# 4. 本地测试
claude --plugin-dir ./my-plugin

在 Claude Code 中运行 /my-plugin:hello 即可使用。可以用 --plugin-dir 标志同时加载多个插件进行测试。

3. 使用场景与痛点

插件解决的核心痛点是扩展功能的碎片化和不可共享。典型场景包括:团队统一工具链(所有成员通过安装同一插件获得相同的代码审查代理、提交工作流和格式化钩子)、社区分享(将自己开发的有用扩展发布到市场让其他人安装)、跨项目复用(一套检查规则不需要在每个项目中重新配置)、以及版本化管理(通过语义化版本号追踪发布和更新)。

4. 使用示例

入门示例——包含一个技能的插件:

创建一个 greeting 插件,包含一个 hello 技能。目录结构:greeting/.claude-plugin/plugin.json + greeting/skills/hello/SKILL.md。使用 claude --plugin-dir ./greeting 加载,然后运行 /greeting:hello Alex 测试。

进阶示例——包含代理、钩子和 LSP 的完整插件:

my-team-plugin/
├── .claude-plugin/
│   └── plugin.json
├── agents/
│   └── security-reviewer.md      # 安全审查代理
├── skills/
│   └── code-review/
│       └── SKILL.md               # 代码审查技能
├── hooks/
│   └── hooks.json                 # PostToolUse 自动格式化
├── .mcp.json                      # 集成 GitHub MCP 服务器
├── .lsp.json                      # TypeScript LSP 配置
└── settings.json                  # 默认设置 {"agent": "security-reviewer"}

设置 settings.json 中的 agent 字段可以让插件在启用时自动激活指定代理作为默认行为。

高级最佳实践:

从独立配置迁移到插件:将 .claude/commands/.claude/agents/.claude/skills/ 的文件复制到插件目录,将 settings.json 中的 hooks 迁移到 hooks/hooks.json,然后用 --plugin-dir 验证一切正常。发布前为插件添加 README.md,使用语义化版本号。注意:不要把 commands/agents/ 等目录放在 .claude-plugin/ 里面——只有 plugin.json 放在 .claude-plugin/ 中,其他目录在插件根目录。

5. 适用角色

个人开发者: 先用 .claude/ 目录中的独立配置快速实验,等稳定后再转为插件以跨项目复用。适合创建个人的提交工作流、代码模板等。

团队 Lead / 平台工程师: 为团队创建统一的插件,包含编码规范技能、代码审查代理和自动格式化钩子。通过项目的 .claude/settings.json 配置团队市场,让新成员加入时自动获取团队插件。

开源 / 社区贡献者: 创建通用插件(如 commit-commands、pr-review-toolkit)并发布到市场,供社区使用。遵循清晰的目录结构和版本号规范。

企业 IT 管理员: 通过托管设置(managed settings)部署组织级插件,确保合规性审查工具和安全检查在所有项目中强制启用。


四、发现和安装预构建插件

1. 是什么

插件市场(Marketplace)是帮助用户发现和安装 Claude Code 扩展的目录。市场本质上是一个包含 .claude-plugin/marketplace.json 的仓库或文件,列出了可供安装的插件集合。Anthropic 官方市场(claude-plugins-official)自动可用,包含代码智能(LSP)、外部集成(GitHub/Slack/Jira 等)、开发工作流和输出风格等类别的插件。用户也可以添加第三方市场或创建团队私有市场。

2. 怎么用

# 浏览官方市场
/plugin                             # 打开插件管理器,进入 Discover 标签

# 安装插件
/plugin install typescript-lsp@claude-plugins-official

# 添加第三方市场
/plugin marketplace add anthropics/claude-code        # GitHub 仓库
/plugin marketplace add https://gitlab.com/company/plugins.git  # Git URL
/plugin marketplace add ./my-marketplace              # 本地路径

# 管理插件
/plugin disable plugin-name@marketplace-name          # 禁用
/plugin enable plugin-name@marketplace-name           # 启用
/plugin uninstall plugin-name@marketplace-name        # 卸载

# 管理市场
/plugin marketplace list                              # 列出所有市场
/plugin marketplace update marketplace-name           # 刷新
/plugin marketplace remove marketplace-name           # 移除(会卸载其中的插件)

插件安装有三种作用域:用户(跨所有项目)、项目(通过 .claude/settings.json 共享给协作者)和本地(仅当前用户当前仓库)。

3. 使用场景与痛点

插件市场解决的核心痛点是手动配置外部工具的复杂性和团队配置不一致。安装代码智能插件后,Claude 在每次编辑后自动获得类型错误、缺失导入等诊断反馈,无需手动运行编译器。安装外部集成插件(GitHub、Jira、Slack)后,Claude 可以直接与这些服务交互,无需手动配置 MCP 服务器。团队管理员可以在 .claude/settings.json 中配置 extraKnownMarketplacesenabledPlugins,让团队成员信任仓库后自动安装指定市场和插件。

4. 使用示例

入门示例——安装代码智能插件:

/plugin install typescript-lsp@claude-plugins-official

安装后,Claude 在编辑 TypeScript 文件时自动获得类型检查——如果引入错误会立即发现并在同一轮修复。按 Ctrl+O 可以内联查看诊断信息。前提:系统需安装对应的语言服务器二进制文件(如 typescript-language-server)。

进阶示例——添加外部集成和工作流插件:

# 安装 GitHub 集成
/plugin install github@claude-plugins-official
# 安装提交工作流
/plugin install commit-commands@claude-plugins-official

之后可以直接说"Review PR #456 and suggest improvements"或使用 /commit-commands:commit 一键暂存、生成消息、创建提交。

高级最佳实践:

配置团队市场自动安装:在项目的 .claude/settings.json 中添加 extraKnownMarketplacesenabledPlugins,让团队成员加入项目时自动获取。启用自动更新以保持插件版本最新(官方市场默认启用,第三方默认禁用)。如果需要禁用 Claude Code 自动更新但保持插件更新,可设置 DISABLE_AUTOUPDATER=trueFORCE_AUTOUPDATE_PLUGINS=true

5. 适用角色

所有开发者: 安装代码智能插件是最基础的增强——给 Claude 实时的类型错误和语法问题反馈,减少编辑后需要手动编译验证的次数。

全栈开发者: 安装外部集成插件(GitHub、Slack、Figma、数据库),让 Claude 能直接从 issue 描述实现功能、集成设计稿、查询数据库。

团队管理员: 配置团队市场,确保所有成员使用相同的插件和版本。通过项目级安装(--scope project)将插件配置提交到版本控制。

初学者: 从 Discover 标签浏览可用插件,安装 learning-output-style 或 explanatory-output-style 获得更好的学习体验。


五、使用技能扩展 Claude(Skills)

1. 是什么

技能(Skills)是通过 SKILL.md 文件为 Claude 添加的指令和能力扩展。技能遵循 Agent Skills 开放标准,可以是参考知识(编码规范、API 文档),也可以是具体任务(部署流程、提交规范)。Claude 可以根据任务上下文自动加载相关技能,用户也可以通过 /skill-name 直接调用。

技能与子代理的区别:技能默认在主对话上下文中运行(共享上下文),子代理在隔离的上下文中运行。技能适合需要共享对话历史的场景,子代理适合需要隔离的场景。

2. 怎么用

创建技能目录和 SKILL.md 文件:

mkdir -p ~/.claude/skills/explain-code

编写 ~/.claude/skills/explain-code/SKILL.md

---
name: explain-code
description: Explains code with visual diagrams and analogies. Use when explaining how code works.
---
When explaining code, always include:
1. **Start with an analogy**: Compare the code to something from everyday life
2. **Draw a diagram**: Use ASCII art to show the flow
3. **Walk through the code**: Explain step-by-step
4. **Highlight a gotcha**: What's a common mistake?

两种使用方式:让 Claude 自动识别("How does this code work?")或直接调用(/explain-code src/auth/login.ts)。

3. 使用场景与痛点

技能解决的核心痛点是重复的指令输入和行为不一致。没有技能时,每次需要 Claude 按特定方式工作都要重新描述需求;有了技能,一次编写,反复使用。典型场景包括:团队编码规范强制执行(API 设计模式、错误处理模式作为参考技能自动加载)、标准化操作流程(部署、提交、PR 创建作为任务技能由用户触发)、自定义代码生成模板(组件创建、测试编写遵循固定结构),以及跨项目知识复用(个人级技能在所有项目中可用)。

4. 使用示例

入门示例——参考型技能(API 规范):

---
name: api-conventions
description: API design patterns for this codebase
---
When writing API endpoints:
- Use RESTful naming conventions
- Return consistent error formats: { "error": { "code": "...", "message": "..." } }
- Include request validation with Zod schemas
- Always add rate limiting middleware

Claude 在实现 API 时会自动加载这个技能,确保遵循团队约定。

进阶示例——带参数和动态上下文的任务技能:

---
name: fix-issue
description: Fix a GitHub issue
disable-model-invocation: true
---
Fix GitHub issue $ARGUMENTS following our coding standards.

## Issue context
- Issue details: !`gh issue view $0 --json title,body,labels`
- Recent commits: !`git log --oneline -5`

## Steps
1. Read the issue description
2. Implement the fix
3. Write tests
4. Create a commit

使用 /fix-issue 123 时,!command 语法预先执行 shell 命令获取实时数据,$0 替换为第一个参数。disable-model-invocation: true 确保只有用户手动触发。

高级最佳实践——在子代理中运行技能 + 可视化输出:

---
name: deep-research
description: Research a topic thoroughly
context: fork
agent: Explore
---
Research $ARGUMENTS thoroughly:
1. Find relevant files using Glob and Grep
2. Read and analyze the code
3. Summarize findings with specific file references

context: fork 使技能在隔离的 Explore 子代理中运行,不影响主对话。另一个强大模式是生成可视化输出——技能中捆绑 Python 脚本生成交互式 HTML 文件用于数据探索。其他高级实践:使用 allowed-tools 限制技能中 Claude 可用的工具、用 Skill(commit) / Skill(deploy *) 权限规则精细控制哪些技能 Claude 可以自动调用、SKILL.md 控制在 500 行内并将详细参考材料拆分到辅助文件中。

5. 适用角色

个人开发者: 创建用户级技能(~/.claude/skills/)封装个人工作习惯——自定义提交格式、代码解释风格、调试流程。用 disable-model-invocation: true 保护有副作用的操作(如部署)。

团队开发者: 创建项目级技能(.claude/skills/)并提交到版本控制,统一团队的 API 设计模式、错误处理方式、测试编写规范。新成员无需阅读长篇文档,Claude 自动遵循。

技术培训师 / 导师: 创建教学型技能(如 explain-code),让 Claude 始终用类比、图表和分步讲解的方式解释代码,帮助初级开发者学习。

平台工程师: 通过插件分发技能、通过企业托管设置强制加载组织级技能,确保合规性检查和安全扫描在所有项目中自动执行。


六、输出风格(Output Styles)

1. 是什么

输出风格直接修改 Claude Code 的系统提示,改变 Claude 的响应方式——包括格式、语调和结构。与 CLAUDE.md(作为附加的用户消息)和 --append-system-prompt(追加到系统提示末尾)不同,输出风格会关闭 Claude Code 默认系统提示中与软件工程相关的部分,用自定义指令替代。Claude Code 内置三种风格:默认(高效完成软件工程任务)、解释性(在工作中穿插教育性"洞察")、学习(协作式学做模式,用 TODO(human) 标记让用户自己写代码)。

2. 怎么用

# 交互式选择
/output-style

# 直接切换到指定风格
/output-style explanatory
/output-style learning

创建自定义输出风格,保存为 Markdown 文件到 ~/.claude/output-styles/(用户级)或 .claude/output-styles/(项目级):

---
name: My Custom Style
description: A brief description
keep-coding-instructions: false
---
# Custom Style Instructions
You are an interactive CLI tool that helps users with software engineering tasks.
[Your custom instructions...]

keep-coding-instructions: true 可以保留 Claude Code 默认的编码相关系统提示(如"用测试验证代码")。

3. 使用场景与痛点

输出风格解决的核心痛点是 Claude 的响应方式与用户需求不匹配。有些人需要简洁的执行结果,有些人需要详细的解释以学习。典型场景包括:初学者学习模式(learning 风格让 Claude 不仅写代码还要求你自己实践)、教学演示(explanatory 风格在每个实现决策后插入背景知识)、非软件工程任务(关闭默认的编码指令,让 Claude 专注于写作、分析等)、团队统一输出格式(通过项目级输出风格确保所有人看到相同格式的响应)。

4. 使用示例

入门示例——切换到学习模式:

/output-style learning

切换后,Claude 在帮你完成任务时会添加 TODO(human) 标记,要求你自己实现关键部分,同时分享"洞察"帮助你理解为什么这样做。

进阶示例——创建自定义架构师风格:

---
name: architect
description: Respond with architecture-first thinking. Always discuss trade-offs before implementing.
keep-coding-instructions: true
---
# Architect Mode
Before writing any code:
1. Identify the architectural implications
2. List alternative approaches with trade-offs
3. Recommend an approach with justification
4. Only implement after the user approves

Always think about: scalability, maintainability, testability, and security.
Use diagrams (ASCII art) to illustrate architecture decisions.

高级最佳实践:

理解输出风格与其他扩展机制的区别非常重要:输出风格修改系统提示、始终生效;技能是按需加载的任务指令;CLAUDE.md 是始终存在的上下文补充。最佳实践是用输出风格控制"Claude 如何说",用技能控制"Claude 做什么",用 CLAUDE.md 提供"Claude 需要知道什么"。变更保存在 .claude/settings.local.json,也可直接编辑其他级别设置文件中的 outputStyle 字段。

5. 适用角色

初学者 / 学生: 使用 learning 风格,让 Claude 变成交互式编程导师——不仅帮你写代码,还要求你自己实践关键部分,加速学习。

经验开发者: 使用默认风格或创建极简自定义风格,获得简洁高效的输出,减少冗余解释。

技术 Lead / 导师: 使用 explanatory 风格或创建架构师风格,在代码审查和设计讨论时获得详细的决策背景和权衡分析。

非工程人员(产品、设计): 创建自定义输出风格关闭编码指令,让 Claude 专注于文档编写、数据分析或项目管理任务。


七、使用钩子自动化工作流(Hooks)

1. 是什么

钩子(Hooks)是在 Claude Code 生命周期特定节点执行的用户定义 shell 命令,提供确定性的行为控制——确保某些操作始终发生,而非依赖 LLM 的判断。钩子支持丰富的事件类型:SessionStart(会话开始/恢复/压缩后)、PreToolUse(工具执行前,可阻止)、PostToolUse(工具执行后)、Notification(通知时)、Stop(Claude 完成响应时)、ConfigChange(配置变更时)等。除了命令型钩子外,还有提示型(type: "prompt",使用 Claude 模型判断)和代理型(type: "agent",生成子代理验证条件)。

2. 怎么用

最快的方式是运行 /hooks 进入交互式菜单,选择事件、配置匹配器和命令。也可以直接在配置文件中编写:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write"
          }
        ]
      }
    ]
  }
}

钩子通过 stdin 接收 JSON 事件数据,通过退出码控制行为:0 = 继续,2 = 阻止(stderr 内容反馈给 Claude),其他 = 继续但记录。配置文件位置:~/.claude/settings.json(所有项目)、.claude/settings.json(单项目共享)、.claude/settings.local.json(单项目私有)。

3. 使用场景与痛点

钩子解决的核心痛点是手动重复操作和依赖 LLM 判断的不可靠性。典型场景包括:每次编辑后自动格式化(PostToolUse + Edit|Write 匹配器 + Prettier)、保护敏感文件不被修改(PreToolUse 检查文件路径拒绝 .env、package-lock.json)、桌面通知(Notification 事件触发 osascript/notify-send)、压缩后重新注入关键上下文(SessionStart + compact 匹配器)、审计配置变更(ConfigChange 事件记录到日志文件)。

4. 使用示例

入门示例——桌面通知:

macOS:

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "osascript -e 'display notification \"Claude Code needs your attention\" with title \"Claude Code\"'"
          }
        ]
      }
    ]
  }
}

保存到 ~/.claude/settings.json,之后每次 Claude 等待输入时都会收到系统通知。

进阶示例——保护敏感文件 + 自动格式化:

创建 .claude/hooks/protect-files.sh 脚本,从 stdin 读取 JSON,用 jq 提取 tool_input.file_path,检查是否匹配 .envpackage-lock.json.git/ 等受保护模式,匹配则 exit 2 阻止。同时配置 PostToolUse 钩子在每次 Edit/Write 后自动运行 Prettier。这样实现了"阻止 + 后处理"的双层自动化。

高级最佳实践——提示型和代理型钩子:

{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          {
            "type": "prompt",
            "prompt": "Check if all tasks are complete. If not, respond with {\"ok\": false, \"reason\": \"what remains\"}."
          }

Skill Seekers 全面指南:让 AI 真正"读懂"你的技术文档

从零基础入门到架构原理深度剖析——一份写给所有 AI 从业者的渐进式技术博客


写在最前面:这篇文章适合谁?

这篇文章按照由浅入深的结构组织,不同读者可以选择适合自己的起始章节。

如果你是对 AI 工具好奇的普通开发者,从第一章开始读,你将在 15 分钟内理解 Skill Seekers 是什么,并完成第一个实际操作。如果你是正在搭建 RAG 管线的 AI 工程师,可以直接跳到第四章和第五章,那里有针对 LangChain、LlamaIndex、向量数据库等场景的最佳实践。如果你是架构师或技术负责人,第六、七、八章从源码层面深入分析了项目的设计哲学、模块架构和工程体系。如果你是想参与开源贡献的开发者,第九章介绍了项目的工程规范与贡献流程。

开源项目地址:https://github.com/yusufkaraaslan/Skill_Seekers/tree/development


第一章:三分钟理解 Skill Seekers

1.1 一个故事开始

假设你是一名前端开发者,刚加入团队,团队技术栈基于 React。你希望让 Claude Code 成为你的"React 专家搭档"——不是那种只知道泛泛基础知识的通用 AI,而是真正了解 React 最新 API、Hooks 最佳实践、Server Components 细节的领域专家。

你面临一个尴尬的处境:React 官方文档有数百个页面,散布在 react.dev 网站上。你总不能一页一页复制粘贴到 Claude 的对话框里吧?即使你这么做了,Claude 的上下文窗口也装不下这么多内容。

Skill Seekers 做的事情,就是帮你把这几百页文档,在 15 分钟之内变成一个 Claude 能直接加载和使用的"技能包"。

打开终端,三条命令:

# 第 1 步:安装
pip install skill-seekers

# 第 2 步:一键抓取 React 文档并生成知识资产
skill-seekers create https://docs.react.dev/

# 第 3 步:打包为 Claude 能用的格式
skill-seekers package output/react --target claude

完成后你的 output/ 目录里会出现一个 react-claude.zip,上传到 Claude 就行了。从此 Claude 就是你的 React 领域专家。

但这只是冰山一角——同一份知识资产还可以导出为 Gemini、OpenAI、LangChain、Cursor 等十多个平台的格式,做一次就够了。

1.2 用一句话定义 Skill Seekers

Skill Seekers 是 AI 系统的"数据层"(Data Layer)——它将散落在文档网站、GitHub 仓库、PDF 文件中的非结构化技术知识,自动转化为各类 AI 系统可以直接消费的结构化知识资产。

你可以把它理解成一个"AI 的翻译官":一边读懂人类的文档,一边把知识翻译成 AI 能高效理解的格式。

1.3 它支持哪些输入和输出?

输入端,Skill Seekers 能从三种来源获取知识。第一种是文档网站——任意在线技术文档,如 React、Django、Godot 等官网文档。第二种是 GitHub 仓库——通过 owner/repo 格式指定,系统会分析代码结构、README、Issues 等。第三种是 PDF 文件——技术手册、API 文档、论文等。

输出端则覆盖了当前 AI 生态中几乎所有主流的消费方。包括 Claude AI(ZIP + YAML)、Google Gemini(tar.gz)、OpenAI / Custom GPT(ZIP)、LangChain Documents(JSON)、LlamaIndex TextNodes(JSON)、Haystack Documents、Pinecone / ChromaDB / FAISS / Qdrant 等向量数据库就绪格式,以及 Cursor / Windsurf / Cline / Continue.dev 等 IDE AI 助手的规则文件。

一次预处理,十六个目标平台,这是 Skill Seekers 最核心的价值主张。


第二章:手把手入门——从安装到创建第一个 Skill

这一章面向完全没有用过 Skill Seekers 的读者,按照实际操作步骤逐一展开。

2.1 环境准备

你需要准备的东西非常少:Python 3.10 或更高版本,Git,以及一台能联网的电脑(macOS、Linux 或 Windows 均可)。

检查 Python 版本:

python3 --version
# 看到 Python 3.10.x 或更高即可

检查 Git:

git --version
# 看到 git version 2.x.x 即可

如果 Python 未安装,macOS 用户可以用 brew install python3,Ubuntu/Debian 用户用 sudo apt install python3 python3-pip,Windows 用户从 python.org 下载安装器(注意勾选"Add Python to PATH")。

2.2 安装 Skill Seekers

最简单的安装方式只需一行命令:

pip install skill-seekers

这会安装核心功能:文档抓取、GitHub 分析、PDF 处理和所有平台的打包能力。如果你需要额外能力,可以按需安装可选组件:

# 如果你需要 Google Gemini 支持
pip install skill-seekers[gemini]

# 如果你需要 OpenAI 支持
pip install skill-seekers[openai]

# 如果你需要 MCP 服务器(与 Claude Code 集成)
pip install skill-seekers[mcp]

# 全部安装
pip install skill-seekers[all]

安装完成后,验证一下:

skill-seekers --help

看到帮助信息就说明安装成功了。

2.3 你的第一个 Skill:5 分钟搞定

我们用一个小型示例开始,避免第一次就等待太长时间。来抓取 Tailwind CSS 的文档,限制为 5 个页面:

skill-seekers scrape \
  --name tailwind-test \
  --url https://tailwindcss.com/docs/installation \
  --description "Tailwind CSS quick reference" \
  --max-pages 5

大约 30 秒后,你会看到类似这样的输出:

Scraping: https://tailwindcss.com/docs/installation
Page 1/5: Installation
Page 2/5: Editor Setup
...
 Skill created at: output/tailwind-test/

看看生成了什么:

ls output/tailwind-test/
# SKILL.md  references/  scripts/  assets/

其中 SKILL.md 是核心知识文件,references/ 目录下是按主题分类的参考文档。

2.4 打包与上传

# 打包为 Claude 格式
skill-seekers package output/tailwind-test/
# ✅ Created: output/tailwind-test.zip

# 或者打包为其他平台格式
skill-seekers package output/tailwind-test/ --target gemini
skill-seekers package output/tailwind-test/ --target langchain

如果你配置了 Anthropic API Key,还可以一步到位自动上传:

export ANTHROPIC_API_KEY=sk-ant-...
skill-seekers package output/tailwind-test/ --upload

没有 API Key 也没关系——拿着生成的 .zip 文件去 claude.ai 的 Skills 页面手动上传即可。

2.5 使用预设配置:更省心的方式

Skill Seekers 内置了 24+ 个框架的预设配置,覆盖了 React、Vue、Angular、Django、FastAPI、Godot 等主流框架。用预设配置更加省心:

# 查看所有可用预设
skill-seekers list-configs

# 直接用预设抓取
skill-seekers scrape --config configs/godot.json

你也可以用交互式模式,系统会引导你一步步完成配置:

skill-seekers scrape --interactive

2.6 create 命令:最智能的入口

skill-seekers create 是项目提供的最便捷命令——它会自动识别你给的是什么来源,并选择对应的处理方式:

# 给一个 URL,自动走文档抓取
skill-seekers create https://docs.django.com/

# 给一个 owner/repo,自动走 GitHub 分析
skill-seekers create facebook/react

# 给一个本地路径,自动分析本地项目
skill-seekers create ./my-project

# 给一个 PDF 文件,自动走 PDF 提取
skill-seekers create manual.pdf

这种"零配置"体验大幅降低了上手门槛——你不需要记住不同的子命令,一个 create 就够了。


第三章:Skill Seekers 解决了什么问题?谁需要它?

理解了基本用法之后,我们退后一步,从更宏观的视角审视这个工具为什么存在。

3.1 AI 时代的"知识注入"难题

大语言模型的能力已经毋庸置疑,但模型本身有一个固有限制:训练数据的时效性。无论是 Claude、GPT-4 还是 Gemini,它们的知识都有一个截止日期。对于快速迭代的技术框架来说,官方文档可能每周都在更新,而模型的训练数据可能已经是半年前的了。

解决这个问题的主流方案有两种。第一种是 AI Skills / Knowledge:将结构化知识直接注入 AI 的上下文(如 Claude Skills、Custom GPTs),让 AI 在回答时能参考这些外挂知识。第二种是 RAG(检索增强生成):将知识向量化存储在数据库中,用户提问时检索最相关的文档片段,拼入上下文后让模型回答。

无论哪种方案,数据预处理都是第一步,也是最脏最累的一步。你需要从各种来源抓取内容、清洗 HTML、提取代码块、识别语言、分类组织、生成元数据……而且每换一个目标平台,格式要求就不一样。

Skill Seekers 将这整个预处理流程自动化了,并且做到了"一次处理、多目标导出"。

3.2 四类核心用户群体

经过对项目功能和文档的深入分析,Skill Seekers 的用户群体可以清晰地分为四类。

第一类:AI Skill 构建者。 这是使用 Claude Skills、Gemini Extensions、Custom GPTs 的开发者或技术写作者。他们的核心诉求是把特定领域的知识"教"给 AI,让 AI 成为该领域的专家助手。痛点在于手动整理文档耗时巨大,且不同 AI 平台要求的格式各异。

第二类:RAG 工程师。 这些是搭建企业级知识问答系统、智能客服、文档检索等 RAG 应用的工程师。他们的核心诉求是获得高质量、带元数据、分块合理的文档数据。痛点在于数据预处理流程繁琐,分块策略难以兼顾精度和上下文。

第三类:AI 编程助手用户。 这些是使用 Cursor、Windsurf、Cline 等 AI 辅助编程工具的开发者。他们的核心诉求是让 IDE 中的 AI 助手深度理解特定框架的最新用法。痛点在于 AI 助手的通用知识不够深入,需要手动维护上下文规则文件。

第四类:技术团队和企业。 这些团队需要将内部文档、私有 API 文档、跨项目知识等统一管理,构建团队级别的 AI 知识资产。痛点在于知识散落在多个系统中,且缺乏统一的预处理和分发管道。

3.3 适用场景全景

根据用户群体,Skill Seekers 的典型使用场景包括以下几类:

框架学习加速: 新入职开发者快速将团队使用的技术栈文档转化为 AI Skill,让 AI 成为"老员工"一样的带教导师。

文档智能检索: 将公司内部文档库转化为 RAG 数据集,搭建内部知识问答系统。

代码助手增强: 为 Cursor/Windsurf 生成精确的框架规则文件,让代码建议更准确。

文档质量审计: 利用冲突检测功能,发现文档与实际代码实现之间的不一致之处。

多源知识融合: 将文档网站 + GitHub 代码 + PDF 手册合并为一个统一的知识资产,消除信息孤岛。


第四章:面向不同用户的最佳实践与示例

这一章按用户群体分别给出详细的最佳实践方案和操作示例。

4.1 AI Skill 构建者的最佳实践

场景:为 Claude 创建一个 Django 专家技能

这是最基础也最常见的使用场景。完整工作流如下:

# 步骤 1:从文档创建知识资产
skill-seekers create https://docs.djangoproject.com/

# 步骤 2:AI 增强——将基础文档升级为专家级技能文件
skill-seekers enhance output/django/ --mode local
# 如果有 API Key,也可以用 API 模式:
# skill-seekers enhance output/django/ --mode api

# 步骤 3:打包并上传
skill-seekers package output/django/ --upload

增强步骤是关键——不经过增强的 SKILL.md 只是文档的简单组织,增强之后的 SKILL.md 会包含 500+ 行的内容,涵盖代码示例、最佳实践模式、快速参考指南和错误排查建议。

进阶:使用工作流预设做专项增强

如果你的 Django 项目对安全性有特殊要求,可以叠加安全增强工作流:

skill-seekers create https://docs.djangoproject.com/ \
  --enhance-workflow security-focus \
  --enhance-workflow api-documentation

这条命令会先执行安全聚焦的增强(审查 OWASP Top 10、认证授权模式等),然后再执行 API 文档增强。两个工作流链式执行,后续工作流会引用前序工作流的分析结果。

项目内置了 64 个工作流预设,覆盖了从 defaultminimalkubernetes-deploymentgraphql-schemacompliance-gdprmlops-pipeline 等极为广泛的领域。你还可以创建自定义预设放到 ~/.config/skill-seekers/workflows/ 目录下。

进阶:多平台批量导出

一次处理,导出到所有平台:

# 批量导出到 Claude、Gemini、OpenAI、Markdown 四个平台
for platform in claude gemini openai markdown; do
  skill-seekers package output/django --target $platform
done

4.2 RAG 工程师的最佳实践

场景:搭建一个基于 LangChain 的框架文档问答系统

RAG 工程师最关心的是数据质量——分块是否合理、元数据是否丰富、代码块是否保持完整。

# 步骤 1:抓取文档
skill-seekers create https://docs.react.dev/

# 步骤 2:导出为 LangChain Documents 格式
skill-seekers package output/react --target langchain
# 生成:output/react-langchain.json

导出的 JSON 文件中,每个 Document 都包含 page_content(文档内容)和 metadata(元数据,包括来源 URL、分类、内容类型等)。你可以直接将其加载到 LangChain 的检索链中。

项目的 examples/langchain-rag-pipeline/ 目录提供了完整的端到端示例。类似地,examples/llama-index-query-engine/ 提供了 LlamaIndex 的集成示例,examples/pinecone-upsert/ 提供了 Pinecone 向量数据库的写入示例。

进阶:使用 Docker Compose 搭建完整 RAG 基础设施

Skill Seekers 的 docker-compose.yml 已经预置了一个完整的 RAG 基础设施:

# 一键启动:CLI 工具 + MCP 服务器 + Weaviate + Qdrant + ChromaDB
docker-compose up -d

这会启动五个容器化服务。skill-seekers 容器是主 CLI 工具。mcp-server 在 8765 端口提供 MCP HTTP 服务。weaviate 在 8080 端口提供 Weaviate 向量数据库。qdrant 在 6333/6334 端口提供 Qdrant 向量数据库。chroma 在 8000 端口提供 ChromaDB。

所有服务通过内部 bridge 网络互联,向量数据库配置了持久化卷。你可以把文档抓取、增强、向量化入库的全流程在容器环境中完成。

进阶:处理超大型文档(10K-40K+ 页面)

对于 Godot、Unity 这类超大型文档,直接抓取会产生巨大的单一文件。Skill Seekers 提供了文档拆分和路由机制:

# 先评估文档规模
skill-seekers estimate --config configs/godot.json
# 📊 Estimated pages: 40,000
# ⚠️ Large documentation detected!

# 使用 router 策略拆分
skill-seekers split --config configs/godot.json --strategy router --target-pages 5000
# 会生成多个子配置:godot-scripting.json, godot-2d.json, godot-3d.json 等

# 并行抓取所有子技能
# (每个子技能独立抓取,可以并行执行)

# 最后生成路由器技能
skill-seekers generate-router --config-pattern "configs/godot-*.json"

路由器技能的 SKILL.md 包含智能路由逻辑——当用户提问时,路由器会根据关键词将问题导向合适的子技能。比如问到"physics"就路由到 godot-physics,问到"shader"就路由到 godot-shaders。

4.3 AI 编程助手用户的最佳实践

场景:让 Cursor IDE 的 AI 深度理解 React

Cursor、Windsurf 等 IDE 的 AI 助手支持加载上下文规则文件,让 AI 在生成代码时参考特定框架的最佳实践。

# 创建 React 技能
skill-seekers create https://docs.react.dev/

# 打包为 Claude 格式(Cursor 使用相同格式)
skill-seekers package output/react --target claude

# 复制到你的项目中
cp output/react-claude/SKILL.md my-react-project/.cursorrules

对于 Windsurf:

cp output/react-claude/SKILL.md my-project/.windsurf/rules/react.md

对于 Cline(VS Code 扩展):

cp output/react-claude/SKILL.md my-project/.clinerules

项目的 examples/ 目录提供了多个真实示例:cursor-react-skill/ 展示了 Cursor + React 的集成方式,windsurf-fastapi-context/ 展示了 Windsurf + FastAPI 的场景,cline-django-assistant/ 展示了 Cline + Django 的用法。

进阶:使用 install-agent 命令一键安装到所有 IDE

# 一键安装到 Cursor
skill-seekers install-agent output/react/ --agent cursor

# 或者安装到所有支持的 AI 编程助手
skill-seekers install-agent output/react/ --agent all

# 预览安装效果但不实际执行
skill-seekers install-agent output/react/ --agent cursor --dry-run

这条命令会自动将 Skill 文件复制到对应 IDE 的配置目录。支持的 Agent 包括 Claude Code(~/.claude/skills/)、Cursor(.cursor/skills/)、VS Code / Copilot(.github/skills/)、Amp(~/.amp/skills/)、Goose、OpenCode、Windsurf 等。

4.4 团队协作者的最佳实践

场景:在 5 人团队中共享内部 API 文档的 AI 技能

Skill Seekers 支持从私有 Git 仓库获取配置文件,实现团队级别的技能共享:

# 注册团队的私有配置仓库
# (通过 MCP 工具,在 Claude Code 中以自然语言操作更为便利)
skill-seekers config --add-source \
  --name team \
  --git-url https://github.com/mycompany/skill-configs.git

# 从团队仓库获取配置
skill-seekers config --fetch --source team --config internal-api

# 正常使用
skill-seekers scrape --config internal-api.json

支持 GitHub、GitLab、Gitea、Bitbucket 四种 Git 托管平台,通过对应的环境变量(GITHUB_TOKENGITLAB_TOKEN 等)进行认证。

场景:多源知识融合——将文档 + 代码 + PDF 合并为单一知识资产

这是企业场景中最有价值的能力之一。以 Godot 引擎为例,其预设配置展示了如何融合文档和代码两个来源:

配置中定义了 merge_mode: "claude-enhanced",然后在 sources 数组中分别配置了两个来源。第一个来源类型为 documentation,指向 Godot 官方文档网站,配置了 CSS 选择器、URL 过滤规则和内容分类。第二个来源类型为 github,指向 godotengine/godot 仓库,启用了深度代码分析、Issue 获取、Changelog 和 Release 信息抓取,以及特定的文件匹配模式(core/**/*.hscene/**/*.cpp 等)。

运行统一抓取后,系统会自动执行冲突检测——发现文档中描述但代码中不存在的 API,或者代码中实现但文档中未记录的功能,并在最终输出中以醒目标注呈现。


第五章:核心功能全景透视

在理解了"谁在用"和"怎么用"之后,让我们系统性地审视 Skill Seekers 的功能全景。

5.1 llms.txt 优先检测:10 倍速度提升的秘密

llms.txt 是一个新兴的约定标准——越来越多的技术文档网站开始提供专门为 LLM 消费优化的纯文本文件。Skill Seekers 在正式爬取之前,会依次检查目标域名下是否存在 llms-full.txtllms.txtllms-small.txt

如果检测到这些文件,系统直接下载解析即可——完全跳过了逐页爬取、HTML 解析、内容提取等耗时步骤。这在实际效果上意味着:原本需要 15 分钟的抓取任务,可能 1-2 分钟就完成了。

这个功能由三个模块协同实现:llms_txt_detector.py 负责探测文件是否存在,llms_txt_downloader.py 负责高效下载,llms_txt_parser.py 负责解析内容结构。

5.2 异步模式:2-3 倍的爬取加速

对于不支持 llms.txt 的网站,Skill Seekers 提供了基于 httpx 异步引擎的加速模式:

skill-seekers scrape --config configs/react.json --async --workers 8

--async 标志启用异步爬取(底层使用 httpx 的 async/await),--workers 指定并发工作者数量。在实际测试中,同步模式需要 15-45 分钟的任务,异步模式只需 5-15 分钟。

5.3 AI 增强工作流:从 75 行到 500+ 行的质变

基础的文档抓取只能生成结构化的参考文件。AI 增强步骤是将"数据"转化为"知识"的关键。

增强过程由 LLM 驱动——系统将抓取到的文档内容作为上下文,让 LLM 分析后生成一份综合性的 SKILL.md 文件。这份文件不是简单的摘要或合并,而是包含了以下几个维度的内容:核心概念和设计理念的阐述、带注释的代码示例和最佳实践、常见错误和解决方案、快速参考索引、以及从基础到进阶的导航建议。

系统支持三个 LLM 平台执行增强——Claude Sonnet 4(通过 Anthropic API 或 LOCAL 模式)、Gemini 2.0 Flash(通过 Google API)、GPT-4o(通过 OpenAI API)。LOCAL 模式的独特之处在于它利用 Claude Code Max 的本地执行能力,无需 API Key 也无需额外费用。

此外,通过 ANTHROPIC_BASE_URL 环境变量,中国大陆用户可以配置 GLM-4.7 等兼容 Claude 协议的国产 API 端点来完成增强。

5.4 冲突检测:文档与代码的一致性审计

当同时从文档和代码两个来源获取信息时,Skill Seekers 的冲突检测引擎会自动识别四类不一致。

红色:Missing in code(高优先级)。 文档中描述了某个 API 或功能,但在代码中找不到对应实现。这通常意味着文档描述了尚未实现的特性,或者该功能已被移除但文档未更新。

黄色:Missing in docs(中优先级)。 代码中实现了某个功能,但文档中完全没有提及。这是最常见的文档欠缺类型。

橙色:Signature mismatch(警告级别)。 同一个函数在文档和代码中有不同的参数列表、类型定义或返回值。

灰色:Description mismatch(信息级别)。 文档描述与代码注释对同一功能给出了不同的解释文字。

这个能力不仅提升了生成技能的可靠性,本身也是一个独立的文档质量审计工具。

5.5 MCP 集成:用自然语言驱动整个工作流

MCP(Model Context Protocol)是 Anthropic 推出的协议标准,用于让 AI 助手与外部工具交互。Skill Seekers 的 MCP 服务器暴露了 26 个工具,分为四类。

核心工具(9 个):list_configs, generate_config, validate_config, estimate_pages, scrape_docs, package_skill, upload_skill, enhance_skill, install_skill。

扩展工具(10 个):scrape_github, scrape_pdf, unified_scrape, merge_sources, detect_conflicts, add_config_source, fetch_config, list_config_sources, remove_config_source, split_config。

向量数据库工具(4 个):export_to_chroma, export_to_weaviate, export_to_faiss, export_to_qdrant。

云存储工具(3 个):cloud_upload, cloud_download, cloud_list。

配置好 MCP 后,你可以在 Claude Code 中直接用自然语言完成一切:

用户:帮我抓取 Svelte 文档并打包为 Claude Skill
Claude Code[调用 generate_config][调用 scrape_docs][调用 enhance_skill][调用 package_skill]
✅ 已创建 output/svelte.zip,可以上传到 Claude

MCP 服务器支持两种传输模式——stdio 模式(用于 Claude Code、VS Code + Cline 的本地集成)和 HTTP 模式(用于 Cursor、Windsurf、IntelliJ 的网络集成,默认端口 8765)。

5.6 断点续传:永不丢失进度

考虑到大型文档的抓取可能需要数十分钟甚至数小时,Skill Seekers 实现了作业恢复机制。系统以可配置的间隔(默认 60 秒)自动保存进度。如果中途意外中断,可以查看并恢复:

# 查看所有可恢复的作业
skill-seekers resume --list

# 从中断处继续
skill-seekers resume github_react_20260117_143022

旧作业会在 7 天后自动清理,不会无限占用磁盘。


第六章:架构原理深度剖析

从这一章开始,我们深入到项目的内部设计中。

6.1 项目代码结构解析

Skill Seekers v3.1.3 的 development 分支采用 src 布局(即源码位于 src/skill_seekers/ 而非项目根目录),这是 Python 社区推荐的现代项目结构,通过 pyproject.toml[tool.setuptools] package-dir = {"" = "src"} 配置实现。

核心源码分为六个子包。cli/ 是最庞大的模块,包含约 75 个 Python 文件和 5 个子目录(adaptors、arguments、parsers、presets、storage),承载了几乎所有的业务逻辑——从爬虫到分析到增强到打包。mcp/ 实现 MCP 协议服务器,将 CLI 能力暴露为 26 个可通过自然语言调用的工具。embedding/ 包含嵌入向量相关的模型(models.py)、生成器(generator.py)、缓存(cache.py)和服务器(server.py)四个模块。workflows/ 存放 64 个 YAML 格式的增强工作流预设。sync/ 处理同步监控逻辑,基于 schedule 库实现定时更新。benchmark/ 提供性能基准测试工具。

6.2 五阶段数据处理管线

Skill Seekers 的数据流遵循一条清晰的五阶段管线:Ingest → Analyze → Structure → Enhance → Export

Ingest(摄取)阶段: 这是整个管线的入口,由三个专用爬取器负责。doc_scraper.py 处理文档网站,内部通过 llms_txt_detector.py 优先检测 llms.txt 快速通道,未命中时退回到基于 BeautifulSoup4 的 HTML 解析模式,markdown_cleaner.py 负责将 HTML 转化为干净的 Markdown。github_scraper.py 处理 GitHub 仓库,采用三流架构(Code / Docs / Insights),其中 Code 流使用 unified_codebase_analyzer.py 进行 AST 级别的深度代码分析,Docs 流提取 README 和文档文件,Insights 流通过 PyGithub 调用 GitHub API 获取 Issues、Labels、Stars 等社区数据。pdf_scraper.py 处理 PDF 文件,底层基于 PyMuPDF 引擎,叠加了三种互补的代码检测方法(字体特征、缩进模式、模式匹配)和支持 19+ 种语言的识别能力。

Analyze(分析)阶段: 这一阶段对原始内容进行深度语义分析。code_analyzer.py 执行 AST 解析(支持 Python、JavaScript、TypeScript、Java、C++、Go),提取函数签名、类结构、方法参数和类型信息。architectural_pattern_detector.py 识别工厂模式、单例模式、观察者模式等设计模式。dependency_analyzer.py 基于 networkx 构建依赖关系图谱。conflict_detector.py 执行前文描述的四级冲突检测。signal_flow_analyzer.py 分析代码中的信号和事件流。config_extractor.py

4900 万人围观的 Claude Cowork 又杀疯了,10 个顶级外挂上线,这些打工人危

「software armageddon(软件末日)」——这是外媒描述过去几个月软件板块遭遇时用的词。Anthropic 每推出一个新工具,市场就会条件反射式地先问一遍:又有哪些软件要被干掉?然后果断抛售手里的股票。

短短几周,成千上万亿美元的市值凭空消失。

就在昨晚,Anthropic 再度发布企业级产品更新。当所有市场都在等着看又要杀入哪个赛道,结果,Salesforce 涨了 4%,Thomson Reuters 涨了 11%,Figma 涨了 10%,Docusign 和 LegalZoom 均上涨超过 2%。

软件股的噩梦,这次没有如期而至。而市场情绪在一夜之间发生了 180 度转向,这件事本身就值得好好说说。

10 个插件模板,每一个都在盯着人类的工位

先说功能本身。

这次发布的核心逻辑,是把 Claude 变成可以深入企业不同部门的专业智能体,同时允许管理员创建私有插件市场,在组织内部统一分发和管理这些工具。

连接器层面的新增覆盖了大多数主流企业应用:Google Workspace(含 Calendar、Drive、Gmail)、Docusign、Slack、LegalZoom、FactSet、Harvey、Apollo、Clay 等等。

管理员可以基于入门模板快速创建插件,也可从零构建。Claude 会在设置过程中通过提问引导定制,所有内容统一收纳在新的「Customize(自定义)」菜单下,方便集中查看与管理。

斜杠命令现在以结构化表单的形式启动,执行「生成报告」或「创建仪表板」这类工作流时,操作直观得像填一份简单问卷。管理员还可按用户分配插件、设置自动安装,并通过 OpenTelemetry 追踪团队使用成本与工具调用行为。

10 个 插件模板的扩充,则是此次发布的重中之重,每个模板都与相关领域从业者联合设计,覆盖了真实职场中的具体工作场景。

  • HR 插件覆盖员工全生命周期管理,包括起草录用通知、制定入职计划、撰写绩效评估和薪酬分析。
  • 设计插件可生成评审框架、撰写 UX 文案、执行无障碍审查并制定用户研究计划。
  • 工程插件用于撰写总结、事故响应协调和部署清单制定。
  • 运营插件则覆盖流程文档编写、供应商评估和操作手册创建。
  • 金融领域的插件直接瞄准专业服务行业的核心工作流。
  • 财务分析插件支持市场竞争研究与财务建模;
  • 投资银行插件可审阅交易文件、构建可比公司分析并准备推介材料。
  • 股票研究插件能解析财报电话会议记录并根据新指引更新财务模型;
  • 私募股权插件支持大批量文件审阅与情景建模,并对投资机会自动打分。
  • 财富管理插件则帮助顾问识别组合偏离与税务风险,大规模生成再平衡建议。

在跨应用协作层面,Claude 现在可以在 Excel 与 PowerPoint 之间端到端完成多步骤任务。它能先在 Excel 中完成数据分析,再自动生成 PowerPoint 演示文稿,目前以研究预览形式向 Mac 和 Windows 平台所有付费用户开放。

这次更新也是 Anthropic 在智能体领域加速布局的缩影。

上个月 Cowork 刚首次亮相,本月早些时候 Anthropic 还发布了 Claude Opus 4.6 和 Sonnet 4.6。目前 Cowork 仍处于研究预览阶段,向付费的 Pro、Max、Team 和 Enterprise 用户开放。所有的弹药都在指向同一个目标:接管工作。

为什么 Anthropic 点名的合作伙伴,股价都涨了

既然 Claude 已经能代替人类干这么多活了,为什么软件公司的股票反而涨了?要理解这次反弹,得先还原过去几个月那轮恐慌是怎么来的。

投资者的担忧并非无中生有。今年 1 月底 Cowork 开放插件支持后,市场立刻作出了最坏打算——毕竟当 AI 把法律文件审阅、合规追踪、财务建模这些原本按席位高价收费的功能包,压缩成随装即用的工作流组件,传统软件的护城河将遭受最严厉的质疑。

最近,OpenAI 还在投资者会议上宣称,其 AI 智能体将有能力取代 Salesforce、Workday、Adobe 和 Atlassian 的软件,并算了一笔账:

普通员工使用 ChatGPT 平均每天节省约 50 分钟,相当于每人每天约 50 美元,而企业版 ChatGPT 起价仅为每人每月 25 美元。言下之意,OpenAI 认为自己目前只拿走了所创造价值的一小部分。

这种表态,基本等于公开宣战。

对比之下,Anthropic 这次发布会,选择了截然不同的姿态。它没有再强调「取代」,而是大力宣传与现有 SaaS 厂商的深度集成与联合开发,与 Thomson Reuters 共建法律智能体,与 Salesforce、Slack、FactSet 深度打通,与 PwC 联合将企业级智能体引入 CFO 办公室。

被点名合作的伙伴股价应声上涨,也是正是因为市场开始理解:Cowork 这次的定位是替代完成工作的「员工」,而非替代员工使用的「软件」,新工具仍然需要调用 Salesforce、Docusign 等系统,企业依然要持续为这些软件付费。

这个区分很重要,但它并不能消解所有担忧,只是让市场暂时喘了口气。

真正的分水岭,在于理解这个行业里存在两类截然不同的公司。一类是掌握企业核心交易记录与客户关系,迁移成本极高,AI Agent 要运作反而必须依赖它们;另一类提供的是人与系统之间的中间体验,而这恰恰是最容易被 Agent 穿透的地带。

不是裁员,是再也不需要招那么多新人了

如果说软件公司还能争取到一段缓冲期,打工人面对的压力则是实实在在的。

以 Anthropic 新增的金融系插件为例,其覆盖了从财务建模到推介材料生成、从财报解读到投资打分的全链条流程。这些工作恰恰是大量初级分析师赖以入行的基础任务内容。

Anthropic 在今年 1 月发布的经济影响指数报告给出了更具体的数字支撑。报告通过分析 100 万条真实对话,估算了 Claude 在不同职业中能够有效承接的工作比例。

结论并不是简单的「覆盖了多少任务」,而是引入了一个更严格的指标——「有效 AI 覆盖率」:在 Claude 能完成的任务里,究竟有多少是这个职位最核心、最耗时的工作?

数据录入员和数据库架构师在这个维度上排名靠前。前者虽然只有两项核心任务落在 Claude 的能力范围内,但其中一项恰好是他们花时间最多的工作——从源文档读取并录入数据。

金融分析师的情况与此类似。基于岗位任务结构与已公开工具能力的匹配来看,投行初级分析师的日常任务存在被自动化的风险。

当然,这不代表这些岗位会消失,但它意味着同样一个团队能完成的工作量将大幅提升,也就是说,企业未来需要雇用的初级人手会更少。

问题是,当 AI 接手这些基础执行工作,短期内利润率确实好看,但代价是新人少了练手的机会,等到五到十年后,市场极度缺乏能够审查 AI 复杂输出、承担最终决策责任的高级人才时,这个代价就会以一种所有人都措手不及的方式显现出来。

与此同时,APPSO 之前也报道过,「影子 AI」现象正在企业内部蔓延,指的是员工未经 IT 部门批准或监督,擅自使用AI 工具或应用程序,导致 IT 支出失控,安全合规隐患持续叠加。

SaaS 管理平台 Zylo 的数据显示,大型跨国企业与 AI 相关的支出同比跃升 400%,而原有基础软件投资并未缩减。AI 正在成为企业账本上最昂贵且最难追踪的「隐形员工」。

从中长期来看,纯粹押注 AI 颠覆一切的逻辑,和积极拥抱 AI 同时牢牢握住核心数据护城河的行业巨头,是两种截然不同的命运路径。前者的叙事更性感,后者的胜算或许更大。

Anthropic 今天向外展示的「合作」姿态,听起来温和,甚至有点示好。市场也在一夜之间被安抚了,但没人真正回答那个根本问题:AI 冲击职场的终点,到底是人和 AI 一起干活,还是 AI 干活、人来担责,还是连这最后一道门槛也终将消失?

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

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


Anthropic「蒸馏」了人类最大的知识库

2024 年初,在美国某处的一座仓库里,工人们正在做一件看起来有些奇怪的事:把书一本本送进机器,切掉书脊,扫描,然后把剩下的纸送去回收。

这些书是刚买来的,有些甚至是新的。没有人会读它们,它们存在的唯一目的,就是被销毁。

下令做这件事的,是一家叫 Anthropic 的 AI 公司。

在他们的内部文件里,这项计划有个代号:「巴拿马项目」。一份规划文件写得很直白:「这是我们以破坏性方式扫描全球所有书籍的计划,我们不希望外界知道我们正在做这件事。」

这件事最终还是被人知道了。

去年,一名联邦法官解封了一批与版权诉讼相关的文件,总计超过 4000 页。外界由此看到的,不只是一家公司的秘密,而是整个 AI 行业在数据争夺战中的真实面目。

被大模型「吃」掉的实体书

为什么这些处于技术前沿的科技巨头,会用如此原始甚至粗暴的方式对待纸质书?答案其实藏在 AI 对高质量数据的极度渴求里。

Anthropic 内部很早就意识到,训练 AI 模型光靠网络上的内容不够用。

根据《华盛顿邮报》报道,一位Anthropic 联合创始人在 2023 年 1 月的文件中写道,用书籍训练模型,可以让 AI 学会「如何写得更好」,而不是只会模仿质量参差不齐的网络语言。

书籍经过严格编辑和校对,内容结构清晰,是网络文本难以替代的高质量语料。

这个逻辑本身并不难理解,但问题是,既然承认书籍有价值,为什么不付钱?究其原因,挨个找出版社和作者谈授权,费时费力,成本也高。于是 Anthropic 启动了「巴拿马项目」。一句「不希望外界知道」,说明它也清楚这件事站不住脚。

甚至「巴拿马项目」还没启动的时候,Anthropic 已经尝试通过另一种方式获取书籍。

法院文件显示,公司联合创始人 Ben Mann 曾在 2021 年 6 月的 11 天里,从一个叫 LibGen 的网站下载了大量小说和非小说类书籍。LibGen 是个「影子图书馆」,上面的资源大多涉嫌侵权,文件中附带的浏览器截图显示,他使用文件共享软件完成了这些下载。

一年后,另一个网站 Pirate Library Mirror 于 2022 年 7 月上线,该网站公开宣称「在大多数国家故意违反版权法」。Mann 把这个网站的链接发给了其他 Anthropic 员工,并留言写道:「来得正是时候!!!」

这句感叹号背后,是一位公司高管对一个公开承认违法的盗版网站表达的真实态度。

Anthropic 事后表示,公司从未用这些数据训练过正式发布的商业模型。但这种解释多少有些勉强,下载了,存着,只是「没有用在正式模型上」,这条线究竟划在哪里,恐怕连 Anthropic 自己也说不清楚。

为了「巴拿马项目」,Anthropic 还专门聘请了 Tom Turvey 来主持这项工作。Turvey 曾参与创建谷歌图书项目,那个项目同样因大规模扫描书籍引发了长达多年的版权争议。Anthropic 选择这个人来主导这件事,很难说是一种巧合。

最终,Anthropic 主要依赖两家书商批量供货:

美国二手书零售商 Better World Books,以及总部位于英国的 World of Books,每次采购动辄数万册。内部文件还显示,员工曾讨论接洽纽约公共图书馆,甚至提到可以找某家长期资金不足的新图书馆。

采购完之后,整个扫描过程,就像一条工业流水线。

供应商用液压切割机把书脊整齐切掉,散开的书页随即被送进高速工业扫描仪,扫完之后,剩下的纸张交给回收公司处理。一家参与报价的扫描服务商在提案中写道,Anthropic 希望在六个月内完成 50 万到 200 万册书的数字化工作。

Anthropic 副总法律顾问 Aparna Sridhar 回应称,法院已裁定 AI 训练「本质上具有转化性」,Anthropic 选择和解的问题在于「部分材料的获取方式,而不是我们是否可以使用这些材料」。

这套说辞在法律上也许站得住脚,但它同时也揭示了一件事:这家公司从未认为自己做错了什么,只是某些手段不够干净。

拿你的书训练,再抢你的饭碗

同样的事情,也在其他公司身上发生着,而且有些细节更为戏剧性。

针对 Meta 的诉讼文件显示,有员工在 2023 年直接写道:「用公司笔记本进行种子下载感觉不太对劲。」他后来还专门向法务团队反映,称使用种子网站可能意味着向他人分发盗版作品,「这在法律上可能行不通。」

但这些顾虑最终没有改变任何事情。

2023 年 12 月的一封内部邮件显示,使用 LibGen 已在「上报至 MZ」之后获批,MZ 指的是 CEO 马克·扎克伯格。邮件还坦率地写明了他们自己都清楚的风险:「如果媒体报道暗示我们使用了已知为盗版的数据集,这可能会削弱我们在监管问题上的谈判立场。」

换句话说,他们不是不知道这样做不对,只是在权衡被抓包的代价。为了降低这个风险,员工们特意租用亚马逊的服务器来做种子下载,而不是用 Meta 自己的服务器,原因是避免被追踪到 Meta 公司。

OpenAI 和微软同样面临图书作者的版权指控。OpenAI 甚至承认曾下载过 LibGen,但称在 ChatGPT 发布前已删除相关文件。

而 AI 公司与创作者之间的版权冲突,并非从 Anthropic 才开始。

早在 2000 年代初,Google 就曾大规模扫描图书馆馆藏,同样引发了长达十年的诉讼。最终法院认定Google 的做法属于「合理使用」,因为它只提供片段摘要,目的是引导读者找到书,而不是取代书本身。

这个判决在当时看来合情合理,却在二十年后为整个 AI 行业提供了一块挡箭牌。

Google 图书是个索引工具,而生成式 AI 直接消化书籍内容,然后输出文字,在某些情况下与作者产生直接竞争。性质变了,但援引的法律逻辑还是同一套,这本身就值得思考。

去年 6 月,联邦法官 William Alsup 裁定,Anthropic 用书籍训练 AI 属于合法行为,他将这个过程比作教师「训练学生写好文章」。这个比喻听起来温和,但现实中的老师不会同时训练几百万个学生,也不会靠这些学生赚几十亿美元。

最终,Anthropic 选择支付 15 亿美元和解金,在 AI 版权诉讼史上创下纪录,但细看之下,账算得并不亏。按照美国版权法,每件作品的法定赔偿上限可达 15 万美元,而此次和解折算下来,每本书约赔 3000 美元,仅为上限的 2%。

赔偿金由作者和出版商平分,只是,这一安排在创作者群体内部引发了争议。

不少作者认为,出版商在保护作品不被 AI 滥用这件事上没有尽力,却拿走了一半赔偿。更关键的是,和解协议并不要求 Anthropic 承认任何违法行为,法院对「AI 训练属于合理使用」的认定照样有效。

换句话说,Anthropic 用 15 亿美元买到的,不只是和解,还有一份背书:我们可以继续这么做。有分析人士指出,随着这个先例确立,版权侵权对 AI 公司来说已经不再是一条红线,而是一笔可以提前计入成本的「过路费」。

对许多写书的人来说,这件事意味着的远不止一张支票。美国作家的年收入中位数约为 2 万美元,而市值数千亿的 AI 公司在未获授权的情况下大量使用他们的作品,事后折算的赔偿标准远低于法律上限。

更让人忧虑的是,AI 正在批量生成文字内容,这些低成本的文本涌入市场,让原本就艰难的写作谋生变得更难。训练 AI 用的是人写的书,而 AI 产出的内容,正在挤压人继续写书的空间,循环往复。

支持者自有另一套逻辑:AI 并不储存书里的内容,而是从中提取语言规律,这更像是一个人博览群书之后形成自己的表达。这个类比并非毫无道理,但却省略了一个关键差异:

人读了一本书,不会同时读一百万本;而 AI 在几个月内消化了人类几十年的写作积累,随后以极低的边际成本无限复制输出,规模改变了性质,把两件事等同起来其实并不合理。

数百万册书被切开、扫描、回收,最后换来一份和解协议。那些书,早已不在了。而 AI 还在继续写作,且会越来越快。这大概就是这件事最让人不安的地方:对于书被销毁,被肆意用来训练 AI 这件事,没有人真正付出了代价。

附上参考地址:
https://www.washingtonpost.com/technology/2026/01/27/anthropic-ai-scan-destroy-books/

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

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


苹果终于亮出了下一个「iPhone」|硬哲学

爱范儿关注「明日产品」,硬哲学栏目试图剥离技术和参数的外衣,探求产品设计中人性的本源。

新年伊始,科技圈热闹非凡,一波未平,数波并起。

先是春晚舞台上,具身智能机器人和 SeeDance 轮番秀肌肉,看得人眼花缭乱;苹果也在除夕当晚不声不响地发出了春季发布会邀请函。

当大家还在讨论 iPhone 17e 的时候,彭博社又抛出一枚重磅炸弹,苹果正在加速一系列 AI 硬件,具体为以下三种:

  • 智能眼镜 N50:代号 N50,对标 Meta Ray-Ban 但要更高端。无显示屏,靠扬声器、麦克风和双摄像头实现功能——一颗拍照录像,一颗专门用于计算机视觉。计划 2027 年发售;
  • 可穿戴吊坠:AirTag 大小,可夹衣服或挂项链上。配备低分辨率摄像头和麦克风,被内部员工称为 iPhone 的「眼睛和耳朵」,依赖手机进行大部分处理;
  • 摄像头 AirPods:在现有 AirPods 基础上加入摄像头,主要为 AI 提供视觉信息,而非拍摄照片视频。进展最快,最早可能今年亮相。

▲ 假想图由 Gemini 生成

这也或许是蒂姆·库克职业生涯谢幕前,最后一笔投注,不同于我们熟悉的「烧掉旧世界」的激进,这位供应链出身的掌舵者,在站好最后一班岗时,选择了一条更符合苹果财报逻辑的演进路线:拥抱 AI 硬件,但绝不背刺作为万亿市值基石的 iPhone。

这场新旧交替的博弈,库克没有做选择题,他全都要。

摄像头,为 AI 而生

如果你足够敏锐,已经从刚刚的简短介绍里捕捉到了关键词——三款设备,都有摄像头。

如果用传统消费电子的逻辑看,iPhone 上的摄像头已经基本满足人们的拍照需求,但对于不需要搞摄影的 AI 硬件来说,摄像头的角色发生了质的转变——这是被动且持续接收信息的「输入」入口。

不需要高画质,200 万像素甚至更低就够了,甚至可以是红外成像,毕竟 AI 不需要欣赏风景,只要能通过这些低像素画面,计算出空间定位与物体识别,就能正常运转。

▲ 假想图由 Gemini 生成

与之呼应的是,苹果在这方面的技术积累。2025 年夏天,苹果开源了一个能在 iPhone 上直接运行的高效视觉语言模型——FastVLM。

这个模型并不像其他 AI 巨头那样「刷分」,而是朝着小型化、端侧化、低延迟的方向做了极致优化,将视觉处理所需的 Token 降到传统 ViT 的 1/16,极大降低延迟,可以根据摄像头捕捉到的内容实时给出判断,反应速度非常快。

可以预料到的是,苹果在视觉为核心的 AI 硬件上,将会利用 FastVLM 及其衍生模型技术。

但在如何消化视觉数据流时,苹果给出的方案,是对 Humane Ai Pin、Rabbit R1 等「先烈」的一次无情嘲讽。

Ai Pin 的死因,可以总结为一种脱离物理规律、使用场景,以及用户接受程度的「狂妄」,在一个火柴盒大小的设备里,硬塞进高通骁龙芯片和复杂的散热系统,还有一整套摄像头和投影仪。

小马拉大车的结果显而易见:高喊着取代 iPhone 的 Ai Pin 续航崩盘、发热烫人,最终随着服务停止、公司出售,产品也沦为昂贵且无用的电子垃圾。

苹果吸取教训,选择了一套让 AI 硬件们各司其职,且相对务实的「共生」路线。

▲ 苹果曾申请过一款脑电波 AirPods 专利

在苹果的这套架构里,这三款硬件不需要高性能芯片,不需要大电池。它们存在的目的纯粹且单一:全感官的数据采集。

通过独立且轻便的小型设备,源源不断地获取外界信息。毕竟人类又不可能 24 小时举着手机,所以为了获取这些连续不断的视觉流,摄像头必须抢占人体感知器官的「高地」——也就是我们的耳朵和鼻梁。

这方面,国内的光帆科技(Lightwear)其实已经给出了先行版本——他们在耳机上装了一对摄像头,连续不间断地捕捉现实世界,但这些信息在 AI 使用之后便「阅后即焚」,既保证可用性,又具备私密性——这套方案,是不是也有点果味儿?

▲ Lightwear AI 耳机

关于这款未来耳机,可以查看爱范儿此前的报道:https://mp.weixin.qq.com/s/iLZJLj6RqiDIh74sD8H6CA?clicktime=1771374926&enterid=1771374926&scene=126&sessionid=1771374919&subscene=91

在苹果的这套 AI 新硬件体系中,三款硬件分工明确:

代号 N50 的高端智能眼镜占据了「第一视角(FPV)」,看你所看,负责锁定和记录你当下的注意力; 带摄像头的 AirPods 利用头动即眼动的特性,负责扫描侧向视觉,补全了环境感知;AI 挂饰则像一只挂在胸口的「眼睛」,负责广角记录,构建长期记忆。

▲ 图|Tim’s Guide

它们就像是 iPhone 伸出来的三根触角,疯狂地从物理世界汲取信息。

同时,苹果也能在低像素高密度的信息流中,实施一贯的隐私策略:「阅后即焚」。

所有摄像头捕捉的数据,仅供 AI 在完成环境理解,不留任何存档。这样一来,既喂饱了 AI,又最大程度地消解了用户对隐私的顾虑。

苹果的魔法:语音无声输入

从信息输入角度分析,我们大致能了解三款 AI 硬件的设计思路和运行方式,但想要这套 AI 硬件系统好用,还有一个比技术更棘手、甚至可以说决定生死的难题——交互。

现有 AI 硬件的最大痛点在于社交压力,在嘈杂的地铁里,对着胸口的 Ai Pin 大喊「嘿,帮我查查我该在哪个站下车」,无论 AI 回答有多智能,都十足社死。

由此,我甚至可以得出一个暴论:只要还需要小声自言自语,AI 硬件就很难走出小圈子。

▲ 先烈 Ai Pin

苹果显然深知这种喃喃自语带来的社交压力,它的解决方案是「说话无声」——就在上个月底,苹果斥资 20 亿美元,快速而隐秘地收购了以色列公司 Q.ai, 将这项技术纳入囊中,具体信息,可以查看我们的报道:https://mp.weixin.qq.com/s/xh1yCU7VDcydqw2yeKGG0A?clicktime=1771374793&enterid=1771374793&scene=126&sessionid=1771374778&subscene=91

这笔收购,在十年前就已埋下线索。

Q.ai 的创始人 Aviad Maizels,这个名字你可能陌生,但自 iPhone X 开始使用的 Face ID,就源自他创立的上一家公司 PrimeSense。

Q.ai 的核心技术是肌电图(EMG)与微表情分析,这听起来像赛博朋克小说里的设定,但原理其实非常生物学:当我们想要说话时,大脑会向发声器官发送神经电信号。即使我们最终压低声音、甚至根本没有发出声音,喉咙、下颌和脸颊的肌肉依然会产生微弱的生物电波动。

Q.ai 的算法,可以捕捉并翻译这些沉默的波动。

▲ 用于情感识别的面部肌电图信号采集

用户不需要像呼叫 Siri 那样字正腔圆,甚至不需要张开嘴,只需要在喉咙里「默读」指令,眼镜腿上的传感器就能精准识别。

没有声音,没有动作。在旁人眼中,你只是短暂地停顿,便获取了信息。

正如多点触控让 iPhone 告别物理键盘,Q.ai 的无声交互,赋予了无屏设备高带宽、高隐私的输入能力。

如果类比 iPhone 的成功经验,这可能就是 AI 硬件的「多点触控」。

让所有人在十年后,仍然需要 iPhone

在去年闹得轰轰烈烈的 Google 反垄断案当中,有一封电子邮件证据,来自苹果的互联网服务高级副总裁 Eddy Cue 放过的狠话:

十年后,可能我们都不需要 iPhone 了。

▲ Eddy Cue 与 Tim Cook

这句话曾被无数媒体解读为苹果的自我革命,也侧面传递出在 AI 浪潮里苹果的焦虑,但随着 N50 眼镜、挂饰和 AI AirPods 的拼图逐渐浮出水面,苹果的新思路也昭然若揭——

将 AI 硬件这个新品类,牢牢绑住 iPhone 这个生态完善、用户成熟的大船。

若是讲得更明白些,我们可以试着将苹果的路子分为两个步骤:体验升级,然后拆解。

2016 年秋天,苹果拿掉 iPhone 7 的 3.5mm 接口,随之而来的,是 AirPods 的横空出世。苹果通过无线连接、入耳检测、空间音频等技术,对听觉体验进行了一波大升级,虽然 EarPods 没有被立刻抛弃,还能正常使用,但实际上,你需要购买 AirPods,才能获得升级后的体验。

「听」这个动作,被成功地从手机上剥离,独立成了一条数十亿美元的配件产线。

Apple Watch 走的也是这条路——将健康与通知两个功能一边升级、一边剥离出来,用户需要购买额外的配件,才能解锁 iPhone 更全面的体验。

现在,AI 硬件,苹果也打算这么干了。

按照苹果的设想,未来你的设备可能是这样的:

  • 手腕:Apple Watch(健康监控 + 通知中心);
  • 耳朵:AirPods(听觉增强+语音助理);
  • 鼻梁:N50 眼镜(视觉增强+隐形屏幕);
  • 胸口:挂饰(全天候记录仪+记忆外挂);
  • 口袋:iPhone(算力核心+网关)。

放眼这个星球,目前最有可能在你身上同时塞进五个电子设备的公司,恐怕也只有苹果一家。

这也就不难理解,为什么 OpenAI CEO Sam Altman 会在纽约的一场午餐会上,抛开 Google,直言不讳地警告:

大家别盯着 Google 了,OpenAI 真正的宿敌,是苹果。

当然,即便这个爆料传闻完全属实,我们也不会真的把这些硬件全都一股脑戴在身上。你会发现,眼镜、耳机、挂饰都有摄像头,它们的能力和角色大体相同。

苹果对于可穿戴设备的定义,从来不会让它们存在感过于强烈,而是以无感的方式存在。

但无论如何,如果这条路跑通,苹果最恐怖的「生态护城河」将顺势流淌进 AI 时代,与之相随的,是数十亿用户的肌肉记忆和操作习惯。这对于任何一家致力于打造 AI 硬件的厂家来说,都是致命威胁。

在这场 AI 硬件的寒武纪大爆发中,苹果看似反应迟钝,也确实在大模型、AI 落地上表现不太让人满意,可如果这套阳谋最终跑通,Eddy Cue 当年的那句豪言,或许真的需要微调几个字,才能跟上苹果的野心:

十年后,我们可能不止需要 iPhone 了。

让我有个美满旅程

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

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


❌