haikeilisted

Generate and integrate SVG background assets using Haikei (haikei.app) — waves, blobs, blurry gradients, low-poly grids, peaks, steps, and scatter patterns for hero sections, section dividers, slide decks, blog covers, social cards, and empty states. Use this whenever a design needs a generated background, an organic shape, a section divider, a wave/blob/gradient visual, a blog or social cover image, or when a page or slide looks flat and needs a background asset. Also use it whenever a Haikei SVG has already been downloaded and needs to be optimized, made responsive, wired into React/Next.js, or adapted for dark mode — the integration gotchas are non-obvious and documented in references/integration.md.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# Haikei Haikei (haikei.app) is a **browser-based design tool**, not a library. There is no npm package, no API, no CLI, and the generator algorithms are closed source. A human opens the app, tweaks parameters, rolls the dice until a composition looks right, and downloads an SVG or PNG. Free, no signup. That shapes what this skill does. It cannot generate the asset. It owns the two things around that step: 1. **Selection** — which generator, what parameters, what canvas size, and a pre-configured URL to hand the human. 2. **Integration** — everything after the download. This is where the real engineering is, and where most people get it wrong. ## Workflow When a task needs a generated background: 1. **Check whether Haikei is the right tool at all** (see "When not to use" below). A CSS gradient or a Tailwind class is often the correct answer and costs nothing. 2. **Pick the generator** from the table in `references/generators.md`, along with recommended parameters and canvas size for the target surface. 3. **Hand the human a direct URL.** Every generator is addressable: `https://app.haikei.app?generator=<slug>` — e.g. `https://app.haikei.app?generator=layered-waves`. State the brand hex codes to paste in and the canvas size to set, so the trip to the browser is a 30-second parameter entry rather than an exploration. 4. **Stop and wait.** Don't scaffold code that imports an asset that doesn't exist yet. Say plainly what file you expect back a