应采用「类型-功能-状态」三段式命名结构，绑定变体属性并同步至名称，通过图层注释补充代码映射，建立跨角色命名词典约束AI输出，并在命名中嵌入role/type语义标记以支持自动化导出。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中使用AI重命名功能对图层进行了批量更新，但开发人员仍难以理解组件用途或状态含义，则可能是由于重命名结果缺乏上下文一致性、未对齐前端代码语义、或忽略了变体与状态组合的表达规范。以下是改善设计-开发语义对齐的具体方法：
一、采用「类型-功能-状态」三段式命名结构
仅靠AI识别视觉内容生成名称（如“蓝色按钮”）不足以支撑开发映射到代码中的原子组件和状态逻辑。必须强制注入可解析的语义层级，使每个图层名能被正则提取或工具自动转换为React props或CSS类名。
1、选中目标图层或图层组，在右键菜单中选择“Rename with AI”。
2、在AI重命名弹窗中，于提示框内手动追加约束指令：“按‘ComponentType/FunctionName--State’格式输出，例如Button/PrimaryCTA--hover，Card/ProductPreview--loading，Input/EmailField--error”。
3、确认生成后，检查图层名是否包含斜杠（/）分隔组件类型与功能、双短横（--）分隔状态，且无空格或特殊符号。
4、对不满足格式的图层，使用Figma原生“Find and Replace”功能批量修正前缀与分隔符，确保全文件统一。
二、绑定变体属性并同步命名至属性值
Figma变体（Variants）本身即承载语义化状态信息，但若图层名未反映所选变体组合，开发无法通过名称反推当前实例对应哪一组props。需将变体属性值显式嵌入图层名，形成双向可追溯关系。
1、确保该图层已归属一个启用Variants的主组件，并在右侧属性面板中定义好State、Size、Variant等属性及其取值。
2、选中画布中该组件的一个具体实例，右键选择“Rename with AI”，并在提示中指定：“读取当前实例的全部变体属性值，以‘{Type}/{Function}--{State}.{Size}.{Variant}’格式重命名，例如Button/Submit--idle.md.primary”。
3、对所有变体组合实例执行相同操作，或使用插件如“Variant Renamer”批量应用命名模板。
4、导出设计标注时，验证开发者工具（如Figma Dev Mode）能否正确读取并显示该完整命名字符串作为组件标识。
三、在图层注释中补充代码级映射说明
图层名称长度受限且需兼顾Figma操作效率，无法承载全部技术契约。必须通过附加注释补全与代码的精确映射关系，包括CSS类名建议、React组件路径、事件绑定方式等。
1、右键点击已重命名的图层，选择“Add comment”，在弹出框中输入结构化注释。
2、注释首行写明React Component: Button.PrimaryCTA。
3、第二行写明CSS Class: .btn.btn--primary.btn--md.btn--idle。
4、第三行注明Props Required: onClick, isLoading, isDisabled。
5、保存后，确保团队共享库中所有主组件均启用“Show comments in Dev Mode”，使开发者悬停即可查看。
四、建立跨角色命名词典并强制AI引用
AI重命名若基于通用语料，易产出与团队技术栈脱节的词汇（如将“筛选器”译为Filter而非SearchBar）。需构建受控词汇表，使AI在生成时优先匹配已有术语，保障命名收敛性。
1、在Figma文件中新建页面，命名为“DS-Naming-Glossary”，以表格形式列出高频组件术语对：Design Term / Code Term / Example Usage。
2、在AI重命名提示中明确声明：“严格从以下术语表中选取Code Term字段值：Button → PrimaryCTA；Card → ProductCard；Icon → CloseIcon；Tab → ProfileTab”。
3、将该术语表页面设为团队库共享，并在所有新项目启动时，将该页面链接嵌入AI插件的默认系统提示（system prompt）中。
4、每次重命名前，先运行插件“Term Checker”，自动比对图层名是否命中词典条目，未命中则高亮提醒并建议替换。
五、导出时嵌入语义化data属性标记
即使图层名规范，若开发依赖自动化工具（如FigmaToCodePro）解析设计稿，仍需确保AI生成的名称能被准确提取为HTML data属性。必须在命名阶段预留机器可读锚点。
1、对用于代码生成的关键容器Frame（如header、main、section），重命名时强制添加前缀“[role:]”，例如[role:header]、[role:product-grid]。
2、对交互组件，添加后缀“[type:]”，例如Button/PrimaryCTA--idle[type:button]、Input/EmailField[type:text]。
3、在Figma Dev Mode中开启“Export semantic attributes”，确认导出的JSON元数据包含role与type字段。
4、验证VSCode中Cursor插件调用FigmaToCodePro时，是否能将[role:header]自动转为
