彻底压榨潜能!我用 Kimi K2 写了一套前端组件库
内容创作,内容创作平台,内容创作者平台 图文教程

彻底压榨潜能!我用 Kimi K2 写了一套前端组件库

AI中国 AI中国 20小时前 112 阅读
4.8 (1280评分)
15,328人已学习

今天展示一下我用 Kimi K2 实现的一套组件库,以及K2 替代 Claude Code 的默认模型的教程补充。


上周五晚上 Kimi K2 发布的第一时间,我就对他做了一些测试,还是用我之前的测试集已经很强了。

然后我周末突然想上点压力,就说要不是提高一下难度。

直接把所有的代码示例、组件引用、设计指导等都去掉,只留下纯粹的任务要求,看看他能做到啥程度。

结果没想到这么牛批,结果所有任务都一次性完成。


最后的结果就是用 KImi K2 实现了一个全部都是复杂组件的 B 端组件库:

包括了日历日程组件、分步引导弹窗组件、富文本编辑器组件、快捷搜索组件、带筛选的数据表格组件、文件树组件、可拖拽的数据仪表盘组件等。

🎁

目前所有的组件都是用 ChatWise 调用 K2 API 生成的,Artifacts 预览非常强,而且 K2 发布就已经火速支持,只需填写 API Key 就能添加。

如果想要购买的话可以用藏师傅的链接,可以打八五折https://chatwise.app/?atp=guizang1


可拖拽的数据仪表盘组件

很多朋友可能说可能这些 Sonnet 4 也都能做。

这里我着重展示一个复杂的可拖拽的数据仪表盘组件,我用同样的提示词让 Sonnet 4 写了之后完全不行,根本无法拖动全是 Bug。

创建一个可定制的仪表盘组件,允许用户通过拖放来添加、移除和重新排列不同的小部件(Widgets)。每个小部件都可以展示不同类型的数据或功能。核心功能:网格布局系统: 支持响应式网格,小部件可以自动对齐和调整大小。小部件库: 提供一个可供选择的小部件列表,例如图表(折线图、饼图)、数据卡片、任务列表、时钟等。拖放功能: 用户可以直观地拖动小部件来改变其在仪表盘上的位置。调整大小: 用户可以拖动小部件的边缘来调整其尺寸。状态保存: 仪表盘的布局和小部件配置(例如,图表的数据源)可以被保存(例如在 LocalStorage 或后端服务器中),以便用户下次访问时恢复。添加/删除小部件: 用户可以从库中添加新的小部件,或关闭不再需要的小部件。专业的用户界面: 简洁、现代的设计,清晰的网格线和占位符提示,流畅的拖放动画。

这是 K2 的结果和 Sonnet 4 的结果对比。

Sonnet 首次运行的时候页面上一堆未知组件,最核心的问题是完全无法拖动,也没有处理每个卡片的最大最小这种边界情况,K2 把所有的问题都考虑到了。

下面就全是对应的结果和提示词,你也可以参考这些提示词让他生成你定制的 React 组件库:


文件树组件

创建文件树组件。应显示包含子文件夹的文件夹,不同文件类型的图标,选择,折叠按钮,打开/折叠文件夹的不同图标,简洁专业的用户界面。finder/文件浏览器。


全能日历组件

创建一个功能全面的日历组件,不仅能展示日期,还能用于管理事件和日程安排。核心功能:多种视图: 支持月、周、日视图的切换。事件展示: 在日历上清晰地展示事件,长时间的事件可以跨越多天或多个时间格。不同类型的事件可以有不同的颜色。事件操作:创建: 点击日期或时间格可以快速创建新事件,并弹出表单填写详情(标题、时间、描述、参与人等)。编辑/删除: 点击已有事件可以查看详情或进行编辑/删除。拖放: 支持拖放事件以快速更改其日期或时间。调整时长: 支持拖动事件的边缘来调整其持续时间。


