figma-to-spirit

Figma 到 Spirit 组件转换

组件文档

有关详细的 API 参考、示例和常见错误：

• 布局组件 - Flex、Grid、Stack、Box、Section、Container
• 排版组件 - Heading、Text
• 卡片组件 - Card、CardLink、CardTitle、CardDescription

核心原则

1. 始终使用 Spirit Web React 组件 - 当存在 Spirit 组件时，绝不创建自定义组件或使用原生 HTML/CSS
2. 绝不使用内联 CSS - 改用组件 props 和样式 props。仅在万不得已时使用 UNSAFE_style 或 UNSAFE_className
3. 将本技能的文档作为主要参考：
   • 查看 布局组件 了解 Flex、Grid、Stack、Box、Section、Container
   • 查看 排版组件 了解 Heading、Text
   • 这些文档包含 API 参考、常见错误和正确的 prop 值
4. 严格按照 Figma CodeConnect 读取 props：
   • 调用 get_code_connect_map 从 Figma 获取 CodeConnect 代码片段
   • 严格按照所示使用 CodeConnect 中的所有 props - 绝不覆盖或更改它们
   • 如果 CodeConnect 显示 Card，就使用 Card（而不是 Flex 或 Box）
5. 绝不替换图标名称：
   • 使用 Figma/CodeConnect 中完全一致的 iconName 值（即使是 "placeholder"）
   • 不要选择“语义上合适”的图标 - 那是设计师的决定，不是你的
   • 占位图标是有意为之的 - 它们表示最终图标尚未确定
   • 错误：看到 iconName="placeholder" 后将其改为 "shield-dualtone" 或 "folder"
   • 正确：严格按照所示使用 iconName="placeholder"
6. 绝不从截图中猜测 prop 值 - 所有 prop 值（背景色、间距、尺寸、文字颜色、对齐方式等）必须来自 Figma 图层数据（get_design_context、CodeConnect、图层属性）。截图仅有助于理解整体结构和布局，不能用于确定具体的 prop 值。当 Figma 设计数据不可用时（例如 Figma 桌面应用未打开），你必须：
   • 告知用户哪些值你无法从 Figma 数据中确认
   • 明确列出你的假设（例如：“我假设 size="xlarge" 且没有背景色，但无法从 Figma 图层数据中验证”）
   • 不要默默猜测 - 每个未确认的值都必须标记出来
   • 常见陷阱：Figma 画布有灰色背景（不属于设计的一部分），截图颜色不可靠，间距/尺寸无法从像素中准确读取
7. 所有图片占位符使用 https://picsum.photos/ - 格式：https://picsum.photos/seed/{identifier}/{width}/{height}
8. 不要将 props 设置为默认值 - 仅在 props 与组件默认值不同时才设置。常见可省略的默认值：
   • 布局：Flex direction="horizontal"、alignmentX="stretch"、alignmentY="stretch"；Grid alignmentX="stretch"、alignmentY="stretch"；Box/Stack elementType="div"；Section hasContainer={true}；Container size="xlarge"
   • 排版：Heading size="medium"、emphasis="bold"；Text elementType="p"、size="medium"、emphasis="regular"
   • 例外：出于无障碍考虑，Heading elementType 始终是必需的
   • 查看各组件专属文档以了解完整的默认值
9. Context7 MCP 是最后的手段 - 仅用于本技能未记录在案的组件：
   • 使用 @alma-oss/spirit-design-system 调用 resolve-library-id
   • 使用 /alma-oss/spirit-design-system 和组件名称调用 query-docs
10. 不确定时询问 - 如果你遇到无法用 Spirit 组件实现的布局、模式或问题：

• 不要猜测或即兴发挥 - 停下来向用户寻求指导
• 描述你想要实现的目标以及不清楚的地方
• 询问是否有特定的 Spirit 组件或模式可以使用
• 在继续之前等待用户的回复
• 这可以防止错误的实现，并让你学到新的模式以供将来使用

---

⚠️ 已弃用的 Props 和组件

绝不在你的实现中使用这些已弃用的特性：

已废弃的 Props（仍可用，但将被移除）

• UncontrolledCollapse：hideOnCollapse prop - 由 isDisposable 取代。请始终改用 isDisposable。

已完成迁移（当前最佳实践）

• Flex 方向：使用 horizontal/vertical（而非 row/column）——这是当前标准。

在 Figma 中遇到已废弃功能时：

