redesign-skill

Audits and upgrades existing website and app designs to premium visual standards.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill redesign-skill-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: redesign-skill
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/redesign-skill
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill redesign-skill-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing websites and apps often carry generic AI-generated design patterns—default fonts, purple gradients, three-card layouts, missing hover states—that make products look unfinished. This Skill systematically audits a codebase for these weaknesses and applies targeted upgrades without breaking functionality. ## Core Features & Use Cases - Design Audit: Scans typography, color, layout, interactivity, content, components, iconography, and code quality to list every generic pattern and missing state. - Targeted Upgrades: Applies high-impact fixes in priority order—font swaps, palette cleanup, hover/active states, layout spacing, component replacement, and loading/empty/error states. - Framework-Agnostic: Works with Tailwind (v3 or v4), vanilla CSS, styled-components, or any existing stack without migrating frameworks. - Use Case: Point it at a marketing landing page built with Tailwind that uses Inter everywhere, a purple gradient hero, and three equal feature cards. It will diagnose each issue and rewrite the styles with a distinctive font pairing, a single desaturated accent, and an asymmetric layout. ## Quick Start Redesign this project by auditing its current design patterns and upgrading it to premium quality without breaking existing functionality.

Frequently Asked Questions about redesign-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I redesign an existing website without breaking functionality?

Run a structured audit of typography, color, layout, and interaction states, then apply targeted fixes in priority order starting with font swaps and palette cleanup. Work within the existing stack and test after every change rather than rewriting from scratch.

What are the most common AI-generated design patterns to avoid?

Common fingerprints include Inter font everywhere, purple-blue gradients, three equal card columns, pure black backgrounds, generic box shadows, and Lucide icons. Replace them with distinctive fonts, a single desaturated accent, asymmetric layouts, and tinted shadows.

Does this redesign approach work with Tailwind CSS?

Yes, it works with Tailwind, vanilla CSS, styled-components, or any styling method. Check the Tailwind version (v3 vs v4) before modifying config, and never migrate frameworks during a redesign.

What order should design fixes be applied for maximum impact?

Start with font swaps for the biggest instant improvement, then clean up the color palette, add hover and active states, fix layout and spacing, replace generic components, add loading and empty states, and finish with typography polish.

Why does my mobile layout jump when using 100vh sections?

Using height: 100vh causes layout jumping on mobile browsers due to the iOS Safari viewport bug. Replace it with min-height: 100dvh so full-screen sections remain stable as the browser chrome shows and hides.