CodeBuddy 跨界篇 | 产品经理写代码？不，你错了，我只是想画原型图

CodeBuddy 跨界篇 | 产品经理写代码不你错了我只是想画原型图概述一个故事今天在上班期间无意间听到了产品经理正在发愁说最近工作比较忙活比较多有了新需求要花费大量时间思考方案还要写需求文档写完需求文档还要出开发原型给开发讲愁死人了。听到这我突然就想到上次我在我本机的 VSCode 装了 CodeBuddy 插件之后利用 Craft 几句话就做出来一个数独游戏的事。那么我就想我是不是也可以用 VSCode 来直接出开发原型图呢一个故事今天在上班期间无意间听到了产品经理正在发愁说最近工作比较忙活比较多有了新需求要花费大量时间思考方案还要写需求文档写完需求文档还要出开发原型给开发讲愁死人了。听到这我突然就想到上次我在我本机的 VSCode 装了 CodeBuddy 插件之后利用 Craft 几句话就做出来一个数独游戏的事。那么我就想我是不是也可以用 VSCode 来直接出开发原型图呢如果真的能出明天就可以给产品经理指一条明路了哈哈。CodeBuddy为了让我们的产品经理可以更好的用 CodeBuddy 画原型图解决自己的工作时间紧的难题那么先需要简单介绍一下什么是 CodeBuddy只有更好的了解了 CodeBuddy后面产品经理才能用的更上手不是吗什么是 CodeBuddyCodeBuddy 是腾讯云 CodeBuddy也就是腾讯云 AI 代码助手是由腾讯云自研的一款编程提效辅助工具以插件形式安装到编辑器VS Code 或者 JetBrains 系列 IDE中辅助编程是基于腾讯混元DeepSeek 双轮模型为开发者提供 AI 技术问答、全新开发智能体 Craft、代码补全、单元测试、代码诊断和智能评审等多 Agent 能力兼容 MCP 开放生态并支持团队知识库管理、自定义智能体等功能辅助开发者提高编码效率和质量助力开发者提质增效。这就是 CodeBuddy。这时候产品经理疑问了感觉 CodeBuddy 跟我没啥关系我也用不上啊。上面听你提到 Craft那么什么是 CraftCraft什么是 Craft 呢Craft 也就是开发智能体 Craft输入自然语言指令支持文件多选AI 深度理解自主完成多文件代码生成和改写即刻落地可执行应用。与 Chat 对话功能相比跨文件上下文理解、批量代码生成与修改、智能代码优化与重构是 Craft 的核心功能尤其是在生成代码工程中表现突出能够显著提升开发者的效率。产品经理又疑惑了感觉你介绍的 Craft 还是写代码的吧跟我画原型图有什么关系呢那么我想说你画的原型图大多数时候是静态的没有点击事件如果让你直接能画出来有点击事件或者说给前端就可以直接用的页面想尝试吗产品经理表示感兴趣。插件安装那么我接着跟产品经理说在我们画原型图之前是不是需要有个开发工具那么这里我们就直接用前端开发工具 VSCode。具体的下载安装 VSCode 的下载地址安装操作等这里我就不再赘述了。这里说一下跟本文主角有关的 CodeBuddy 插件安装的一些操作吧。在安装 CodeBuddy 之前首先需要确定你本地开发工具 IDE 满足版本要求如果你本地的开发工具不能满足 CodeBuddy 对开发工具的最低版本要求那么需要你升级本地开发工具后再次尝试后面的安装在打开的 vscode 开发工具页面点击【设置】-【Extensions】在搜索框中输入【腾讯云代码助手】点击【Install】在弹出的弹框【Do you trust the publisher “Tencent Cloud”?】中选择【Trust Publisher Install】开始安装 CodeBuddy 插件安装完成后微信扫码登录 CodeBuddy 后就可以看到我们的 vscode 开发工具页面已经有了 CodeBuddy 的操作页面好了现在我们的插件已经装好了后面我们就开始设计原型图了。这里我就拿一个简单的示例来展示一下 Craft 的魅力给你看看吧。原型图到这里产品经理说来你给我展示一下你说的中国版 Cursor CodeBuddy 是不是真的像你说的这么好用吧。这里有一个小需求我们作为示例的话就简单点。原始需求这里我作为产品经理我想要设计一个最常用的功能比如说用户管理。用户管理功能对于几乎所有的系统来说肯定都是必要的不管什么样的系统都会有用户有了用户才有后面的衍生功能。所以我们今天就拿用户管理的原型图设计来感受一下吧。有了产品经理的需求之后我们就按照 AI 对话三步走的政策定角色是什么 发任务做什么 提要求什么要求来分解我们的需求整理成 AI 更能理解的话语。那么我的对话内容就出来了你是一个专业的产品经理具有丰富的产品理解能力我需要你设计一个用户管理的功能需要包括基本的用户字段比如用户名、登录名、手机号、邮箱、性别、部门、是否启用等字段设计的原型图要有示例数据的展示列表操作栏要有新增、修改、删除、启用等按钮点击新增、修改按钮弹窗展示列表展示的字段的输入框。现在帮我生成完整的原型图代码吧。原型图生成有了需求之后我们先在本地创建一个文件夹这里我们的文件夹名字叫做【user-maneger】通过 VSCode 打开我们创建的文件夹 user-maneger点击左侧的 CodeBuddy 标识在 Craft 对话框中输入我们上面整理的对话内容点击生成在 Craft 接收到我们的对话需求之后Craft 首先会对我们的需求进行分析然后再分析当前打开的项目的结构对项目进行分析看是否有现有的代码、技术栈可以参考。在侦测到这是一个新建的空项目之后自主根据需求进行技术选型在 Craft 对我们的需求进行技术选型之后分析出本次需求需要创建的文件及名称以及各个文件涉及到的功能内容并做出解释我将创建以下文件: 1. index.html - 主页面包含用户列表和弹窗 2. styles.css - 自定义样式 3. script.js - 交互逻辑在确定了需要创建的文件以及文件需要具备的一些功能后Craft 就开始生成需要的文件了这里我们可以设置 Craft 的文件修改内容为自动保存这里设置完成之后后面在根据对话内容生成文件内容之后就不会再出现让你主动点击【修改】按钮来确定修改文件内容的操作了下面等待 Craft 将本次需求需要的文件内容都逐个生成之后就可以点击【全部接受】来保存文件内容了同样的在文件生成的最后会对当前生成的文件内容有一个基础的概述和功能上的一些介绍列表页面、用户操作、表单功能、用户体验等最后同样是告诉我们如何来查看我们生成的文件# 用户管理功能原型图 我已经为您创建了一个完整的用户管理功能原型图包括以下文件 1. index.html - 主页面包含用户列表和操作界面 2. styles.css - 自定义样式表 3. script.js - 交互逻辑实现 ## 功能特点 ### 用户列表 - 展示用户的完整信息用户名、登录名、手机号、邮箱、性别、部门、状态 - 分页功能方便浏览大量用户数据 - 搜索功能快速查找特定用户 ### 用户操作 - 新增用户点击新增用户按钮填写用户信息 - 编辑用户点击用户行的编辑按钮修改用户信息 - 删除用户点击删除按钮确认后删除用户 - 启用/禁用用户一键切换用户状态 ### 表单功能 - 完整的字段验证必填项检查、格式验证 - 密码强度要求至少 8 个字符包含字母和数字 - 表单状态反馈显示验证错误和成功消息 ### 用户体验 - 响应式设计适配不同屏幕尺寸 - 操作反馈操作成功后显示提示消息 - 确认对话框防止误操作 ## 如何使用 1. 在浏览器中打开 index.html 文件 2. 浏览用户列表查看示例数据 3. 点击新增用户按钮添加新用户 4. 点击用户行的编辑按钮修改用户信息 5. 使用启用/禁用按钮切换用户状态 6. 点击删除按钮移除用户同样的办法在接受了 Craft 生成的页面之后我们就可以找到 Index.html 页面右键选择【Copy Path】可以获取到 index.html 文件的本地路径我们将复制的 index.html 本地路径地址放在浏览器可以看到我们的用户管理原型图已经成功展现在我们的面前了从色彩搭配上以及功能上感觉还是很不错的。同时我们可以看到我们需要展示的字段以及操作列的新增、修改、删除、启用、禁用按钮也都直接给出来了下面我们来看一下效果吧看到这个效果产品经理诧异了我们可以点击【新增用户】来查看新增页面这里我们可以看到在新增页面除了有我们需要的字段外同时还对不同的输入框进行了区分有文本框下拉框等对于密码字段也设置了隐藏展示在随便输入字段点击【保存】时还会对文本框内容进行校验对于不符合文本格式的给出红框及感叹号提示是不是感觉这原型图就和真的前端页面差不多了那么我们再来看看编辑按钮在【编辑用户】弹窗页面中同样对于必要的字段进行了校验并且对于已经有的内容进行了回显展示这感觉真的不要太好了对于删除按钮我们也只是在对话需求中提了一下需要删除按钮Craft 根据以往的惯用经验不但为我们生成了删除按钮同时对删除按钮添加了二次校验的弹框提示这真的是比产品经理想的还细致啊到这里产品经理从诧异转变为满意到这里产品经理会觉得很满意了只是一句话描述出了自己想做的功能以及一些基础的需求Craft 就能做到这个程度这样的原型图别说是产品经理了就是前端开发者看了都会觉得页面画差不多了我可以摸鱼了哈哈。到这里产品经理突然意识到这个只能在产品经理自己的电脑上面放入浏览器看给开发看的话需要把三个文件都拷贝给他们文件少的时候还好说文件多的时候是不是有点麻烦。说到这里有一个办法可以很方便的生成公共链接来让开发者直接通过链接看就不用拷贝文件了。这就是 Pages MCP Server。那么什么是 Pages MCP Server产品经理脱口而出。Pages MCP Server什么是 Pages MCP ServerEdgeOne Pages Deploy MCP 是一项专用服务能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。看到没刚才你说你的原型图只能通过你自己电脑本地浏览器访问需要给开发者看的话要拷贝给他们。那么现在就不用了我们可以通过 EdgeOne Pages Deploy MCP 将我们的生成的用户管理 原型图 HTML 页面快速部署到 EdgeOne Pages 并生成公开访问链接有了公开访问链接其他开发者就可以直接通过链接看了再也不用逐个拷贝文件了。配置 MCP Server那么我们首先需要为我们的开发工具 VSCode 的 Craft 配置 MCP Server点击 AI 对话框 的 MCP 图标在 CodeBuddy 对话框选择【MCP 市场】找到我们需要的 MCP 并点击右侧的【安装】这里需要说明的是如果本地没有安装 Node.js 的话这里点击安装会安装失败需要你安装 Node.js 之后再尝试安装完成后切换 tab 的【已安装】后打开 json 参数配置页面在右侧打开的配置 MCP Server 的文件【Craft_mcp_settings.json】中输入一下配置内容后保存配置文件{mcpServers:{edgeone-pages-mcp-server:{command:npx,args:[edgeone-pages-mcp]}}}复制上面配置到 Craft_mcp_settings.json 文件后可以看到 MCP Server 已经到达正常状态部署原型图下面我们在 Craft 的 AI 对话框中直接输入我们的需求【发布我们的用户管理页面】在部署发布原型图的过程中会使用 edgeone-pages-mcp-server 的deploy_html工具将完整的 HTML 页面部署到 EdgeOne Pages但是我们发现在发布的过程中遇到了问题那么 Craft 会对出现的问题进行一个分析处理尝试处理后还是没有达到解决问题针对具体的问题原因提出了方案由于这里我们能提供 API 令牌但是我们不知道如何获取 API 令牌那么这时我们可以提出如下问题下面是 Craft 根据我们提出的问题进行的问题分析以及指导方案解决的回复# 获取 EdgeOne Pages API 令牌的步骤 要获取 EdgeOne Pages 的 API 令牌请按照以下步骤操作 ## 1. 登录腾讯云控制台 访问 腾讯云官网 点击右上角的登录按钮 使用您的腾讯云账号登录 ## 2. 访问 EdgeOne Pages 服务 在腾讯云控制台首页搜索EdgeOne Pages或在产品列表中找到该服务 点击进入 EdgeOne Pages 控制台 ## 3. 创建 API 令牌 在 EdgeOne Pages 控制台中找到API 管理或访问凭证部分 点击创建令牌或新建 API 密钥按钮 为令牌设置名称和权限范围建议选择只读权限除非您需要写入权限 确认创建 ## 4. 复制并保存 API 令牌 创建成功后系统会显示 API 令牌 请立即复制并安全保存该令牌因为它通常只会显示一次 注意请勿将令牌分享给他人或在公共场合泄露 ## 5. 配置 MCP 服务器 获取令牌后您需要将其配置到 EdgeOne Pages MCP 服务器中 1. 找到 MCP 配置文件 2. 编辑该文件在 edgeone-pages-mcp-server 的 env 部分添加令牌 json { mcpServers: { edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp], env: { EDGEONE_PAGES_API_TOKEN: 您的 API 令牌 } } } }保存文件完成这些步骤后您就可以使用 deploy_folder_or_zip 工具来部署完整的用户管理系统了。如果您在获取过程中遇到任何问题请参考腾讯云 EdgeOne Pages 官方文档获取更详细的指导。那么我们就按照上面给出的操作提示登录 EdgeOne Pages 控制台https://console.cloud.tencent.com/edgeone/pages 点击左侧菜单【Pages】切换到【API Token】页面后点击【创建 API Token】  在弹出的 API Token 设置页面输入 Token 描述以及选择过期时间后点击【提交】后  在 API Token 列表页点击复制 API Token 并保存然后按照上面给出的 MCP 配置文件路径更改 Craft_mcp_settings.json 的配置增加如下 API 令牌内容后保存文件内容如下 json { mcpServers: { edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp], env: { EDGEONE_PAGES_API_TOKEN: 您的 API 令牌 } } } }再次在 AI 对话框中输入我们的文本内容【发布我们的用户管理页面】经过 Craft 的再一次努力我们的用户管理页面最终部署成功了下面我们就可以复制访问地址到浏览器查看效果了在我们获取到用户管理页面的访问地址之后下面是浏览器中看到的效果源码文件下面我把上面涉及到的源码文件都做一个整理方便大家有需要的参考index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title用户管理系统/title!-- Bootstrap 5 CSS --linkhrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/css/bootstrap.min.cssrelstylesheet!-- Font Awesome 图标 --linkrelstylesheethrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css!-- 自定义样式 --linkrelstylesheethrefstyles.css/headbodydivclasscontainer-fluiddivclassrow!-- 侧边栏 --navidsidebarclasscol-md-3 col-lg-2 d-md-block bg-dark sidebar collapsedivclassposition-sticky pt-3divclasstext-center mb-4h5classtext-white企业管理系统/h5/divulclassnav flex-columnliclassnav-itemaclassnav-link activehref#iclassfas fa-users me-2/i用户管理/a/liliclassnav-itemaclassnav-linkhref#iclassfas fa-sitemap me-2/i部门管理/a/liliclassnav-itemaclassnav-linkhref#iclassfas fa-cog me-2/i系统设置/a/li/ul/div/nav!-- 主内容区 --mainclasscol-md-9 ms-sm-auto col-lg-10 px-md-4divclassd-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottomh1classh2用户管理/h1/div!-- 搜索和操作按钮 --divclassrow mb-3divclasscol-md-6divclassinput-groupinputtypetextclassform-controlplaceholder搜索用户...buttonclassbtn btn-outline-secondarytypebuttoniclassfas fa-search/i搜索/button/div/divdivclasscol-md-6 text-endbuttonclassbtn btn-primaryidaddUserBtniclassfas fa-plus/i新增用户/button/div/div!-- 用户列表表格 --divclasstable-responsivetableclasstable table-striped table-hovertheadtrth用户名/thth登录名/thth手机号/thth邮箱/thth性别/thth部门/thth状态/thth操作/th/tr/theadtbody!-- 示例数据 --trtd张三/tdtdzhangsan/tdtd13800138001/tdtdzhangsanexample.com/tdtd男/tdtd技术部/tdtdspanclassbadge bg-success已启用/span/tdtdbuttonclassbtn btn-sm btn-info edit-btniclassfas fa-edit/i编辑/buttonbuttonclassbtn btn-sm btn-danger delete-btniclassfas fa-trash/i删除/buttonbuttonclassbtn btn-sm btn-warning disable-btniclassfas fa-ban/i禁用/button/td/tr/tbody/table/div/main/div/div!-- Bootstrap 5 JS --scriptsrchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/js/bootstrap.bundle.min.js/scriptscriptsrcscript.js/script/body/htmlstyles.css/* 全局样式 */body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f8f9fa;}/* 侧边栏样式 */#sidebar{min-height:100vh;box-shadow:inset -1px 0 0rgba(0,0,0,.1);background-color:#343a40!important;}#sidebar .nav-link{color:#ced4da;font-weight:500;padding:.75rem 1rem;border-radius:0.25rem;margin:0.2rem 0;}#sidebar .nav-link:hover{color:#fff;background-color:rgba(255,255,255,.1);}#sidebar .nav-link.active{color:#fff;background-color:rgba(255,255,255,.2);}/* 主内容区样式 */main{padding-top:1.5rem;}/* 表格样式 */.table{background-color:#fff;box-shadow:0 0.125rem 0.25remrgba(0,0,0,0.075);border-radius:0.25rem;}/* 响应式调整 */media(max-width:767.98px){#sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:100%;}}故事最后到这里产品经理会心一笑你这个工具不错啊我完全可以用不会的东西Craft 直接会直接进行分析尝试解决就像上面看到的一样而对于需要与人进行交互的也会提出对应的问题要部署完整的用户管理系统我们需要 EdgeOne Pages 的 API 令牌。您能提供 API 令牌吗或者您需要我指导您如何获取 API 令牌虽然我不懂但是我可以把问题给 Craft 让他给我提供这种问题的解决方案像你上面一样按照操作步骤去登录 EdgeOne Pages 控制台配置需要的 API 令牌这整个操作过程跟代码开发没有任何关系就像是日常对话一样就可以让 AI 来帮我画原型图了太简单了两句话搞定我一天的原型图真棒产品经理接着说你给我指的这个明路不错啊那 Craft 能不能帮我一句话生成我的需求文档呢我也不想写需求文档了…沉默了数秒后我回答你相信光吗哈哈原创声明本文系作者授权腾讯云开发者社区发表未经许可不得转载。标签: 腾讯云 AI 编程达人秀CodeBuddy 首席试玩官腾讯云代码助手AI 原型设计产品经理工具