anvil-ui-redesign

Audits existing websites for generic design patterns and applies targeted CSS and layout upgrades.

1|Updated Aug 27, 2026
One-click install
npx skills add https://github.com/rogerznts/anvil --skill anvil-ui-redesign-rogerznts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anvil-ui-redesign
Source: https://github.com/rogerznts/anvil/tree/main/anvil/.claude/skills/anvil-ui-redesign
Command: npx skills add https://github.com/rogerznts/anvil --skill anvil-ui-redesign-rogerznts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing websites and apps often carry generic AI-generated design fingerprints: default fonts, purple-blue gradients, three-card feature rows, and missing interaction states. This Skill audits a live codebase against a detailed design checklist and applies targeted upgrades without rewriting the stack or breaking functionality. ## Core Features & Use Cases - Design Audit: Scans the codebase to identify the framework and styling method, then diagnoses weak points across typography, color, layout, interactivity, content, components, iconography, and code quality. - Targeted Upgrades: Applies prioritized fixes such as font swaps, palette cleanup, hover and active states, layout corrections, and loading/empty/error states, working with Tailwind, vanilla CSS, or any existing setup. - Use Case: You have a working SaaS landing page that looks like every other AI-generated site. Run this Skill to get a diagnosis of generic patterns and a sequenced set of concrete fixes, from font replacement to scroll-driven motion. ## Quick Start Audit my current website's design and upgrade the generic patterns to a higher-end look without changing the framework.

Frequently Asked Questions about anvil-ui-redesign

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

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

Audit the design for common fingerprints like Inter fonts, purple-blue gradients, three-card feature rows, and missing hover states. Then apply targeted fixes in priority order: font swap, color palette cleanup, interaction states, layout corrections, and component replacements.

How to redesign a website without breaking existing functionality?▼

Work with the existing tech stack instead of rewriting from scratch. Scan the codebase first to identify the framework and styling method, apply small targeted improvements, and test after every change to keep the work reviewable.

Does this redesign approach work with Tailwind CSS?▼

Yes, it works with Tailwind, vanilla CSS, styled-components, and other styling methods. Before modifying Tailwind configuration, check whether the project uses v3 or v4, since config formats differ between versions.

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

The most common patterns are purple-blue AI gradients, three equal card columns, Lucide or Feather icons, generic box-shadows, pure black backgrounds, and copy cliches like Elevate or Seamless. Replacing these with considered alternatives removes the generated look.

When should I not use a targeted redesign approach?▼

Avoid it when the project needs a full rebrand or architectural change rather than visual polish, since the rules prohibit framework migrations and large rewrites. It is designed for incremental, reviewable improvements to a working product.