简介
做前端的人手上总有一堆碎活：给弹层描个纯 CSS 三角形、按品牌色配一组色阶、把设计给的 SVG 压完再塞进组件、造几条假地址把列表页撑满。Omatsuri 把这些活收在一个站点里，站名在日语里是「祭典」的意思，首页就是一格一格的工具入口，点进去直接是表单，没有注册墙。它替代的是「为一次性小需求装插件、拉脚手架、临时写段脚本」这条路。
工具分两条主线：CSS 侧的 Triangle generator、Color shades generator、Gradient generator、Page dividers、CSS cursors、Keyboard events codes，SVG 侧的 SVG compressor、SVG → JSX、Base64 encoding，加上 Lorem ipsum、Fake data generator、Symbols collection 三个填充类工具，合计 12 款。渐变生成器最能说明它的做法：Settings 里切 Linear 与 Radial、拖角度，Colors 里逐个色标改颜色与不透明度，下方同步输出 CSS 与 JavaScript 两段代码并带 Copy to clipboard；Gradients Gallery 里 Fade in、Winter Sky、Noir 这类命名配方能直接 Copy CSS，也能 Open in editor 载回设置区再改。
适用人群
最适合天天和 CSS、SVG 打交道的人：自己建站、接外包、做落地页，临时要一个三角形、一组色阶、一批假数据填模板，打开就能出结果，不必为一次性需求装插件。只是偶尔改个颜色、或者需要团队协作与改动历史的项目不必把它当主力，直接在项目里写几行 CSS 更省事；它也没有付费档，不存在「该不该升级」的判断，值不值得用只取决于手上有没有这类碎活。
优缺点
- ✅ 免注册、免安装，首页点开工具就是表单，出结果通常只要两步操作。
- ✅ 全部计算在浏览器里完成，既不上传文件也不建账号，处理设计稿与公司素材时没有隐私顾虑。
- ✅ 结果同时给 CSS 与 JavaScript 两种写法，复制就能贴进项目，省掉自己翻译的一步。
- ✅ 一个小站收齐 12 款工具，左侧导航直接切换，不用回首页重新找入口。
- ❌ 没有账号体系，也就没有历史记录与云端保存，刷新后参数全部丢失。
- ❌ 界面只有英文，参数名要按 CSS 的写法对照理解，新手有读词成本。
使用方法
- 直接打开站点，在首页工具网格里点开要用的那一个：不用登录，也没有安装步骤，左侧 Tools 导航可以在 12 款工具之间来回切，写样式时顺手对照 CSS cursors 和 Keyboard events codes 两张速查表。
- 以渐变生成为例，在 Settings 选 Gradient type（Linear 或 Radial）、拖方向和角度，在 Colors 里加色标并逐个调 Color 与 Opacity，下面的 CSS 与 JavaScript 两段代码会实时跟着变，点 Copy to clipboard 拿走。
- 进阶落地：把 Gradients Gallery 里合用的配方点 Open in editor 载入设置区，改完再 Copy CSS，一次性把整站的按钮、卡片、区块统一成一套渐变变量；图标那条线则用 SVG compressor 一次拖入多个 SVG 批量压，再用 SVG → JSX 直接转成组件，省掉构建期再跑一遍压缩的步骤。
- 两点注意：所有结果只活在当前页面，刷新即失，改好的变量与配方要自己落到项目的样式文件里；界面全英文，参数名按 CSS 规范对照记，不熟就先点 LOAD EXAMPLE 跑一遍样本再动手。
收费说明
完全免费，也没有账号体系。全站没有价目表、订阅入口与付费墙，没有广告，也不接统计服务，工具全部在浏览器里跑，文件不出本机。源码公开，可以自行部署，自托管不额外收费。对个人站长和外包项目来说直接白用，不用谈授权；要留意的是它靠社区维护，更新与修问题的节奏取决于作者，反馈走 Report issue，不承诺支持时限。
平台支持
形态是网站&在线应用，只跑在浏览器里。国内可直接打开，不必自备代理；页面不加载 Google Fonts、GA 这类墙外资源，不会卡在资源请求上。右上角有 Toggle theme，可以在亮色与暗色之间切换。没有 App、没有桌面端、没有离线包，也没有账号与开放接口，想在 CI 里自动化只能自己把源码拉下来跑。手机浏览器能打开，但拖拽上传 SVG、调渐变角度这类操作在桌面端更顺手。
截图
