Redesign Existing Projects
Upgrade an existing site or app to feel premium by auditing generic AI UI patterns and applying targeted typography, layout, and polish fixes without a full rewrite.
Overview
redesign-existing-projects is an agent skill most often used in Build (also Validate prototype, Launch distribution) that audits live UI for generic patterns and applies premium design upgrades without breaking existing
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill redesign-existing-projectsWhat is this skill?
- Three-step workflow: Scan codebase, Diagnose via design audit, Fix in place without rewriting the app
- Typography audit targets default/Inter fonts, weak headlines, wide body measure, and missing weight steps (500/600)
- Calls out generic AI design tells and pairs display fonts or serif/sans pairings for editorial feel
- Works with Tailwind, vanilla CSS, styled-components, or other existing styling approaches
- Preserves functionality while upgrading hierarchy, spacing, and component states
- 3-step sequence: Scan, Diagnose, Fix
- Typography audit covers fonts, headline presence, ~65 character body width, and weights 500/600
Adoption & trust: 101k installs on skills.sh; 37.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your shipped UI works but reads as template-grade—weak type, flat hierarchy, and obvious AI-default styling undermines credibility.
Who is it for?
Indie builders polishing an existing React, static, or hybrid frontend who want taste-level upgrades while keeping routes and behavior intact.
Skip if: Greenfield apps with no UI yet (start with a design system skill instead), or backend-only changes with no visual surface to audit.
When should I use this skill?
User wants to upgrade an existing website or app design, remove generic AI UI patterns, or improve typography and hierarchy on current CSS.
What do I get? / Deliverables
You get a diagnosed list of generic patterns plus targeted styling and component improvements on your current stack, ready for review or ship without a ground-up rebuild.
- Design audit list of generic patterns and weak points
- Targeted CSS/component upgrades applied in-repo
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build/frontend because the skill scans the codebase and improves styling in place across Tailwind, vanilla CSS, or CSS-in-JS stacks. Frontend subphase fits the Scan → Diagnose → Fix sequence focused on visual hierarchy, typography, and interaction states on shipped UI code.
Where it fits
Tighten landing typography before sharing a clickable prototype with early users.
Replace Inter-heavy dashboards with intentional display type and spacing without touching API code.
Run the design audit as a pre-release pass to catch missing hover/focus states reviewers would flag.
Polish marketing pages so launch posts do not look like default AI templates.
How it compares
Incremental audit-and-fix on your repo, not a Figma-to-code generator or a one-shot ‘make it pretty’ prompt without codebase context.
Common Questions / FAQ
Who is redesign-existing-projects for?
Solo builders and small teams shipping web or app frontends who need editorial, premium visual quality on code they already maintain.
When should I use redesign-existing-projects?
Use it in Build/frontend when refactoring UI polish; in Validate/prototype before showing investors or users; and in Launch/distribution when landing pages still look generic.
Is redesign-existing-projects safe to install?
It instructs the agent to edit styles and components in your tree—review diffs and the Security Audits panel on this page before merging to production branches.
SKILL.md
READMESKILL.md - Redesign Existing Projects
# Redesign Skill ## 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 through the audit below. List every generic pattern, weak point, and missing state you find. 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 font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body. - **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. - **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile. - **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades. - **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, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width phot