UI Redesign — Design skill for Claude Code

ui-redesign — from vibe-coded to designed

**By [Achref Arabi](https://github.com/Achref23illi)** · [Instagram](https://www.instagram.com/arabi.achref/) · [LinkedIn](https://www.linkedin.com/in/achraf-arabi/)

[](https://github.com/Achref23illi/ui-redesign/stargazers) [](LICENSE) 

A UI/UX expert for your coding agent that redesigns the product **you already have**: not one pretty screen, the whole app and its design system. It works on a new git branch, one layer at a time, so your app is never touched.



Same layout, same data. Top: a real dashboard taken back to a plain build and designed again. Bottom: six screens of an example fashion app, the generic way and the designed way.

**If it makes your product better, a ⭐ helps other builders find it.**

Quick start

git clone --depth 1 https://github.com/Achref23illi/ui-redesign ~/.claude/skills/ui-redesign

Open Claude Code in your project and ask:

• "Redesign my app with ui-redesign"
• "Audit my design system"
• "My dashboard looks AI-generated, fix it"
• "Review these screens: ./shots"

How it works

1. New branch, always. Before the first edit it creates redesign/. Your working branch, your main branch and your deploys stay exactly as they are. Keep what you like, delete the rest.
2. It audits your design system. scripts/audit.py reads your code and counts what drifted:
   • every colour (with near-duplicates grouped and opacity sprawl flagged);
   • font families, sizes and weights;
   • radii, spacing and shadows;
   • z-index, breakpoints