---
name: refonte-design-site
description: Auditer, redonner une direction artistique et appliquer la refonte.
category: Création
difficulty: Intermédiaire
duration: ~1-2 h
tools: [Website Checker, Figma, designer, design-md, developpeur]
---

# Refonte design d'un site

> Auditer, redonner une direction artistique et appliquer la refonte.

Refond l'UI/UX d'un site existant : audit technique et UX, critique et direction artistique, formalisation d'un design system (tokens), puis application de la refonte.

## Étapes du workflow

### 1. Site à refondre _(Démarrage)_
Le site dont on veut améliorer le design.

### 2. Audit technique & UX — Action `Website Checker`
État des lieux : perf, structure, accessibilité.

### 3. Importer la maquette Figma — MCP `Figma`
MCP Figma : lit frames, styles et tokens de la maquette pour cadrer la refonte.

### 4. Critique & direction — Agent `designer`
Hiérarchie, contraste, couleurs, typo, composants.

### 5. Design system — Skill `design-md`
Tokens (couleurs, spacing) + contraste WCAG.

### 6. Appliquer la refonte — Agent `developpeur`
Mise en œuvre du nouveau design.

### 7. Site refondu _(Résultat)_
Un site cohérent, plus lisible et plus beau.

## Comment l'exécuter

Donne ce fichier à Claude Code (ou à ton agent) et demande : « Exécute ce
workflow ». L'assistant enchaînera les Skills / Agents listés dans l'ordre,
en te demandant de valider les étapes sensibles (déploiement, soumission GSC).
Les étapes sur une même ligne du schéma se font en parallèle.

Tu peux aussi adapter chaque étape : remplacer un outil, en sauter une, ou
brancher tes propres Skills.

---
Workflow généré depuis Freudix Studio — https://freudix.studio/workflows/refonte-design-site