一款功能强大的 Chrome 扩展，让 CSS 编辑变得简单、直观、高效！
不仅支持 Tailwind CSS 项目的实时样式调试，还扩展到所有普通网站，让你随时修改任何元素的样式。
- 智能悬停预览 - 鼠标悬停即可预览元素信息
- 一键选择锁定 - 点击选择并锁定元素进行编辑
- 高亮显示边界 - 清晰显示选中元素的边界和尺寸
- DOM 树导航 - 可视化 DOM 结构，支持父子级元素快速切换
- Tailwind CSS 模式 - 专为 Tailwind 项目优化
- 智能类名搜索和自动补全
- 实时预览样式效果
- 类名分组管理
- 快速添加/移除类名
- 原生 CSS 模式 - 通用 CSS 编辑
- Monaco Editor 集成，提供语法高亮和智能提示
- CSS 代码格式化和美化
- 自定义样式规则编写
- 支持 CSS 预处理器语法
- 浮动编辑卡片 - 跟随鼠标的智能编辑面板
- 实时样式预览 - 所见即所得的编辑体验
- 多标签页界面 - 样式编辑、动画制作、布局系统、交互原型四大功能区
- 撤销/重做系统 - 完整的操作历史记录和撤销机制
- 120+ 动画预设 - 涵盖入场、出场、强调、循环等各类动画效果
- 可视化动画编辑器 - 拖拽式动画参数调整
- 实时动画预览 - 即时查看动画效果
- 动画代码导出 - 一键复制生成的 CSS 动画代码
- 缓动函数库 - 内置多种缓动函数，支持自定义贝塞尔曲线
- Grid 布局助手 - 可视化 CSS Grid 编辑
- 智能网格线显示
- 拖拽式网格区域定义
- 预设布局模板
- Grid 属性实时调整
- Flexbox 布局助手 - 弹性布局可视化
- 主轴/交叉轴方向控制
- 对齐方式可视化调整
- 弹性项目属性编辑
- 响应式布局预设
- 中文 - 完整的中文界面和文档
- English - Full English interface and documentation
- 智能语言切换 - 一键切换界面语言
- TypeScript 5.9.2 - 类型安全的 JavaScript 超集
- Monaco Editor 0.52.2 - VS Code 同款代码编辑器
- Chrome Extension Manifest V3 - 最新的扩展开发标准
- Webpack 5 - 现代化模块打包工具
- CSS3 + HTML5 - 现代 Web 标准
src/
├── content/ # 内容脚本
│ ├── content.ts # 主要功能逻辑
│ ├── content.css # 样式文件
│ └── lumiCSSFix.ts # 样式修复工具
├── background/ # 后台脚本
├── popup/ # 弹出窗口
├── utils/ # 工具模块
│ ├── i18n.ts # 国际化
│ ├── interaction-helper.ts # 交互原型助手
│ └── prettier-formatter.ts # 代码格式化
- 打开 Chrome 网上应用店
- 搜索 "LumiCSS"
- 点击"添加至 Chrome"进行安装
- 从 GitHub Releases 下载最新版本
- 解压缩文件
- 打开 Chrome 浏览器，进入
chrome://extensions/ - 开启"开发者模式"
- 点击"加载已解压的扩展程序"，选择解压后的文件夹
- 方式一：点击浏览器工具栏中的 LumiCSS 图标
- 方式二：使用快捷键
Ctrl+Q(Mac:Cmd+Q) - 方式三：右键页面选择"启用 LumiCSS"
- 鼠标悬停在页面元素上，查看元素信息预览
- 点击元素选中并锁定，弹出编辑面板
- 使用 DOM 树导航切换父子级元素
- Tailwind 模式：搜索并添加 Tailwind 类名
- CSS 模式：直接编写 CSS 代码
- 实时预览样式变化
- 使用
Ctrl+S应用更改
- 切换到"动画制作"标签页
- 选择预设动画效果
- 调整动画参数
- 预览并应用动画
- 切换到"布局"标签页
- 选择 Grid 或 Flexbox 布局
- 使用可视化工具调整布局属性
- 应用预设布局模板
🎯 可视化元素选择
┌─────────────────────────────────────┐
│ 🖱️ 鼠标悬停预览 │
├─────────────────────────────────────┤
│ • 元素标签名和类名 │
│ • 元素尺寸和位置信息 │
│ • 样式属性快速预览 │
│ • 高亮显示元素边界 │
└─────────────────────────────────────┘
🔄 双模式编辑
Tailwind CSS 模式
/* 搜索并添加类名 */
<div class="bg-blue-500 hover:bg-blue-600 rounded-lg p-4">
Tailwind 组件
</div>原生 CSS 模式
/* Monaco 编辑器 - 智能提示 */
.my-component {
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
border-radius: 0.5rem;
padding: 1rem;
transition: all 0.3s ease;
}
.my-component:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}🚀 动画制作工厂
/* 120+ 预设动画效果 */
/* 淡入动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 弹跳入场 */
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
/* 摇摆强调 */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}📐 智能布局系统
CSS Grid 布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 1rem;
}Flexbox 布局
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}| 功能 | Windows/Linux | macOS |
|---|---|---|
| 激活/关闭助手 | Ctrl + Q |
Cmd + Q |
| 应用样式更改 | Ctrl + S |
Cmd + S |
| 撤销操作 | Ctrl + Z |
Cmd + Z |
| 关闭编辑面板 | Esc |
Esc |
| 切换编辑模式 | Ctrl + M |
Cmd + M |
| 复制元素代码 | Ctrl + C |
Cmd + C |
- 默认编辑模式 - 选择 Tailwind 或 CSS 模式
- 界面语言 - 中文/英文切换
- 快捷键自定义 - 自定义键盘快捷键
- 主题选择 - 深色/浅色主题
- 代码格式化 - 自动格式化 CSS 代码
- 智能提示 - 开启/关闭代码补全
- 语法高亮 - CSS 语法着色
- 自动保存 - 实时保存编辑内容
- 快速原型制作 - 在浏览器中直接调试样式
- 响应式设计测试 - 实时查看不同屏幕尺寸的效果
- 动画效果调试 - 可视化调整动画参数
- 布局问题排查 - Grid/Flexbox 可视化调试
- 设计稿还原 - 精确调整元素样式匹配设计
- 交互效果制作 - 制作悬停、点击等交互效果
- 动画创意实现 - 快速实现各种动画创意
- 视觉效果优化 - 调整颜色、阴影、渐变等视觉效果
- CSS 教学演示 - 实时演示 CSS 属性效果
- 前端技能培训 - 直观展示布局和动画原理
- 代码学习辅助 - 边写边看效果，加深理解
- 个人博客美化 - 自定义博客样式
- 企业网站调优 - 优化网站视觉效果
- 用户体验改进 - 调整交互和动画效果
- ✅ 基础可视化编辑功能
- ✅ Tailwind CSS 和原生 CSS 双模式支持
- ✅ 120+ 动画预设效果库
- ✅ Grid/Flexbox 布局可视化工具
- ✅ 交互原型功能
- ✅ 多语言支持 (中文/英文)
- ✅ 完整的帮助文档和使用指南
我们欢迎所有形式的贡献！无论是代码改进、功能建议、bug 报告还是文档完善。
- Fork 本项目
- 创建你的功能分支 (
git checkout -b feature/AmazingFeature) - 提交你的更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开一个 Pull Request
# 克隆项目
git clone https://github.com/lumicss/lumicss.git
cd lumicss
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建生产版本
npm run build- 使用 TypeScript 进行开发
- 遵循 ESLint 代码规范
- 提交前运行
npm run build确保构建成功 - 编写清晰的提交信息
- Tailwind CSS - 原子化 CSS 框架
- Monaco Editor - 代码编辑器
- Chrome Extension - Chrome 扩展开发
本项目采用 Apache 2.0 协议开源。
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
Copyright 2024 LumiCSS
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
感谢以下开源项目和技术的支持：
- Monaco Editor - 提供强大的代码编辑功能
- Tailwind CSS - 启发了 CSS 原子化的设计思想
- Prettier - 代码格式化工具
- TypeScript - 类型安全的 JavaScript
- Webpack - 模块打包工具
特别感谢所有为本项目贡献代码、提出建议和报告问题的开发者们！
Made with ❤️ by LumiCSS Team
让每一行 CSS 代码都闪闪发光 ✨