Make the UI not look like a hackathon project (even if it is one).
Steps
- Read the target component/page and identify the UI framework in use (Tailwind, CSS modules, styled-components, etc.).
- Look at 1–2 other pages/components that look good as a reference for the project's design language.
- Apply fixes in this priority order:
Priority 1: Spacing & Layout (biggest visual bang for buck)
- Consistent padding/margin — pick a scale and stick to it (8px grid)
- Content max-width with centered layout if it's stretching full-width
- Breathing room between sections
Priority 2: Typography
- Consistent heading hierarchy (one h1 per page, h2 for sections)
- Body text at a readable size (16px minimum)
- Muted color for secondary/helper text
Priority 3: Color & Polish
- Consistent button styles (primary, secondary — pick one of each and use everywhere)
- Loading and empty states that don't look broken
- Remove any default browser styles that are leaking through
Priority 4: Responsiveness
- Check it doesn't break on mobile width (375px)
- Fix the worst breakage only — don't do a full responsive overhaul
Rules
- Don't change functionality, only styles
- Don't introduce new component libraries or dependencies
- Don't redesign — improve what's there
- If something requires a significant layout rethink, flag it but don't do it
- Aim for "looks intentional" not "looks designed by a professional"