diff --git a/docs/superpowers/specs/2026-05-21-refonte-playground-design.md b/docs/superpowers/specs/2026-05-21-refonte-playground-design.md
new file mode 100644
index 0000000..de866ca
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-21-refonte-playground-design.md
@@ -0,0 +1,124 @@
+# Refonte du système de playground
+
+Date : 2026-05-21
+Branche : `feature/MUI-34-revoir-le-systeme-de-playground`
+
+## Contexte
+
+Le playground actuel (`.playground/`) est une **fausse SPA** : une unique page
+`index.vue` contient une sidebar codée à la main et charge dynamiquement les
+pages de démo via `import.meta.glob` + `<component :is>`. Il n'y a ni vrai
+routage, ni layout, et la sidebar ne réutilise pas le composant `MalioSidebar`
+de la bibliothèque.
+
+Les pages de démo existent déjà dans `.playground/pages/composant/<catégorie>/<nom>.vue`
+mais ne sont pas exploitées comme de vraies routes.
+
+## Objectif
+
+Refondre le playground autour du **vrai routage fichier de Nuxt** et d'un
+**layout par défaut** qui embarque le composant `MalioSidebar` de production
+(dogfooding du composant).
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| Navigation | Vrai routage Nuxt + layout dédié |
+| Construction de la sidebar | Liste manuelle centralisée |
+| Habillage du layout | Sidebar + contenu seul (épuré, chaque page gère son titre) |
+| Page d'accueil | Page de bienvenue simple |
+| Surbrillance lien actif | Hors périmètre (MalioSidebar inchangé) |
+
+## Architecture
+
+### 1. Config de navigation centralisée
+
+Nouveau fichier `.playground/playground.nav.ts` exportant un tableau
+`SidebarSection[]` (type exporté par `MalioSidebar`). Les sections sont
+définies manuellement ; chaque item est un `{ label, to }` pointant vers la
+route de démo.
+
+```ts
+import type { SidebarSection } from '../app/components/malio/sidebar/Sidebar.vue'
+
+export const navSections: SidebarSection[] = [
+  {
+    label: 'BOUTONS',
+    icon: 'mdi:gesture-tap-button',
+    items: [
+      { label: 'Button', to: '/composant/button/button' },
+      { label: 'Button Icon', to: '/composant/button/buttonIcon' },
+    ],
+  },
+  // … autres sections (Champs, Sélections, Navigation, Données, Divers)
+]
+```
+
+Les routes correspondent exactement aux fichiers existants dans
+`.playground/pages/composant/`. Liste à couvrir :
+
+- **button/** : `button`, `buttonIcon`
+- **checkbox/** : `checkbox`
+- **radio/** : `radioButton`
+- **input/** : `inputText`, `inputNumber`, `inputAmount`, `inputEmail`,
+  `inputPassword`, `inputPhone`, `inputTextArea`, `inputAutocomplete`,
+  `inputUpload`, `inputRichText`
+- **select/** : `select`, `selectCheckbox`
+- **time/** : `time`
+- **tab/** : `tabList`
+- **sidebar/** : `sidebar`
+- **drawer/** : `drawer`
+- **datatable/** : `datatable`
+- **site/** : `siteSelector`
+- **form/** : `client`
+
+Le regroupement en sections et les libellés affichés sont au choix du
+développeur (manuel). Les routes, elles, sont imposées par les fichiers.
+
+### 2. Layout par défaut
+
+Nouveau fichier `.playground/layouts/default.vue` :
+
+- Conteneur `flex` pleine hauteur (`h-screen`).
+- `<MalioSidebar :sections="navSections">` à gauche.
+  - Slots `logo` / `logo-collapsed` : logos `LOGO_MALIO.png` /
+    `LOGO_MALIO_COLLAPSED.png` (servis depuis le `public/` du layer),
+    enveloppés dans un `<NuxtLink to="/">` pour revenir à l'accueil.
+  - Collapse géré en interne par le composant (mode non-contrôlé).
+- `<main class="flex-1 overflow-y-auto p-6"><slot /></main>` à droite.
+
+Le layout `default` s'applique automatiquement à toutes les pages du
+playground — aucune page n'a besoin de `definePageMeta({ layout })`.
+
+### 3. Page d'accueil
+
+`.playground/pages/index.vue` réécrite en page de bienvenue simple :
+titre + invitation à choisir un composant dans la sidebar. Toute la logique
+de glob / chargement dynamique / sidebar maison est supprimée.
+
+### 4. Pages de démo
+
+**Inchangées.** Elles sont déjà des routes `/composant/<cat>/<nom>` et
+hériteront automatiquement du layout `default`.
+
+### 5. Mise à jour du skill `creating-malio-component`
+
+Ajouter une étape au skill : lors de la création d'un nouveau composant,
+ajouter son entrée dans `.playground/playground.nav.ts` pour qu'il apparaisse
+dans la sidebar.
+
+## Hors périmètre
+
+- Surbrillance de l'item actif dans `MalioSidebar` (ticket dédié si besoin).
+- Toute autre évolution de `MalioSidebar`.
+- Refonte du contenu des pages de démo existantes.
+
+## Critères de réussite
+
+- `npm run dev` lance le playground avec `MalioSidebar` dans un layout.
+- Cliquer sur un item de la sidebar change l'URL et affiche la bonne démo.
+- Le logo ramène à l'accueil ; l'accueil affiche le message de bienvenue.
+- Plus aucune trace de la sidebar maison ni du chargement dynamique dans
+  `index.vue`.
+- `npm run lint` et `npm run test` passent.