# LibreUIUX Demo

Vague vs Precise: The Power of Design Vocabulary

❌ VAGUE REQUEST (Fails)
`"Create a modern, sleek button that looks
professional and nice. Make it visually
appealing with good spacing and colors."`

### Result: Bootstrap-Era Design

❌ Random blue (#3B82F6)

❌ Basic padding (8px 16px)

❌ Small border-radius (4px)

❌ No shadow depth

❌ Simple hover (darker)

Success Rate: ~20%

✅ PRECISE REQUEST (Succeeds)
`bg-blue-600 (#2563EB) hover:bg-blue-700 (#1D4ED8) active:bg-blue-800 scale-98 text-white font-semibold px-6 py-3 (24px/12px) rounded-lg (8px) shadow-md hover:shadow-lg transition-all duration-200 focus:ring-4 focus:ring-blue-100`

### Result: Modern 2026 Design

✅ Exact color (blue-600)

✅ Precise padding (24px/12px)

✅ Modern radius (8px)

✅ Shadow depth + hover lift

✅ Smooth transitions (200ms)

Success Rate: ~90%

## The Core Insight

"When you speak design system language instead of vague aesthetics, you're giving coordinates instead of directions."

### Vague = Guessing

"Modern," "nice," "professional"

No shared meaning

### Precise = Specifications

"bg-blue-600," "px-6," "rounded-lg"

Claude knows exactly

## More Component Examples

### Modern Card (Precise)

#### Product Title

This card uses precise specifications: rounded-xl, shadow-lg hover:shadow-2xl, transition-all duration-300, hover:-translate-y-1

$99.00

### Modern Input Field (Precise)

Email Address

Specs: px-4 py-3, border-2, rounded-lg, focus:border-blue-500, focus:ring-4 focus:ring-blue-100

### Semantic Badges (Precise)

Primary Success Error Warning Neutral

Using semantic color scale: blue-100/700, green-100/700, red-100/700, amber-100/700

## Design Vocabulary Quick Reference

### Spacing Scale

p-1 → 4px
p-2 → 8px
p-4 → 16px
p-6 → 24px (card padding)
p-8 → 32px (section spacing)
p-12 → 48px (large sections)

### Shadow Scale

shadow-sm → subtle
shadow-md → default cards
shadow-lg → elevated
shadow-xl → modals
shadow-2xl → dramatic

### Color Scale

blue-50 → lightest
blue-400 → light accent
blue-600 → primary brand
blue-700 → hover state
blue-900 → darkest

### Border Radius

rounded → 4px (minimal)
rounded-lg → 8px (buttons)
rounded-xl → 12px (cards)
rounded-2xl → 16px (modals)
rounded-full → circular

Repository: github.com/HermeticOrmus/LibreUIUX-Claude-Code

"The craft grows when knowledge flows." 🔥