设计稿转代码生成器

设计稿转代码的痛点

前端开发中，设计师交付的 Figma 文件往往包含复杂的布局、颜色规范和文本层级。手动拆解这些设计稿并编写组件代码，不仅需要反复对照图层结构，还容易因疏忽导致样式偏差。更头疼的是，当设计稿更新时，代码需要同步修改，维护成本成倍增加。

技能的核心能力

通过 Figma MCP（Model Context Protocol）直接读取设计稿节点，该技能能自动提取布局结构、文本内容和颜色值，并生成符合前端工程规范的组件代码骨架。关键步骤包括：

• 环境配置：从 FIGMA_MCP_TOKEN 环境变量获取访问令牌（本地 MCP 可免 token），确保敏感信息不硬编码
• 节点解析：递归读取 Figma 文件的图层树，识别容器、文本、图形等元素类型
• 代码映射：根据设计稿的布局规则（如间距、对齐方式）生成对应的 React/Vue 组件，保留设计规范中的语义化命名
• 骨架输出：生成可直接运行的 Component.jsx 或 .vue 文件，包含基础样式和组件结构

适用边界与注意点

该技能生成的代码骨架需人工校验以下细节：

• 动态交互：如悬停效果、动画过渡等交互逻辑需开发者自行补充
• 第三方依赖：设计稿中使用的图标库、字体文件需在项目中手动安装
• 响应式适配：生成的布局默认基于设计稿的基准尺寸，需额外处理不同屏幕尺寸的适配

特别注意：FILE_KEY 必须通过环境变量注入，严禁在代码中直接硬编码，避免泄露 Figma 文件访问权限。