新潮远网站建设深圳公司网站制作企业
目录
一、调研目的
二、调研报告设计
三、调研报告
（一）操作步骤
（二）结果初见
(三）初步结论
四、总结
五、补充
一、调研目的
初步调研的目标：
- 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 提供了组件识别 这样可以避免重复代码
◇ 数据处理代码部分还没有看到官方的方案, 目前来看要人工完成
四、总结
传统开发, 低代码, 人工智能，他们三者都会在未来的应用研发领域各自占据一部分市场。
- 低代码面向的是非专业开发人员, 他们可以通过低代码平台快速的搭建出一个应用，但是一旦涉及到定制化的需求, 低代码平台就会显得力不从心；
- 人工智能面向的是专业开发人员, 它是效率工具, 但是效率的高低取决于工程师的熟练程度；
- 传统开发我认为在未来的一段时间内, 仍然是主流, 但是随着人工智能的发展, 传统开发的效率会被人工智能逐渐超越, 这是必然的趋势
◇ 这就好比发生在飞机驾驶舱中的变化, 过去我们看到飞机驾驶舱里面有很多的仪表, 需要飞行员去操作, 但是现在的飞机驾驶舱里面的仪表越来越少, 因为飞行员的工作已经被自动驾驶系统取代了。
五、补充
在本周的调研最后, 我浏览了文档所有章节, 其中UI Libraries & Design System吸引了我的注意, 尤其是Bring your own storybook components这一节
简单来说在 figma 中, 你可以导入你的组件库, 设计师可以直接把组件库里面的组件拖拽到设计稿中, locofy 会自动识别组件库中的组件, 并生成对应的代码
这可以说是杀手锏, 现在我最想探索的就剩下如何处理数据状态了
作者：范轶洁| 资深前端开发工程师
版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。
公众号搜索神州数码云基地，了解更多技术干货。