设计稿转代码一直是前端团队最耗时的环节之一。最近我在一家开发多个微前端应用的公司做UI开发，这些应用通过一个主仪表盘相互关联。所有产品共用一套设计库，单独放在一个NX仓库里，作为包导入各项目。这套机制确实提升了开发速度，缩短了功能迭代周期。

但维护这个设计系统仓库的过程至今仍是手动的：UX设计师在Figma里做完设计，开发人员再借助AI手动还原，始终没有一步到位的方案——粘贴Figma链接就能直接生成带实时Storybook预览的组件，并通过Agent钩子用Azure DevOps MCP直接提PR。

打开网易新闻 查看精彩图片

这篇文章介绍如何用Gemini CLI（或Claude Code）、Figma MCP和Vercel的web-design-guidelines技能搭建自己的设计Agent。PR和ADO部分暂不涉及。

先准备三项工具：Gemini CLI（npm install -g @google/gemini-cli）、Figma MCP扩展、以及Vercel的web-design-guidelines SKILL.md文件。

启动Gemini CLI后，在目标目录下提示它生成全局Agent，路径为~/.gemini/agents/.md，粘贴以下配置：

Agent命名为figma-design-agent，定位为"将Figma设计转化为生产级代码的专家"，核心能力包括设计翻译（1:1视觉还原）、无障碍与UX（遵循Vercel Web界面指南）、设计系统构建，以及Code Connect映射。工作流分四步：用mcp_figma_get_design_context和mcp_figma_get_screenshot获取上下文，规划组件架构与样式策略，执行精准代码修改，最后用web-design-guidelines审计实现质量。

强制要求只有一条：像素级精确——必须匹配设计的间距、排版和颜色令牌。