🌟 诞生背景

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

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

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

插件信息

插件名字：CSS 代码过滤器

插件地址：chromewebstore.google.com/detail/css-…

效果演示动图

🚀 核心功能

1. 智能属性搜索

• 支持模糊搜索和缩写匹配（如 w -> width，bg -> background）
• 实时过滤显示匹配的 CSS 属性
• 支持多属性同时选择

2. 方案管理

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

3. 便捷操作

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

📝 使用方法

1. 创建属性方案

   • 点击"新增方案"（例如：创建"布局方案"包含 width、height、margin 等属性）
   • 输入方案名称
   • 选择需要的 CSS 属性
   • 保存方案

2. 提取 CSS 代码

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

🤝 支持作者

如果你觉得这个工具对你有帮助，欢迎：

• 在 B 站关注作者：作者主页
• 赞助支持：赞助链接

🎉 结语

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

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