最近在做一个后台页面，需求文档和设计稿都齐全，但写代码的时候，还是得在两个工具之间来回倒腾，挺打断思路的。写着写着就得切过去看一眼容器多宽、字体多大、每个组件几个状态，设计稿一改又得跟着调代码（团队没用 Figma）。CodeBuddy 分析项目、生成组件、改代码都还算顺手，但它看不到设计稿里到底画了什么。

在 CodeBuddy 里接入了本地 Pixso MCP

，主要是想把那些还得靠嘴说的设计信息，直接塞给 Agent。下面是我的配置过程和实际开发流程，记录一下。

一、先让 CodeBuddy 访问当前设计文件

本地 MCP 得靠 Pixso 客户端跑起来。先装上并登录 Pixso 客户端，版本要 2.2.0 以上，然后打开准备开发的那个设计文件。

在文件左上角的“文件”菜单里，找到“配置 Pixso MCP”并启用。

本地服务的地址默认是：http://127.0.0.1:3667/mcp

这里有个坑，本地服务是 HTTP 协议的，不是 SSE。Pixso 客户端得一直开着，而且目标设计文件必须是当前打开的标签页。不然的话，CodeBuddy 那边配置好了也连不上画布。

接下来打开 CodeBuddy，在侧边栏对话面板右上角点进“CodeBuddy 设置”，切到“MCP”标签页，点“添加 MCP”，写：

保存后，MCP 服务器显示绿色就说明连上了。除了界面配置，你也可以把同样的内容写到用户级的

我更习惯用项目级配置。团队协作的时候，MCP 设置跟着项目走，不会串到其他工作区去。配置好之后，普通对话和 Craft 智能体都能调用相关工具。

二、拿到设计稿后，别急着直接生成整页代码

连上之后，我一般不急着让它照着设计稿生成代码。页面一复杂，直接梭哈容易翻车。它搞不清哪些地方能用项目里的现成组件，生成的样式可能看着像那么回事，但实际值和我们的设计规范对不上。

稳妥点，先让它读一下结构和规范

。操作很简单，在 Pixso 里选中一个容器，然后在 CodeBuddy 里敲：

这样 Agent 就能拿到图层层级、布局、颜色、文字样式和变量这些信息，然后去查一下仓库里现有的 Button、Card、Table 这些组件。你可以看看它给的映射合不合理，再决定下一步怎么走。

如果不想一直保持图层选中状态，也可以在 Pixso 里复制容器的链接，贴到 CodeBuddy 对话里。记得复制的是带 

 的图层或容器链接，不是文件分享链接，也不是页面链接。

 是用来帮 Agent 精准定位节点的。

碰到图片和图标，也不用自己截图去抠。让 Agent 直接导出，想用 PNG、SVG 还是 WebP 你说了算。要是觉得页面还原得不对劲，就让它抓个设计截图来和页面比一比。这样对照着看，比干巴巴地说“再调调样式”要靠谱得多。

三、把设计和代码拆成几个可回退的小任务

我习惯拆成几步，先把设计读明白，再动手写，

写完对照着检查一遍，最后再微调，别想着一步到位

举个例子，先选设计稿里的筛选栏，让 CodeBuddy 分析布局，用项目现有的表单组件实现它。确认没问题了，再接着弄表格和分页。生成代码的时候，最好把技术栈、目录和要改哪些地方说清楚：

Pixso MCP 虽然能生成 HTML、React、Vue 这些，但与其死磕视觉上的像素级还原，不如把项目里能复用的组件、用的什么 CSS 方案、哪些代码不能动这些事交代清楚，效果反而更好。

。比如你页面写完了，可以用 

 把网页转回设计稿，给产品和设计去调整。如果只是小改设计，也可以让 Agent 读一下当前的样式变量，然后去改某个特定图层，比如统一字号、换个颜色、绑个变量什么的。

如果要改设计稿，Prompt 里一定要说清楚改哪个、改成啥：

这种活儿最好分着干。特别是批量改颜色、字号的时候，先让 Agent 把现有属性捋一遍，你再决定动哪些，别上来就一句“优化一下设计稿”，那样容易浪费积分。

四、MCP 解决的是上下文，不是验收

接上 MCP 后，CodeBuddy 总算不用对着截图和我那说不清道不明的口头描述去脑补设计稿了。不过，代码最后肯定还得自己过一遍。像响应式布局、点击状态、接口联调、权限控制这些，静态的设计稿上压根儿看不出来。

对我来说最大的感受是，设计稿不再是参考的“效果图”了，它变成了 IDE 里实实在在的上下文。现在我可以先分析节点和变量再写代码，写完还能拿截图回来比对。设计要是改了，圈定那个容器让它更新就行，不用从头再复述一遍页面长啥样。

如果只是搭个简单的活动页，确实犯不着这么折腾。但要是项目组件多、规范严，或者改来改去的情况比较多，把 Pixso 接进 CodeBuddy，确实能省不少翻设计稿找尺寸、找素材的功夫。说到底，这玩意儿就是个帮手，把需求拆细点，每步都看一眼，它生成的东西才更靠谱。

CodeBuddy + Pixso MCP接入实践：让设计稿直接“流”进前端项目

我在 CodeBuddy 里接入了本地 Pixso MCP，主要是想把那些还得靠嘴说的设计信息，直接塞给 Agent。下面是我的配置过程和实际开发流程，记录一下。

开发工具

前端

架构设计

在CodeBuddy中通过HTTP协议接入本地Pixso MCP服务，将设计稿图层、变量和组件信息直接传递给Agent，实现设计上下文无缝同步。配置后先分析选中容器结构并映射项目现有组件，再分步生成Vue3代码，支持截图对比和设计反向修改。适合组件多、规范严或频繁改稿的项目，减少来回切换工具，提升开发效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

CodeBuddy + Pixso MCP接入实践：让设计稿直接“流”进前端项目

CodeBuddy + Pixso MCP接入实践：让设计稿直接“流”进前端项目

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