设计师 · 开发运维
精选 43 个开发运维工具,专为设计师日常工作精选。
-
Base64 转文件
粘贴原始 Base64 或 data URL, 本地解码、检查字节数并下载还原文件。
-
CSS 圆角生成器
圆角生成器,8 个角独立调,含 blob 不规则形状,实时预览,一键复制 CSS / SVG path。
-
大小写转换
一键转 camelCase、snake_case、kebab-case、PascalCase、Title Case、UPPER、lower —— 浏览器本地处理
-
色盲模拟器
色盲模拟器,粘贴 hex 或上传图,看红色盲/绿色盲/蓝色盲/全色盲眼里是什么样。
-
颜色对比度检测器
颜色对比度检测器,按 WCAG 2.2 标准实时判定 AA/AAA 是否过(普通文本 / 大文本)。
-
颜色格式转换
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转 —— 实时色板 + 对比度 —— 浏览器本地
-
CSS 按钮生成器
做出"真能按下去"的按钮 —— 3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS
-
CSS clamp() 流式字号生成器
CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。
-
CSS 滤镜生成器
拖滑块调 blur / brightness / contrast / grayscale / sepia / hue-rotate / saturate / invert / opacity + drop-shadow,实时预览,一键复制 filter 字符串
-
CSS 系统字体栈生成器
CSS 系统字体栈生成器, 跨 Win/Mac/Linux/Android/iOS 完整 fallback 链, 含 CJK 中日韩兜底, 一键复制 CSS / Tailwind / SwiftUI 代码。
-
CSS 美化与压缩
CSS 美化与压缩 —— 属性排序、规则缩进、展开或压缩。
-
CSS Grid 可视化生成器
CSS Grid 可视化生成器, 拖动配置列/行, 用 grid-area 命名区域 (header/sidebar/main 等), 一键复制 CSS + HTML, 含 12 套常用模板。
-
CSS Grid 网格生成器
CSS Grid 生成器,可视化设计网格 (行列/间距/区域),一键复制 CSS,响应式。
-
CSS Keyframes 动画生成器
可视化编排 @keyframes —— 增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS —— 浏览器本地
-
CSS 媒体查询生成器
CSS @media 查询 + 响应式断点生成器 —— Tailwind / Bootstrap / Material 预设,移动优先 vs 桌面优先,暗色模式、hover、降低动态、宽高比一站搞定。
-
CSS 压缩工具
CSS 压缩 —— 去注释空白、缩短颜色、合并选择器。体积小 30-60%。
-
CSS 滚动条生成器
可视化定制滚动条 —— 一次导出 WebKit + Firefox 标准两套 CSS,实时预览,一键复制 —— 纯浏览器本地
-
CSS 优先级计算器
把任意 CSS 选择器算成 (a, b, c) 三元组,对比哪条规则在层叠中胜出,并指出是哪一位分出的胜负 —— 浏览器本地
-
CSS transform 生成器
CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。
-
CSS 三角形生成器
用 border 技巧生成纯 CSS 三角形 —— 8 个方向、实时预览、border 与 clip-path 两种写法一键复制 —— 浏览器本地
-
CSS 变量去重工具
找出重复项并保留干净的CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量提取器
提取、去重并导出CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表转换器
转换CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表校验器
校验并解释CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量规范化工具
规范化、排序并整理CSS 变量，支持粘贴文本或上传本地文件。
-
三次贝塞尔曲线编辑器
CSS 缓动曲线编辑器, 拖两个控制点出曲线, 实时预览弹球 / 缩放 / 淡入三种动画, 一键复制 cubic-bezier 字符串。
-
文件转 Base64
上传小文件并本地转换成原始 Base64 或 data URL, 适合嵌入、fixture 和测试。
-
Flexbox 可视化 Playground 与 CSS 生成器
Flexbox 实战 Playground —— 在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。
-
字体文件检查器
上传 TTF 或 OTF, 提取字体族、PostScript 名、版本、em 单位、字形数和表清单。
-
HTML 颜色代码表
HTML 颜色代码表 —— 147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。
-
HTML 表单提取器
上传或粘贴 HTML, 提取表单、method、action、字段、label、required、autocomplete、密码字段和安全风险。
-
HTML 压缩工具
HTML 压缩 —— 去注释、空白、可选属性、内联 CSS/JS。体积小 40-60%。
-
图片压缩器（本地）
图片压缩器，JPG/PNG/WebP 本地压缩不上传，质量滑块、批量、压缩前后对比。
-
图片元数据检查
检查 PNG、JPEG、GIF、WebP、SVG 的尺寸、位深、ICC、EXIF、XMP、动画和备注。
-
JS 压缩工具
JavaScript 压缩 —— 去注释、空白、可选变量名缩短。体积小 40-70%。
-
Meta 标签生成器
SEO meta 标签生成器 —— title / description / Open Graph / Twitter Card / Schema.org。
-
Mock 数据生成器
生成真实感强的 JSON / CSV / SQL 测试数据 —— 姓名、邮箱、日期、地址、嵌套对象。
-
PX REM EM 换算器
CSS px ↔ rem ↔ em 互转 —— 可视化尺度对比,根字号可调。
-
SVG 资源审计
审计 SVG 的 viewBox、尺寸、脚本、外部引用、样式、ID、class、title 和 desc。
-
SVG 优化压缩器
SVG 优化压缩器, 去注释 / metadata / 空属性 / 圆角小数, 合并无用 group, 100% 浏览器本地不上传, 平均能压 30-60%。
-
SVG 转 Data URI / CSS 背景
把 SVG 内联成 data URI —— URL 编码(更小)或 base64 —— 直接给出可粘的 CSS、HTML、纯 URI,并排体积对比,100% 浏览器本地。
-
Tailwind CSS 速查表
Tailwind CSS 速查表,100+ 工具类(间距/颜色/flex/grid/排版/响应式),带实时预览。
-
字号比例阶生成器
选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS —— 浏览器本地