Redesign Skill

Provenance: github.com/Leonxlnx/taste-skill (skills/redesign-skill, MIT), audited 2026-10-13 (instruction-only, no scripts). Why: UI upgrades of existing projects without a stack rewrite. Upstream has since retired this skill in favor of design-taste-frontend; this copy is kept and edited locally (see note below).

Oficina edit (2026-10-19): diagnosis now comes from the design-audit skill. Removed advice that is itself a generated-UI tell (Geist/Outfit/Satoshi as "fonts with character", grain/noise overlays, mesh gradients, glassmorphism, spotlight borders, picsum backgrounds). When this file and design-audit/references/slop-catalog.md disagree, the catalog wins.

How This Works

When applied to an existing project, follow this sequence:

1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. Diagnose — Run the design-audit skill (or reuse its latest report). Use the audit below only for what that report does not cover.
3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

Design Audit

Typography

Check for these problems and fix them:

• Browser default fonts or Inter everywhere. Replace with a face chosen for the product's character and audience, and write the reason down. Do not swap one default for another (Geist, Satoshi, Space Grotesk and italic display serifs are defaults now too). A documented brand font stays.
• Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
• Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
• Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
• Numbers in proportional font. Use a monospace font or enable tabular figures (font-variant-numeric: tabular-nums) for data-heavy interfaces.
• Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
• All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
• Orphaned words. Single words sitting alone on the last line. Fix with text-wrap: balance or text-wrap: pretty.

Color and Surfaces

• Pure #000000 background. Replace with off-black, dark charcoal, or tinted dark (#0a0a0a, #121212, or a dark navy).
• Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
• More than one accent color. Pick one. Remove the rest. Consistency beats variety.
• Mixing warm and cool grays. Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
• Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
• Generic box-shadow. Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
• Decorative gradients and textures. Gradients, grain, grid or stripe backgrounds with no meaning are generated-UI tells. Prefer flat surfaces from the neutral ramp; add texture only when the brand calls for it.
• Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
• Random dark sections in a light mode page (or vice versa). A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to #111 in the middle of a cream page.
• Empty sections. A section that is only text usually needs real content (product photo, screenshot, real number, example), not decoration. Never ship random placeholder photos or a low-opacity image buried under a wash.

Layout

• Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
• Three equal card columns as feature row. This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
• Using height: 100vh for full-screen sections. Replace with min-height: 100dvh to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
• Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
• No max-width container. Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
• Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
• Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.
• No overlap or depth. Elements sit flat next to each other. Use negative margins to create layering and visual depth.
• Symmetrical vertical padding. Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
• Dashboard always has a left sidebar. Consider top navigation, a floating command menu, or a collapsible panel when it fits the project's navigation.
• Desktop sidebar collapses to nothing. For collapsible sidebars, keep expanded labels as the default and offer an opt-in icon rail around 56-72px wide, with one icon per destination. Keep the active item highlighted and replace group headings with thin dividers. Below the project's tablet breakpoint, use an off-canvas drawer instead of a rail.
• Missing whitespace. Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
• Buttons not bottom-aligned in card groups. When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
• Feature lists starting at different vertical positions. In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
• Inconsistent vertical rhythm in side-by-side elements. When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
• Mathematical alignment that looks optically wrong. Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.

Interactivity and States

• No hover states on buttons. Add background shift, slight scale, or translate on hover.
• No active/pressed feedback. Add a subtle scale(0.98) or translateY(1px) on press to simulate a physical click.
• Instant transitions with zero duration. Add smooth transitions (200-300ms) to all interactive elements.
• Missing focus ring. Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
• No loading states. Replace generic circular spinners with skeleton loaders that match the layout shape.
• No empty states. An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
• No error states. Add clear, inline error messages for forms. Do not use window.alert().
• Dead links. Buttons that link to #. Either link to real destinations or visually disable them.
• No indication of current page in navigation. Style the active nav link differently so users know where they are.
• Icon-only navigation without names or usable targets. Keep label text in the DOM, visually hidden in the rail, and show tooltips on hover and keyboard focus. Give rail items and the collapse/expand control targets of at least 44×44px. Use a button with an accessible name and aria-expanded for the control.
• Scroll jumping. Anchor clicks jump instantly. Add scroll-behavior: smooth.
• Animations using top, left, width, height. Switch to transform and opacity for GPU-accelerated, smooth animation.

Content

• Generic names like "John Doe" or "Jane Smith". Use diverse, realistic-sounding names.
• Fake round numbers like 99.99%, 50%, $100.00. Use organic, messy data: 47.2%, $99.00, +1 (312) 847-1928.
• Placeholder company names like "Acme Corp", "Nexus", "SmartFlow". Invent contextual, believable brand names.
• AI copywriting cliches. Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
• Exclamation marks in success messages. Remove them. Be confident, not loud.
• "Oops!" error messages. Be direct: "Connection failed. Please try again."
• Passive voice. Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
• All blog post dates identical. Randomize dates to appear real.
• Same avatar image for multiple users. Use unique assets for every distinct person.
• Lorem Ipsum. Never use placeholder latin text. Write real draft copy.
• Title Case On Every Header. Use sentence case instead.

