Premium UI Revamp

Premium UI Revamp

Turn an existing interface into a credible, intentional product. Preserve what works, derive the design from the product's context, implement the improvements in the existing stack, and verify the rendered result rather than stopping at recommendations.

Operating principles

• Treat "premium" as clarity, restraint, coherence, craft, and fit for purpose—not a fixed visual style.
• Derive the direction from the product, audience, content, brand cues, and usage context. Avoid imposing the same dark gradient, glassmorphism, rounded-card aesthetic on every project.
• Preserve functionality, routes, data flow, copy, and existing design-system conventions unless the user requests broader changes.
• Prefer a few high-impact structural decisions over many decorative effects.
• Make the interface feel authored. Establish one clear visual idea and carry it through typography, composition, color, imagery, and interaction.
• Work in the current framework and styling system. Add dependencies only when the benefit is clear and the project does not already solve the need.
• Use real content and realistic states. Do not hide weak structure behind placeholder copy, oversized empty areas, or ornamental graphics.

Workflow

1. Establish the actual surface

Inspect the repository before editing. Identify:

• the app framework, entry point, target route, and component tree;
• global styles, tokens, themes, component libraries, icons, fonts, and brand assets;
• existing responsive behavior and important interaction states;
• build, lint, test, and preview commands;
• nearby screens whose conventions should remain consistent.

Run the interface when possible. Capture or inspect a baseline at representative desktop and mobile sizes. If the user requested analysis only, stop after the audit and recommendations; otherwise continue through implementation and verification.

Do not replace the stack, rewrite unrelated components, invent a new brand, or change product behavior merely to make the redesign easier.

2. Write a compact design brief

Before changing styles, state the direction in a few lines:

• Product and user: what this interface helps whom accomplish.
• Desired character: choose two or three useful attributes such as precise, calm, editorial, technical, warm, understated, or energetic.
• Visual thesis: identify the single compositional or aesthetic idea that will make the product recognizable.
• Hierarchy: name the primary action, primary information, and supporting content.
• Constraints: record existing brand, accessibility, content, and framework requirements.

Infer these from the code and product context when the user has not supplied them. Ask only when a missing choice would materially change the result.

3. Audit before decorating

Read references/quality-rubric.md when evaluating the current interface or prioritizing changes.

Classify findings into three tiers:

1. Structural: broken hierarchy, confused information architecture, poor content order, unsuitable density, weak responsive composition.
2. Systemic: inconsistent type, spacing, color, radii, shadows, component variants, or states.
3. Polish: optical alignment, icon treatment, borders, microcopy, transitions, and small finishing details.

Fix them in that order. Decoration cannot rescue unclear structure.

4. Choose an intentional direction

Read references/premium-patterns.md when the UI feels generic, template-driven, or visibly AI-generated.

Select a direction that fits the product rather than combining every fashionable treatment. Decide explicitly:

• content width and grid behavior;
• information density and vertical rhythm;
• type roles, scale, weight, and line length;
• neutral palette, accent usage, and contrast hierarchy;
• border, radius, elevation, and surface rules;
• image or illustration treatment when assets exist;
• one restrained signature motif, if the product benefits from one;
• motion purpose, duration, and reduced-motion behavior.

Reuse existing brand assets and strong components. Remove decorative choices that lack a product rationale.