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." 🔥