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.
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
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.
What you get when you save this prompt
Your workspace unlocks powerful tools to iterate and improve.
AI Optimization
One-click improvement with structure analysis and pattern suggestions.
Version History
Track every edit. Compare versions side-by-side with word-level diffs.
Folders & Tags
Organize your library with nested folders, tags, and drag-and-drop.
$ npm i -g @promptingbox/mcpUse Everywhere
Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.
Your prompts, organized
Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.