hello～hello～大家好，又是我一乐！10 月过得也太快了，尤其夹了个 8 天国庆，眨眼就奔月底了👌。不过对年过三十的我来说，已经不敢像以前那样疯玩整个假期，倒是挤时间捣鼓出了个新 Chrome 插件 ------ 解决了我最头疼的 "标签页爆炸 + 找不到东西" 的问题。
先放张摸鱼证据(不是)(缘神启动～)
一、为啥要做这个插件？全是打工人的痛！
不知道你们有没有这种 "肌肉记忆"：用惯了飞书的Command+K万能搜索后，不管在 IDE、微信还是浏览器里，想找东西时手都会下意识按Command+K------ 然后才反应过来 "哦，这不是飞书"。
飞书这搜索是真的香啊，放张图你们感受下，啥都能搜，张小龙快抄作业！
更难受的是浏览器:我平时写代码、查文档，开着开着标签页就成了 "蜘蛛网"，有时候想找半小时前开的文档，得一个个翻；同事更夸张，标签页堆得只剩图标，点错是日常。
于是我就想：能不能搞个 Chrome 版的Command+K？既能一键打开常用 URL，又能搜标签页和收藏夹。
至于开发过程，基本靠 AI（ChatGPT 写代码），对 "AI 辅助编码" 感兴趣的朋友，可以看我上篇文章👉《# 用AI开发Chrome插件1个月,我抓住了AI编程的核心:"转产品!"》。今天重点聊Figma AI 救我审美的过程------ 毕竟后端的 UI 审美，你们懂的...
二、Figma AI：从 "土味 UI" 到 "Chrome 原生风"，只需要一个 Prompt
稍微调教一番我的trae之后,基本就实现了这个功能,只是AI的审美,也不是说不能用,就是总觉得怪怪的,先给大家看看初版的UI免得说我污蔑人家： 
产品定位与核心目标：Chrome 浏览器效率插件，核心功能为「一键打开预设多 URL」+「快捷键（Command/Windows+K）唤醒搜索框（搜索已开标签页 / 收藏夹书签）」，面向职场人、学生等高频浏览器使用者，目标是通过轻量化 UI 简化网页管理操作，确保操作直观、响应快速，且视觉不干扰 Chrome 原生使用场景。
UI 风格要求：严格贴合 Chrome 原生视觉规范，扁平化极简风 ------ 配色以低饱和中性蓝、浅灰为主，无渐变 / 复杂阴影；字体用系统无衬线字体（如 Roboto、SF Pro）；所有元素轻量化，不添加冗余装饰（无插图、无动态特效），仅保留功能必需的 UI 组件。
需设计的核心 UI 模块：
- 插件图标（3 个尺寸：16×16px、48×48px、128px，用于 Chrome 工具栏及扩展管理页）；
- 插件弹出面板（点击工具栏图标触发，作为功能入口，需包含 "打开预设 URL" 按钮及 "快捷键提示"）；
- 配置页面（用于管理预设 URL、修改快捷键）；
- 居中搜索框（快捷键唤醒，用于显示搜索输入区及匹配结果）。
这是它给我的UI稿件,全程没有多余的操作,原图直出,样式说不上多好看,但至少做到了我要求的简洁清晰,风格统一 
如果你们想看完整的 UI 细节，私我发你 Figma 链接～作为一个后端，真心觉得这效率比我自己瞎画强 10 倍。
三、干货：让 AI 精准还原 Figma UI，3 个关键点
接下来比较麻烦的就是怎么让ai基于这套UI重新画一下页面了,众所周知啊,让AI改它自己写的东西真的是改一行崩三行,尤其是遇到"我决定重新生成一个文件覆盖当前内容"的时候,只能准备回滚吧
这是我直接用mcp让他帮我生成的，给我整笑了： 
我翻了Figma官网的 AI 使用指南，又踩了几次坑，总结出 "三板斧" 技巧，亲测能让 AI 顺顺利利还原 UI：
1. 第一斧：给 AI 看 "UI 细节截图"
光说 "按 Figma 来" 没用，AI 看不到图就会瞎猜。我把 Figma 里的每个模块（比如按钮、输入框、列表项）都截高清图，贴进对话框，告诉 AI："这个是搜索框的输入区，左边要放大镜图标，右边要清除按钮；这个是结果列表"。
这样 AI 能精准 get 每个元素的样式，不会漏细节。
2. 第二斧：把 Figma 的 "Code 目录" 喂给 AI
Figma 设计稿能导出前端代码（在 "Code" 面板里），我把每个组件的 HTML/CSS 代码复制下来，丢给代码 AI，说："这是 Figma 生成的 UI 代码，你写插件前端时，要复用这些样式（比如颜色、间距、圆角），别自己瞎写。"
举个例子，Figma 导出的按钮 CSS 是这样的：
css
.button-primary {
width: 100%;
height: 40px;
border-radius: 6px;
background: #4285F4;
color: #fff;
border: none;
font-size: 14px;
}我直接让 AI 用这个样式，省得它自己生成个按钮，还要我调。
3. 第三斧：用 Figma MCP，但记得 "先转 UI 稿"
Figma 有个 MCP（Multimodal Content Processing）功能，能让 AI 读取设计稿的结构。我把 Figma 链接贴给 AI，让它 "分析这个设计稿的组件层级" 
但这里有个大坑： Figma AI 生成的 "Make 文件" 不能直接用！必须开会员把 Make 文件转成实际的 UI 稿，再用 MCP 读取。
最后：插件已上架 Chrome 商店，欢迎体验！
折腾了 7 天，插件终于能用上了：按Command/Windows+K能搜标签页和收藏夹，点击插件图标能一键打开常用 URL，再也不用跟 "标签页蜘蛛网" 较劲了。
插件链接放这了，直接搜 "QuickFind" 也能找到，支持的话给个 5 星呗～chromewebstore.google.com/detail/quic...
我是一乐，一个喜欢用 AI 偷懒提效的后端。后续还会分享 "AI 辅助开发" 的小技巧,欢迎点赞收藏支持一波 每次后台看到+1我都会很开心很开心的~