figma

# Figma 智能体 使用 Figma 智能体服务器进行 Figma 驱动的实现。有关设置和调试的详细信息（环境变量、配置、验证），请参阅 `references/figma-mcp-config.md`。 ## Figma 智能体集成规则 这些规则定义了如何将 Figma 输入转换为本项目的代码，并且必须在每次 Figma 驱动的变更中遵循。 ### 必需流程（不可跳过） 1. 首先运行 get_design_context 以获取精确节点(s)的结构化表示。 2. 如果响应过大或被截断，运行 get_metadata 获取高层节点映射，然后仅使用 get_design_context 重新获取所需的节点(s)。 3. 运行 get_screenshot 以获取正在实现的节点变体的视觉参考。 4. 只有在同时获得 get_design_context 和 get_screenshot 后，下载所需的任何资源并开始实现。 5. 将输出（通常是 React + Tailwind）转换为本项目的约定、样式和框架。尽可能重用项目的颜色令牌、组件和排版。 6. 在标记完成之前，根据 Figma 进行 1:1 的外观和行为验证。 ### 实现规则 - 将 Figma 智能体输出（React + Tailwind）视为设计和行为的表示，而不是最终的代码风格。 - 在适用时，用项目首选的工具类/设计系统令牌替换 Tailwind 工具类。 - 重用现有组件（例如按钮、输入框、排版、图标包装器），而不是重复功能。 - 一致地使用项目的颜色系统、排版比例和间距令牌。 - 遵循仓库中已采用的现有路由、状态管理和数据获取模式。 - 努力实现与 Figma 设计 1:1 的视觉对齐。当出现冲突时，优先使用设计系统令牌，并微调间距或尺寸以匹配视觉效果。 - 根据 Figma 截图验证最终 UI 的外观和行为。 ### 资源处理 - Figma 智能体服务器提供了一个资源端点，可以提供图像和 SVG 资源。 - 重要：如果 Figma 智能体服务器返回图像或 SVG 的 localhost 源，请直接使用该图像或 SVG 源。 - 重要：不要导入/添加新的图标包，所有资源都应在 Figma 有效载荷中。 - 重要：如果提供了 localhost 源，请勿使用或创建占位符。 ### 基于链接的提示词 - 服务器是基于链接的：复制 Figma 框架/图层链接，并在请求实现帮助时将该 URL 提供给智能体客户端。 - 客户端无法浏览该 URL