redesign

Audits and upgrades existing website and app designs to premium visual standards.

1|2|Updated Nov 25, 2017
One-click install
npx skills add https://github.com/asarchami/dotfiles --skill redesign-asarchami
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: redesign
Source: https://github.com/asarchami/dotfiles/tree/main/dot_config/opencode/skills/ui_skills/redesign
Command: npx skills add https://github.com/asarchami/dotfiles --skill redesign-asarchami

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing websites and apps often carry generic AI-generated design patterns—default fonts, purple gradients, three-card layouts, and missing interaction states—that make products look unfinished and indistinguishable. ## Core Features & Use Cases - Design Audit: Systematically diagnoses typography, color, layout, interactivity, content, iconography, and code quality issues in an existing codebase. - Targeted Upgrades: Applies high-impact fixes like font swaps, palette cleanup, hover states, and layout corrections without rewriting the stack. - Use Case: Point it at a Tailwind landing page that looks like every other AI-generated site; it scans the code, lists every generic pattern found, and applies prioritized fixes while preserving functionality. ## Quick Start Redesign this project by auditing its current design and upgrading it to premium quality without breaking existing functionality.

Frequently Asked Questions about redesign

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

FAQPage Schema
How do I make my AI-generated website look less generic?

Run a design audit that checks for common AI fingerprints: default fonts, purple-blue gradients, three equal card columns, and pure black backgrounds. Then apply targeted fixes like swapping to a distinctive font, reducing to one accent color, and breaking layout symmetry.

How to redesign an existing website without breaking functionality?

Work with the existing tech stack instead of rewriting. Follow a scan-diagnose-fix sequence: identify the framework and styling method, list design weaknesses, then apply small targeted changes in priority order—fonts first, then colors, states, and layout—testing after each change.

Does this redesign approach work with Tailwind CSS projects?

Yes, it works with Tailwind, vanilla CSS, styled-components, and other styling methods. For Tailwind projects, check the version (v3 vs v4) before modifying the config, since configuration syntax differs between versions.

What are the most common AI design patterns to avoid?

The most common patterns are Inter font everywhere, purple-blue gradients, three equal feature cards, generic box-shadows, Lucide icons, and cliche copy like "Elevate" or "Seamless". Replacing these with considered alternatives creates immediate differentiation.

When should I not use this redesign approach?

Avoid it when a project needs a full rebrand or architectural rebuild rather than visual polish, since the method explicitly avoids framework migrations and large rewrites. It is designed for incremental upgrades to functional existing products.