用途：从 Figma 无损提取设计信息，生成可直接用于生产的 React 或 Next.js 组件，使用 TypeScript 与 Tailwind CSS，强调像素级准确。
主要能力与规则：
- 不截断代码：完整使用 Figma MCP 输出，保留每个 className 与属性。
- 展平 absolute contents 结构：父级带 contents 时子元素位置已是绝对定位，删除父包装并保持子元素位置不变；父级无 contents 时需将父级与子级位置相加。
- 从元数据提取尺寸：先调用 mcp__figma__get_metadata 获取 fileKey 与 nodeId，再从 XML 中读取宽高，避免硬编码。
- 字体加载与名称映射：直接在 layout.tsx 用 Google Fonts CDN，而非 next/font/google；在 globals.css 用直接字体名定义工具类；将 Figma 字体名转换为 Tailwind 类，并注意 Source Serif Pro 已更名为 Source Serif 4、Source Sans Pro 更名为 Source Sans 3；Figma 字重名与 CSS 字重可能不一致，需对照截图微调。
- 关键 CSS：body 设 overflow-x: auto，页面容器设 min-width: max-content 与 display: inline-block。
- 用 CSS 替代简单图片线条，将矢量资源内联为 SVG。
- 移除文本块的固定高度，多行文本与 text-justify 尤其要移除，改用 div 包裹 p.mb-0 让文本自然流动；容器、单行表格行、图片图标可保留固定尺寸。
使用方式：在支持该技能的环境中，通过 Figma MCP 获取元数据与设计输出，按上述规则转换并生成组件代码。
适用场景：需要将 Figma 设计稿高保真转为 React/Next.js 组件的前端开发工作。
限制：资料未提供安装命令、收费、平台支持范围与效果保证；部分详细内容（如表格模式转换等）被移至 reference/extended.md，需按需加载。