需将ant design布局逻辑映射至figma容器体系并配置语义化constraints：一、预设24列栅格frame；二、first draft绑定antd组件命名生成初始布局；三、figma make构建带约束的sider-header-content结构；四、galileo ai注入isediting等条件状态；五、builder.io校验typography.token一致性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望在Figma中快速搭建结构清晰、符合企业级规范的B端管理后台系统，但发现AI生成内容与Ant Design设计语言不匹配、响应式失效或组件无法对齐标准栅格，则可能是由于未将Ant Design的布局约束逻辑映射到Figma容器体系，或未对AI生成元素施加与AntD语义一致的Constraints配置。以下是解决此问题的步骤：
一、基于Ant Design栅格系统预设Figma Frame容器
Ant Design采用24列栅格系统与固定间距（如16px基线、8px间距单位），Figma中需预先构建具备相同数学关系的Frame容器，作为AI生成内容的“约束锚点”，确保后续First Draft或Make输出自动适配AntD视觉节奏。
1、新建一个Frame，命名为“AntD-Grid-Container”，尺寸设为1440×1080（对应AntD推荐的最小桌面视口）。
2、在该Frame内插入两个嵌套Frame：外层Frame设置Padding为24px（模拟AntD Page内边距），内层Frame宽度设为1392px（1440−2×24），并启用Layout Grid，选择“Column”类型，列数设为24， gutter设为24px，column width设为48px（满足24×48+23×24=1392）。
3、将此Frame保存为Component，并在Assets面板中标记为AntD Grid Base Container，供所有AI生成操作拖入使用。
二、用First Draft生成AntD语义化初始布局
First Draft默认输出无框架归属的自由布局，需通过提示词显式绑定Ant Design组件命名规范与结构逻辑，使AI理解“Card”即AntD Card、“Table”即AntD Table，并自动预留其标准内边距与层级嵌套关系。
1、点击顶部AI图标，选择“First Draft”，平台选“Web Dashboard”，组件库选“Basic app”。
2、在描述框中输入："A B2B admin dashboard using Ant Design 5.x visual language: left Sider with collapsed/expanded toggle, top Header with avatar dropdown, main Content area with Card header 'Asset Management', inside a responsive AntD Table showing columns: Asset ID, Category, Status, Owner, Purchase Date. Use AntD default spacing and typography scale."
3、点击“Make it”，等待生成后，将输出的Frame直接拖入上一步创建的“AntD-Grid-Container”内部。
4、选中生成的Table子Frame，在右侧Constraints面板中，将Top/Left设为Fixed，Width设为Stretch，Height设为Auto，以匹配AntD Table的弹性高度行为。
三、用Figma Make补全AntD业务流程图并注入组件约束
Figma Make擅长解析结构化指令，可精准生成含Sider→Menu→Content跳转逻辑的B端导航流；但必须强制指定AntD组件名与交互状态，否则AI将使用通用术语导致后续开发对齐困难。
1、点击顶部“Make”按钮，在提示框中输入："Create an Ant Design Layout structure: Sider (width 200px) containing Menu with 5 items: Dashboard, Assets, Categories, Reports, Settings; each item links to a separate Content Frame. Header height 64px, Content padding 24px. All frames must be placed within a parent Frame named 'AntD-Layout-Root'."
2、AI生成3组候选后，选择其中Sider宽度严格为200px、Header高度为64px的一组，点击Insert as Frame。
3、选中插入后的“AntD-Layout-Root”Frame，在Constraints区域确认其Top/Left为Fixed，Width/Height均为Stretch，使其能随画板缩放保持AntD标准比例。
4、逐一选中Sider、Header、Content子Frame，在Constraints中分别设置：Sider→Left Fixed / Top Fixed / Width Fixed 200px / Height Stretch；Header→Top Fixed / Left Fixed / Width Stretch / Height Fixed 64px；Content→Top Fixed 64px / Left Fixed 200px / Width Stretch / Height Stretch。
四、通过Galileo AI插件注入AntD业务组件条件分支
Ant Design中大量使用条件渲染（如Modal是否visible、Form.Item是否disabled），First Draft与Make无法原生理解JSX逻辑，需借助Galileo AI插件将自然语言条件转化为可编辑的布尔属性开关，再手动映射至AntD React代码中的prop字段。
1、在Figma Community中安装Galileo AI插件，启动后选择当前页面中某张“Asset Detail”卡片Frame。
2、在Galileo面板中输入："Add conditional states for this card: 'Edit Mode ON' shows editable Input fields and Save/Cancel buttons; 'Edit Mode OFF' shows static text and Edit button. Map 'Edit Mode' state to a boolean variable named 'isEditing'."
3、点击Generate，插件将创建两个Variant：Variant A（isEditing = false）、Variant B（isEditing = true），并自动标注各元素的显示条件。
4、选中Variant B中的Save按钮，在右侧Properties面板中，点击“+ Add Property”，新增Boolean属性，命名为isEditing，值设为true；该属性将作为后续React开发时button.disabled={!isEditing}的映射依据。
五、用Builder.IO插件执行AntD文本驱动排版并校验Token一致性
Ant Design 5.x全面采用Design Token体系控制颜色、圆角、阴影等变量，Builder.IO支持将CSS-in-JS变量名直接注入Figma文本样式，确保AI生成文案的字号、行高、字重与AntD Typography.Token完全一致。
1、选中First Draft生成的“Asset Management”Card标题文本图层，运行Builder.IO插件。
2、在插件界面中选择“Apply Design Tokens”，在下拉菜单中定位到antd-typography-title（对应AntD源码中Typography.Title的token preset）。
3、点击Apply，文本将自动应用fontSize: 24px、fontWeight: 600、lineHeight: 1.5、color: #1D1D1D等属性，与AntD 5.x默认Token值严格对齐。
4、对所有AI生成的文本图层重复此操作，包括Table表头（应用antd-typography-table-header）、按钮文字（应用antd-typography-button），确保全局文本Token零偏差。
