Communitygithub.com

plugin87/redesign

Améliorez un site ou une application existante vers une qualité premium sans casser les fonctionnalités — auditez le design actuel, identifiez les signes génériques/IA, puis appliquez des règles de goût et de système de manière chirurgicale. Utilisez quand l'utilisateur souhaite améliorer, moderniser, polir ou "rendre meilleure" une UI/codebase existante.

Qu'est-ce que redesign ?

Ce skill permet de moderniser et d'améliorer une interface utilisateur ou une codebase existante en suivant un processus d'audit rigoureux avant toute modification. Il commence par scanner l'architecture du projet (framework, méthode de style, tokens, composants) pour comprendre l'état actuel, puis diagnostique les problèmes à l'aide de listes de contrôle comme les valeurs par défaut interdites et le rubric de revue de design. Ensuite, il choisit un archétype ou système esthétique adapté à la marque, applique les changements dans un ordre précis (tokens, typographie, espacement, états des composants, puis animation) sans altérer les routes, données ou sémantiques du balisage, sauf pour les correctifs d'accessibilité. Le skill prend en charge les plateformes basées sur des agents AI comme Claude Code, en s'appuyant sur des fichiers markdown et des scripts Python pour valider la cohérence des tokens et l'absence de valeurs codées en dur. Il garantit que chaque page utilise un seul thème partagé, vérifie le contraste des couleurs, et exécute des tests de fumée sur tous les flux de travail fonctionnels avant de finaliser la livraison.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/redesign
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Skill : Redesign & Audit

Redesign axé sur l'audit qui préserve le comportement.

Étapes

  1. Lire workflows/redesign-audit.md (la séquence complète Analyser → Diagnostiquer → Diriger → Appliquer → Vérifier + Complétude de la sortie).
  2. Analyser la codebase : framework, méthode de style (→ acheminer vers l'adaptateur frameworks/ correspondant), réalité des tokens, composants, ce qui doit être préservé.
  3. Diagnostiquer avec la checklist des valeurs par défaut interdites (taste/design-taste.md) + le rubric de revue (skill design-review). Produire un tableau de constats priorisé.
  4. Diriger : choisir un archétype / système (skill apply-aesthetic) qui correspond à la marque.
  5. Appliquer dans l'ordre — d'abord les tokens, puis la typographie / espacement, puis les états des composants, puis l'animation — sans modifier les routes / données / sémantiques du balisage (sauf correctifs d'accessibilité).
  6. Vérifier : relancer design-review + a11y-audit ; tester chaque flux fonctionnel précédemment opérationnel ; vérifier le mode sombre et la réactivité. Exécuter scripts/validate_contrast.py sur la source des tokens et scripts/lint_hardcodes.py sur le code modifié.

Garde-fous

Ne jamais sacrifier une fonctionnalité fonctionnelle pour l'esthétique. Ne jamais livrer une couleur de marque qui échoue au test de contraste. Ne jamais supprimer les fonctionnalités d'accessibilité existantes. Livrer des fichiers complets — pas d'espaces réservés.

Cohérence mono-thème (critique pour les applications multi-pages)

Consolider en UN thème de tokens partagé et faire en sorte que chaque page le consomme — un redesign qui laisse différentes pages sur des palettes différentes a échoué. Remplacer les couleurs par page / ad hoc par des tokens sémantiques ; vérifier avec scripts/lint_hardcodes.py qu'aucune page ne réintroduit des valeurs hors thème. Les changements de thème doivent provenir d'une seule source de tokens, pas de modifications par page (.claude/rules/tokens-and-color.md → Cohérence mono-thème).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community