🎨 设计创意工具

按「角色 + 任务 + 上下文 + 输出格式 + 约束」五要素拼装结构化提示词：选择任务类型与输出格式、填写目标对象与约束条件，即可得到一段可直接复制的提示词…

设置列数、列宽方式、间距与断点，快速生成 CSS Grid 布局并一键复制 CSS 与 HTML 代码。

以可视化方式编排 CSS 关键帧动画，调整时长、缓动与属性并实时预览，生成可直接使用的 @keyframes 代码，纯前端。

按幻灯片页数、演讲总时长、每页要点数与字号规划演示节奏：给出每页平均时长、每要点可用时间、全文可讲字数与建议的每页正文上限，并推算字号的最大观看距离、单页动画…

在线节拍器，使用 Web Audio API 提供精准节拍并支持多种拍号，适合练习乐器与节奏训练。

输入网址或文本，生成可定制尺寸、容错与颜色的二维码，支持导出，便于名片、海报与物料上的信息快速扫码。

在网格上点击上色绘制像素画，可调整网格大小与调色板，完成后导出为字符画或 CSS 代码。

选择需要适配的设备断点，自动生成移动优先（min-width）的媒体查询 CSS 代码。

按目标总字数与章数规划小说结构：输出每章平均字数、完成周期，按三幕（25/50/25）、四段起承转合（20/30/30/20）或均匀模式切分各幕字数与章数，并…

输入数字生成 EAN-13 等常见条形码图片，自动计算校验位，用于商品标签、仓储与演示，纯前端生成可下载条码。

拖动控件调整盒阴影的偏移、模糊、扩散与颜色并生成 CSS，支持内阴影与多层阴影，方便前端快速获得阴影样式。

调粒子数量、速度、颜色与引力等参数实时预览粒子动画，导出 canvas 代码或图片，用于网页背景与活动页特效，纯前端。

调节参数生成可平铺重复的 CSS 背景纹理（点阵、网格、波浪等），实时预览并导出代码，用于网页与 UI 背景装饰。

可视化设置边框宽度、样式、圆角与配色并生成 CSS，支持单边独立设置，便于快速产出分隔线、卡片边框等样式代码。

分辨率 DPI 转换器，在像素尺寸与物理尺寸间互转并支持 DPI/PPI 计算，辅助印刷与屏幕图像输出。

焦距等效换算器，在不同画幅间换算等效焦距并对比视角、推荐镜头，辅助摄影器材选型。

色温 (Kelvin) 转换器

在光圈、快门速度与 ISO 之间做曝光等效换算，保持曝光量不变调整任一参数，辅助摄影曝光组合的选择。

输入光圈、焦距与拍摄距离，计算前景深、后景深与超焦距，帮助摄影者掌控清晰范围与散景效果，辅助构图决策。

照片存储计算器，根据相机分辨率、格式与拍摄数量估算所需存储卡空间，辅助备卡与容量规划。

输入像素或目标尺寸，计算照片宽高比（如 16:9、4:3）及另一边的对应长度，便于裁剪与多平台发布尺寸统一。

输入照片像素与打印 DPI，计算最佳打印物理尺寸并对照常见相纸规格，避免冲印模糊或浪费，便于摄影输出。

竞品对标加权评分：为「价格竞争力 / 功能完整度 / 使用体验 / 品牌信任 / 服务支持」五个维度分别给我方与竞品打分，按选定权重（均衡 / 重价格 / 重…

输入文本或链接，生成简化版 Aztec 二维码，用于票据与物流信息的移动端识读，纯前端本地生成不上传。

可视化调节圆角参数并实时生成对应的 CSS border-radius 代码，支持独立四角与百分比，便于前端快速套用。

可视化调节文字阴影的偏移、模糊与颜色，实时生成 CSS text-shadow 代码，便于标题与标语的质感效果设计。

可视化配置线性或径向渐变的起止颜色、角度与停靠点，实时生成 CSS gradient 代码，便于网页背景与按钮配色。

可视化调节偏移、模糊、扩散与颜色，实时生成 CSS box-shadow 代码，支持多层阴影，便于网页元素立体效果设计。

可视化调节外阴影与内阴影的偏移、模糊、扩散与颜色，提供常用预设，实时生成 CSS box-shadow 代码，便于 UI 质感设计。

✨ CSS动画生成器

在线 Favicon 生成器，上传图片或输入文字/emoji 生成多尺寸网站图标，支持圆角、背景与格式导出，一键下载 .ico 适配各浏览器，纯前端处理。

