Redesign Existing Projects

What it does

This skill allows AI agents to analyze and completely overhaul the visual design of existing projects. It transforms current layouts, color schemes, and typography into modern, cohesive interfaces based on specific aesthetic preferences or style guides.

When to use it

• Revamping an outdated dashboard or website to match a new brand identity without rewriting core functionality.
• Applying a consistent design language across multiple disparate user interfaces within a single application.
• Modernizing legacy codebases by generating updated CSS, HTML, or component structures that reflect current UI trends.
• Iterating on a prototype by rapidly testing different visual styles to find the most effective user experience.

Key capabilities

• Analyzes existing project files to understand current structure and content.
• Generates comprehensive redesigns including layout adjustments, color palette updates, and typography changes.
• Outputs ready-to-use code modifications or new design specifications based on requested taste profiles.
• Supports various file formats commonly found in web and software development projects.

Example prompts

• "Redesign my existing React dashboard to have a minimalist dark mode aesthetic with neon accents."
• "Take this legacy HTML/CSS project and modernize the UI to look like a high-end SaaS platform."
• "Apply a brutalist design style to my current portfolio website while keeping all text content intact."

Tips & gotchas

Ensure you provide clear context about the original project's purpose so the redesign remains functional, not just visually striking. This skill focuses on visual transformation; complex logic or backend changes may require additional instructions beyond the scope of a pure design overhaul.