redesign-existing-projects

Audit existing websites and apps to apply premium visual and interaction upgrades.

1|Updated May 28, 2026

Search Tags:#typography #web app #interaction design #visual hierarchy #ui audit #redesign

Ready to run

npx skills add https://github.com/harshilLakhani22/monali-ai-property --skill redesign-existing-projects-harshillakhani22

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/harshilLakhani22/monali-ai-property/tree/main/.agents/skills/redesign-existing-projects
Command: npx skills add https://github.com/harshilLakhani22/monali-ai-property --skill redesign-existing-projects-harshillakhani22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps transform an existing website or app from generic and unfinished into a polished, high-end product without breaking the current stack or rebuilding from scratch.

Core Features & Use Cases

Design audit: Identifies weak typography, bland color choices, generic layouts, and missing interaction states.
Targeted visual upgrades: Improves spacing, hierarchy, motion, surfaces, and component patterns while preserving functionality.
Implementation guidance: Works with the project’s existing CSS or component system, whether that is Tailwind, vanilla CSS, styled-components, or another setup.
Use case: A SaaS dashboard with flat cards, default fonts, and weak hierarchy can be reviewed and upgraded section by section into a more premium interface.

Quick Start

Redesign the attached project by auditing its current UI patterns, then apply focused improvements that make the experience feel premium while keeping the existing framework and functionality intact.

Frequently Asked Questions about redesign-existing-projects

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

FAQPage Schema

How do I redesign an existing web app without changing the current framework?▼

To redesign an existing web app without a framework migration, audit the current UI patterns and apply targeted visual upgrades to spacing, typography, and motion while preserving the underlying functionality.

What is the best way to improve weak visual hierarchy in a SaaS dashboard?▼

Improving weak visual hierarchy in a SaaS dashboard involves auditing generic UI patterns and applying premium upgrades to typography, surfaces, and component spacing to create a more polished interface.

Can I fix accessibility gaps and missing interaction states in my live product?▼

Yes, you can fix accessibility gaps and missing interaction states in a live product by reviewing the existing interface and applying focused design improvements without rebuilding from scratch.

Does this UI audit approach work with Tailwind or styled-components?▼

Yes, the UI audit and redesign approach works with Tailwind, vanilla CSS, or styled-components by integrating implementation guidance directly into the project's existing component system.

How do I upgrade bland color choices and flat cards in my application?▼

Upgrading bland color choices and flat cards requires identifying weak visual patterns during a design audit and replacing them with premium surfaces, motion, and refined color palettes.

What are the limitations of redesigning an app section by section?▼

Redesigning an app section by section requires preserving existing functionality and avoiding framework migrations, meaning upgrades are limited to visual and interaction improvements within the current stack.