名称：figma-analyze-frame 描述：分析Figma帧的结构、属性和实现考虑

分析Figma帧

名称

figma:figma-analyze-frame - 分析Figma帧结构并提供实现指导

概要

分析Figma帧的层次结构、样式、布局、交互性，并提供全面的实现建议，包括HTML结构、CSS方法、组件拆分、无障碍考虑和响应式策略。

描述

您的任务是分析一个Figma帧，以理解其结构、属性，并提供实现指导。此命令提供详细的技术分析，帮助工程师理解如何实现设计。

实现

使用Figma Desktop MCP服务器访问帧属性、图层、样式和布局信息。分析组件实例、自动布局配置、约束和设计令牌，以生成可操作的实现指导。

您的任务

访问帧：
- 使用Figma MCP工具访问指定帧
- 接受基于选择或链接的输入
- 如果未提供，请用户选择帧或提供URL
分析结构：
- 识别帧层次结构（父子关系）
- 列出所有图层及其类型（文本、矩形、组、组件等）
- 注意帧布局方法（自动布局、固定、绝对定位）
- 识别使用的任何组件实例
分析样式：
- 提取颜色（填充、描边、阴影）
- 注意字体属性（字体、大小、权重、行高）
- 识别间距和大小值
- 检查设计令牌使用
- 注意效果（阴影、模糊等）
分析布局：
- 描述布局系统（类似flexbox、网格、绝对）
- 注意响应行为（约束、调整大小规则）
- 识别间距模式（内边距、间隙、外边距）
- 检查对齐和分布
分析交互性：
- 识别交互元素（按钮、链接、输入框）
- 注意任何原型连接或交互
- 检查状态（悬停、激活、禁用等）
- 识别不同状态的组件变体
实现分析：
- 推荐HTML结构和语义元素
- 建议CSS方法（flexbox、网格、自定义属性）
- 识别组件拆分机会
- 注意无障碍考虑
- 推荐响应式策略

报告格式

提供全面分析报告：

# Figma帧分析

帧：[帧名称]
文件：[Figma文件名]
URL：[Figma URL]
分析日期：[日期]

## 概述

简要描述帧的目的和内容。

## 结构

### 层次结构

帧：[名称]（自动布局，垂直） ├─ 头部（自动布局，水平） │ ├─ 徽标（组件实例） │ └─ 导航（自动布局，水平） │ ├─ 导航项（组件实例）x4 │ └─ 按钮（组件实例） ├─ 主内容（自动布局，垂直） │ ├─ 英雄（帧） │ │ ├─ 标题（文本） │ │ └─ 副标题（文本） │ └─ 功能（自动布局，水平，换行） │ └─ 功能卡（组件实例）x6 └─ 页脚（自动布局，水平）


### 布局系统
- **类型**：自动布局（类似Flexbox）
- **方向**：垂直
- **间距**：部分间24px间隙
- **内边距**：水平64px，垂直32px
- **对齐**：内容居中

## 样式

### 颜色
- 背景：#FFFFFF（--颜色-背景）
- 主色：#3B82F6（--颜色-主色）
- 文本：#111827（--颜色-文本）
- 边框：#E5E7EB（--颜色-边框）

### 字体
- 标题：Inter 32px/40px，权重700
- 正文：Inter 16px/24px，权重400
- 说明：Inter 14px/20px，权重500

### 间距
- 部分间隙：24px
- 卡片间隙：16px
- 按钮内边距：12px 24px

### 效果
- 卡片阴影：0px 4px 6px rgba(0, 0, 0, 0.1)
- 按钮悬停：0px 2px 4px rgba(0, 0, 0, 0.2)

## 使用的组件

1. **按钮**（4个实例）
   - 变体：主色（2），次要（2）
   - 大小：中等
   - Figma：[组件URL]

2. **功能卡**（6个实例）
   - 无变体
   - Figma：[组件URL]

3. **导航项**（4个实例）
   - 状态：默认（3），激活（1）
   - Figma：[组件URL]

## 响应行为

### 约束
- 头部：固定在顶部，水平拉伸
- 主内容：居中对齐，最大宽度1200px
- 页脚：固定在底部，水平拉伸

### 需要的断点
- 桌面（1200px+）：6张功能卡分3列
- 平板（768px-1199px）：4张卡分2列
- 移动（<768px）：卡片堆叠为1列

### 调整大小规则
- 文本：固定大小，在小宽度处换行
- 图像：按比例缩放
- 容器：灵活宽度，带最大宽度

## 无障碍考虑

### 语义HTML
```html
<header>
  <nav>
    <a href="/" aria-label="主页">
      <img src="logo.svg" alt="公司名称" />
    </a>
    <ul role="list">
      <li><a href="/about">关于</a></li>
      <!-- ... -->
    </ul>
  </nav>
</header>
<main>
  <section aria-labelledby="hero-title">
    <h1 id="hero-title">...</h1>
  </section>
  <section aria-labelledby="features-title">
    <h2 id="features-title">功能</h2>
    <div role="list">
      <!-- 功能卡 -->
    </div>
  </section>
</main>
<footer>
  <!-- 页脚内容 -->
</footer>

ARIA要求

导航地标
标题层次（h1 → h2 → h3）
按钮标签和角色
图像alt文本
焦点指示器

键盘导航

所有交互元素可通过Tab键访问
跳转到内容链接
逻辑Tab顺序
焦点可见样式

实现建议

组件拆分

建议创建这些组件：

Header - 顶部导航栏
Hero - 英雄部分带标题和CTA
FeatureGrid - 功能卡网格
FeatureCard - 单个功能卡
Footer - 页脚部分

CSS方法

/* 使用CSS网格进行功能布局 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* 使用Flexbox进行头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
}

响应式策略

移动优先方法
CSS网格带auto-fit进行功能卡
Flexbox进行头部导航
媒体查询在768px和1200px
流体字体（使用clamp进行标题大小）

设计令牌

参考这些令牌（如果不存在则创建）：

--颜色-主色、--颜色-文本、--颜色-背景
--间距-小、--间距-中、--间距-大、--间距-超大
--字体家族-基础、--字体大小-正文、--行高-正文
--阴影-小、--阴影-中

潜在问题

性能：6张带图像的功能卡 - 考虑懒加载
无障碍：确保足够的颜色对比度（验证WCAG AA）
响应式：导航在移动端可能需要汉堡菜单
内容：文本长度变化 - 确保布局处理溢出

下一步

生成组件代码（使用/figma:generate-component）
提取设计令牌（使用/figma:extract-tokens）
创建响应断点测试
实现无障碍功能
添加加载状态和错误处理


## 最佳实践

1. **全面**：分析帧的每个方面
2. **具体**：包括精确值，不是近似值
3. **可操作**：提供具体实现指导
4. **无障碍**：始终从一开始考虑无障碍
5. **响应式**：思考移动优先和自适应布局

## 额外分析

如果用户请求，还分析：

- **性能**：大图像、重动画、渲染复杂度
- **浏览器支持**：使用的CSS特性、需要的回退
- **国际化**：文本方向、字符集、动态内容
- **深色模式**：颜色令牌、主题切换、对比度
- **打印样式**：如果设计应该可打印

## 注释

- 如果帧非常复杂，提议分开分析部分
- 如果适当，建议改进Figma设计
- 注意任何不转换为代码的Figma特定特性
- 推荐设计和工程之间的协作点