免费在线设计工具
渐变、配色、布局、SVG、提词、拼豆图纸……设计师与前端的高频小工具，打开即用，无需注册。
CSS 渐变生成器
可视化生成 linear / radial 渐变 CSS，实时预览
打开工具 →颜色对比度检查
按 WCAG 公式计算文字与背景对比度，AA / AAA 判定
打开工具 →CSS 布局生成器
可视化配置 Flexbox / Grid 属性，实时演示并生成 CSS
打开工具 →SVG 路径编辑器
对 path d 施加平移 / 缩放 / 旋转，实时预览并输出 SVG
打开工具 →SVG 代码编辑器
校验、预览并优化 SVG 源码，统计尺寸与体积
打开工具 →在线提词器
全屏匀速滚动提词，支持镜像与调速，录视频必备
打开工具 →拼豆图纸生成器
照片转拼豆图纸，按 Artkal / MARD / Perler 色号量化配色并统计用量
打开工具 →为什么用这里的设计工具？
纯本地运行
渐变计算、对比度检查、SVG 解析与提词滚动全部在浏览器内完成，设计内容不上传任何服务器。
即改即见
参数与结果双向联动，调整色标、布局属性或变换参数时，预览与代码实时刷新，可直接复制使用。
规范输出
对比度按 WCAG 相对亮度公式计算，渐变与布局输出标准 CSS，SVG 经过严格 XML 校验，粘贴即用。
常见问题
这些设计工具是免费的吗？
是的，全部工具永久免费、无需注册、没有次数限制，网站通过展示广告维持运营。
我的设计或文稿会被上传吗？
不会。渐变生成、对比度计算、SVG 解析与提词滚动都由 JavaScript 在您的浏览器本地完成，内容不经过服务器。
生成的 CSS / SVG 可以直接用于项目吗？
可以。输出均为标准语法：渐变与布局是合法的 CSS 声明，SVG 经过 XML 校验并保留命名空间，可直接粘贴到样式表、内联样式或图标文件。
设计工具全部在浏览器本地运行。