CSS 代码过滤器:设计工具代码提取利器

:star2: 诞生背景

在前端开发工作中,我们经常遇到这样的场景:

  1. 从 Figma、摹客、蓝湖 等设计工具中复制样式代码
  2. 需要从冗长的 CSS 中提取特定属性(如布局、字体、背景 等)
  3. 手动筛选过程繁琐且容易遗漏

为了解决这个效率问题,我用 Cursor 开发了『CSS代码过滤器』浏览器插件,让代码提取变得简单高效。

插件信息

插件名字:CSS 代码过滤器

插件地址:https://chromewebstore.google.com/detail/css-代码过滤器/lagekjeidhfjnofmoegfifcckdnilelj?hl=zh-CN

效果演示动图

功能演示.gif

:rocket: 核心功能

1. 智能属性搜索

  • 支持模糊搜索和缩写匹配(如 wwidthbgbackground
  • 实时过滤显示匹配的 CSS 属性
  • 支持多属性同时选择

2. 方案管理

  • 支持创建、保存、更新和删除常用的属性组合方案
  • 方案数据本地持久化存储
  • 快速切换不同的属性组合

3. 便捷操作

  • 一键复制过滤后的代码
  • 智能的属性选择界面
  • 清晰的已选属性展示

:memo: 使用方法

  1. 创建属性方案

    • 点击"新增方案"(例如:创建"布局方案"包含 width、height、margin 等属性)
    • 输入方案名称
    • 选择需要的 CSS 属性
    • 保存方案
  2. 提取 CSS 代码

    • 从设计工具复制 CSS 代码
    • 选择已有方案或直接选择需要的属性
    • 点击"过滤 CSS 代码"
    • 获取过滤后的结果并使用

:handshake: 支持作者

如果你觉得这个工具对你有帮助,欢迎:

:tada: 结语

『CSS 代码过滤器』源于实际开发中与设计工具协作的需求,致力于提升前端开发效率。它能让你的样式代码处理工作变得更加轻松。无论你是刚开始接触前端还是经验丰富的开发者,相信这个工具都能为你的工作带来便利。

欢迎下载使用,也期待你的反馈和建议!


1 Like

图片挂的

是看不到图片吗?

更新了一下图床地址,请问现在可以正常看到吗

加个收藏,说不定以后能用到

感谢老哥支持~