选择关键 flex 属性，立即得到对应的 display:flex CSS，并实时预览 1 / 2 / 3 个项目的排列效果。

输入字符串或用户名，按哈希算法生成对称的几何 Identicon 头像，常用于无头像用户的默认标识，纯前端生成。

完整 Material Design 色板，共 19 色系 × 10 阶色值。点击色块复制 HEX。

Tailwind CSS 配色板

可视化配置 Toast 提示的文案、位置、图标与动画，生成对应的 HTML/CSS/JS 代码片段，便于前端快速接入消息提示。

rem 相对根元素字体大小，做响应式与可访问性布局时常用来替代写死的 px。输入像素值与根字号即可得到 rem 值。

把以 rem 为单位的标注或设计稿按当前根字号反算成 px，便于落地到固定尺寸场景。

从指定颜色生成渐变工具，基于单个色值自动推导同色系或互补色渐变方案，调节角度与停靠点，实时预览并复制 CSS 渐变代码，纯前端运行。

CSS 加载动画（Spinner）在线生成器，提供旋转、圆环、点阵等多种动效模板，调节尺寸颜色速度后一键复制代码，用于网页加载占位，纯前端。

加载点动画（Loading Dots）在线生成器，可视化预览三点跳动等待动效，调节速度颜色后一键复制 CSS 代码，直接用于网页加载占位，纯前端。

拖拽式调整卡片的圆角、阴影、内边距与配色并生成 CSS，适合落地页与列表卡片，纯前端实时预览可复制样式代码。

在线图案生成器，基于 SVG 制作点阵、条纹、网格、波浪等无缝背景纹理，调节间距颜色与透明度，导出 CSS 背景代码用于网页装饰，纯前端。

生成均匀或错位的圆点纹理背景，可调点径、间距与颜色，用于包装、网页底纹与印刷稿，纯前端导出透明或纯色图片。

可视化调整元素四角圆角半径并实时生成 CSS 代码，支持独立设置各角，方便前端快速套用圆角样式，纯前端复制。

在线头像生成器，随机或按种子生成几何风、像素风、渐变风头像，可调整配色与形状，一键下载 PNG 或 SVG，适合社交账号与占位图，纯前端。

字体搭配推荐器，选择字体组合生成配套 CSS 代码，辅助网页与海报的字体搭配设计。

按倍数生成字号阶梯（如 1.25 比例），输出标题到正文的字号表与 CSS，帮助建立一致的排版层级，纯前端复制使用。

快速预览多种系统字体渲染效果，输入文字后实时对比不同字体的显示差异，点击卡片即可复制 font-family CSS 代码。

在线设计圆角或盾形徽章，调整文字、配色与图标并实时预览，导出图片用于活动标识、成就奖章与社交头像，纯前端生成。

支持鼠标和触摸，平滑曲线（quadraticCurveTo），可撤销，导出 PNG 透明背景。

可视化设置按钮的背景、圆角、阴影与悬停态并生成 CSS，支持多种风格预设，便于前端与设计师快速产出按钮样式代码。

输入文本或编号，生成简化版 Data Matrix 二维码，用于工业零件与物料的小面积标识，纯前端本地生成。

文字阴影（text-shadow）在线生成器，调节偏移、模糊、颜色与多层阴影，实时预览效果并一键复制 CSS 代码，适合标题装饰与网页视觉增强，纯前端。

调节距离、强度、模糊与底色等参数，实时生成新拟态（Neumorphism）风格的阴影与圆角CSS代码，方便UI设计师快速套用柔和立体的界面元素。

生成水平、垂直或斜向条纹背景纹理，可调条纹宽度与双色配色，用于包装、网页与印刷底纹，纯前端导出图片不上传。

生成可调格数与配色的棋盘图案，用于棋类演示、背景与游戏素材，可导出图片，纯前端绘制不上传任何数据。

在线波形可视化工具，将音频或信号数据绘制为时域波形图，支持上传文件与实时渲染、缩放查看，便于信号分析与教学演示，纯前端处理。

涟漪（Ripple）点击效果在线生成器，模拟 Material Design 水波纹动效，可调颜色、扩散半径与持续时间，导出 CSS/JS 代码片段直接引用…

可视化调节模糊、透明度与背景，实时生成玻璃拟态（毛玻璃）效果的 CSS 代码，便于现代 UI 卡片质感设计。