Figma图层命名不规范导致CSS类名杂乱，可通过四种AI辅助方式重命名：一、用「Rename It」插件执行BEM风格批量重命名；二、用「ClaudeCode Bridge」注入Tailwind兼容命名；三、用Find & Replace正则清洗为kebab-case；四、结合变量系统绑定Design Token生成语义化类名。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中为开发交付设计稿时发现生成的CSS类名杂乱（如c-xyz789、layer_42）、无法与前端组件库对齐或导致样式维护困难，则很可能是图层命名未遵循CSS可读性规范。以下是通过AI辅助将Figma图层快速重命名为符合CSS类名标准的多种技术路径：
一、使用「Rename It」插件执行BEM风格批量重命名
该方法利用预设模板将图层结构映射为block__element--modifier格式，确保生成的类名可直接用于Sass或CSS Modules中，且支持嵌套层级语义继承。
1、在Figma右上角Plugins菜单中启动「Rename It」插件。
2、选中需处理的Frame或组件组，在插件面板中点击「AI Semantic Rename」按钮。
立即学习“前端免费学习笔记（深入）”；
3、在命名策略下拉菜单中选择BEM (block__element--modifier)模板。
4、勾选「Preserve parent context」以自动提取父级Frame名称作为block前缀，例如父Frame名为header，则子图层“左侧Logo”被重命名为header__logo-primary。
5、确认提交后，所有图层按规则更新，旧名称自动存入注释字段供追溯。
二、调用「ClaudeCode Bridge」插件注入Tailwind兼容命名
此路径专为使用Tailwind CSS的项目设计，AI会识别图层视觉特征并输出含语义前缀的短类名，避免过长命名影响HTML可读性，同时规避Tailwind默认禁止的连字符冲突。
1、安装并启用「ClaudeCode Bridge」插件，在画布中多选目标图层。
2、右键弹出菜单中选择「AI Rename for Tailwind」。
3、在提示框中输入约束指令：“输出纯小写、下划线分隔、长度≤20字符的类名，优先使用tailwind官方前缀如btn、card、nav、input；禁用双短横--”。
4、AI分析图层文本内容、尺寸比例与填充色后，将红色大号按钮重命名为btn_danger_large，灰色小图标重命名为icon_settings_sm。
5、点击「Apply」完成批量替换，插件同步校验命名是否符合Tailwind类名白名单规则。
三、通过Figma原生Find & Replace实现正则驱动的命名清洗
当已有图层命名含部分有效语义但格式混乱（如“Button Primary Hover State”含空格与大小写混用）时，可借助正则表达式一次性转为kebab-case类名，无需依赖插件，适用于离线或安全合规环境。
1、在图层面板顶部点击筛选器旁的「⋯」按钮，选择「Find and Replace」。
2、在「Find」栏输入正则表达式：\s+|([A-Z])（匹配空格或大写字母）。
3、在「Replace」栏输入：-$1（将空格替换为短横，大写字母前加短横）。
4、勾选「Use regex」与「Match case」，点击「Replace All」。
5、再次执行替换：「Find」填^-|-$（首尾短横），「Replace」留空，最终得到如button-primary-hover-state的标准CSS类名。
四、结合Figma变量系统导出Design Token绑定类名
该方法将图层命名与设计令牌（Design Token）深度耦合，使类名不仅描述结构，还携带可配置的设计参数，便于后期通过CSS自定义属性动态控制样式。
1、在Figma左侧面板打开「Variables」，创建颜色令牌--color-primary与间距令牌--space-md。
2、选中一个应用主色的图层，右键选择「Rename with AI」，在提示中指定：“读取当前图层fill color值，映射至最近似design token key，格式为[component]-[function]-[token]，例如btn-cta-color-primary”。
3、AI比对色值#2F54EB与--color-primary的HEX一致性后，将其重命名为btn-cta-color-primary。
4、在CSS中定义该类名对应规则：.btn-cta-color-primary { background-color: var(--color-primary); }。
