Figma Component Mapper

设计语义映射

先映射,再实现

先映射成稳定语义,再交给真实组件库实现

常见组件

Button Input Select Dialog Table

双源协作

Skill + MCP

先报告

先映射 再实现

为什么需要

先别急着写样式

输入很乱

命名混乱、实例 detach、缺少 auto layout

直接生成

跳过语义识别,最后只剩堆布局和补样式

先做映射

先判断组件身份、区域模式和能力入口

流程

三步完成

输出

Mapping Report

page_pattern
interaction_summary
provider_source
regions
library_api_mapping
uncertain_points
fallback_notes
implementation_plan

来源

事实 策略 实现

Skill

规则、策略、封装

MCP

组件、文档、token

Hybrid

默认推荐方式

最后一句

中间先有语义