> 技术文档 > CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具


CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

概述

CodeBuddy 最开始是一款智能编程插件,可以在vscode、cursor中使用,现在官方@CodeBuddy发布了IDE,拿了邀请码,以下是功能试用和效果测评。

CodeBuddy 致力于构建一个产品、设计、研发无缝协作的共生环境。通过将AI深度融入从需求规划、产品设计到代码开发的全流程,实现一个从想法到产品发布的一站式高效交付平台。
CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

一、IDE说明

  1. 可用模型
  • Claude 3.7/4.0
  • GPT-4/4o/o3/o4-mini
  • Gemini 2.5Pro
  1. 集成功能
  • Figma:直接连接 Figma 设计稿,实现设计-开发实时同步。
  • Components(目前未开放):管理可复用的代码/设计组件,提升开发效率与一致性
  • Integration:第三方集成,API,数据库,云服务
  • MCP tool
  • Images:可、识别图片
    说明:我用的Claude-3.7-Sonnet
  1. 模式
  • craft:agent模式
  • chat:智能问答模式

说明:中间有1~10的重叠区,自行选择,craft是工程化构建

二、craft 应用案例(自然语言 to 代码)

  1. prompt
    目标: ptyhon做一个网页架构的数据可视化工具,提供离线数据文件
    CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具
    说明:第一轮回复,因为没有强调开发语言,使用的.js,不熟悉的话限定开发语言;第二轮限定了使用python 的 flask框架实现

问题:①每次运行命令都要重新创建一个terminal;②默认 terminal 要调,codebuddy 默认打开的 terminal是Powershell

技巧:Terminal界面输出可以选择添加到 chat
CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

  1. 实现界面

CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

问题:
第一轮,显示解析错误,原因定位为未处理多组值的情况;
第二轮:匹配算法未处理异常情况,更改数据匹配算法规则
第三轮:正常(我要求将图从散点图改成折线图)
遗留:①图题和标题的中文显示乱码;②右侧界面可以做成切换的,不然整个界面太长,图下是空的;

  1. 效果

CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具

三、功能拓展

  1. 添加云数据数据库功能
  2. 自训练时序数据模型,用云托管,系统调用进行预测,与实测数据进行对比
  3. 连接Figma设计稿,自定义UI