98.8K+Download
Skip to the usage guide
redesign-existing-projectsby Leonxlnx

Redesign Existing Projects Skill.

A Claude Code and Codex skill for design review: audits an existing website or app and upgrades it to premium visual quality.

  • Design Review & Accessibility
  • Review report
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md
--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules
Front matter and section headings read from the upstream file on 2026-09-14 · 15,032 characters in full

01 What it does

What the redesign-existing-projects Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Upgrades existing websites and apps to premium visual quality by auditing current design, identifying generic AI patterns, and applying high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

The skill scans the codebase to identify the framework and styling method, diagnoses every generic pattern and weak point through a comprehensive design audit, then applies targeted upgrades working with the existing stack. Changes are prioritized by visual impact and risk, from font swaps and color cleanup to component replacement and typography polish.

Review report
See the example prompt ↗

How It Works

  1. 01
    Scan the Codebase

    Read the codebase to identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.

  2. 02
    Diagnose Generic Patterns

    Run through the design audit to list every generic pattern, weak point, and missing state found in the project.

  3. 03
    Fix with Targeted Upgrades

    Apply targeted upgrades working with the existing stack without rewriting from scratch, improving what's already there.

02 Find your fit

When to Use the redesign-existing-projects Skill

Use the redesign-existing-projects skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Existing websites and apps that need upgrading to premium quality
  • Projects with generic AI design patterns that need to be identified and replaced
  • Projects using any CSS framework (Tailwind, styled-components) or vanilla CSS

    03 Inside the skill

    Rules the redesign-existing-projects Skill Gives Claude Code and Codex

    8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

    1. Work with Existing Tech Stack

      Do not migrate frameworks or styling libraries. Keep changes compatible with the current setup.

    2. Test After Every Change

      Do not break existing functionality. Test after every change to ensure the project still works.

    3. Check Dependencies Before Importing

      Before importing any new library, check the project's dependency file first to see what's already available.

    4. Check Tailwind Version

      If the project uses Tailwind, check whether it's v3 or v4 before modifying the config file.

    5. Use Vanilla CSS When No Framework Exists

      If the project has no framework, use vanilla CSS rather than introducing a new styling system.

    6. Never Use Lorem Ipsum

      Never use placeholder latin text. Write real draft copy instead of generic placeholder content.

    7. Follow Fix Priority Order

      Apply changes in priority order: font swap first (biggest instant improvement, lowest risk), then color cleanup, hover states, layout, component replacement, states, and typography polish last.

    8. Keep Changes Reviewable

      Keep changes reviewable and focused. Make small, targeted improvements over big rewrites.

    04 Put it to work

    Install redesign-existing-projects in Claude Code or Codex

    One npx skills add command, then a first task in your agent and a checklist for the result.

    Add redesign-existing-projects to Claude Code, Codex or Your Agent

    Run in your project; the installer asks which agent to add it to.

    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    Generic skills CLI form for skills/redesign-skill/SKILL.md; the repository may document its own path.

    Give the Skill a First Design Review Task

    Written in the skill's own terms; replace the bracketed parts with your material.

    Starter prompt
    Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

    Source: written from the SKILL.md in the skill's own terms.

    Check the First Result

    What the SKILL.md itself says a correct result looks like:

    • Confirm all icons have consistent stroke widths across the project
    • Check that all images have descriptive alt text for screen readers

    In OpenDesign import redesign-existing-projects from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

    Download OpenDesignRead the quickstart

    05 Open source, traceable

    Source, License and Verification

    Where this page's facts come from, and when they were last checked.

    Author
    Leonxlnx
    Repository
    github.com/Leonxlnx/taste-skill Branch main
    Skill file
    skills/redesign-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
    License
    MIT From LICENSE.
    Repository stars
    86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for redesign-existing-projects.
    Verified by OpenDesign
    2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

    Inside the SKILL.md

    1. How This WorksThree-step process: scan codebase, diagnose patterns, fix with targeted upgrades
    2. Design AuditComprehensive checklist covering typography, color, layout, interactivity, content, components, icons, code quality, and strategic omissions
    3. TypographyFix browser defaults, headline presence, body width, weight variety, number formatting, letter-spacing, and orphaned words
    4. Color and SurfacesReplace pure black, oversaturated accents, mixed grays, AI gradients, generic shadows, flat design, and inconsistent lighting
    5. LayoutBreak symmetry, replace three-column cards, use CSS Grid, add containers, vary radius, create depth, fix alignment
    6. Interactivity and StatesAdd hover, active, focus, loading, empty, and error states with smooth transitions and GPU-accelerated animations
    7. ContentUse realistic names and data, remove AI cliches, write active voice, vary dates, avoid Lorem Ipsum
    8. Component PatternsReplace generic cards, button pairs, badges, accordions, carousels, modals, avatars, toggles, and footer link farms
    9. IconographyMove beyond Lucide/Feather defaults, avoid cliche metaphors, standardize stroke widths, add favicon, use real photos
    10. Code QualityUse semantic HTML, consistent styling, relative units, alt text, clean z-index, remove dead code, add meta tags
    11. Strategic OmissionsAdd legal links, back navigation, custom 404, form validation, skip links, and cookie consent where needed
    12. Upgrade TechniquesHigh-impact techniques for typography, layout, motion, and surface upgrades to replace generic patterns
    The Skill's Own Description
    “Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.”

    Front-matter description from SKILL.md. The full file is about 15,032 characters. Read the full file on GitHub.

    Redesign Existing Projects

    Run redesign-existing-projects on a Real Design Review Task.

    Download OpenDesign, import redesign-existing-projects from its SKILL.md link, paste the prompt above, and read the plan before the result.

    Download OpenDesignBrowse all skills
    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    OpenDesign Desktop

    One design system. Every output unmistakably your brand

    Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

    • Web, slides, prototypes, dashboards, images, and video
    • 140+ design systems, plus the full template and skill library
    • Connect local Codex and 21+ coding agents · Free to use
    Download free

    Available for macOS and Windows