乐于分享
好东西不私藏

我用这个神级 Chrome 插件,像用 Figma 一样改网页 UI,每天省下 3 小时与AI的无效沟通!

我用这个神级 Chrome 插件,像用 Figma 一样改网页 UI,每天省下 3 小时与AI的无效沟通!

哈喽,大家好,我是萤柳!
用 AI 写代码经常说不清要改哪里,一点一点截图告诉他又比较麻烦。
特别是没有UI基础的独立开发者,有时候你明明知道这里不对,但是就是说不出哪里不对。
比如“这个按钮往左挪一点”、“这个间距看着不舒服”,AI 听完一脸懵,你自己也说不清楚到底要挪多少、间距改多大。
复制代码吧,又费劲又容易出错。
反正就是:脑子里知道要改啥,嘴上说不出,手上改不了。
后面我发现了一个叫 Liaison 的 Chrome 插件,直接在网页上像用 Figma 一样可视化调整
改完一键复制提示词给AI改或者导出 JSON,丢给 AI 它就能精准定位、按你的要求改。
今天就给大家分享这玩意儿怎么装、怎么用。

一、如何下载?

链接:https://chromewebstore.google.com/
在上面这个链接搜【Liaison】
搜出来的第一个链接就是了。
直接点击【添加至Chrome】,就说明安装浏览器插件成功!
记得固定这个插件。

二、如何使用

比如我用之前的这篇文章生成的页面试一下👇👇👇
Claude Code 打通 Figma 实测,2 分钟搞定产品UI界面(附保姆级安装教程)
你点击一下右上角的Liaison插件,它就会出现底部的控件。

1. 基础figma面板调整

你点击页面中的任何一个元素,它就会自动出现像figma一样的编辑器面板,如下图。
可以修改字体、自动布局、颜色和样式。
比如调整间距、填充颜色、调整圆角等。
添加效果,比如添加投影、添加描边和添加填充等等。
如果你调整得不是很满意,右上角有一个撤回的按钮。
如果你想把刚刚修改好这个组件的样式复制到其他一样的组件怎么办?
点击右上角的【共享元素】,你修改其中一个组件的颜色,其他组件就会跟着一起修改。
如果你点击修改字体的胡啊,它会自动弹出是否允许允许你电脑上面的字体,非常方便,直接点击【允许】就可以了。
这样就可以一键修改你喜欢的字体了。

2. 标尺

我们点击底部控件的第二个功能【标尺】,这个功能非常适合我们设计师做设计验收。
点击页面任意一个元素就可以查看它们之间的间距。

3. 评论

点击控件的第三个按钮【评论】
比如我们修改一下我选择的这个图标,如下图,说改变图标,点击【保存评论】
这样AI就会根据你评论的内容作修改。

4. 自动布局

这个功能用过figma的都知道,直接拖动卡片就能交换卡片的位置。

5. 配置

点击控件的最后一个按钮,你会看到,刚刚修改的内容都在这个配置列表中,比如刚刚的评论。
然后我们点击【复制提示词】,把提示词发给对应的AI编程工具,它就会还原出你想要的效果
或者如果你有对接的开发程序员,你也可以直接导出json文件发给他们修改。
所以Liaison 解决的就是一个核心问题:让你不用再跟 AI 比划着说话。
以前改个稿,要么截图圈一圈发给 AI 碰运气,要么自己翻代码找位置,折腾半天效果还不好。
现在直接在页面上拖一拖、调一调,改完把提示词丢给 AI 就完事儿了,省心又精准。
工具不难,门槛也低,装个插件几分钟就能搞定。
如果你也经常用 AI 改设计改代码,真的建议试试,用过就回不去了。。
今天的分享就到这里,希望对你有帮助!
在日常的工作中,熟练掌握并组合使用这些优秀的工具,能极大提升我们的产出效率。
如果你也希望系统地提升自己的设计能力,优化日常的设计工作流,欢迎订阅我的《UI/UX设计知识库》。
在这里,我整理了自己多年积累的一线设计经验、实用的AI辅助设计技巧以及系统的组件规范。
内容会持续更新,希望能帮助你构建更扎实的设计知识体系,从容应对工作中的各种设计需求。
感兴趣的朋友可以点击下方链接了解详情,期待在知识库里与你相见👇👇
永久买断!这套All in one的 UI / UX 设计知识库,可能是你今年最值的投资

拓展阅读:

我用Canva一键配色,解决了海报配色难题,配色速度比以前快了 5 倍!

Claude设计总监:设计流程已死,取而代之的是以下这些……

我只花了5分钟,用AI开发了一个微信小程序!(附教程)

点赞转发推荐,祝您年薪亿万!