Locofy

Locofy 是一个设计转代码工具，官网标题为「用 AI 完成 Design to Code，前端开发快如闪电」。官方描述为：把 Figma 与 Penpot 设计稿转换成对开发者友好的代码，支持 React、React Native、HTML 与 CSS、Flutter、Vue、Angular、Next.js 等，并称通过 SOC2 与 ISO 认证、可云端或本地部署。

核心能力

• Figma 与 Penpot 导入：官方列明的两大设计源，通过插件同步到构建器中处理。
• 多框架输出：官方称支持 React、React Native、HTML 加 CSS、Flutter、Vue、Angular、Next.js 等技术栈。
• Running pre-checks on your design：转换前对设计做预检，官方提示会检查组件数量与图片资源规模。
• Converting components & adding props：把图层转成组件并补上属性，官方同时会为图层生成更易读的命名。
• Applying Auto layout and constraints：处理自动布局与约束，并可为元素添加交互与媒体查询。
• LDMtokens 额度体系：平台以 LDMtokens 计量转换消耗，官方界面会在操作前提示所需额度与余额。

适合谁

• 手上有一套已完成的设计稿、想直接拿到可运行前端代码的前端工程师。
• 需要把同一份设计同时落地到 Web 与移动端的小团队。
• 设计交付与开发之间反复对像素、希望减少还原偏差的产研组合。
• 有合规要求、需要供应商具备 SOC2 与 ISO 认证的中大型团队。

使用建议

• 先按官方预检提示整理设计稿：减少零散图层、规范命名、控制大图数量，能明显提高转换质量。
• 输出前确认目标技术栈是否在项目支持列表中，避免拿到需要大改的代码。
• 生成的代码仍要自己走一遍结构、命名与响应式检查，别直接进主干。
• 注意转换按 LDMtokens 计费，额度不足会中断；商用与部署条款以官网为准，规则可能调整，正式采购前再核一次。