UI/UX Design Tuning

A shared folder with AI prompts and code snippets

From workspace: Bolt

Team: Main

Total snippets: 7

Bolt

UI/UX Design Tuning

7 snippets

Add Consistent Spacing

Fix inconsistent spacing between elements to match a consistent layout system.

Fix inconsistent spacing between elements on this page. Include: – Use consistent spacing scale (e.g. 4, 8, 16px) – Avoid magic numbers – Apply padding/margin through utility classes or variables

Add Hover Effects

Add subtle hover effects to buttons and cards for interactivity.

Add hover effects to all interactive buttons and cards. Include: – Slight background color change or shadow – Use transition for smooth effect – Keep consistent across components

Update Typography

Refine font choices and styles for better readability and visual hierarchy.

Update typography to improve readability and hierarchy. Include: – Set clear heading levels (h1, h2, etc.) – Choose a modern, legible font – Adjust line-height and spacing

Redesign Navigation Bar

Make the navigation bar more visually modern and intuitive.

Redesign the navigation bar for a more modern look. Include: – Responsive layout (burger menu on mobile) – Highlight active page – Add hover and focus states

Enhance Visual Hierarchy

Apply visual principles to guide the user's attention using layout, contrast, and scale.

Enhance the visual hierarchy of this layout. Include: – Emphasize primary actions – Use scale, contrast, and color weight – Reduce visual noise in secondary elements

Align Elements to Center

Center all visual elements vertically and horizontally for better visual balance.

Center all elements in this section both vertically and horizontally. Include: – Use flex or grid alignment – Avoid hardcoded margin hacks – Ensure responsiveness is preserved

Improve Mobile Responsiveness

Adjust layout and font sizes for better usability on small screens.

Improve the UI for mobile screen sizes. Include: – Use responsive breakpoints – Adjust font sizes and paddings – Ensure no overflow or clipping