frontend-polish

name	frontend-polish
description	Improve the visual quality, cohesion, and finish of an existing frontend without changing the product direction. Use when the user asks to polish, refine, tighten, elevate, clean up, or make a UI feel more premium, clearer, or more consistent across pages, components, spacing, typography, color, motion, states, and responsive behavior.

Frontend Polish

Overview

Refine an existing interface so it feels intentional, consistent, and production-ready. Preserve the current product direction unless the user explicitly asks for a redesign.

Workflow

1. Inspect the current UI before editing.
2. Identify the few highest-leverage problems: unclear hierarchy, inconsistent spacing, weak typography, awkward card proportions, noisy color use, poor empty/loading states, or fragile mobile behavior.
3. Improve the smallest surface area that creates a visible quality jump.
4. Preserve working flows, copy meaning, and existing design-system patterns.
5. Verify desktop and mobile behavior after changes.

Priorities

• Strengthen visual hierarchy before adding decoration.
• Prefer spacing, sizing, alignment, and contrast fixes over new components.
• Make repeated UI patterns actually repeat: radii, shadows, gaps, text sizes, button styles, and card structure.
• Use motion sparingly and only when it clarifies state or improves feel.
• Keep accessibility intact: readable contrast, visible focus states, and sensible touch targets.

Editing Rules

• Start from the existing visual language. Extend it; do not randomly restyle it.
• Avoid new dependencies unless the user asks.
• Prefer CSS and small component edits over broad rewrites.
• Keep changes scoped and easy to review.
• If the interface already has a design system, follow it.
• If the interface has no clear system, create one with a few consistent tokens or repeated rules.

Common Fixes

• Reduce oversized headings that overpower nearby content.
• Tighten or loosen spacing so sections read as grouped.
• Standardize card padding, border radius, and image treatment.
• Improve button hierarchy and hover/focus states.
• Clarify section intros with cleaner type scale and shorter line lengths.
• Fix mobile wrapping, overflow, and uneven grid behavior.
• Improve loading, empty, and error states so they feel deliberate.

Red Flags

• Do not add trendy effects that fight the product.
• Do not turn a simple interface into a control-heavy dashboard.
• Do not introduce multiple accent colors without a reason.
• Do not use generic "AI app" styling if the product needs a distinct tone.
• Do not sacrifice clarity for novelty.

Output Style

• Make the UI feel cleaner, calmer, and more intentional.
• Prefer a few strong improvements over many small random tweaks.
• Explain the main polish decisions in plain language after editing.