Redesign Skill
A design audit for agents: generic AI design patterns and missing states are found and fixed in place.
- 533 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Edits project style, markup and component files once the diagnosis is approved.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/redesign-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Edits project style, markup and component files once the diagnosis is approved.
This is third-party code. Review the repository files before installing.
What it does
Redesign Skill is the `redesign-existing-projects` skill for Claude Code, Cursor, Codex and Windsurf. The agent reads the project, detects the framework and styling method, then audits nine areas: typography, colour and surfaces, layout, states and motion, copy, components, icons, code quality and omissions such as a 404 page and meta tags. It reports the diagnosis before any edit and, once approved, fixes by priority: fonts, colour, states, layout, motion. The concrete values (fonts Geist, Manrope and Poppins, a dark background palette, a spacing scale, Phosphor, Solar and Iconamoon icons, an easing curve) live in the Design Values section at the end of `SKILL.md`. Swap them for your own and the audit follows your design system.
Who it is for. Frontend developers and designers whose finished site looks generic and who need a pass through a concrete list of problems.
Good fit when
- An AI-built landing page looks like a thousand others: three equal columns and a purple gradient.
- The interface lacks hover, focus, empty and error states.
- Before release, gaps are hunted: a 404 page, legal links, favicon and alt text.
- A team design system goes into Design Values and the audit follows its rules.
Not a fit when
- A site is built from scratch: the skill diagnoses an existing project.
- Inter or Roboto is required: the defaults forbid them, so Design Values must be edited.
- Font sizes follow a non-Tailwind scale: Design Values describes the scale with Tailwind values.
Example request
Audit this project and upgrade the design. Report what you find before changing anything.Limitations
The defaults are strict: four fonts, dark backgrounds without gradients, one accent colour, no italics. For another style these items are edited by hand. The skill works inside the project stack and does not migrate it to another framework. It is a rule set: it runs no checks and draws no mockups. A good part of the audit is adapted from taste-skill, so the overlap with it is noticeable. The result depends on how thoroughly the agent reads the project.
How to disable. Delete the `redesign-existing-projects` directory from `.claude/skills`, or the rules file you created for Cursor, Codex or Windsurf.
FAQ
How do I adapt the skill to my own design?
Edit only the Design Values section at the end of `SKILL.md`: fonts, colours, spacing, icons and the easing curve. The audit above retunes itself.
What does the skill do about corner radii?
For nested shapes with a gap under 32 px, the inner radius equals the outer radius minus the gap when the result exceeds 2. That keeps corners concentric.
Does it change the project stack?
No. The rules require working inside the existing stack, keeping functionality intact and testing after every change.
Does it fit Codex or Windsurf?
Yes, copy the `SKILL.md` content into the tool's rules file: `AGENTS.md` for Codex, `.windsurfrules` for Windsurf.
Can I use it in Claude.ai without a terminal?
Yes. Download `SKILL.md`, upload it to a Claude.ai project or attach it to a chat and ask the model to follow it when reviewing a site.
Discussion
No questions or reviews yet.
Related
SkillsA registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL
Finds AI-look tells in generated frontend, from purple gradients to cream and terracotta, and rewrites the interface
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
README in short
The README explains the purpose briefly: diagnose, then fix in place. It shows install paths for Claude Code, Cursor, Codex, Windsurf and Claude.ai. A table lists what the skill enforces by area, and a separate section covers the nested radius rule.
README badge
Original SKILL.md
--- name: redesign-existing-projects description: "Audits and upgrades existing websites and apps to premium quality. Diagnoses generic AI design patterns, weak states, and sloppy code, then applies targeted fixes without breaking functionality. Use this skill whenever the user wants to improve, polish, upgrade, refine, audit, fix, or redesign an EXISTING site, page, app, or component, even when they only say it looks bad, cheap, generic, or AI made. Works with any CSS framework or vanilla CSS." --- # Redesign Existing Projects This skill is a **diagnostic**. It finds what is wrong with an existing interface and fixes it in place. ## Design values All concrete values (fonts, background colors, spacing, radius, icon sets, motion timing) live in the **Design Values** section at the bottom of this file. That section is the single source of truth. The audit below tells you *what to look for*; Design Values tells you *what to replace it with*. Never invent a font, hex value, spacing number, radius, or easing curve that is not in Design Values. If a situation is not covered there, ask rather than guessing. To adapt this skill to a different design system, edit only the Design Values section. The entire audit follows it automatically. ## How this works 1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, CSS modules), and the current design patterns. 2. **Diagnose** — Run the full audit below. List every generic pattern, weak point, and missing state you find. Report before fixing. 3. **Fix** — Apply targeted upgrades inside the existing stack, in the Fix Priority order. Do not rewrite from scratch. Improve what is there. --- # Design audit ## Typography - **Browser default fonts, or Inter / Roboto / Arial / Open Sans / Helvetica.** Replace with an approved font from the Design Values section. - **Two typefaces on one site.** Consolidate to one, unless the project brief explicitly calls for a pair. - **Italic type anywhere.** Remove it. Use weight, size, or color for emphasis instead. - **Ultra bold weights (800, 900, black).** Cap at semibold or bold. - **Only Regular (400) and Bold (700) in use.** Introduce Medium (500) and SemiBold (600) for finer hierarchy. - **Headlines lack presence.** Increase display size and tighten letter spacing so headlines feel heavy and intentional. Adjust tracking only within the line height the type scale already provides. - **Body text too wide.** Cap paragraph measure at roughly 65 characters. - **Numbers in a proportional font.** Enable `font-variant-numeric: tabular-nums` for data heavy interfaces. - **Missing letter spacing adjustments.** Negative tracking on large headers, positive tracking on small labels and caps. - **All caps subheaders everywhere.** Switch to sentence case or small caps. Do not switch to italics. - **Orphaned words.** A single word alone on the last line. Fix with `text-wrap: balance` on headings and `text-wrap: pretty` on body.