beautiful-design

Design distinctive UI components and layouts that avoid generic AI-generated aesthetics.

Updated Jul 29, 2026
One-click install
npx skills add https://github.com/SMGolamAlif/Orbit --skill beautiful-design-smgolamalif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: beautiful-design
Source: https://github.com/SMGolamAlif/Orbit/tree/main/.github/skills/beautiful-design
Command: npx skills add https://github.com/SMGolamAlif/Orbit --skill beautiful-design-smgolamalif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces share recognizable patterns: uniform spacing, purple-to-cyan gradients, identical border-radius, and flat typographic hierarchy. This Skill provides concrete design principles and anti-pattern checks to produce interfaces that look intentionally crafted rather than templated. ## Core Features & Use Cases - Typography Systems: Pair distinctive heading and body fonts, define multi-level type scales, and tune letter-spacing and line-height per context. - Spacing, Color & Depth Guidance: Apply asymmetric spacing rhythms, restrained accent palettes with warm or cool neutrals, and layering or border-light techniques instead of heavy drop-shadows. - Anti-Pattern Detection: Audit designs against a checklist of AI slop hallmarks such as purple-to-cyan gradients, uniform border-radius, and Inter-only typography. - Use Case: When redesigning a Tailwind CSS dashboard that looks generic, use this Skill to audit anti-patterns, establish a font pairing and color palette, and add one distinctive visual element. ## Quick Start Redesign this landing page component so it looks hand-crafted, with a distinctive font pairing, restrained accent colors, and no generic AI design patterns.

Frequently Asked Questions about beautiful-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my UI design not look AI-generated?

Audit for common AI patterns: uniform border-radius, purple-to-cyan gradients, single font families, and identical padding. Replace them with paired heading and body fonts, asymmetric spacing, one or two accent colors, and subtle depth via layering or translucent borders.

What font pairings work well for web UI design?

Pair a distinctive heading font with a clean body font, such as Space Grotesk with Inter, Fraunces with DM Sans, or Cabinet Grotesk with Satoshi. Tighten heading letter-spacing to -0.02em to -0.04em and use line-heights of 1.1-1.25 for headings and 1.5-1.7 for body text.

How do I create depth in UI without drop shadows?

Use layering by placing light cards on slightly darker backgrounds, or apply a 1px semi-transparent border like rgba(255,255,255,0.08) on dark cards. Sparingly used backdrop-filter blur also creates premium-feeling depth without heavy shadows.

Does this design guidance work with Tailwind CSS?

Yes, the guidance is framed around Tailwind workflows, including utilities like border-white/5 for subtle separation. It advises overriding Tailwind's default type scale and spacing with a custom hierarchy and rhythm rather than accepting defaults.

What are the most common AI design anti-patterns to avoid?

Key anti-patterns include purple-to-cyan gradients, identical border-radius on all elements, centered-everything layouts, Inter as the only font, full-opacity borders, and pure white cards on gray backgrounds. Each has a specific replacement, such as single-hue gradients and varied radius values.

How many animations should a page have?

Limit motion to two or three key moments per page. Micro-interactions should run 150-250ms with ease-out curves like cubic-bezier(0.4, 0, 0.2, 1), and list animations should stagger children by 50-80ms per item.