# UI Design Brain

Generate production-grade UI using real component patterns and best practices from 60+...

- Repository: https://github.com/carmahhawwari/ui-design-brain (904 stars)
- Category: Design
- License: Complete terms in LICENSE.txt
- Last updated: 2026-02-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -g -a claude-code -y`
Codex: `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -g -a codex -y`
Cursor: `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -g -a cursor -y`
Gemini CLI: `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -g -a gemini-cli -y`

## Description

Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI, ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# UI Design Brain

This skill provides a curated knowledge base of 60+ UI component patterns sourced from [component.gallery](https://component.gallery) and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.

**Before writing any UI code**, consult this skill to select the right components and follow their best practices. Read [components.md](components.md) for the full reference.

## When to Use This Skill

Apply whenever the user asks to build, design, or generate:
- Web pages, landing pages, marketing sites
- SaaS dashboards, admin panels, settings pages
- Forms, data tables, navigation structures
- Modals, drawers, popovers, or overlay patterns
- Any React, HTML/CSS, or Tailwind UI component

## Design Philosophy

Every generated interface should feel **modern, minimal, and production-ready**, not like a template.

### Core Principles

1. **Restraint over decoration.** Fewer elements, highly refined. White space is a feature.
2. **Typography carries hierarchy.** Pair a distinctive display font with a clean body font. Maximize weight contrast between headings and labels.
3. **One strong color moment.** Neutral palette first (warm off-whites, near-blacks, muted mid-tones). Introduce one confident accent. If it could appear on a poster or book cover, it's probably timeless.
4. **Spacing is structure.** Use an 8 px grid. Tighter gaps group related elements; generous gaps let hero content breathe.
5. **Accessibility is non-negotiable.** WCAG AA contrast minimums. Focus indicators. Semantic HTML. Keyboard navigation.
6. **No generic AI aesthetics.** Avoid: purple-on-white gradients, Inter/Roboto defaults, evenly-spaced card grids, and cookie-cutter layouts. Every interface should feel designed for its specific context.

### Quality Bar

The rest: https://github.com/carmahhawwari/ui-design-brain/blob/HEAD//SKILL.md