Install
openclaw skills install ui-design-tipsUI Design Tips
Apply practical UI/UX design principles to improve user interfaces, landing pages, web apps, and components. Use when asked to review, critique, or improve UI design; suggest design improvements for buttons, forms, headers, cards, menus, color usage, visual hierarchy, pricing pages, or any UI element; apply UX laws (Fitts's Law, Gutenberg Principle, Hick's Law, Jakob's Law, etc.); fix accessibility issues; design better onboarding, error messages, empty states, navigation, micro-interactions, or UX copy; or answer questions about UI/UX best practices. Covers visual hierarchy, CTA optimization, color usage, typography, whitespace, alignment, form design, mobile UX, dangerous actions, empty states, onboarding, UX writing, error handling, trust signals, conversion optimization, and more.
Audits
PendingUI Design Tips
Practical UI/UX knowledge distilled from real-world product testing (Jim Raptis / uidesign.tips) plus extended UX principles. Apply these when reviewing or improving any interface.
Core Philosophy
- Never leave things to user imagination — make actions explicit and obvious
- Use multiple attributes to distinguish elements (color + icon + size, never color alone)
- Prioritize the primary action — dangerous/secondary actions must never compete visually
- Users hate surprises — copy and microcopy must eliminate all ambiguity
- UX > Conversions — 10 annoyed users outweigh 1 accidental conversion
1. Visual Hierarchy
The #1 design lever. Everything else builds on this.
Hacks:
- Reduce opacity of secondary info (50–70%)
- Bold font-weight for primary content emphasis
- Type scale ×1.25: 40px title → 32px subtitle → 25px H3 → 16px body
- Left-align for LTR readability (not centered)
- Group related elements (proximity = relationship)
- Use size contrast: make primary elements noticeably bigger
Perfect Header formula:
- Strong font-weight on title
- ×1.25 type scale
- Lower contrast (opacity ~70%) for subtitle
- Line-height 1.5–1.7 for body text
- Left-aligned
2. CTA & Conversion Optimization
- Always have a CTA above the fold — many users never scroll
- One primary CTA per screen — multiple competing styles cause decision paralysis
- Button copy = action verb — "Start Creating Free" beats "Submit"
- Eliminate pre-click anxiety — add "No credit card required" / "Free forever" near the CTA
- Gutenberg Principle: Eyes travel Z-path (top-left → top-right → bottom-left → bottom-right). Place CTA at the terminal point (bottom-right)
- Prompt scrolling — show a glimpse of the next section to signal there's more
- Direct attention with media — people follow lines of sight; point characters toward CTA
3. Color Usage
- Brand color = accent only — highlight 1–2 elements maximum; everything else uses tints/shades
- Never rely on color alone — always pair with shape/icon/label (8% of men are color-blind)
- When highlighting pricing plans: use color + size + elevation (shadow) — minimum 2 attributes
4. Pricing Pages
- Highlight the recommended plan with ≥2 design attributes: color + shadow + scale
- Example:
transform: scale(1.04)+ distinct border color + box-shadow glow - This guides users to the popular plan and reduces decision fatigue (Hick's Law)
5. Layout & Alignment
Aligning uneven elements: Set same width for all items using the widest element's width.
Avoid full-width paragraphs: Limit to 500–700px. CSS: max-width: 65ch
Padding on rounded cards: Use double padding on the non-rounded edges (text/icon side)
Border radius consistency: Outer radius = 2× Inner radius
6. Cards & Clickability
- Make cards obviously clickable — add explicit CTA button; hover effects alone aren't enough
- Never rely on user experience to infer clickability — state it explicitly
7. Navigation & Menus
- Add icons next to every menu item — visual identification without reading
- Highlight the active tab clearly (background change, not just color)
- Whitespace over dividers between menu sections — cleaner, less cognitive load
- Only use dividers between major sections
- Keyboard shortcuts: Display them next to action buttons (Fitts's Law reduces memory load)
- Dropdown menus: Add icons to items for faster visual scanning
8. Forms & Inputs
- Placeholder text = guidance, not label repetition — show format examples
- Choose correct input type — number picker for integers, not text field
- Predefined values reduce errors (country selectors, date pickers)
- For small integer ranges (cart qty 1–10): use −/+ buttons
- Social login above email/password for higher conversion; always provide email fallback
- Inline validation — show errors as user types, not only on submit
- Group related fields — billing info together, personal info together
- Progress indicators for multi-step forms — show "Step 2 of 4"
9. Dangerous Actions
- De-emphasize destructive actions with multiple attributes: ghost style + small font + low opacity + placement at end
- Always validate deletions — inline or popup confirmation; never silent deletes
- Button copy = specific action: "Delete 'Project Alpha'" beats "Delete" beats "Yes"
- Consider undo as an alternative to confirmation dialogs (less friction, same safety)
- Never style a destructive action as a primary button
10. Empty States
- Never show a blank screen — empty states are onboarding opportunities
- Offer pre-made templates to let users experience value immediately
- Include: illustration/icon + headline + short description + primary CTA + secondary "learn more" link
- Show sample content when possible so users understand what they're working toward
11. Onboarding & UX Copy
- Inform users of the next step — never make them guess
- Eliminate anxiety-triggering words — "Reserve" → "Try Free"; add "Cancel anytime"
- Microcopy near CTAs is as important as the button label itself
- Progress indicators help users commit to multi-step flows (they've already started)
- Pre-fill forms with smart defaults to reduce friction
12. Error Messages
- Specific, not generic — "Email is already in use" not "Invalid input"
- Actionable — tell the user what to do next: "Try a different email or log in instead"
- Friendly tone — never blame the user ("You entered..." → "We couldn't find...")
- Inline, not modal — show errors near the field that caused them
- Preserve user input — never clear the form on error
13. Avatars & Media
- Transparent PNG avatars: Add background color + subtle border matching app background
- Use media to direct attention — faces/characters should look toward the CTA
- Avatar consistency: Apply the same border/background treatment to all avatars
14. Mobile UX
- Hover tooltips don't work on mobile — add a tappable ❓ icon that shows tooltip on tap
- Thumb Zone: Place primary CTAs within easy thumb reach (bottom center / lower areas)
- Touch targets ≥ 44×44px — small targets cause misclicks and frustration
- Don't rely on hover states for critical functionality
- Swipe gestures: Always provide a visible alternative (swipe to delete = also show a delete button)
15. Accessibility
- Never use color as the only differentiator — add icon, shape, or label
- Contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text (WCAG AA)
- Icon labels are mandatory on mobile (no hover to discover meaning)
- Focus states must be visible — don't remove browser outlines without replacing them
- Alt text for all meaningful images
16. Charts & Data
- Bar chart for limited/discrete categories (monthly data, categories)
- Line chart for continuous time-series data — don't use for discrete values (introduces false intermediate data)
- Label axes clearly; don't make users guess units
17. Selected & Interactive States
- Background color change is the strongest signal for selected items — more accessible than border alone
- Show selected state at a glance — don't make users search for what they chose
- Hover states must be meaningful, not decorative
18. Trust & Social Proof
- Place trust signals near the CTA (not buried in footer)
- Trust signals: "No credit card required" / testimonials / user counts / security badges
- Social proof proximity — testimonials directly under the offer they're validating
- Show real numbers ("12,847 users") over vague claims ("thousands of users")
19. UX Writing Checklist
| ❌ Avoid | ✅ Use instead |
|---|---|
| "Submit" | "Start Free Trial" / "Create My Account" |
| "Yes" / "No" | "Delete Project" / "Keep It" |
| "Error occurred" | "We couldn't save your work. Try again?" |
| "Invalid input" | "Email must include @" |
| "Are you sure?" | "This will permanently delete 'Project Name'" |
20. Micro-Interactions & Button States (from uiverse.io)
Every interactive element needs 3 states minimum:
- Default — resting appearance
- Hover —
translateY(-2px)+ glow/shadow increase - Active/Press —
translate(2px, 2px)reverses lift (feels physical)
Missing active state = cheap, broken feel.
Navigation button pattern:
- Each item gets its own accent color (icon + text change on hover)
- Icons always visible, label always present (no icon-only nav)
Button animation timing rules:
- Under 300ms = fast and responsive
ease-outfor entrances,ease-infor exits, neverlinear(except spinners)- Always add
@media (prefers-reduced-motion: reduce)wrapper
Loading states:
- Skeleton screens (shimmer) > spinners for content areas
- Button loading state: inline spinner after label text,
pointer-events: none
Neon/glow effects (dark UI):
/* Focus ring */
.input:focus { box-shadow: 0 0 0 3px rgba(177,79,255,0.2); }
/* Hover intensify */
.btn:hover { box-shadow: 0 0 30px rgba(177,79,255,0.5); }
CSS custom properties for consistent theming:
:root {
--accent: #b14fff;
--accent-rgb: 177, 79, 255;
--radius: 12px; /* card outer */
--radius-sm: 6px; /* card inner → outer = 2× inner rule */
}
For full CSS patterns and component code → references/micro-interactions.md
21. Color System by Product Type
Choose palette based on industry psychology — not personal preference:
| Category | Primary | CTA | Background |
|---|---|---|---|
| SaaS / Tech | Blue #2563EB | Orange #F97316 | Light #F8FAFC |
| Gaming / Cyberpunk | Purple #7C3AED | Rose #F43F5E | Dark #0F0F23 |
| AI Products | Purple #7C3AED | Cyan #06B6D4 | Soft #FAF5FF |
| Fintech / Crypto | Gold #F59E0B | Purple #8B5CF6 | Dark #0F172A |
| Healthcare | Cyan #0891B2 | Green #059669 | Light #ECFEFF |
| Creative Agency | Pink #EC4899 | Cyan #06B6D4 | Soft #FDF2F8 |
| E-commerce Luxury | Black #1C1917 | Gold #CA8A04 | Off-white #FAFAF9 |
| Video Streaming | Black #0F0F23 | Red #E11D48 | Pure #000000 |
| Food / Restaurant | Red #DC2626 | Gold #CA8A04 | Warm #FEF2F2 |
Industry rules:
- Healthcare/Medical: NEVER neon colors; ALWAYS calm + WCAG AAA
- Finance/Banking: NEVER playful; ALWAYS security badges + dark navy
- Gaming: NEVER minimal; ALWAYS dark mode + neon/3D effects
- Kids: NEVER dark; ALWAYS rounded + bright pastels + large touch targets
Full database (96 product types) → references/design-systems-pro.md
22. UI Style Systems (Choose by Context)
Glassmorphism — Modern SaaS, financial, lifestyle
backdrop-filter: blur(15px);
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
Neubrutalism — Gen Z brands, creative, startups
border: 3px solid #000;
box-shadow: 5px 5px 0 #000; /* hard offset, no blur */
/* Hover: translate(-4px, -4px) + box-shadow: 9px 9px 0 #000 */
Bento Grid (Apple-style) — Dashboards, product features
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
/* Cards: border-radius: 24px; hover: scale(1.02) */
Cyberpunk — Gaming, crypto, entertainment
background: #0D0D0D;
color: #00FF00; /* or #FF00FF / #00FFFF */
text-shadow: 0 0 10px currentColor;
font-family: monospace;
/* Add scanlines via ::before repeating-linear-gradient */
Claymorphism — Kids, education, SaaS onboarding
border-radius: 16-24px;
border: 3-4px solid rgba(0,0,0,0.1);
box-shadow: inset -2px -2px 8px rgba(255,255,255,0.5), 4px 4px 8px rgba(0,0,0,0.2);
/* Bounce: cubic-bezier(0.34, 1.56, 0.64, 1) */
For all 60+ styles → references/design-systems-pro.md
23. Typography Selection Guide
| Vibe | Heading | Body |
|---|---|---|
| Tech Startup | Space Grotesk | DM Sans |
| Gaming / Esports | Russo One | Chakra Petch |
| Cyberpunk / HUD | Share Tech Mono | Fira Code |
| Luxury / Fashion | Cormorant | Montserrat |
| Minimal SaaS | Inter | Inter |
| AI / Modern | Plus Jakarta Sans | Plus Jakarta Sans |
| Wellness | Lora (serif) | Raleway |
| Kids / Education | Baloo 2 | Comic Neue |
| News / Editorial | Newsreader | Roboto |
| Gen Z Bold | Anton | Epilogue |
| Crypto / Web3 | Orbitron | Exo 2 |
Chinese: Noto Sans SC
Japanese: Noto Serif JP + Noto Sans JP
24. Landing Page Pattern Selection
| Goal | Pattern | Key CTA Rule |
|---|---|---|
| SaaS free trial | Hero + Features + CTA | Video demo + sticky CTA |
| Lead generation | Lead Magnet + Form | ≤3 fields, preview lead magnet |
| Pricing page | 3-tier Pricing | Middle tier = "Most Popular", annual discount 20-30% |
| Brand / storytelling | Scroll Narrative | 5-7 chapters, emotional hooks |
| Event / Webinar | Event Landing | Countdown + limited seats |
| Waitlist | Waitlist Pattern | Countdown + email + social proof count |
CTA placement rules:
- Primary CTA: above fold always
- Secondary: after testimonials/social proof
- Sticky CTA: in navbar when hero scrolls out of view
- Never > 2 CTA variants visible at once
25. Design Tokens Template
:root {
/* Spacing (8px base) */
--space-4: 16px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
/* Type Scale (1.25×) */
--text-base: 16px; /* body minimum */
--text-2xl: 24px; --text-4xl: 36px; --text-6xl: 60px;
/* Radius */
--radius: 12px; --radius-lg: 16px; --radius-xl: 24px;
/* Elevation */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 10px 20px rgba(0,0,0,0.1);
--shadow-lg: 0 20px 40px rgba(0,0,0,0.15);
--shadow-glow: 0 0 30px rgba(var(--accent-rgb), 0.4);
/* Z-Index */
--z-1: 10; --z-2: 20; --z-modal: 50; --z-toast: 100;
/* Animation */
--duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy press */
}
Reference Files
- UX Laws deep-dive:
references/ux-laws.md - UX Writing patterns:
references/ux-writing.md - Conversion checklist (40 items):
references/conversion-checklist.md - CSS micro-interactions & uiverse.io patterns:
references/micro-interactions.md - Design Systems Pro (color/typography/styles/99 UX issues):
references/design-systems-pro.md