最前端｜Locofy试用报告：设计稿直接转换为代码

news2024/9/28 5:23:51

一、调研目的

二、调研报告设计

三、调研报告

（一）操作步骤

（二）结果初见

(三）初步结论

四、总结

五、补充

一、调研目的

初步调研的目标：

locofy 的实操流程
locofy 涉及到的相关工作角色及其职责的变化
locofy 能干什么以及不能干什么
locofy 到底能带来多少效率提升

提示：
Frontend development accelerated with AI Turndesignsintofrontend codefor web & mobile. Buildfull apps,screens,components&design systems! Ship products 10x faster with your existing design tools, libraries, tech stack & CI/CD workflows
这段文字摘自 locofy 官网, 简单来讲 locofy 是一个设计器插件，它可以将设计文档直接转换成前端的代码, 从而提高交付效率

二、调研报告设计

首先我选一个经典的网页设计稿Easybank landing page

接下来我利用 locofy 将这个设计稿转换成代码

基于转换后的代码, 我会对比其与知名 IT 博主写的fem-easybank 源代码, 分析他们的区别在哪里

最后针对本次调研目标, 我会给出我的初步结论

三、调研报告

首先我强烈建议你先看看这个 locofy 官方视频, 这个视频会让你对 locofy 有一个大致的了解：

【Locofy.ai Recorded Demo】 Locofy.ai Recorded Demo_哔哩哔哩_bilibili

（一）操作步骤

//启动插件

这个步骤是将 locofy 插件安装到你的设计器里面, 这里我选择的是 figma

在设计稿中使用 locofy 插件, 启动插件面板
在 Easybank 案例里面有 3 个 Page, 我选择的是Page Set
在 Easybank 案例里面有 3 个 Frame 我选择的是Desktop

//步骤一：优化设计 Optimise Design

这个步骤是代码转换前的预处理, 将 Figma 稿件中不必要的元数据去掉例如group

这里 locofy 提供了 3 个子优化步骤, 这里我尽可能选择默认的选项, 减少人工的干预

优化设计结构Fix Design Structure
自动布局Auto Layout
适应不同屏幕大小handle different screen sizes

//步骤二：打标签 Tag interactive elements / Tag your layers

这个步骤是为了告诉 locofy 哪些元素是可以交互的, 例如buttoninput等等

手动打标签
自动打标签Auto Tag

同样的, 这里我选择自动, 但是实际上你依然需要针对每个标签进行手动确认

//步骤三：编辑样式与布局 Edit Style and Layout

这一步暂时省略

//步骤四：增加动作 Add Actions

这一步暂时省略

//步骤五：生成代码 Sync to Locofy Builder

这个步骤是生成代码并同步到 locofy 的代码编辑器里面

这里用的是NextJS框架
样式架构是 CSS In Module
识别组件

//步骤六：同步项目 Sync Project

这个步骤是把 locofy 的代码同步到你的项目里面这里支持Github

同步到我的仓库locofy-demo在新窗口打开
clone 这个仓库到本地

◆安装依赖包

◆启动

◇解决了一个CSSProperties无法变异的问题

propWidth?: CSSProperties["width"]; // 修改前 
propWidth?: React.CSSProperties["width"]; // 修改后

（二）结果初见

令人期待的结果来了

(三）初步结论

1、locofy 的实操流程

整个流程本质上就是在给人工智能打标签做转换
打标签的过程目前还需要人工干预和确认

2、locofy 涉及到的相关工作角色及其职责的变化

设计师的产出物需要更加规范化, 以便于 locofy 自动识别
前端工程师需要熟悉 locofy 的代码生成规则, 才能充分发挥 locofy 的自动化能力

3、locofy 能干什么以及不能干什么

能：

自动识别设计稿中的元素, 并生成对应的代码
自动纠正设计稿中的元素, 使其符合 locofy 的代码生成规则
自动识别源代码中的组件, 避免生产代码的重复

不能：

它是效率工具, 不是代替人工的工具

4、locofy 到底能带来多少效率提升

从默认的实现效果来看如果不给予足够的人工干预, locofy 生成的代码是无法直接投入生产

◇ 目前看, 主要问题是响应式, 定位的问题，这些问题都需要人工干预, 但是我相信如果工程师熟悉掌握后, 带来的效率提升是非常可观的

从生成的代码来看, locofy 生成的代码是规范和直观的, 方便工程师理解和维护

◇ 代码风格肯定和纯人工编写的代码有差异, 简洁直观死板而有失优雅, 但是方便维护

◇ AI 提供了组件识别这样可以避免重复代码

◇ 数据处理代码部分还没有看到官方的方案, 目前来看要人工完成

四、总结

传统开发, 低代码, 人工智能，他们三者都会在未来的应用研发领域各自占据一部分市场。

低代码面向的是非专业开发人员, 他们可以通过低代码平台快速的搭建出一个应用，但是一旦涉及到定制化的需求, 低代码平台就会显得力不从心；
人工智能面向的是专业开发人员, 它是效率工具, 但是效率的高低取决于工程师的熟练程度；
传统开发我认为在未来的一段时间内, 仍然是主流, 但是随着人工智能的发展, 传统开发的效率会被人工智能逐渐超越, 这是必然的趋势

◇ 这就好比发生在飞机驾驶舱中的变化, 过去我们看到飞机驾驶舱里面有很多的仪表, 需要飞行员去操作, 但是现在的飞机驾驶舱里面的仪表越来越少, 因为飞行员的工作已经被自动驾驶系统取代了。