redesign-existing-projects

Diagnoses and upgrades generic UI design in existing codebases without rewriting functionality.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/MARUCIE/openclaw-foundry --skill redesign-existing-projects-marucie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/MARUCIE/openclaw-foundry/tree/main/web/public/packs/frontend-engineer/skills/frontend/redesign-existing-projects
Command: npx skills add https://github.com/MARUCIE/openclaw-foundry --skill redesign-existing-projects-marucie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing websites and apps often work fine but look like generic AI-generated templates, with default fonts, cliche gradients, and missing interaction states. This Skill audits and fixes visual quality in place, without rewriting the codebase or migrating frameworks. ## Core Features & Use Cases - Design Audit: Runs a structured checklist across typography, color, layout, interactivity, content, components, iconography, and code quality to find every generic pattern. - In-Place Upgrades: Applies targeted fixes such as font swaps, palette cleanup, hover/active states, and layout corrections that work with the existing stack (Tailwind, vanilla CSS, or component libraries). - Before/After Review: Presents change-by-change comparisons so you can keep or roll back individual improvements. - Use Case: You have a working SaaS dashboard built with Tailwind that looks like every other AI-generated page. The Skill scans the code, lists issues like Inter-everywhere typography and three equal card columns, then replaces them with distinctive fonts, asymmetric layouts, and proper loading and empty states. ## Quick Start Redesign this existing project to fix its generic AI look while keeping all current functionality and the current tech stack 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 website without rewriting the code?▼

Scan the codebase to identify the framework and styling method, then run a design audit covering typography, color, layout, and interaction states. Apply targeted fixes like font swaps, palette cleanup, and hover states directly in the existing stack instead of rebuilding from scratch.

How to fix the generic AI look in a Tailwind project?▼

Replace default fonts like Inter with distinctive options such as Geist or Outfit, remove purple-blue AI gradients, break three-column card symmetry, and add hover and active states. Check the Tailwind version (v3 vs v4) before modifying any config.

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

Common patterns include Inter everywhere, purple-blue gradients, three equal card columns, pure black backgrounds, Lucide icons, pill-shaped badges, and copy using words like Elevate or Seamless. The audit checklist covers each category with concrete replacements.

Does this work with vanilla CSS projects without a framework?▼

Yes. If the project has no framework, the upgrades are applied using vanilla CSS. The Skill works with whatever styling method the project already uses and never migrates frameworks or styling libraries.

When should I not use an in-place redesign approach?▼

Avoid it for green-field designs, which need a fresh design workflow, and for creating a full design system from scratch. It is also not suited for user research phases, since it assumes the product functionality is already validated.