• 如果 Figma CodeConnect 显示已废弃的 prop/组件，请告知用户并使用现代替代方案
• 切勿静默使用已废弃功能
• 如有需要，在代码中添加注释，说明为何偏离 Figma
• 如果用户的 Figma 组件引用了已废弃项，建议其更新这些组件

---

工作流

第 1 步：分析 Figma 结构

关键：严格匹配 Figma 图层层级。 每个 Figma autolayout 图层都应有一个对应的 Spirit 布局组件。

重要：以下所有值都必须从 Figma 图层数据中提取（通过 get_design_context、CodeConnect 或图层属性）——不要凭截图猜测。截图仅有助于理解整体结构。如果 Figma 数据不可用，请告知用户哪些值是假设。

从 Figma 中提取：

• Figma 文本样式 → Spirit 组件 - Heading* 文本样式 ⇒ Heading 组件；Body* 文本样式 ⇒ Text 组件。切勿对 Body 样式（例如 Body/Medium/Semibold）使用 Heading。
• 容器图层 - 如果 Figma 有两个或更多容器图层（例如 "Container Medium"、"Container XLarge"），请使用 Section hasContainer={false}，并渲染相应数量的 Container 组件，其 size 取自各图层名称。参见 布局组件。当 Section 只有一个容器时：如果该图层是 "Container XLarge"，则省略 containerProps（xlarge 为默认值）；否则根据图层名称设置 containerProps.size（例如 "Container Medium" → containerProps={{ size: "medium" }}）。
• 组件名称 - 如果 Figma 显示 "Card Media NEW"、"Button" 等，请使用对应的 Spirit 组件
• 用于 props 的图层名称 - "Section XLarge" → size="xlarge"，"Button Large" → size="large"
• 图标名称 - 完全按照 CodeConnect 中所示使用（参见核心原则 #5）
• 间距值 - 从 autolayout 属性中读取 gap：gap-[var(--global/spacing/space-1400,64px)] → spacing="space-1400"
• 颜色 Token - 从图层属性中读取确切的 Token：accent-01-subtle、accent-02-subtle 等。
• 所有包裹图层 - 每个带 autolayout 的 Figma 图层都必须有一个对应的 Spirit 组件
• 对齐 - 检查 align-items 和 justify-content 属性
• 填充宽度/高度 - Figma 使用 align-self: stretch 表示 "fill" 尺寸
• 最大宽度约束 - 检查哪个具体图层具有 max-width，仅应用于该图层
• 内边距值 - 检查图层上的 pr、pl、pt、pb、px、py；使用 Box 内边距 props 应用
• 链接颜色 - 检查 themed/link/... Token；这些表示可点击元素（Card 标题请使用 CardLink）

布局参考线（网格列）：Figma 的布局参考线（例如 "content limited to 7 grid columns"）不会通过 Figma API（get_design_context、get_metadata、get_screenshot）暴露。如果用户提到来自布局参考线的网格/列约束，请使用 Spirit 的 Grid 实现（例如用 Grid cols={12} 配合 GridItem columnStart="span 7" 实现 7 列）。如果总列数或 gutter 不明确，请让用户确认或提供该值。

图层结构匹配示例：

Figma Layers:                          Spirit Components:
├── Section XLarge                     <Section size="xlarge">
│   └── Container XLarge                 (included in Section)
│       └── Content (gap: 32px)          <Flex spacing="space-1000">
│           ├── Heading (max-w: 800px)     <Box UNSAFE_style={{ maxWidth }}>
│           │   ├── Tag                        <Flex spacing="space-700">
│           │   └── Composition                  <Tag />
│           │       ├── Title                    <Flex spacing="space-900">
│           │       ├── Description                <Heading />
│           │       └── ActionGroup                <Text />
│           │                                      <ActionGroup />
│           └── Column (4 items)             </Flex></Box>
│               ├── number                   <Grid cols={4}>
│               ├── number                     <StatCard />
│               ├── number                     ...
│               └── number                   </Grid>

步骤 2：选择容器类型

Figma 模式	Spirit 组件
“Design Block” 或主页面区块	Section
需要限制内容宽度	Section containerProps={{ size: "..." }}
全宽区块内容	Section hasContainer={false}

重要：Section 默认包含 Container —— 不要在内部再嵌套一个 Container。

步骤 3：选择布局模式