Component Patterns

• Generic card look (border + shadow + white background). Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
• Always one filled button + one ghost button. Add text links or tertiary styles to reduce visual noise.
• Pill-shaped "New" and "Beta" badges. Try square badges, flags, or plain text labels.
• Accordion FAQ sections. Use a side-by-side list, searchable help, or inline progressive disclosure.
• 3-card carousel testimonials with dots. Replace with a masonry wall, embedded social posts, or a single rotating quote.
• Pricing table with 3 towers. Highlight the recommended tier with color and emphasis, not just extra height.
• Modals for everything. Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
• Avatar circles exclusively. Try squircles or rounded squares for a less generic look.
• Light/dark toggle always a sun/moon switch. Use a dropdown, system preference detection, or integrate it into settings.
• Footer link farm with 4 columns. Simplify. Focus on main navigational paths and legally required links.

Iconography

• Icons used as decoration. The tell is the icon tile above every heading, not the icon library. Keep the project's existing set; cut icons that carry no meaning.
• Rocketship for "Launch", shield for "Security". Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
• Inconsistent stroke widths across icons. Audit all icons and standardize to one stroke weight.
• Missing favicon. Always include a branded favicon.
• Stock "diverse team" photos. Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.

Code Quality

• Div soup. Use semantic HTML: <nav>, <main>, <article>, <aside>, <section>.
• Collapsed navigation is inert or hidden. Keep the rail and collapse/expand control outside hidden or inert ancestors, exposed to assistive technology and operable by pointer and keyboard, with visible focus indicators. Suppress focus and interaction in inactive expanded sidebar content with inert, hidden, or display: none; use explicit tab-stop and interaction management if a visual transition keeps it rendered. aria-hidden="true" alone does not remove descendants from the tab order.
• Inline styles mixed with CSS classes. Move all styling to the project's styling system.
• Hardcoded pixel widths. Use relative units (%, rem, em, max-width) for flexible layouts.
• Missing alt text on images. Describe image content for screen readers. Never leave alt="" or alt="image" on meaningful images.
• Arbitrary z-index values like 9999. Establish a clean z-index scale in the theme/variables.
• Commented-out dead code. Remove all debug artifacts before shipping.
• Import hallucinations. Check that every import actually exists in package.json or the project dependencies.
• Missing meta tags. Add proper <title>, description, og:image, and social sharing meta tags.

Strategic Omissions (What AI Typically Forgets)

• No legal links. Add privacy policy and terms of service links in the footer.
• No "back" navigation. Dead ends in user flows. Every page needs a way back.
• No custom 404 page. Design a helpful, branded "page not found" experience.
• No form validation. Add client-side validation for emails, required fields, and format checks.
• No "skip to content" link. Essential for keyboard users. Add a hidden skip-link.
• No cookie consent. If required by jurisdiction, add a compliant consent banner.

Upgrade Techniques

Effects are not upgrades. Scroll-jacking, glassmorphism, spotlight borders, grain overlays, parallax stacks and staggered reveals are now the generated-UI look itself, and reveal animations often leave content invisible when they fail. Upgrade by subtraction and by content:

• Real content first. Replace placeholder copy, fake data and decorative illustrations with the product's own photos, screenshots, numbers and examples.
• One clear type scale. At least one strong size jump between heading and body; tabular numbers where data is compared.
• Whitespace with rhythm. Tight inside a group, generous between sections.
• Motion with a job. Transitions only for state changes (open, close, loading, feedback), transform/opacity, ease-out, honoring prefers-reduced-motion. Content visible by default.
• Tinted, consistent shadows only where elevation communicates hierarchy.

Fix Priority

Apply changes in this order for maximum visual impact with minimum risk:

1. Font swap — biggest instant improvement, lowest risk
2. Color palette cleanup — remove clashing or oversaturated colors
3. Hover and active states — makes the interface feel alive
4. Layout and spacing — proper grid, max-width, consistent padding
5. Replace generic components — swap cliche patterns for modern alternatives
6. Add loading, empty, and error states — makes it feel finished
7. Polish typography scale and spacing — the premium final touch

Rules

• Work with the existing tech stack. Do not migrate frameworks or styling libraries.
• Do not break existing functionality. Test after every change.
• Before importing any new library, check the project's dependency file first.
• If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
• If the project has no framework, use vanilla CSS.
• Keep changes reviewable and focused. Small, targeted improvements over big rewrites.