KROMA
/ THE END OF AI SLOPEST · REALTIME

KROMA

Your AI agent just becamea world-class designer.

Live eyes on the design web — real inspiration, real components, real motion. No more centered divs and the same three fonts.

Kill the slop →See the 6 powers
/ THE DIFFERENCE

Same prompt. Drag to see.

One agent designs from memory. The other looked it up with Kroma.

centered div · gray gradient · generic
Design
that ships.
Start →
With KromaWithout
DRAG · OR USE ← →52% KROMA
/ SIX POWERS01 / 06

MADE FOR AGENTS

Six ways to
out-design
everyone.

Each one turns a plain request into live, real-world design your agent can actually build from.

Full reference → Docs
01Serper /images

Find UI/UX Inspiration

kroma_find_ui_inspiration

Mood-board a screen from live design galleries.

SAY THIS

“Find me dark-mode fintech dashboard inspiration from Mobbin and Awwwards.”

02Serper /search

Find Component Code

kroma_find_component_code

Copy-paste React / Vue / Svelte components from real docs.

SAY THIS

“Find an accessible React command palette I can copy from shadcn or Magic UI.”

03Serper /search

Find Effects & Shaders

kroma_find_effects_and_shaders

GLSL, canvas, GSAP, Framer Motion & glassmorphism, live.

SAY THIS

“Show me an animated glowing border effect for React.”

04Serper scrape endpoint

Scrape Site Design

kroma_scrape_site_design

Reverse-engineer a site's type, palette & tech stack.

SAY THIS

“Break down the typography, palette, and tech stack of linear.app.”

05Serper /search

Search Design Web

kroma_search_design_web

Open-ended design search when the specialists don't fit.

SAY THIS

“Search web.dev and Smashing for design-token naming conventions.”

06Offline — no API key required

List Curated Sources

kroma_list_sources

Discover the exact source names to pass to the others.

SAY THIS

“List the component libraries Kroma can search.”

/ WHAT CHANGES03 — 06

From slop
to shipped.

What flips the moment your agent can see.

  1. 01Designs from memory→Looks it up, live
  2. 02Centered divs & gray gradients→Real layouts from real sites
  3. 03The same three fonts→Award-winning type systems
  4. 04Static, dead pages→GSAP, shaders, real motion
6

design powers

31

curated sources

9

supported hosts

/ CURATED SOURCE REGISTRIES

Where the good
stuff lives.

INSPIRATION
Mobbin+Godly+Awwwards+Dribbble+Lapa Ninja+Minimal Gallery+Land-book+SaaS Landing Page+Behance+Refero+Mobbin+Godly+Awwwards+Dribbble+Lapa Ninja+Minimal Gallery+Land-book+SaaS Landing Page+Behance+Refero+
COMPONENTS
shadcn/ui+Magic UI+Aceternity UI+Uiverse+Tailwind UI / Plus+Radix UI+Headless UI+Flowbite+daisyUI+Park UI+HyperUI+GitHub+shadcn/ui+Magic UI+Aceternity UI+Uiverse+Tailwind UI / Plus+Radix UI+Headless UI+Flowbite+daisyUI+Park UI+HyperUI+GitHub+
EFFECTS
CodePen+Shadertoy+Framer Motion+GSAP+Three.js+React Three Fiber+CSS-Tricks+GitHub+Codrops+CodePen+Shadertoy+Framer Motion+GSAP+Three.js+React Three Fiber+CSS-Tricks+GitHub+Codrops+
/ START IN 30S04 — 06

Give it
eyes.

  1. 01

    Grab a free Serper key

    serper.dev — 2,500 free credits.

  2. 02

    Add Kroma to your host

    Paste the config on the right. Runs on stdio.

  3. 03

    Say “list the Kroma sources”

    Your agent calls it and confirms the connection instantly.

No install. One command. Runs on stdio.

npx
SERPER_API_KEY=your_serper_key_here npx -y @kromamcp/server

› First run downloads the package; after that it's cached. If a host times out on first launch, reconnect.

Every host, SDK & tool → Docs
/ FAQ05 — 06

Frequently
asked.

Everything before you wire Kroma in. Full reference lives in the docs.

Kroma is a Model Context Protocol (MCP) server that gives your AI agent live eyes on the design web. Instead of guessing, your agent pulls real UI inspiration, real component code, and real motion techniques from the best galleries, component libraries, and code playgrounds on the internet — so it stops shipping generic AI slop and starts designing like a pro.

Left alone, agents ship the same centered divs, gray gradients, and three fonts — because they design from memory. Kroma gives them six tools to look things up live: current inspiration, copy-paste components from shadcn/Magic UI/Aceternity, and real GSAP/Framer/shader techniques. Your agent references what great teams actually ship, then builds from it.

Any MCP-compatible host: Claude Code, Claude Desktop, Cursor, Windsurf, OpenAI Codex CLI, Roo Code, Cline, Zed, and VS Code — plus custom agents via the MCP SDKs (TypeScript and Python) over stdio or HTTP/SSE. Copy-paste connection guides for every host live on the docs page.

Kroma resolves live results through Serper, so you bring a free Serper API key (2,500 credits to start). Set it as SERPER_API_KEY, or pass an api_key argument per call. The kroma_list_sources tool runs offline and needs no key. Note: the visual-inspiration image search needs a paid Serper plan; the other five tools work on the free tier.

Fastest: SERPER_API_KEY=your_key npx -y @kromamcp/server — no install, runs on stdio for any MCP host. Prefer to run it yourself? Clone github.com/thatcreativetayo/kromamcp, npm install && npm run build, then point your host at the built dist/index.js. Both paths are on the docs page.

Yes. Kroma is MIT-licensed and published on npm as @kromamcp/server, with full source at github.com/thatcreativetayo/kromamcp. You only bring your own free Serper key.