Figma 模式	Spirit 组件	说明
统一的可重复项（卡片、统计）	Grid	设置 cols prop，Grid 会处理行换行
最大宽度居中的内容	Section containerProps={{ size: "..." }}	不是 Grid
单行或单列	Flex	direction="horizontal" 或 "vertical"
结构不同的多列	多个 Flex 列	水平 Flex 包裹垂直 Flex 子元素
带分隔线的垂直列表	Stack	使用 hasIntermediateDividers
仅样式（背景、边框）	Box	无布局能力
样式 + 布局结合	Box elementType={Flex}	结合样式与布局

重要：实现前请查看 布局组件，了解 API 参考、prop 取值和常见错误。

步骤 4：设置对齐 Props

设置对齐前，检查 Figma 子元素是否有 W-Full

分析 Figma 时，检查子元素是否有 w-full（全宽）或 shrink-0 w-full：

• 如果子元素有 w-full → 父级应使用 alignmentX="stretch"，让子元素填满容器宽度
• 如果子元素没有 w-full → 父级应使用 alignmentX="left"，防止不必要的宽度扩展
• 子元素同时有 w-full 和 max-width → 父级使用 alignmentX="stretch"，子元素会拉伸至其 max-width 约束为止

// WRONG - alignmentX="left" prevents children from filling width even when Figma shows w-full
<Flex direction="vertical" spacing="space-1000" alignmentX="left">
  <Box UNSAFE_style={{ maxWidth: "800px" }}>...</Box>  {/* Won't stretch to 800px */}
  <Grid cols={4}>...</Grid>  {/* Won't fill container width */}
</Flex>

// CORRECT - alignmentX="stretch" lets children fill width (respecting their max-width if set)
<Flex direction="vertical" spacing="space-1000" alignmentX="stretch">
  <Box UNSAFE_style={{ maxWidth: "800px" }}>...</Box>  {/* Stretches up to 800px */}
  <Grid cols={4}>...</Grid>  {/* Fills container width */}
</Flex>

取值映射（CSS → Spirit）

CSS 值	alignmentX	alignmentY
flex-start	left	top
center	center	center
flex-end	right	bottom
stretch	stretch	stretch

基于方向的映射：

• 垂直 Flex：align-items → alignmentX，justify-content → alignmentY
• 水平 Flex：justify-content → alignmentX，align-items → alignmentY

重要：始终在垂直 Flex 上显式设置 alignmentX。当 Figma 子元素有 w-full 时选择 stretch，否则使用 left。

步骤 5：设置排版

Figma 文本样式	Spirit 组件	关键 Props
标题样式	Heading	elementType（必需）、size、emphasis
正文文本	Text	elementType、size、emphasis

无障碍规则：

• 仅将 h1-h6 用于实际的语义标题
• 对于不是标题的样式化文本（统计数据、标签）：使用 elementType="div" 或 "span"
• 保持标题层级（h1 → h2 → h3，不要跳过层级）
• 为在 Flex/Grid/Stack 中后面还有兄弟元素的排版元素添加 marginBottom="space-0"（最后一个子元素不需要）

使用完整的强调色令牌名称

Heading 和 Text 接受强调色，但你必须使用完整的令牌名称（而非缩写形式）。

// WRONG - short form "accent-02" causes TypeScript lint error
<Heading elementType="div" size="xlarge" textColor="accent-02">300K+</Heading>

// CORRECT - use full token name "accent-02-basic"
<Heading elementType="div" size="xlarge" textColor="accent-02-basic" marginBottom="space-0">300K+</Heading>

有效的强调色令牌：accent-01-basic、accent-01-subtle、accent-02-basic、accent-02-subtle 等。

IMPORTANT：实现前请查看 Typography Components 以了解 API 参考、prop 值和常见错误。

步骤 6：响应式设计

当 Figma 中只提供了一个断点时：

1. 识别断点 - 查看 Figma 画板宽度（移动端 < 768px，平板 768-1024px，桌面端 > 1024px）
2. 为其他断点添加响应式 props：

// Grid: reduce columns on smaller screens
<Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} />

// Flex: change direction on mobile
<Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }} />

