用 Kimi K2 写前端是一种什么体验？还支持 Claude Code 接入？

你好，我是 hockor。

北京时间 2025年7月11日的晚上 22 点55分，Kimi 宣布 k2 模型已正式可用，全面上线，并且开源。

官方博文：moonshotai.github.io/Kimi-K2/

那么在官方放出来的模型测试评分图上可以看到，整体数据还是非常不错的

这里我们核心解释下上面的 4 个指标SWE-bench Verified 、SWE-bench Multilingual 、LiveCodeBench v6 、OJBench，

指标名称	任务类型	语言支持	是否验证执行	代表能力
SWE-bench Verified	实际项目 Bug 修复	Python	✅ 单测验证	实战修复能力、理解复杂代码、上下文跟踪
SWE-bench Multilingual	多语言 Bug 修复	多种语言	✅ 单测验证	跨语言修复能力、泛化能力
LiveCodeBench v6	交互式编程	多种语言	✅ 实时验证	编程对话、多轮改进能力，近似 Copilot 场景
OJBench	算法题（OJ）	多种语言	✅ 自动评测	算法写作能力、代码正确性

SWE-bench Verified

全称： Software Engineering Benchmark - Verified
目标： 衡量 LLM 是否能真实修复开源项目中的 bug（真实 issue）
特点：
- 来源于真实 GitHub 仓库的 issue + 相关代码 PR
- 模型任务：读 issue、读代码，修改文件后自动通过原项目的单元测试
- "Verified" 指的是：运行项目测试验证成功，不是纯人工判断

代表能力：

理解真实软件项目上下文
跨文件编辑和逻辑修改能力
编码与调试结合能力（代码 + 单测通过）

难度：很高，目前只有极少模型能在该测试中表现好（如 Claude 3.5、GPT-4o）

SWE-bench Multilingual

目标： 衡量 LLM 是否能修复多语言软件项目中的 bug（如 Python、Java、C++、JavaScript）
区别于 Verified：
- 任务类似：issue + 修复 + 测试验证
- "Multilingual" 表示测试集覆盖多个主流编程语言
- 更适合评估模型的多语言泛化能力

适用场景：

评估模型是否不仅能修 Python，还能处理 Java/C++ 项目
判断 LLM 是否具备跨语言迁移的能力

LiveCodeBench v6

全称： Live Code Benchmark v6
目标： 测试模型在交互式编程（对话式迭代编程）中的表现
特点：
- 模拟真实人机编程交互过程（你提问，模型修改，验证，再提问...）
- 每个测试问题都有"验证器"运行代码，实时验证是否成功

代表能力：

LLM 的编程对话交互能力（连续改错、补全）
更接近「AI Pair Programming」场景（如你在用 Copilot、ChatGPT 编程）

v6 是最新版，更贴近现实开发流程，比如项目初始化、增量修改、多轮指令等。

OJBench

全称： Online Judge Benchmark
目标： 测试 LLM 在ACM/OJ 类型编程题中的解题能力
特点：
- 类似 LeetCode / 牛客网 / 力扣题库的算法题
- 测试点包括：语法、算法思路、边界处理、复杂度控制等
- 输入：题目 + 输入样例，输出：满足所有测试点的程序

评估方式：

自动提交到 OJ 判题系统，统计通过率（AC Rate）

代表能力：

纯算法逻辑推理 + 代码输出能力（不考察工程上下文）
通常用于衡量模型的"算法能力"和"语言规范性"

ok，那么接下来我们就用几个例子在 cline 中测试下 K2 模型在前端编程上的实际效果如何。

配置 cline

参考文章：platform.moonshot.cn/docs/guide/...

首先，登录开发者后台（platform.moonshot.cn/console/api... api_key。

1、在 vscode 中安装 cline 插件，此处不再赘述。
2、配置 Anthropic API
- API Provider 选择 'Anthropic'
- Anthropic API Key 配置从 Kimi 开放平台获取的 Key
- 勾选 'Use custom base URL': 输入 'api.moonshot.cn/anthropic
- Model 均可，模型默认选择 'claude-opus-4-20250514'
- Browser 勾选 'Disable browser tool usage'
- 点击'Done'，保存配置

然后我们在输入框中输入一个你好，如果能收到大模型的回应，就说明配置成功了

为了防止请求次数太少一会中断了，我刻意改成了最大次数 200 次

复杂表单校验与动态表单生成

第一个例子我们先来测试下纯前端的复杂表单生成和校验，核心考察下纯前端的复杂表单管理和校验、动态字段渲染、多步骤流程控制、异步提交和错误处理。

diff 复制代码

请用 React + Formik 或 React Hook Form 写一个多步骤注册表单，要求：

- 有用户名、邮箱、密码、确认密码、手机号等字段

- 每一步都要有表单校验（比如密码复杂度、邮箱格式、手机号格式）

- 支持动态添加"紧急联系人"字段，至少能添加 3 个联系人

- 下一步按钮需禁用直至当前步骤验证通过

- 最后提交时模拟异步请求并给出反馈（成功/失败）

实现的代码保存在 @/reactForm/ 目录下，并使用 yarn 安装依赖

效果

最后整体耗时大概 10 分钟不到，生成了 12 个文件，并且安装好了依赖并启动了起来

csharp 复制代码

