Locofy：Figma 与 Cursor 及 Claude 之间的智能前端代理层
Locofy 在 Product Hunt 上正式亮相，定位为“设计到代码代理”（design-to-code agents），旨在成为 Figma 与 Cursor、Claude 等 AI 编码工具之间的智能前端代理层。这一创新工具试图解决设计交付与代码实现之间的长期鸿沟，让前端开发流程更加自动化与智能化。
核心定位：代理层而非简单转换
与传统的设计转代码工具（如 Zeplin 或 Avocode）不同，Locofy 并非仅仅将 Figma 设计稿导出为静态 HTML/CSS 代码。它被设计为一个智能代理层，能够理解设计意图，并生成可直接供 Cursor、Claude 等 AI 编程助手使用的结构化前端代码。这意味着开发者无需手动标记设计元素或反复调整导出结果，而是让 Locofy 在中间层完成语义化转换与优化。
工作流程与价值
在典型的工作流中，设计师在 Figma 中完成界面设计，然后交由前端开发者实现。传统上，开发者需要手动编写组件、布局和样式，或者使用工具生成粗略代码后再进行大量修改。Locofy 的介入改变了这一模式：
- 设计输入：直接从 Figma 读取设计稿，包括图层、样式、组件和约束。
- 智能代理处理：利用 AI 理解设计结构，生成符合最佳实践的组件化代码（如 React、Vue 等框架）。
- 与 AI 编码工具集成：生成的代码可直接导入 Cursor 或提供给 Claude，作为进一步开发的基础。开发者可以在此基础上添加逻辑、状态管理和 API 集成，而无需从零开始编写样式和布局。
这种代理层架构的优势在于：减少了人工转换的繁琐步骤，同时保留了 AI 编码工具在逻辑编写上的灵活性。开发者获得的是高质量的前端骨架，而非需要大量返工的半成品。
行业背景与意义
随着 AI 编码工具的兴起（如 GitHub Copilot、Cursor、Claude Code），开发者已经能够自动生成大量业务逻辑代码。然而，设计到代码的转换仍然是一个未被 AI 充分渗透的环节。大多数 AI 编码工具无法直接理解 Figma 设计稿，需要开发者手动描述设计需求或提供截图。Locofy 的出现填补了这一空白，将“设计语言”翻译为“代码语言”，从而打通了从设计到 AI 开发的全链路。
对于前端团队而言，这意味着：
- 效率提升：减少重复性工作，让开发者专注于交互逻辑和性能优化。
- 一致性增强：设计规范（如间距、颜色、字体）通过代理层自动转化为代码变量，减少手动偏差。
- 协作简化：设计师和开发者可以在同一个语义层上沟通，降低理解成本。
局限与展望
目前，Locofy 仍处于早期阶段，其支持的设计复杂度和框架范围可能有限。对于高度自定义的交互或动态布局，代理层生成的代码可能需要进一步调整。此外，与 Cursor、Claude 的集成深度也取决于这些工具后续的 API 开放程度。
尽管如此，Locofy 代表了一种趋势：AI 正在从前端开发的“辅助者”变为“协作层”。未来，设计到代码的代理层可能成为标准工具，让设计师的设计意图以更少的摩擦转化为可运行的应用程序。