// Spacing: reduce on smaller screens
<Flex spacing={{ mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' }} />

3. 设计必须在提供的断点上完全匹配

步骤 7：交叉检查设计

在最终确定之前，重新获取 Figma 数据并验证：

1. CodeConnect 代码片段与代码完全匹配 - CodeConnect 中的每个 prop 都已存在
2. 组件名称匹配 - 使用的 Spirit 组件与 Figma 组件名称匹配
3. 图标名称完全匹配 - 如果 CodeConnect 显示 iconName="placeholder"，代码必须使用 "placeholder"（而不是替换的图标）
4. 间距值匹配 - 从 Figma 自动布局属性中读取
5. 颜色令牌匹配 - 使用 Figma 图层属性中的精确令牌
6. 图层结构匹配 - 所有包装图层都已体现
7. 对齐方式匹配 - 显式对齐 props 与 Figma 匹配

步骤 8：浏览器中的视觉比较

实现后，使用浏览器将结果与 Figma 设计进行视觉比较。

如果你有浏览器自动化工具的访问权限（例如浏览器 MCP 服务、Playwright、Puppeteer 或类似工具），请使用它们打开正在运行的开发服务器，并与 Figma 截图进行视觉比较。如果没有可用的浏览器工具，请跳过此步骤。

操作步骤：

1. 确保开发服务器正在运行 - 检查终端中是否有正在运行的开发服务器（例如 yarn dev、npm run dev）。记下本地 URL（通常为 http://localhost:3000）。

2. 获取 Figma 截图 - 对 Figma 节点调用 get_screenshot，以获取最新的截图用于比较。

3. 在浏览器中打开页面 - 导航到本地开发服务器 URL。等待页面加载，然后捕获当前页面状态（截图或快照）。

4. 进行视觉比较 - 查看 Figma 截图和浏览器输出。检查以下内容：

   • 布局结构 - 整体排列是否匹配？（间距、对齐、嵌套）
   • 排版 - 字体大小、字重和颜色是否正确？
   • 间距 - 元素之间的间隙是否与设计一致？
   • 组件渲染 - 按钮、标签、卡片等看起来是否正确？
   • 对齐方式 - 内容是否如设计那样左对齐/居中/右对齐？
   • 宽度约束 - 内容是否遵循 Figma 中的 max-width 值？
   • 颜色 - 背景、文字颜色和边框是否匹配？

5. 修复差异 - 如果有任何不匹配：

   • 找出导致不匹配的具体组件或 prop
   • 更新代码以修复它
   • 在浏览器中重新加载页面并再次检查

6. 响应式检查（可选） - 如果 Figma 设计指定了特定的视口宽度，在比较前将浏览器视口调整为匹配的宽度。对于其他断点，验证响应式行为是否合理。

重要说明：

• 浏览器比较是尽力而为的视觉检查，并非像素级完美验证
• 关注结构正确性：布局、间距、对齐、颜色和组件使用
• Figma 与浏览器之间的细微渲染差异是正常的（字体渲染、抗锯齿等）
• 如果没有可用的浏览器工具或开发服务器未运行，请跳过此步骤并在回复中注明

第 9 步：检查 Linter

实现完成后，对所有编辑过的文件运行 linter，以捕获错误。

1. 对实现期间创建或修改的每个文件运行 ReadLints
2. 修复你引入的任何新的 linter 错误（TypeScript 错误、无效的 prop 值、缺少的 import 等）
3. 忽略预先存在的 linter 错误 - 只修复由你的更改导致的错误
4. 需要注意的常见 linter 问题：
   • 无效的 prop 值（例如，使用简写形式的强调色如 "accent-02"，而不是 "accent-02-basic"）
   • 从 @alma-oss/spirit-web-react 导入时缺失或不正确
   • 组件 props 上的 TypeScript 类型不匹配
   • 未使用的 import 或变量

---

快速参考

间距 Token

Token 范围	典型用途
space-100 - space-300	紧凑间距（图标、行内）
space-400 - space-600	小间距（组件内部）
space-700 - space-900	中等间距（组件之间）
space-1000 - space-1200	大间距（区块内边距）
space-1300 - space-1600	超大间距（页面区块）

颜色 Token 示例

类型	示例
背景	primary、secondary、tertiary、accent-01-subtle、accent-02-subtle、neutral-subtle
文本	primary、secondary、tertiary、inverted、disabled、accent-01-basic、accent-02-basic
边框	basic、focus、强调色

注意：强调色始终使用完整的 token 名称（accent-02-basic，而不是 accent-02）。参见排版组件。

链接文本样式

在 Figma 中，链接通过应用名称包含 link 的文本样式来创建（例如 Body/Medium/Link Regular、Body/Small/Link Regular）。应用了此类样式的普通段落是链接在 Figma 中的正确表现形式——这 NOT 是一个错误。

当你遇到使用 link 文本样式的文本节点时，将其实现为 DS 的 Link 组件：

<Link href="...">Show more</Link>

不要将其实现为带有手动下划线样式的 <p> 或 <span>。

链接颜色 Token（卡片检测的关键）

当 Figma 在文本上显示这些颜色 token 时，表明该元素应该是一个链接：

Figma Token	含义
themed/link/primary/state-default	主链接颜色 - 卡片标题使用 CardLink
themed/link/primary/state-hover	链接悬停状态 - CardLink 自动处理
themed/link/secondary/...	次级链接 - 使用 CardLink 或 Link 组件

如果 CardTitle 带有链接颜色 token，请在 CardTitle 内使用 CardLink，而不是带有 textColor 的 Heading。

完整文档参见卡片组件。

---

实现检查清单

在最终确定代码之前：

Figma 数据提取：

• [ ] CodeConnect 代码片段完全按提供的内容使用
• [ ] 组件名称已验证（Figma → Spirit 映射）
• [ ] 图标名称完全按所示使用（如果 iconName="placeholder"，就使用 "placeholder" - 绝不替换）
• [ ] 图层名称已检查 size/color/variant 属性
• [ ] 间距值从 Figma 自动布局属性读取
• [ ] 颜色 token 完全从 Figma 图层属性读取
• [ ] 未使用已废弃的属性（检查：hideOnCollapse、row/column 方向值）
• [ ] 未使用已废弃的组件（检查：hideOnCollapse、row/column 方向值）

布局：

• [ ] Figma Container 图层：两个或更多 Container 图层 ⇒ Section hasContainer={false}，并使用相同数量的 Container 组件，其 size 来自图层名称（例如 "Container Medium" → size="medium"）。
• [ ] 布局组件具有显式的对齐属性
• [ ] 垂直 Flex 显式设置了 alignmentX
• [ ] Grid 同时设置了 alignmentX 和 alignmentY
• [ ] Figma 中的 "fill" 宽度使用父级 alignmentX="stretch"
• [ ] 所有 Figma 包装图层都在代码中体现（层级匹配）
• [ ] 统一项目使用 Grid，不同结构使用 Flex 列
• [ ] 最大宽度约束仅应用于正确的、最内层的包装器

排版：

• [ ] 遵循 Figma 文本样式：Heading* 样式 ⇒ Heading 组件；Body* 样式 ⇒ Text 组件（Body/Medium/Semibold 等绝不使用 Heading）
• [ ] Heading elementType 适当设置（标题用 h1-h6，样式化文本用 div/span）
• [ ] 保持 Heading 层级（不跳过级别）
• [ ] 对于后面有同级元素的排版添加 marginBottom="space-0"（最后一个子元素不需要）
• [ ] 强调文本颜色使用完整 token 名称（accent-02-basic，而不是 accent-02）

样式：

• [ ] 没有内联 CSS（UNSAFE_style 作为最后手段除外）
• [ ] UNSAFE_style maxWidth 仅应用于包含受限内容的最内层包装器
• [ ] 当同时需要样式和布局时使用 Box + Flex 模式
• [ ] 所有属性值均已从 Figma 图层数据确认（绝不从截图猜测）
• [ ] 如果 Figma 数据不可用，列出假设并向用户标明
• [ ] Box 颜色/边框与 Figma 完全匹配
• [ ] 来自 Figma 的内边距值（pr、pl、pt、pb、px、py）使用 Box 属性或 Flex elementType={Box} 应用
• [ ] 省略默认属性值（direction="horizontal"、alignmentX="stretch"、size="medium"、elementType="div" 等）

卡片与链接：

• [ ] 具有 link 文本样式（例如 Body/Medium/Link Regular）的文本节点实现为 DS Link 组件
• [ ] 带有 themed/link/... 颜色 token 的 CardTitle 使用 CardLink（而不是带 textColor 的 Heading）
• [ ] 可点击卡片在 CardTitle 内使用 CardLink
• [ ] 在适当情况下为 CardTitle 设置 isHeading
• [ ] CardArtwork 中带 IconBox 的水平 Card 使用 Flex 包装器实现垂直居中（参见 Card Components）

响应式：

• [ ] 为其他断点添加了响应式属性
• [ ] 在所提供断点上的设计与设计稿完全匹配

图像：

• [ ] 占位符使用 picsum.photos 格式

视觉对比：

• [ ] 在浏览器中打开了实现（如果有浏览器工具可用）
• [ ] 将浏览器渲染与 Figma 截图进行对比
• [ ] 修复了发现的任何视觉差异

代码检查工具：

• [ ] 对所有创建/修改的文件运行了 linter
• [ ] 修复了实现引入的任何新 linter 错误
• [ ] Spirit 组件属性上没有 TypeScript 错误

不确定之处：

• [ ] 对于任何你不确定如何实现的布局/模式，向用户寻求指导（不要猜测！）

---

常见错误

1. 替换图标名称

关键：切勿用自己的选择替换图标名称。

// WRONG - Developer substituted "semantically appropriate" icons
<Icon name="shield-dualtone" />  // Was "placeholder" in Figma
<Icon name="folder" />           // Was "placeholder" in Figma
<Icon name="reload" />           // Was "placeholder" in Figma

// CORRECT - Use EXACTLY what Figma/CodeConnect specifies
<Icon name="placeholder" />      // Matches Figma exactly
<Icon name="placeholder" />      // Matches Figma exactly
<Icon name="placeholder" />      // Matches Figma exactly

为什么这是错误的：

• 占位图标表示设计师尚未最终确定图标选择
• 选择图标是设计决策，而不是开发者决策
• 你“语义上合适”的选择可能与设计系统的图标使用模式冲突
• 这违反了核心原则：“完全按所示使用 CodeConnect 中的所有 props”

规则：如果 CodeConnect 显示 iconName="placeholder"，你的代码必须使用 iconName="placeholder"。就这样。

2. 使用已弃用的 Props 或组件

关键：即使它们出现在较旧的 Figma 文件中，也切勿使用已弃用的功能。

// WRONG - using deprecated hideOnCollapse prop
<UncontrolledCollapse id="collapse-1" hideOnCollapse>
  Content
</UncontrolledCollapse>

// CORRECT - use isDisposable instead
<UncontrolledCollapse id="collapse-1" isDisposable>
  Content
</UncontrolledCollapse>

// WRONG - using deprecated Flex direction values
<Flex direction="row" />
<Flex direction="column" />

// CORRECT - use current direction values
<Flex direction="horizontal" />
<Flex direction="vertical" />

// CORRECT - handle full-width buttons via layout
<Flex alignmentX="stretch">
  <Button>Button</Button>
</Flex>

为什么这是错误的：

• 已弃用的 props/组件将在未来的 Spirit 版本中移除
• 使用它们会造成技术债和维护负担
• 现代替代方案提供更好的功能
• Figma 文件可能包含过时的组件版本

规则： 始终使用当前的、未弃用的 API，即使 Figma 显示较旧的模式。如有需要，添加注释说明偏离原因。

3. 从 Figma 截图猜测 Prop 值

切勿根据 Figma 截图的外观推导 prop 值。截图仅用于理解结构。

所有 prop 值都必须来自 Figma 图层数据（get_design_context、CodeConnect、图层属性）。当该数据不可用时，告知用户你的假设，而不是默默猜测。

常见陷阱：

• 背景颜色：Figma 画布是灰色的——没有背景的区块在截图中看起来也是灰色的。这并不意味着该区块有 backgroundColor="secondary"。
• 间距值：你无法从截图中的像素距离准确判断间距 token。
• 文本颜色：截图渲染可能无法准确表示颜色 token。
• 尺寸：组件尺寸（例如 Section 的 size、Tag 的 size）无法可靠地从截图中读取。

// WRONG - Guessed backgroundColor from screenshot appearance
<Section backgroundColor="secondary" size="xlarge">
  <Heading elementType="h1">Title</Heading>
</Section>

// CORRECT - Only set props confirmed from Figma layer data
<Section size="xlarge">
  <Heading elementType="h1">Title</Heading>
</Section>

当 Figma 数据不可用时，告诉用户：

“我无法获取 Figma 图层数据（Figma 桌面客户端可能未打开）。以下值是我根据截图做出的假设，可能不正确：

• Section size="xlarge"（无法验证确切的 padding）
• 未设置 backgroundColor（截图背景可能是画布，而不是设计）
• Tag size="small"（根据视觉尺寸猜测）

请对照 Figma 文件验证这些内容。”

规则： 每个 prop 值都必须通过 Figma 数据确认。如果无法确认，请将其作为假设向用户标记。