产品教程分步引导组件

创建一个引导新用户熟悉应用功能的产品教程组件。该教程将以分步提示的形式,高亮显示界面上的不同元素,并引导用户进行操作。核心功能:分步引导: 能够定义一系列引导步骤,每个步骤都包含标题、描述和指向的特定页面元素。高亮和遮罩: 当引导到某个元素时,页面其他部分会有一个半透明的遮罩层,而被引导的元素则会高亮显示。提示框定位: 提示框(Tooltip/Popover)能够智能地定位在被引导元素的上方、下方、左侧或右侧,以避免遮挡重要内容。导航控制: 包含“上一步”、“下一步”和“完成/跳过”按钮。动态触发: 可以根据用户的特定操作(例如,点击某个按钮)来触发下一步引导。进度指示: 以点或数字的形式显示当前的步骤和总步骤数。简洁的界面: 提示框设计友好,不干扰视线,动画效果平滑(例如,高亮区域的平滑过渡)。


现代化富文本编辑器

创建一个现代化的富文本编辑器,提供直观的文本格式化工具栏,并能生成干净、标准的 HTML。核心功能:格式化工具栏: 提供常见的文本格式化选项,如加粗、斜体、下划线、标题(H1-H6)、列表(有序/无序)、引用、代码块等。插入媒体: 支持插入图片、视频和链接。图片支持上传、调整大小和对齐。实时预览: 编辑区域内的内容样式应与最终发布后的样式几乎一致。HTML 输出: 生成结构清晰、语义化的 HTML 代码,避免不必要的内联样式。撤销/重做: 标准的编辑历史追溯功能。全屏模式: 提供一个“沉浸式”的全屏写作环境。可扩展性: 允许开发者通过插件的形式添加自定义功能(例如,插入表格、特殊字符等)。用户界面: 工具栏图标清晰易懂,布局合理,整体设计现代、无干扰。


高级数据表格组件

创建一个功能丰富的数据表格组件,用于展示和操作大量结构化数据。应提供排序、筛选、分页、内联编辑等高级功能。核心功能:数据展示: 高效渲染大量数据行,支持虚拟滚动以保证性能。排序与筛选: 用户可以点击列标题进行升序/降序排序,并能对特定列进行文本、数字范围或日期的筛选。分页: 支持前端或后端分页,提供页码、每页显示数量选择器和导航按钮。内联编辑: 双击单元格即可进入编辑模式,根据数据类型显示不同的输入控件(文本框、下拉选择、日期选择器等)。编辑完成后可保存或取消。可定制的列: 用户可以显示/隐藏某些列,并能拖动列标题以调整列的顺序。行选择: 支持单选和多选,并能对选中行进行批量操作(如删除、导出)。固定列/表头: 在水平或垂直滚动时,可以固定表头和指定的列。专业的用户界面: 清晰的表格线,不同状态(悬停、选中)的视觉反馈,紧凑而不拥挤的布局。


键盘驱动的快速操作中心

创建一个由键盘驱动的快速操作中心(也称为 Omnibox),类似于 VS Code、Slack 或 GitHub 中的 Ctrl/Cmd + K 功能。它允许用户通过模糊搜索快速查找内容、导航页面或执行命令。核心功能:快速调用: 通过全局键盘快捷键(如 Cmd+K)在应用的任何地方快速唤出。模态浮层: 以页面中心浮层的形式出现,背景有遮罩,让用户聚焦于命令操作。模糊搜索: 用户输入关键词时,能快速、智能地匹配相关结果,无需输入完整词语。结果分类: 将搜索结果按类别分组(例如:“页面导航”、“操作命令”、“帮助文档”等),方便用户识别。键盘导航: 用户可以完全通过键盘(上/下箭头选择,Enter键执行)来操作,无需鼠标。可执行动作: 不仅能链接到不同页面,还能直接执行应用内的功能(例如“创建新项目”、“切换主题”)。上下文感知: (可选高级功能)可以根据用户当前所在的页面,智能推荐更相关的命令。专业的用户界面: 极简、轻量、响应迅速。列表项清晰,当前选中项有明显高亮,整体设计注重效率。


