CSS Extractor for Lanhu

从蓝湖网站上提取CSS代码并打印到控制台

安装此脚本？

提问、发表评价或者举报此脚本。

作者

y666666666

日安装量

总安装量

评分

0 0 0

版本

1.0.0

创建于

2025-09-05

更新于

2025-09-05

大小

27.2 KB

许可证

MIT

适用于

lanhuapp.com

CSS 提取器使用说明

简介

CSS 提取器是一个专为蓝湖设计平台开发的浏览器插件，能够自动从蓝湖设计稿中提取 CSS 样式并转换为 Tailwind CSS 类名。这个工具可以大大提高前端开发效率，减少从设计稿到代码的转换时间。

功能特点

自动提取：从蓝湖设计稿中自动提取 CSS 样式
双格式支持：同时提供标准 CSS 和 Tailwind CSS 格式
实时更新：设计稿变化时自动更新提取的样式
便捷复制：双击即可复制样式代码
可拖动界面：弹窗支持自由拖动定位
回到原位：一键将弹窗恢复到初始位置
视觉反馈：复制成功时提供明确的视觉反馈

安装方法

确保已安装支持用户脚本的浏览器扩展（如 Tampermonkey）
将脚本代码复制到 Tampermonkey 中创建新脚本
保存脚本并确保已启用

使用方法

基本使用流程

打开蓝湖网站 (https://lanhuapp.com/)
进入任意设计稿页面
当选中设计元素时，CSS 提取器会自动弹出
弹窗中会显示提取的 CSS 样式和对应的 Tailwind 类

界面说明

弹窗界面包含以下元素：

标题栏：显示"CSS 提取器"标题，可用于拖动弹窗
回到原位按钮：点击将弹窗恢复到初始位置
关闭按钮：关闭弹窗
标签页：切换 CSS 和 Tailwind 视图
复制提示：提示用户双击可复制内容
内容区域：显示提取的样式代码

操作指南

查看提取的样式

在蓝湖设计稿中选择任意元素
CSS 提取器弹窗会自动显示并提取样式
默认显示 Tailwind 格式，可点击"CSS"标签切换到标准 CSS 格式

复制样式代码

双击内容区域中的代码
代码会自动复制到剪贴板
成功复制时，内容区域会短暂变为绿色提示复制成功

移动弹窗位置

鼠标悬停在标题栏上（光标会变为移动图标）
按住鼠标左键并拖动到期望位置
释放鼠标按键完成移动

恢复弹窗位置

点击标题栏右侧的循环箭头图标按钮
弹窗会平滑过渡回到初始位置（右上角）

关闭弹窗

点击标题栏右侧的 X 图标
弹窗会关闭（下次选择设计元素时会再次显示）

提取的样式属性

CSS 格式包含

宽度和高度
背景颜色
边框样式和圆角
字体大小、颜色和粗细
其他原始 CSS 属性

Tailwind 格式转换

自动将 CSS 属性转换为对应的 Tailwind 类名：

width → w-[值]
height → h-[值]
background → bg-[值]
border-radius → rounded-[值]
font-size → text-[值]
color → text-[值]
font-weight → 对应的 Tailwind 字重类名

注意事项

插件仅在蓝湖网站 (lanhuapp.com) 域名下生效
提取的 CSS 样式会同时显示在控制台和弹窗中
窗口大小调整时，弹窗位置会自动修正以保持在可视区域内
拖动过程中弹窗会略微缩放和透明化以提供视觉反馈

故障排除

如果 CSS 提取器未正常工作，请尝试以下步骤：

确认已在蓝湖网站上并已打开设计稿
检查浏览器控制台是否有初始化提示信息
刷新页面重新加载脚本
确认 Tampermonkey 已启用该脚本

技术说明

使用 MutationObserver 监听蓝湖界面变化
通过防抖函数优化性能，避免频繁更新
使用 CSS 动画提供流畅的交互体验
支持拖放功能和位置记忆