哈喽，大家好，我是萤柳！
用 AI 写代码经常说不清要改哪里，一点一点截图告诉他又比较麻烦。
特别是没有UI基础的独立开发者，有时候你明明知道这里不对，但是就是说不出哪里不对。
比如“这个按钮往左挪一点”、“这个间距看着不舒服”，AI 听完一脸懵，你自己也说不清楚到底要挪多少、间距改多大。
复制代码吧，又费劲又容易出错。
反正就是：脑子里知道要改啥，嘴上说不出，手上改不了。
后面我发现了一个叫 Liaison 的 Chrome 插件，直接在网页上像用 Figma 一样可视化调整
改完一键复制提示词给AI改或者导出 JSON，丢给 AI 它就能精准定位、按你的要求改。
今天就给大家分享这玩意儿怎么装、怎么用。
一、如何下载？
链接：https://chromewebstore.google.com/
在上面这个链接搜【Liaison】
搜出来的第一个链接就是了。
直接点击【添加至Chrome】，就说明安装浏览器插件成功！
记得固定这个插件。
二、如何使用
比如我用之前的这篇文章生成的页面试一下
你点击一下右上角的Liaison插件，它就会出现底部的控件。
基础figma面板调整
你点击页面中的任何一个元素，它就会自动出现像figma一样的编辑器面板，如下图。
可以修改字体、自动布局、颜色和样式。
比如调整间距、填充颜色、调整圆角等。
添加效果，比如添加投影、添加描边和添加填充等等。
如果你调整得不是很满意，右上角有一个撤回的按钮。
如果你想把刚刚修改好这个组件的样式复制到其他一样的组件怎么办？
点击右上角的【共享元素】，你修改其中一个组件的颜色，其他组件就会跟着一起修改。
如果你点击修改字体的胡啊，它会自动弹出是否允许允许你电脑上面的字体，非常方便，直接点击【允许】就可以了。
这样就可以一键修改你喜欢的字体了。
标尺
我们点击底部控件的第二个功能【标尺】，这个功能非常适合我们设计师做设计验收。
点击页面任意一个元素就可以查看它们之间的间距。
评论
点击控件的第三个按钮【评论】
比如我们修改一下我选择的这个图标，如下图，说改变图标，点击【保存评论】
这样AI就会根据你评论的内容作修改。
自动布局
这个功能用过figma的都知道，直接拖动卡片就能交换卡片的位置。
配置
点击控件的最后一个按钮，你会看到，刚刚修改的内容都在这个配置列表中，比如刚刚的评论。
然后我们点击【复制提示词】，把提示词发给对应的AI编程工具，它就会还原出你想要的效果
或者如果你有对接的开发程序员，你也可以直接导出json文件发给他们修改。
所以Liaison 解决的就是一个核心问题：让你不用再跟 AI 比划着说话。
以前改个稿，要么截图圈一圈发给 AI 碰运气，要么自己翻代码找位置，折腾半天效果还不好。
现在直接在页面上拖一拖、调一调，改完把提示词丢给 AI 就完事儿了，省心又精准。
工具不难，门槛也低，装个插件几分钟就能搞定。
如果你也经常用 AI 改设计改代码，真的建议试试，用过就回不去了。。
热门跟贴