Figma图层命名规范：AI Prompt自动化执行指南与最佳实践
当Figma设计稿交付开发后频繁出现蓝湖资源匹配失败、切图显示异常或状态错位等问题，其根源往往在于图层命名未能与前端工程规范对齐。实现设计与开发的无缝衔接，核心在于建立一套机器（包括AI工具与开发环境）可读、语义清晰的命名体系。以下方法融合了BEM语义结构、CSS变量映射逻辑以及对自动化流程的友好性，能系统性地解决命名合规问题，并实现高效的批量操作。
一、采用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_ 图层清零，从而完成整个项目的命名规范化升级。