Better-UI-UX

AI-powered design system for coding agents.

Installation • Tools • Palette Search • Icons • Animations

---

What is this?

Better-UI-UX is a Model Context Protocol (MCP) server and Agent Skill that gives AI coding agents real design intelligence. Not templates. Not boilerplate. A rule-based system with BM25 search, 172 curated palettes, 114 parametric icons, and GSAP animations that generates accessible, animated UI systems.

Search	172 palettes · BM25 + synonym expansion · WCAG validated
Fonts	35 pairs · 49 mood categories · Google Fonts + CDNFonts
Icons	114 parametric SVGs · 4 animation types · shape primitives
Animations	GSAP + ScrollTrigger · scroll, stagger, pin, scrub
Errors	15 typed codes · validation utilities · no swallowed catch

---

Installation

Agent Skill _{(recommended)}

npx skills add Mert-byt/Better-UI-UX

Claude Code Plugin

/plugin marketplace add Mert-byt/Better-UI-UX

MCP Server

git clone https://github.com/Mert-byt/Better-UI-UX.git
cd Better-UI-UX && npm install && npm run build

Add to your MCP client:

{
  "mcpServers": {
    "better-ui-ux": {
      "command": "node",
      "args": ["/path/to/Better-UI-UX/build/index.js"]
    }
  }
}

---

Tools

suggest_design_system

Returns 3 curated candidates with fonts, colors, icons, and type scale. Honors custom colors exactly.

suggest_design_system({
  projectName: "NovaPay",
  mood: "corporate",
  customColors: { primary: "#1A2332" }
})

search_palettes

Real BM25 search over 172 palettes with synonym expansion and category boosting.

search_palettes({ query: "fintech dark modern", limit: 5 })

transform_component

Applies one of 4 preset visual styles to HTML/JSX via class injection. Returns transformed HTML + CSS + required libraries. For fully custom styling, use design tokens instead.

transform_component({
  sourceCode: "<div><button>Click</button></div>",
  targetStyle: "glassmorphism"
})

generate_logo

Minimal geometric SVG logos — 3 fixed templates (minimal, geometric, abstract) with the company initial in a circle. Not AI generation. If you already have a logo, skip this tool.

generate_logo({ companyName: "NovaPay", style: "geometric" })

generate_icon

114 parametric SVG icons built from shape primitives (circle, rect, line, path, ellipse, polygon). 4 animation types: spin, bounce, draw, pulse.

generate_icon({
  iconName: "home",
  color: "#2563EB",
  animated: true,
  animationType: "bounce"
})

inject_animations

GSAP + ScrollTrigger powered animations with proper setup and cleanup.

inject_animations({
  htmlCode: "<section>...</section>",
  type: "scroll-reveal"
})

---

Palette Search

The search engine is not string matching. It's real information retrieval.

Feature	How
BM25 scoring	IDF weighting — rare terms score higher
Synonym expansion	"finance" → "fintech", "banking", "monetary"
Prefix matching	"minim" → "minimal", "minimalist"
Category boosting	Exact mood/industry/style hits get 2x+
WCAG metadata	wcagAA and wcagAAA on every palette
Color harmony	complementary, analogous, triadic, monochromatic, split-complementary

npm run search -- --query "fintech dark" --limit 5

---

Icons

114 icons built from shape primitives — not static SVG templates. Each icon is composed from circles, rectangles, lines, paths, and polygons.

home search user heart star settings mail bell check plus minus close menu globe lock calendar clock camera download upload trash edit eye zap cloud code bookmark layers terminal database play pause stop volume mic image music phone send inbox link file folder copy save printer shield filter refresh target monitor smartphone gift award flag sun moon fire wind key ...

generate_icon("home", { color: "#2563EB", fill: true })
generate_icon("search", { animated: true, animationType: "spin" })

---

Animations

All animations use GSAP + ScrollTrigger with proper setup and cleanup.

// Scroll Reveal
gsap.from('.reveal', {
  opacity: 0, y: 40, duration: 0.8, ease: 'power3.out',
  scrollTrigger: { trigger: '.reveal', start: 'top 85%' }
});

// Stagger
gsap.from('.item', {
  opacity: 0, y: 30, stagger: 0.1, duration: 0.6,
  scrollTrigger: { trigger: '.list', start: 'top 80%' }
});

// Cleanup
function cleanupAnimations() {
  ScrollTrigger.getAll().forEach(st => st.kill());
}

---

Development

npm run dev          Run MCP server
npm run build        Build for production
npm test             Run tests
npm run search       CLI palette search

Stats

172 palettes	WCAG AA validated, harmony-tagged
35 font pairs	49 mood categories
114 icons	parametric, animated variants
15 error codes	typed, validated

---

API Contract • Contributing • Code of Conduct

MIT © Mert-byt