eko24ive/pi-config/design-taste-redesign-ui

Design Taste Redesign UI

Add this skill when the task changes an existing interface. Always use with design-taste-ui.

Redesign work is preservation-sensitive. The goal is not to show off. The goal is to improve quality without breaking what already works.

1. Redesign Modes

Classify first:

• Targeted upgrade: improve typography, spacing, color, states, or polish while preserving structure.
• Preserve redesign: modernize visual language without breaking brand, IA, or user muscle memory.
• Overhaul: new visual language, still preserving core behavior unless explicitly approved.

If unclear, ask:

Should this preserve the existing brand/structure, or are we free to overhaul the visual direction?

2. Scan Before Fix

Before editing, inspect enough context to understand:

• framework/runtime and styling method;
• component library/design system;
• current typography, colors, radii, shadows, spacing;
• navigation and primary flows;
• forms, data, and state handling;
• brand assets and copy voice;
• responsive/narrow behavior;
• accessibility/focus states;
• analytics/events/routes/deep links if visible;
• existing patterns worth preserving.

Do not start by rewriting. Diagnose first.

3. Preservation Rules

Never silently change:

• route names, URLs, anchors, deep links;
• navigation labels or IA;
• form field names, order, validation semantics, or submission contracts;
• analytics event names, tracking IDs, test IDs, automation hooks;
• keyboard shortcuts, app menu behavior, gestures, or platform-native behavior;
• legal, consent, security, billing, or policy copy;
• brand logo/wordmark;
• product copy voice;
• data semantics;
• accessibility wins already present.

Ask before changing any of the above.

4. Fix Priority

Apply changes in this order for maximum value with minimum risk:

1. Typography: font, scale, line-height, tracking, line length, hierarchy.
2. Color cleanup: contrast, palette consistency, accent discipline, remove oversaturation.
3. Interaction states: hover, focus, active, disabled, loading, empty, error.
4. Layout and spacing: max widths, rhythm, grid, alignment, responsive collapse.
5. Replace generic patterns only where they are the problem.
6. Add missing states and edge-case UI.
7. Final polish: copy audit, icon consistency, shadows/materiality, motion restraint.

Stop when the brief is satisfied. Do not keep redesigning adjacent UI.

5. Audit Checklist

Typography

Flag and improve:

• browser default fonts or bland default type where brand needs character;
• weak hierarchy;
• body text too wide;
• orphaned words;
• all-caps labels everywhere;
• inconsistent weights;
• proportional numbers in data-heavy UI.

Color and Surfaces

Flag and improve:

• pure black/white flatness when depth is needed;
• oversaturated accents;
• too many accent colors;
• mixed warm/cool grays;
• generic AI purple/blue glow;
• random dark/light section flips;
• harsh generic shadows;
• flat empty sections that need subtle visual depth.

Layout

Flag and improve:

• everything centered and symmetrical;
• three equal feature cards by default;
• fragile percentage/flex math where grid would be safer;
• missing max-width container;
• inconsistent vertical rhythm;
• forced equal-height cards with misaligned content;
• poor mobile/narrow behavior;
• touch targets too small;
• nav wrapping or overflowing.

Interaction and States

Flag and improve:

• no hover/focus/active states;
• missing keyboard focus indication;
• placeholder-only labels;
• generic spinners where skeletons fit better;
• empty/error states missing;
• dead # links;
• instant transitions with no feedback;
• animations that update layout properties or churn render state.

Content

Flag and improve:

• lorem ipsum;
• generic names/companies;
• fake-perfect numbers;
• filler marketing verbs;
• broken grammar or cute-but-unclear copy;
• em-dashes or separator en-dashes in visible copy;
• repeated CTA intent labels.

Code Quality

Flag and improve only where related to the UI task:

• non-semantic markup/widgets where semantics are needed;
• missing alt text for meaningful images;
• arbitrary z-index abuse;
• hardcoded colors repeated across a system that already has tokens;
• commented-out/debug code introduced by the change;
• imports not present in the manifest.

6. Upgrade Techniques

Use only when they solve the identified problem:

• Typography refresh.
• Spacing/rhythm normalization.
• Color/token cleanup.
• Card reduction and grouping by space/dividers.
• Better asset usage.
• Better empty/loading/error states.
• Subtle motion and tactile feedback.
• Layout recomposition for broken hero/section/workflow.

Do not add a new aesthetic just because it is available.

7. Working With Existing Stack

• Match existing file organization and style.
• Prefer existing primitives/components.
• Prefer existing tokens/theme variables if present.
• If a package is missing, propose but do not install automatically.
• If the project has no design system, keep improvements local and consistent rather than inventing a large system.
• Test or run available checks when feasible.

8. Redesign Preflight

Before final answer or patch:

• Mode classified: targeted upgrade, preserve redesign, or overhaul.
• Current UI scanned enough to avoid blind changes.
• Preservation-sensitive contracts were not silently changed.
• Fixes are targeted to diagnosed issues.
• Existing stack/components/tokens were reused where reasonable.
• No unnecessary dependencies, migrations, or broad refactors.
• Accessibility and interaction states improved or preserved.
• Copy and visible text audited.
• Changes are reviewable and reversible.