$ tree
.
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── EmergencyContacts.js
│   │   ├── RegistrationSuccess.js
│   │   ├── Step1.js
│   │   ├── Step2.js
│   │   └── Step3.js
│   ├── hooks
│   ├── index.js
│   └── utils
│       └── validation.js
└── yarn.lock

6 directories, 12 files

安装的依赖项为

perl 复制代码

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.4",
    "yup": "^1.2.0",
    "@hookform/resolvers": "^3.2.0",
    "react-scripts": "5.0.1"
  }

核心的校验 schema 定义

css 复制代码

import * as yup from 'yup';

// 密码复杂度验证
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

// 手机号验证（中国手机号）
const phoneRegex = /^1[3-9]\d{9}$/;

export const step1Schema = yup.object().shape({
  username: yup
    .string()
    .required('用户名不能为空')
    .min(3, '用户名至少3个字符')
    .max(20, '用户名最多20个字符'),
  email: yup
    .string()
    .required('邮箱不能为空')
    .email('请输入有效的邮箱地址'),
});

export const step2Schema = yup.object().shape({
  password: yup
    .string()
    .required('密码不能为空')
    .matches(
      passwordRegex,
      '密码必须包含大小写字母、数字和特殊字符，且至少8位'
    ),
  confirmPassword: yup
    .string()
    .required('请确认密码')
    .oneOf([yup.ref('password')], '两次输入的密码不一致'),
});

export const step3Schema = yup.object().shape({
  phone: yup
    .string()
    .required('手机号不能为空')
    .matches(phoneRegex, '请输入有效的中国手机号'),
});

export const emergencyContactSchema = yup.object().shape({
  name: yup
    .string()
    .required('联系人姓名不能为空')
    .min(2, '姓名至少2个字符'),
  phone: yup
    .string()
    .required('联系人电话不能为空')
    .matches(phoneRegex, '请输入有效的手机号'),
  relationship: yup
    .string()
    .required('关系不能为空')
    .min(2, '关系描述至少2个字符'),
});

整体的效果还是非常不错

实现了多步骤校验
每一步都有校验的提示，实时输入中也有校验
各个按钮的状态也非常不错

但是耗时相对较长，整体的耗时大概在 10 分钟左右，速度较慢，可能是因为我没有充值，用的是官方赠送的😭

另外就是一些 devDependencies（比如 react-scripts）不应该放在 dependencies 中。

最后：总消费：0.92927元

画廊站点生成

接下来我们在生成一个画廊应用，考察下异步数据加载与分页、视口检测及懒加载实现、性能优化手段（节流、避免重复渲染）等。

bash 复制代码

请用 React 实现一个图片画廊组件，代码存储在 @/imageGallery/ 目录中，使用 yarn 管理依赖， 支持以下功能：

- 图片数据通过接口分页加载（分页模拟）

- 实现无限滚动，滚动到底自动加载下一页

- 图片懒加载（只加载视口内图片）

- 优化避免重复请求和节流处理，优化组件性能

图片可以使用 https://www.mocklib.com/mock/random/image 来获取，它会随机返回一个图片地址
返回的内容为 { "url": "https://picsum.photos/seed/d83b0039a965e2b8db5edff6aec34870/750/500" }

其中 url 就是图片的真实地址，可以用于画廊展示，帮我生成代码并启动应用

耗时 8 分钟左右，代码结构如下：

csharp 复制代码

$ tree
.
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── ImageGallery.css
│   │   ├── ImageGallery.js
│   │   └── LazyImage.js
│   ├── hooks
│   │   └── useInfiniteScroll.js
│   ├── index.css
│   ├── index.js
│   └── utils
│       └── api.js
└── yarn.lock

6 directories, 12 files

整体效果

第一次生成的时候初识化没有调用接口获取数据，后续让大模型自己修复了一次，然后修复以后就没任何问题了，人为没有介入代码修改
支持响应式、鼠标移入移出有添加图片缩放的动画和描述文案的出现动画
异步加载和分页以及节流等优化都是有的

总消费：1.29元

cline 总结

接入 Claude Code

之前我们用 Claude code，需要找各种代理站，但是这次 K2 模型不止兼容了常见的 Open AI 调用方式，还兼容了 Anthropic 的调用，所以我们来试试看在 Claude code 中使用行不行。

以我本地的 ohmyzsh 为例（其他的也类似）

在用户目录下打开 .zshrc 文件，然后补充如下的内容

bash 复制代码

export ANTHROPIC_AUTH_TOKEN=Your_API_Key
export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic

保存并退出终端，然后重新打开，在一个项目中输入 Claude，然后你就能看到

接下来咱们就可以开始用 K2 在 Claude Code 里面编程了，比如我们先调用 /init生成CLAUDE.md文件

请注意：如果你是免费用户（用的官方赠送金额），可能会遇到如下报错

原因还是因为上面提到的频率限制问题

这个就看自己要不要充值啦～

总结

整体测试下来，我觉得模型能力还是非常不错的，能逼近 Claude sonnet 3.7 的样子，但是配合上它的定价，还是非常能打的

K2 定价如下：

关键是他还能兼容 Claude code 使用方式，这下子不用再到处去找代理站了🤣

当然目前的 K2 还是有一些缺点的，比如

不支持多模态（图片识别能力）
还没有 thinking 模型

这些，咱们就静等花开吧～