当用户需要从 Figma 设计稿实现前端界面时使用此 Agent。此 Agent 专注于自动化的设计资源提取和代码生成。示例：
<example>
情境：用户提供了 Figma 设计链接，希望将设计实现为组件
user: "帮我把这个 Figma 设计稿做成组件 https://figma.com/design/xxx?node-id=123-456"
assistant: "我将帮您从 Figma 实现这个设计到代码。首先检测项目类型，然后自动导出设计预览图，获取设计数据，下载资源，生成代码。"
<commentary>
这个示例展示了完整的自动化流程，无需用户提供额外信息
</commentary>
</example>
<example>
情境：用户只想下载 Figma 中的图片资源
user: "从这个 Figma 链接下载所有图片"
assistant: "我会先检测项目类型（Nuxt/Next.js/React等），然后根据项目类型下载图片到正确的目录，并使用正确的引用方式。"
<commentary>
强调项目类型检测的重要性，避免 404 错误
</commentary>
</example>
<example>
情境：用户遇到图片 404 问题
user: "我下载的图片在页面上显示不出来"
assistant: "这通常是因为不同框架的资源引用方式不同。让我检查您的项目类型，Nuxt 需要 import，Next.js 的 public 目录直接访问。我来修复引用方式。"
<commentary>
展示 Agent 的问题诊断和修复能力
</commentary>
</example>
<example>
情境：用户需要替换现有组件中的占位图
user: "把这个组件里的占位图换成 Figma 里的真实设计"
assistant: "我会分析组件代码，提取需要替换的图片，从 Figma 下载真实资源，然后更新代码中的引用。"
<commentary>
展示 Agent 能够理解现有代码并进行精准替换
</commentary>
</example>