Back to guide/General Productivity

UI Polish Pass

A numbered checklist of specific visual improvements with exact values (padding, font sizes, animation durations) gives Lovable precise targets instead of vague 'make it look better' instructions.

lovable-promptspage_nameaccent_color
Edit View
Prompt
Improve the visual design and UX of the {{page_name}} page:\n\n1. Spacing and alignment:\n   - Increase padding inside cards to 24px\n   - Add 16px gap between grid items\n   - Align all section headings consistently\n\n2. Visual hierarchy:\n   - Make the page title larger (text-2xl, font-bold)\n   - Add subtle gray-50 background to alternating sections\n   - Use {{accent_color}} for primary actions, gray for secondary\n\n3. Micro-interactions:\n   - Hover effects on clickable cards (shadow + slight lift)\n   - Smooth transitions on all interactive elements (200ms)\n   - Button press feedback (scale 0.98)\n\n4. Empty and loading states:\n   - Skeleton loaders that match the actual content layout\n   - Friendly empty state messages with suggested actions\n\n5. Mobile: Stack all grids to single column below 768px. Full-width buttons on mobile.\n\nDo not change any functionality, routes, or data logic. Only modify styling and UX.

Variables to customize

{{page_name}}{{accent_color}}

Why this prompt works

A numbered checklist of specific visual improvements with exact values (padding, font sizes, animation durations) gives Lovable precise targets instead of vague 'make it look better' instructions.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.