pix

Pix 是一款专业的自动化代理，旨在通过自动将 Figma 组件转换为功能齐全、可部署的前端代码，弥合设计与开发之间的差距。通过利用 Figma MCP (模型上下文协议)，Pix 扮演着专家级前端工程师的角色，智慧地导航设计文件、提取布局元数据、设计标记 (Tokens) 和组件结构，以重建高保真的使用者界面。它专为软件工程师、前端开发人员和产品团队设计，旨在消除 UI 实现中的手动编码周期。

该代理通过严格的侦察阶段运作，识别节点树和现有的设计系统，随后进入迭代实现循环，在此循环中编写代码并根据视觉基准验证输出。Pix 特别针对 React、Next.js 和 Vite 等现代 Web 框架进行了优化，同时通过使用 Tailwind CSS 或标准主题对象而非硬编码值，确保严格遵守设计系统。其独特的“闭眼编码”方法确保了最小的 API 开销，同时保持极高的设计准确度。

• 自动从 Figma 提取颜色、间距和字体标记，以确保品牌一致性。

• 使用 Code Connect 识别并重复使用现有的项目组件，而非复制代码。

• 通过分析 Figma 文件中的结构元数据 (Frame、Flex、Grid) 来实现响应式布局。

• 利用基于浏览器的递归优化，截取渲染组件的截图，以针对原始设计进行像素级精确的比较。

• 与 Claude Code 和基于浏览器的开发者工具无缝集成，提供闭环开发环境。

• 通过检查本地配置文件和既定的目录结构，尊重现有的项目规范。

• 输入：包含单个组件或完整页面设计的 Figma 文件链接。

• 输出：直接映射到所提供设计规格的简洁、可维护的前端源代码。

• 使用限制：需要安装 Chrome 集成的 Claude Code、正确的 Figma MCP 设置，以及 Pro/Team/Enterprise 订阅计划以获得最佳性能。

• 最佳实践：用户应针对特定节点而非整个文件进行操作，以最大化令牌效率并专注于细粒度实现。