Claude Code 调用 K2 教程的一些补充说明

上次写完教程之后很多朋友遇到了不少问题,一个是我迷迷糊糊写错了一些,还有就是没有考虑到的复杂情况。

这里统一补充说明一下,之前的教程在这里:


  1. 1. 如果你之前安装过 Claude Code 的话可能设置 API 无法生效,这时候要不删除掉你安装的 Claude Code 重新安装,要不更改一下里面 Config 文件的设置,这里用评论朋友(carline1314)的图片示例一下。
  2. 2. 通过我之前方法更改环境变量的方式每次启动都需要修改一下,如果需要一劳永逸可以参考下面的命令行,重启终端可以直接使用。
    echo -e "\n export ANTHROPIC_AUTH_TOKEN=sk-..." >> ~/.bash_profile echo -e "\n export ANTHROPIC_BASE_URL=https://anyrouter.top" >> ~/.bash_profile echo -e "\n export ANTHROPIC_AUTH_TOKEN=sk-..." >> ~/.bashrc echo -e "\n export ANTHROPIC_BASE_URL=https://anyrouter.top" >> ~/.bashrc echo -e "\n export ANTHROPIC_AUTH_TOKEN=sk-..." >> ~/.zshrc echo -e "\n export ANTHROPIC_BASE_URL=https://anyrouter.top" >> ~/.zshrc
  3. 3. 很多朋友更改频繁的话可能会遇到速率限制,这个需要充值更多金额提高 TPM 才行。
  4. 4. 上次的命令我把国内和国外的 API 地址写错了,大部分用户都是用的国内的我给写成了国外的,原文已经修改,国内的链接后缀是 cn 国外是 ai。
    export ANTHROPIC_AUTH_TOKEN=你的月之暗面 API Keyexport ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic


好了这次内容就是这些。


这几天海外 K2 的内容不断的发酵,因为模型是开源的大家也对模型做了非常详细的验证。

除了在代码和智能体调用上非常强悍外,大家还发现 Kimi K2 在创意写作和 EQ 上的成绩也非常强。

而且我的推特信息流已经全部都是 K2 了,专业的研究员在讨论 K2 的架构,其他朋友在讨论自己用 K2 跑出的惊艳 Case。

连月之暗面研究员关于 K2 的博客文章都被翻译为英语疯狂传播,以前都是我们翻译别人的。


现在来看 Kimi K2 这个模型的素质应该没啥悬念了,很多有异议的朋友我的建议是自己试试,毕竟官网的是免费的。


6 月份我明显感觉整个 AI 圈子弥漫着一股非常疲惫的情绪,产品都大同小异,模型也没有什么进步,国内尤其严重,K2 发布以后明显不一样了,感谢月之暗面在 Manus 和 DeepSeek 之后又给国内 AI 产业续了一波。

教程评分

4.8 (1280 人评分)

评论 (11)

用户头像

Kimi K2 真香!效率提升简直爆炸!

用户头像

我有点担心,效率提升之后,人类会变成什么样子呢?

用户头像

效率爆炸,这感觉,简直是太爽了!

用户头像

Kimi K2,这名字,我给打满分,太有感觉!

用户头像

这效率,要是再多一点,我怕自己变成机器人!

用户头像

效率提升,有点像在玩一场速度游戏,我只想赢!

用户头像

Kimi K2,这名字也太酷了吧,感觉自己都变了个人!

用户头像

这效率,要是再高一点,我怕自己原地爆炸!

用户头像

效率提升?听着就感觉要被榨干,有点害怕!

用户头像

感觉自己都要加速进化了,Kimi K2,真带劲儿!