掘金 人工智能 21小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文评测了 Kimi 团队发布的 K2 模型,重点关注其在代码编写和编程辅助方面的表现。通过在实际项目和编程场景中的测试,K2 模型展现出强大的代码生成、修复和优化能力,尤其在前端开发方面表现出色。K2 模型不仅兼容多种 API 调用方式,还支持在 Claude Code 中使用,为开发者提供了便利。尽管存在一些不足,但 K2 模型凭借其优异的性能和亲民的价格,极具竞争力。

✅ K2 模型在 SWE-bench 等代码修复基准测试中表现出色,展现了其理解复杂代码和修复 Bug 的能力。

✅ K2 模型能够生成复杂的前端表单,并实现多步骤校验、动态字段渲染和异步提交等功能,生成的代码结构清晰,功能完善。

✅ K2 模型能够构建图片画廊应用,支持异步数据加载、无限滚动、图片懒加载和性能优化,生成的代码功能全面,效果良好。

✅ K2 模型兼容 Anthropic API,可以在 Claude Code 中使用,方便开发者进行编程,并且提供了更便捷的编程体验。

你好,我是 hockor。

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

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

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

这里我们核心解释下上面的 4 个指标SWE-bench VerifiedSWE-bench MultilingualLiveCodeBench v6OJBench

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

SWE-bench Verified

代表能力:

难度:很高,目前只有极少模型能在该测试中表现好(如 Claude 3.5、GPT-4o)

SWE-bench Multilingual

适用场景:

LiveCodeBench v6

代表能力:

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

OJBench

评估方式:

代表能力:

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

配置 cline

参考文章:platform.moonshot.cn/docs/guide/…

首先,登录开发者后台(platform.moonshot.cn/console/api… api_key

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

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

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

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

请用 React + Formik 或 React Hook Form 写一个多步骤注册表单,要求:- 有用户名、邮箱、密码、确认密码、手机号等字段- 每一步都要有表单校验(比如密码复杂度、邮箱格式、手机号格式)- 支持动态添加“紧急联系人”字段,至少能添加 3 个联系人- 下一步按钮需禁用直至当前步骤验证通过- 最后提交时模拟异步请求并给出反馈(成功/失败)实现的代码保存在 @/reactForm/ 目录下,并使用 yarn 安装依赖

效果

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

$ 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.lock6 directories, 12 files

安装的依赖项为

  "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 定义

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元

画廊站点生成

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

请用 React 实现一个图片画廊组件,代码存储在 @/imageGallery/ 目录中,使用 yarn 管理依赖, 支持以下功能:- 图片数据通过接口分页加载(分页模拟)- 实现无限滚动,滚动到底自动加载下一页- 图片懒加载(只加载视口内图片)- 优化避免重复请求和节流处理,优化组件性能图片可以使用 https://www.mocklib.com/mock/random/image 来获取,它会随机返回一个图片地址返回的内容为 { "url": "https://picsum.photos/seed/d83b0039a965e2b8db5edff6aec34870/750/500" }其中 url 就是图片的真实地址,可以用于画廊展示,帮我生成代码并启动应用

耗时 8 分钟左右,代码结构如下:

$ 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.lock6 directories, 12 files

整体效果

总消费:1.29元

cline 总结

接入 Claude Code

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

以我本地的 ohmyzsh 为例(其他的也类似)

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

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

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

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

请注意:如果你是免费用户(用的官方赠送金额),可能会遇到如下报错

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

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

总结

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

K2 定价如下:

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

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

这些,咱们就静等花开吧~

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Kimi K2 编程 代码生成 前端开发
相关文章