skills.rest
abnibsth
abnibsthCOMMUNITY
Explore all skills by this author →
GitHub

redesign-existing-projects

Audit and upgrade visual design of existing web applications without altering functionality.

2|Updated Apr 1, 2026
Search Tags:#ui/ux#user experience#web design#design automation#website redesign
One-click install
npx skills add https://github.com/abnibsth/pelita-hati --skill redesign-existing-projects-abnibsth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/abnibsth/pelita-hati/tree/main/.agents/skills/redesign-existing-projects
Command: npx skills add https://github.com/abnibsth/pelita-hati --skill redesign-existing-projects-abnibsth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill upgrades existing websites and apps, enhancing their design and functionality without breaking existing features.

Core Features & Use Cases

  • Design Audit: Inspects and evaluates the current design of a website or app.
  • Typography Improvements: Recommends font swaps, adjusts headings, and optimizes body text for readability.
  • Color and Surface Refinements: Suggests changes to color palettes, shadows, and backgrounds.
  • Layout Adjustments: Offers improvements to layout, grid systems, and spacing.
  • Interactivity and States: Enhances hover effects, active states, and transitions.
  • Content Revisions: Suggests real data for placeholders and improves copy.
  • Component Patterns: Recommends alternatives to common, overused UI components.
  • Iconography Updates: Suggests different icon sets for a more unique look.
  • Code Quality: Ensures semantic HTML, CSS, and best practices for maintainability.
  • Use Case: Ideal for developers or designers looking to give an outdated web application a modern facelift while keeping all functionality intact.

Quick Start

Apply the redesign-existing-projects skill to your website to automatically apply design improvements.

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 outdated web applications without breaking existing functionality?▼

To redesign outdated web applications without breaking functionality, you need a design audit that evaluates typography, color, layout, and interactivity, then applies specific HTML and CSS enhancements while preserving the underlying logic.

What is the best way to improve UI UX design for an existing website?▼

The best way to improve UI UX design for an existing website is to systematically refine typography, adjust color palettes and shadows, update grid spacing, and enhance hover states and transitions for a modernized user experience.

Can I update website typography and color schemes without changing the underlying code logic?▼

Yes, you can update website typography and color schemes without changing code logic by swapping fonts, optimizing body text readability, and refining CSS surfaces and shadows while maintaining semantic HTML and existing features.

How do I fix overused UI components and outdated iconography in web design?▼

To fix overused UI components and outdated iconography in web design, identify repetitive patterns during a design audit and replace them with alternative component suggestions and unique icon sets.

Do I need HTML and CSS knowledge to modernize an existing web app's visual design?▼

Yes, you need HTML and CSS knowledge to modernize an existing web app's visual design, as the process requires understanding UX principles and ensuring semantic HTML and best practices for maintainable code.

What are the limitations when applying automated design improvements to a web application?▼

Limitations when applying automated design improvements include the need to manually ensure that adjustments to layout, content revisions, and interactivity do not disrupt the established functionality or existing backend integration.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

redesign-existing-projects

Audit and upgrade existing website UI/UX with non-destructive CSS patches.

Community
Advanced
Nero-kkNero-kk

frontend-design

Create production-ready HTML/CSS/JS or framework components with refined typography and CSS variables.

Community
Advanced
wzyxdwllwzyxdwll
14

colorize

Create brand-aligned color palettes and apply semantic mappings to UI components.

Community
Advanced
memoirlabsmemoirlabs
6

frontend-design

Create production-grade frontend interfaces with intentional visual design direction.

Official
Advanced