基于 Figma-MCP 的前端代码自动生成实践
在设计与开发之间,往往存在着一道难以跨越的鸿沟。Figma-MCP(Multi-Component Platform)的出现,正是为了解决这个问题。它通过解析 Figma 设计文件的结构化数据,将图层、组件和样式转换为可维护的前端代码。其核心在于建立设计系统与代码库的映射关系,确保样式和布局能够像素级还原。
设计稿预处理规范
工欲善其事,必先利其器。设计稿需遵循严格的命名规范,图层和组件建议使用英文命名并避免特殊字符。颜色样式、文本样式和组件必须使用 Figma 的 Style 功能统一定义,这样工具才能准确识别。对于响应式布局,需要在设计阶段明确标注约束条件,比如固定宽度或自动拉伸,这直接决定了生成代码的灵活性。
配置文件编写
一切自动化都始于配置。通过 mcp.config.json 文件定义代码生成的规则,我们可以灵活控制输出结果:
{
"framework": "React",
"cssPreprocessor": "scss",
"exportPath": "./src/components",
"classPrefix": "ui-",
"responsiveBreakpoints": [768, 1024]
}
这里指定了目标框架为 React,预处理器使用 SCSS,并设置了断点以适配移动端和桌面端。
组件级代码生成
当配置完成后,MCP 会开始生成结构化的组件代码。以按钮为例,生成的 JSX 文件不仅包含逻辑,还自动关联了样式模块:
// Button.jsx
import styles from './Button.module.scss';
export const Button = ({ children, variant = 'primary' }) => (
<button className=`${} ${[]}`}>
{children}
);

