UD5工具箱
CSS 背景图案生成器 - 条纹/点/网格重复背景
通过可视化参数生成纯 CSS 的背景图案（斜条纹、圆点、方格等），实时调整颜色和尺寸。
设计工具 - UI辅助与视觉创作
共 99+ 款工具WCAG 颜色对比度检查器 - 无障碍合规性测试
输入前景和背景颜色，计算对比度比率并评估是否满足 WCAG AA/AAA 级标准，助力无障碍设计。
图片调色板提取工具 - 从图像分析主要颜色
上传图片，提取前 N 个主导颜色及其占比，生成配色板供设计使用，支持导出 HEX 数组。
专辑封面配色提取器 - 抓取音乐封面生成色板
输入歌曲或专辑名，搜索封面图并自动提取主色调，生成音乐风格调色板。
有机形状/气泡生成器 - CSS border-radius 不规则圆形
拖拽控制点创建不规则、有机感的圆角形状，生成对应的 border-radius 代码。
CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果
展示多种组合好的 CSS filter 效果（如 1977、古铜色），点击图片应用并复制代码。
渐变边框生成器 - 使用 border-image 或 background-clip
生成带有渐变颜色的边框效果，支持 border-image 和 background-clip 两种实现方式。
HSL 颜色微调器 - 滑块调节色相/饱和度/亮度
使用三个滑块精细调整 HSL 各分量，实时预览颜色并复制十六进制或 RGB。
黄金螺旋叠加工具 - 构图参考线生成
在图片上叠加黄金螺旋和黄金比例网格，辅助摄影或绘画构图分析。
混合模式叠加实验室 - 图层与颜色交互
选择两张图片或纯色图层，切换 multiply、screen、overlay 等混合模式，预览并生成 CSS。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
聊天消息预览模拟器 - 生成仿 IM 截图
自定义发送者和消息内容，生成逼真的聊天对话界面截图，用于演示或原型。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
CSS Transform 在线生成器 - 平移/旋转/缩放/倾斜 可视化
拖拽或输入数值组合多个 CSS transform 函数，实时观察元素变换效果并获取代码。
CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览
选择不同的混合模式并调整背景与前景，实时查看混合效果，支持所有标准混合模式。
邮件通讯预览 - 不同邮箱客户端模拟
粘贴邮件HTML代码，在类似Gmail、Outlook的模拟框中预览效果。
彩虹文字生成器 - 渐变流动动画文字
生成背景渐变动画并使用 background-clip 填充文字的彩虹效果代码。
CSS 计数器样式在线预览 - 自定义有序列表标记
选择不同的 list-style-type（disc, decimal, lower-roman 等）并实时查看列表样式渲染效果。
CSS 滤镜组合效果演示 - 实时对比
对图片应用多种滤镜组合，对比原图与效果，学习 filter 属性的视觉影响。
加载动画合集 - 纯 CSS 旋转器/骨架屏
展示数十种纯 CSS 的加载动画和骨架屏效果，点击复制代码直接使用。
色盲模拟器(图片版) - 上传照片看各种色觉障碍效果
上传图片，选择不同色觉障碍类型，实时预览在这些色觉下的效果，辅助设计。
巡演海报设计器 - 复古摇滚风格
填写乐队名、日期与城市，生成一张老式丝印风格巡演海报。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
自定义Lorem Ipsum生成器 - 主题假文与词汇注入
可混入指定关键词的Lorem Ipsum生成器，支持段落、列表与HTML标记，更真实模拟内容。
线框图批注工具 - 上传评论导出
上传设计原型或截图，在特定位置添加编号气泡式评论，方便反馈收集。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
Emoji 转 Favicon 生成器 - 快速创建网站图标
选择一个 Emoji 作为图标，生成标准尺寸的 .ico 和 PNG 文件，直接用作网站 Favicon。
演唱会歌单海报生成 - 复古歌单排版
输入艺人名与曲目，自动生成一份模拟演唱会实况的歌单海报图片。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离，生成新拟态风格按钮/卡片样式并导出代码。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
餐车菜单板设计 - 粉笔效果字体生成
输入菜品与价格，生成复古黑板风格的菜单图片。
画面宽高比计算器 - 16:9/4:3/21:9尺寸推导
给定一个边长或对角线，根据常见比例计算另一边长或分辨率。
设计令牌 (Design Tokens) 编辑器 - 跨平台样式变量管理
结构化编辑颜色、间距、字体等设计令牌，一键导出为CSS自定义属性、SCSS变量或JSON。
灰度对比度检测 - 视觉重量分析
输入两种颜色，显示它们的灰度值并对比视觉重量，适用于层次设计。
围墙花园生成器 - 植物规划布局
在网格上拖拽放置树木、花坛、路径等元素，设计梦想花园布局图。
步骤进度指示器生成器 - 多步流程可视化
设置步骤数量和当前步骤，生成带连线的步骤进度条，常用于结账或表单引导。
渐变断点可视化编辑器 - 拖拽色标调整渐变
在渐变条上拖拽添加和移动色标，调整颜色和位置，实时输出 CSS linear-gradient 代码。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。
标签云生成器 - 输入词语频率生成CSS
输入词汇及其权重，生成可交互的HTML标签云。
颜色对比度实时分析器 - 多标准WCAG AA/AAA检测
支持任意格式颜色输入，计算对比度并显示WCAG 2.1各级别通过情况，含颜色建议。
互动渐变探索器 - 抓取渐变色标移动
在色带任意位置点击添加色标并拖拽，感受渐变设计。
高级CSS图案背景库 - 精选条纹/圆点/棋盘
浏览数十种纯CSS实现的几何背景图案，一键复制代码。
社媒封面图制作 - 预设尺寸文字叠加
按Facebook/Youtube/Twitter标准尺寸生成背景，叠加文字，下载封面。
CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动，实时预览弹跳或淡入效果，生成cubic-bezier值。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
房间2D家具布局 - 拖拽俯视图看摆放
设定房间尺寸，拖拽床、桌等平面图标到画布，简易规划空间。
极简Logo生成器 - 图标+文字组合设计
选择简约图标库，搭配字体与颜色，导出PNG简易Logo。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
网页配色提取器 - 分析任意网站CSS变量
输入公开网站URL，抓取并展示其使用的CSS自定义属性（颜色）调色板，设计灵感源泉。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
首屏大图构建器 - 标题/按钮/背景
设计带有大标题、描述、CTA 按钮和背景图的首屏区域，生成完整代码。
几何图案生成器 - 重复网格与对称设计
选择对称组类型（p6m, p4m 等），绘制基础形状并自动生成无限重复的几何图案。
基线网格覆盖层生成器 - 垂直韵律对齐
在页面上叠加可调节的基线网格，可视化检查文字是否对齐基线，实现精确排版。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
Lorem Pixel 占位图生成器 - 指定尺寸类别
生成指定宽度和高度的占位图片，可选择类别（自然、人物、抽象）和灰度。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图，指定尺寸，下载用于原型。
咖啡馆菜单板设计器 - 粉笔字风格生成
用类似粉笔的字体和装饰元素设计黑板风格的菜单板图片，适合小店使用。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
纸上原型拼接 - 快速线框屏幕流
提供常见UI组件的粗线框风格，拖拽拼接屏幕流程。