想了解具体操作方法？以下关键步骤可直接套用。

精准输入列表的关键要素

在AI输入框中，避免使用模糊的大白话，需清晰交代以下四点：

• 列表类型：是新闻资讯流、产品卡片墙、团队成员展示，还是服务项目清单？例如输入“首页的服务能力列表，共6项，每项包含图标、标题、简短说明”
• 排列方式：横向滚动、单列竖排、两列响应式网格，还是带筛选标签的动态列表？补充一句“默认三列，小屏自动转为单列”会更精准
• 内容元素：每条是否包含图片、头像、徽章或操作按钮？举个例子：“每张卡片顶部有圆角图标，下方是蓝色主标题和灰色副标题，右下角带‘查看详情’文字链接”
• 视觉倾向：间距、圆角、阴影、字体大小等细节，比如“卡片间距24px，圆角12px，标题字号18px，无边框”

选择网页端模式并精细调整参数

进入AI生成界面后，务必切换到网页版（Web）——正式列表通常需适配大屏，移动端模式会限制功能。右侧设置区再调整几个关键参数：

• 主题色填入品牌主色（如 #2563EB），标题、链接、悬停态自动同步
• 模式选“亮色”，若用深色主题则选“暗色”，AI会处理文字反色与背景对比度
• 圆角统一设为“中等（8–12px）”，符合当前主流正式审美，避免过锐或过钝
• 若团队使用组件库，开启“适配Ant Design规范”，生成的间距、字体层级更符合开发落地标准

生成后快速优化为可用布局

点击“开始生成”等待8–12秒出图，别急着导出。先做三步轻量调整：

• 选中整个列表容器 → 按⇧ Shift + A添加自动布局，方向设为垂直，间距填32px。这样增删条目时自动重排，不会错位
• 点击任意一张卡片 → 右侧属性面板勾选“约束宽度”，设为“填充容器”。多列时宽度均分，响应自然
• 如果需要悬停交互效果（如卡片上浮、阴影加深），右键卡片 → “转换为组件” → 双击进入组件页，为默认态和hover态分别设置Y位移（+4px）与阴影（x0 y4 blur8）

导出代码前确认结构语义化

列表不是堆砌视觉块，需具备HTML语义。生成后检查图层命名是否清晰：

• 外层容器命名为 section-services 而非 “Group 12”
• 每张卡片命名为 card-service-item，内部标题为 h3-title，说明文字为 p-desc
• 命名规范后，点击右上角【AI】→【导出代码】→ 选Vue或React，生成的代码会自动用
  、

  、

  等语义标签，SEO和无障碍都能兼顾