Figma图层命名规范：AI Prompt自动化执行指南

在Figma中完成设计后交付开发时，如果频繁遇到蓝湖资源匹配失败、切图显示为“unnamed”或状态错位等问题，其根源往往在于图层命名未与前端工程规范对齐。实现设计与开发无缝衔接的关键，是建立一套机器（包括AI工具和开发环境）可读、语义清晰的命名体系。以下方法融合了BEM语义结构、CSS变量映射逻辑以及对AI自动化的友好性，能系统性地解决命名合规问题，并支持高效的批量操作。

一、采用BEM变体结构化命名

此方法的核心是让每个图层名称都携带清晰的“身份信息”：所属模块、扮演角色及状态。这直接对应了前端的CSS类名结构（例如 .header__nav--hover），不仅便于开发理解，更能支持自动化工具提取CSS自定义属性。应杜绝使用“Group 3”、“Layer copy”这类模糊命名。

具体操作可分为四步：首先，确定顶层模块（Block）的名称，采用小写字母加短横线格式，如 header、product-card、form-field。其次，对于模块内的子元素（Element），使用双下划线 __ 连接，例如 header__logo、product-card__image。然后，若需表示状态或变体（Modifier），则使用双横线 -- 标识，如 form-field__input--error、button--primary。最后，为在复杂图层树中快速区分结构层级，建议为容器类Frame统一添加 / 前缀，例如 /section/hero-banner、/layout/grid-12。

二、嵌入CSS变量生成逻辑

命名不仅需管理结构，还需关联样式。将颜色、间距、圆角等设计值通过命名直接绑定到CSS自定义属性，可使ClaudeCode或Figma-MCP等插件自动提取并生成完整的 :root 变量声明。关键在于命名需包含明确的类型前缀和数值标识。

颜色图层可命名为 color-primary-500、color-surface-100、color-state-error，其中数字对应设计系统的色阶编号。间距图层适合采用 space-8、space-16、space-24 格式，数值单位为像素，建议保持为8的倍数以符合前端开发的常用间距体系。圆角图层同理，命名为 radius-4、radius-8、radius-12，与间距数值规则保持一致。字体样式可用 text-h1、text-body-md、text-caption-sm 命名，后缀清晰体现了字号与字重的组合关系。

三、配置AI Prompt驱动批量重命名

面对历史文件中大量不规范命名，手动修改效率低下。可借助Figma插件（如Rename It或Figma AI Toolkit），通过自然语言指令让AI完成批量重命名。AI会根据设定的正则模式和语义词典进行替换，效率显著。

操作时，首先在插件Prompt输入栏中下达明确指令，例如：“将所有含‘btn’的图层重命名为‘button__primary--default’，含‘icon’的重命名为‘icon__notification--filled’，保留原始层级位置”。为保险起见，务必先启用“Dry Run”预览模式，让AI列出所有将要生成的新名称，确认无误后再执行。对于遗留的 Rectangle 12 这类无意义图层，可输入更智能的Prompt：“识别所有未命名或含‘Rectangle’‘Group’字样的图层，根据其视觉特征推断语义：圆形图标→icon__user；带文字的矩形→button__secondary；顶部横向条→header__nav”。还可设置批量规则，例如将所有匹配正则表达式 ^bg_.* 的图层替换为 surface--elevated，将匹配 ^txt_.* 的替换为 text-body-sm。

四、启用命名合规实时校验

建立规则很重要，确保规则被持续遵守同样关键。通过集成如saralobo/rules-figma这类规则引擎插件，可在保存或导出前自动扫描所有图层名，将不合规命名拦截在交付链路之外。

首先，在规则配置中定义严格的校验项，例如：“图层名必须匹配 /^[a-z]+(__[a-z]+)(--([a-z]+))$/ ”，此规则会拒绝包含空格、大写字母或下划线使用不当的名称。然后，为关键组件库页面开启强制校验开关，一旦检测到如 btn_primary（使用单下划线）这类命名，图层面板右侧会显示醒目的红色警告图标。更进一步，可配置自动修正策略，让系统自动将 BtnPrimary 转为 button__primary，将 IconHomeActive 转为 icon__home--active。最后，在导出至蓝湖等平台前，触发最终检查网关，若仍有未通过校验的图层，则明确提示用户：“发现3个图层命名不合规：HeaderLogo、BtnLogin、IconCart。请修正后重新导出。”

五、实施命名沙盒过渡机制

对于存量项目，一刀切的全量改造往往不现实。“命名沙盒”过渡机制采用双轨制管理，在确保新组件规范的同时，逐步消化历史遗留的“技术债务”。

具体做法是，为所有旧有不规范图层统一添加 legacy_ 前缀进行隔离，例如 legacy_HeaderLogo、legacy_BtnSubmit。这能确保新的、规范的命名空间不受污染。同时，在图层面板中为所有带 legacy_* 标签的图层打上红色标记，并配合筛选器功能，即可快速定位和集中处理这些待改造项。利用MCP版本差异报告，每周生成一份 legacy_ 图层变更清单，详细标注其最后修改时间和关联的Frame路径，使清理工作有据可依。最后，设定清晰的渐进式目标：例如，第一周集中完成核心页面（如首页、登录页）的命名转换；第二周覆盖所有按钮与图标组件；第三周力争实现全部 legacy_ 图层清零，从而完成整个项目的命名规范化升级。