☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
figma图层命名需严格遵循bem变体结构、css变量映射、ai批量重命名、实时校验及沙盒过渡五步法，确保开发交付零错位。
如果您在figma中完成设计后交付至开发环节，却频繁遭遇蓝湖资源匹配失败、切图显示为“unnamed”或状态错位等问题，则很可能是图层命名未对齐前端工程规范。以下是依据bem语义体系、css变量映射逻辑及ai可解析性要求，实现命名合规与自动化执行的具体路径：
一、采用BEM变体结构化命名
该方式确保图层名称具备明确的模块归属、功能角色与交互状态三层语义，使开发可直接映射为CSS类名（如.header__nav--hover）并支持自动化提取CSS自定义属性。命名必须严格区分Block（模块）、Element（元素）、Modifier（状态），禁用模糊词如“Group 3”或“Layer copy”。
1、确定顶层Block名称，使用小写字母加短横线格式，例如header、product-card、form-field。
2、为子元素添加__分隔符及Element标识，如header__logo、product-card__image、form-field__input。
3、为状态或变体添加--分隔符及Modifier，如form-field__input--error、button--primary、tab--active。
4、对容器类Frame统一添加/前缀以区分层级，例如/section/hero-banner、/layout/grid-12。
二、嵌入CSS变量生成逻辑
将颜色、间距、圆角等设计值通过命名显式绑定至CSS自定义属性，使ClaudeCode或Figma-MCP插件可自动提取并输出:root声明。命名需包含类型前缀与数值标识，避免歧义。
1、颜色类图层命名为color-primary-500、color-surface-100、color-state-error，其中数值对应设计系统色阶编号。
2、间距类图层命名为space-8、space-16、space-24，数值单位为px且必须为8的倍数。
3、圆角类图层命名为radius-4、radius-8、radius-12，与Spacing规则保持数值体系一致。
4、字体样式图层命名为text-h1、text-body-md、text-caption-sm，后缀需体现字号与字重组合。
三、配置AI Prompt驱动批量重命名
利用Figma插件（如Rename It或Figma AI Toolkit）接入自然语言指令，将非结构化命名一次性映射为合规格式。AI依据正则模式与语义词典执行替换，无需手动逐层编辑。
1、在插件Prompt栏输入：“将所有含‘btn’的图层重命名为‘button__primary--default’，含‘icon’的重命名为‘icon__notification--filled’，保留原始层级位置”。
2、启用“Dry Run”预览模式，查看AI拟生成的全部新名称，确认无误后执行。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
3、对历史文件中残留的Rectangle 12类图层，输入Prompt：“识别所有未命名或含‘Rectangle’‘Group’字样的图层，根据其视觉特征推断语义：圆形图标→icon__user；带文字的矩形→button__secondary；顶部横向条→header__nav”。
4、设置批量规则：匹配正则^bg_.* → 替换为surface--elevated；匹配^txt_.* → 替换为text-body-sm。
四、启用命名合规实时校验
通过Figma插件集成规则引擎（如saralobo/rules-figma），在保存或导出前自动扫描图层名是否符合预设正则表达式与语义结构，阻断不合规命名进入交付链路。
1、在规则配置中定义校验项：“图层名必须匹配 /^[a-z]+(__[a-z]+)?(--([a-z]+))?$/ ”，拒绝含空格、大写字母或下划线超过两个的名称。
2、为关键组件库页面启用强制校验开关，当检测到btn_primary（含下划线）时，在图层面板右侧标记红色警告图标。
3、配置异常命名自动修正策略：将BtnPrimary转为button__primary，将IconHomeActive转为icon__home--active。
4、导出至蓝湖前触发检查网关，若存在未通过命名校验的图层，弹出提示：“发现3个图层命名不合规：HeaderLogo、BtnLogin、IconCart。请修正后重新导出。”。
五、实施命名沙盒过渡机制
针对存量项目无法一次性全量改造的情况，启用双轨制命名管理，在不影响新组件开发的前提下，逐步清理历史债务。
1、为旧有图层添加legacy_前缀隔离，例如legacy_HeaderLogo、legacy_BtnSubmit，确保新组件命名空间不受污染。
2、在图层面板中为legacy_*图层统一打上红色标签，配合筛选器快速定位待处理项。
3、启用MCP版本差异报告，每周生成legacy_图层变更清单，标注最后修改时间与关联Frame路径。
4、设定渐进目标：首周完成核心页面（首页、登录页）命名转换；次周覆盖全部按钮与图标组件；第三周完成全部legacy_图层清零。
