@truix-dev/kayim-site-cloner 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KOUAKOU ATSE YATCHITCHEBE ISMAEL MONDESIRE 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# site-cloner
+
+Un [Agent Skill](https://agentskills.io) pour Claude et d'autres agents IA codeurs qui clone un site web à partir d'une URL : récupération du HTML, capture visuelle, extraction du design system (couleurs, typographie, breakpoints, spacing), puis reconstruction propre en composants **Next.js / TypeScript / Tailwind** — jamais un copier-coller du code source.
+
+Compatible avec **Claude Code**, **Claude.ai** (skills personnalisés) et tout outil qui suit le standard [Agent Skills](https://agentskills.io).
+
+## Ce que fait ce skill
+
+1. **Fetch** — récupère la structure et le contenu de la page cible
+2. **Capture visuelle** — inspecte le rendu réel (desktop + mobile) quand un outil de screenshot est disponible ; sinon demande une capture à l'utilisateur si nécessaire
+3. **Extraction du design system** — couleurs, typographie, breakpoints, échelle d'espacement, style des composants (voir [references/design-system-extraction.md](site-cloner/references/design-system-extraction.md) pour la méthodologie complète)
+4. **Reconstruction** — génère des composants `.tsx` réutilisables en Tailwind, alignés sur les conventions du projet cible
+5. **Passe de cohérence visuelle** — s'appuie sur un skill de design frontend si disponible, pour éviter l'effet "clone mécanique"
+
+Le skill rappelle aussi de vérifier la légitimité du clonage (site concurrent, contenu propriétaire) avant de se lancer, sans bloquer le travail pour un usage légitime (inspiration, prototypage, landing pages génériques).
+
+## Installation
+
+### ⚡ Installation ultra-rapide (Recommandée)
+
+Ouvre ton terminal dans le dossier de ton projet, choisis l'une des commandes ci-dessous et appuie sur **Entrée** :
+
+#### 🚀 Option 1 — Via NPX (Node.js) :
+```bash
+npx @truix-dev/kayim-site-cloner
+```
+
+#### 💻 Option 2 — Sans Node.js (Directement dans le terminal) :
+
+**Sur Windows (PowerShell) :**
+```powershell
+irm https://raw.githubusercontent.com/Kouakou-web-ai/site-cloner/main/install.ps1 | iex
+```
+
+**Sur macOS / Linux / WSL / Git Bash :**
+```bash
+curl -fsSL https://raw.githubusercontent.com/Kouakou-web-ai/site-cloner/main/install.sh | bash
+```
+
+> **Note :** Ces commandes installent automatiquement le skill à la fois dans ton projet actuel (`./.claude/skills/site-cloner`) et dans tes skills globaux (`~/.claude/skills/site-cloner`).
+
+---
+
+#### 🎬 Résultat animé qui s'affiche dans ton terminal :
+
+```text
+  _  __     _ __     _____ __  __ 
+ | |/ /    / \ \   / /_ _|  \/  |
+ | ' /    / _ \ \ / / | || |\/| |
+ | . \   / ___ \ Y /  | || |  | |
+ |_|\_\ /_/   \_\_/  |___|_|  |_|
+  ===========================================
+     ⚡ TRUIX DEV — SITE CLONER INSTALLER ⚡
+  ===========================================
+
+  ✔ Détection de l'environnement Claude Code...  [OK]
+  ✔ Téléchargement du skill site-cloner...        [████████████████████] 100%
+  ✔ Installé dans le projet actuel : ./.claude/skills/site-cloner
+  ✔ Installé au niveau global      : ~/.claude/skills/site-cloner
+
+  ┌────────────────────────────────────────────────────────┐
+  │  🎉 Installation réussie avec succès !                 │
+  │                                                        │
+  │  Auteur  : KAYIM (TRUIX DEV)                           │
+  │  Skill   : site-cloner v1.0.0                          │
+  │  Usage   : Tapez /skills dans Claude Code pour tester  │
+  └────────────────────────────────────────────────────────┘
+```
+
+Une fois installé, vérifie avec `/skills` dans Claude Code — `site-cloner` apparaîtra dans la liste.
+
+### Installation manuelle
+
+Si tu préfères cloner manuellement :
+
+**Option A — dans tes skills personnels (tous tes projets) :**
+```bash
+git clone https://github.com/Kouakou-web-ai/site-cloner.git /tmp/site-cloner
+mkdir -p ~/.claude/skills
+cp -r /tmp/site-cloner/site-cloner ~/.claude/skills/
+rm -rf /tmp/site-cloner
+```
+
+**Option B — dans un seul projet :**
+```bash
+git clone https://github.com/Kouakou-web-ai/site-cloner.git /tmp/site-cloner
+mkdir -p .claude/skills
+cp -r /tmp/site-cloner/site-cloner .claude/skills/
+rm -rf /tmp/site-cloner
+```
+
+### Claude.ai (skill personnalisé)
+
+Télécharge ce repo en `.zip` (bouton vert **Code → Download ZIP** sur GitHub), ne garde que le dossier `site-cloner/` à l'intérieur, zippe-le seul, puis importe-le dans **Réglages → Capacités → Skills** sur claude.ai.
+
+## Utilisation
+
+Donne simplement une URL à Claude avec une intention de clonage/inspiration :
+
+> Clone ce site pour moi en Next.js/Tailwind : https://exemple.com
+
+> Reconstruis cette landing page en gardant mon design system actuel : https://exemple.com
+
+Le skill se déclenche automatiquement dès qu'une URL est fournie avec ce type d'intention — pas besoin de l'invoquer par nom.
+
+## Structure
+
+```
+site-cloner/
+├── SKILL.md                                  # Instructions principales (chargées à l'activation)
+└── references/
+    └── design-system-extraction.md           # Méthodologie détaillée d'extraction (chargée à la demande)
+```
+
+## Limites connues
+
+- La capture d'écran automatique dépend des outils disponibles dans l'environnement d'exécution (navigateur headless, MCP de browsing). Sans ça, le skill travaille à partir du HTML/CSS et demande une capture manuelle si une fidélité visuelle précise est nécessaire.
+- Le skill ne copie jamais de contenu texte propriétaire verbatim (voir la section légitimité dans `SKILL.md`).
+
+## Licence
+
+MIT — voir [LICENSE](LICENSE). Utilise, modifie et redistribue librement.
+
+## Contribuer
+
+Les PR sont bienvenues — en particulier pour étendre le support à d'autres stacks (Vue, Svelte...) ou affiner la méthodologie d'extraction du design system.

package/bin/index.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+// --- Couleurs ANSI (Thème Violet KAYIM & TRUIX DEV) ---
+const VIOLET_LIGHT = '\x1b[38;5;141m';
+const VIOLET_MID   = '\x1b[38;5;135m';
+const VIOLET_DEEP  = '\x1b[38;5;129m';
+const VIOLET_SOFT  = '\x1b[38;5;147m';
+const BOLD_VIOLET  = '\x1b[1;38;5;135m';
+const BOLD_WHITE   = '\x1b[1;37m';
+const GREEN        = '\x1b[1;32m';
+const CYAN         = '\x1b[38;5;117m';
+const RESET        = '\x1b[0m';
+
+// Nettoyer l'écran
+console.clear();
+console.log('');
+
+// --- Banner KAYIM & TRUIX DEV ---
+console.log(`${VIOLET_LIGHT}  _  __     _ __     _____ __  __ ${RESET}`);
+console.log(`${VIOLET_MID} | |/ /    / \\ \\   / /_ _|  \\/  |${RESET}`);
+console.log(`${VIOLET_MID} | ' /    / _ \\ \\ / / | || |\\/| |${RESET}`);
+console.log(`${VIOLET_DEEP} | . \\   / ___ \\ Y /  | || |  | |${RESET}`);
+console.log(`${VIOLET_DEEP} |_|\\_\\ /_/   \\_\\_/  |___|_|  |_|${RESET}`);
+console.log(`${VIOLET_SOFT}  ===========================================${RESET}`);
+console.log(`${BOLD_VIOLET}     ⚡ TRUIX DEV — SITE CLONER INSTALLER ⚡${RESET}`);
+console.log(`${VIOLET_SOFT}  ===========================================${RESET}`);
+console.log('');
+
+// Helper pour attendre (sleep)
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function run() {
+  // 1. Spinner animé de détection
+  const spinChars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  const msg1 = "Détection de l'environnement Claude Code...";
+  for (let i = 0; i < 12; i++) {
+    const c = spinChars[i % spinChars.length];
+    process.stdout.write(`\r  ${VIOLET_LIGHT}${c}${RESET} ${msg1}`);
+    await sleep(60);
+  }
+  process.stdout.write(`\r  ${GREEN}✔${RESET} ${msg1}  ${GREEN}[OK]${RESET}\n`);
+
+  // 2. Barre de progression animée
+  const msg2 = 'Téléchargement du skill site-cloner';
+  const total = 20;
+  for (let i = 1; i <= total; i++) {
+    await sleep(35);
+    const filled = '█'.repeat(i);
+    const empty = ' '.repeat(total - i);
+    const percent = Math.round((i / total) * 100);
+    process.stdout.write(`\r  ${VIOLET_LIGHT}⠙${RESET} ${msg2}... [${VIOLET_MID}${filled}${RESET}${empty}] ${percent}%`);
+  }
+  process.stdout.write(`\r  ${GREEN}✔${RESET} ${msg2}... [${VIOLET_LIGHT}${'█'.repeat(total)}${RESET}] 100%\n`);
+
+  // 3. Déploiement des fichiers
+  const sourceDir = path.resolve(__dirname, '..', 'site-cloner');
+
+  if (!fs.existsSync(sourceDir)) {
+    console.error(`\n  ❌ Erreur: Dossier source ${sourceDir} introuvable.`);
+    process.exit(1);
+  }
+
+  // Cible 1 : Projet courant
+  const localTarget = path.resolve(process.cwd(), '.claude', 'skills', 'site-cloner');
+  fs.mkdirSync(path.dirname(localTarget), { recursive: true });
+  fs.cpSync(sourceDir, localTarget, { recursive: true, force: true });
+
+  // Cible 2 : Global (~/.claude/skills)
+  const homeDir = os.homedir();
+  const globalTarget = path.resolve(homeDir, '.claude', 'skills', 'site-cloner');
+  fs.mkdirSync(path.dirname(globalTarget), { recursive: true });
+  fs.cpSync(sourceDir, globalTarget, { recursive: true, force: true });
+
+  console.log(`  ${GREEN}✔${RESET} Installé dans le projet actuel : ${CYAN}./.claude/skills/site-cloner${RESET}`);
+  console.log(`  ${GREEN}✔${RESET} Installé au niveau global      : ${CYAN}~/.claude/skills/site-cloner${RESET}`);
+  console.log('');
+
+  // 4. Encadré final de succès
+  console.log(`${VIOLET_MID}  ┌────────────────────────────────────────────────────────┐${RESET}`);
+  console.log(`${VIOLET_MID}  │${RESET}  ${BOLD_WHITE}🎉 Installation réussie avec succès !${RESET}                 ${VIOLET_MID}│${RESET}`);
+  console.log(`${VIOLET_MID}  │${RESET}                                                        ${VIOLET_MID}│${RESET}`);
+  console.log(`${VIOLET_MID}  │${RESET}  ${BOLD_VIOLET}Auteur  :${RESET} ${BOLD_WHITE}KAYIM (TRUIX DEV)${RESET}                           ${VIOLET_MID}│${RESET}`);
+  console.log(`${VIOLET_MID}  │${RESET}  ${BOLD_VIOLET}Skill   :${RESET} site-cloner v1.0.0                          ${VIOLET_MID}│${RESET}`);
+  console.log(`${VIOLET_MID}  │${RESET}  ${BOLD_VIOLET}Usage   :${RESET} Tapez ${CYAN}/skills${RESET} dans Claude Code pour tester  ${VIOLET_MID}│${RESET}`);
+  console.log(`${VIOLET_MID}  └────────────────────────────────────────────────────────┘${RESET}`);
+  console.log('');
+}
+
+run().catch((err) => {
+  console.error('\n❌ Une erreur est survenue :', err.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@truix-dev/kayim-site-cloner",
+  "version": "1.0.0",
+  "description": "Agent Skill for Claude Code to clone web apps cleanly into Next.js & Tailwind. By KAYIM (TRUIX DEV).",
+  "main": "bin/index.js",
+  "bin": {
+    "kayim-site-cloner": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "site-cloner"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "agent-skills",
+    "claude-code",
+    "site-cloner",
+    "kayim",
+    "truix-dev",
+    "ai-agent",
+    "nextjs",
+    "tailwind"
+  ],
+  "author": "KAYIM (TRUIX DEV)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kouakou-web-ai/site-cloner.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Kouakou-web-ai/site-cloner/issues"
+  },
+  "homepage": "https://github.com/Kouakou-web-ai/site-cloner#readme"
+}

package/site-cloner/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: site-cloner
+description: Clone un site web à partir d'un lien fourni par l'utilisateur — récupère le HTML/CSS, tente une capture visuelle, extrait le design system (couleurs, typographie, breakpoints, espacements), puis reconstruit le résultat en composants Next.js/TypeScript/Tailwind propres et cohérents (jamais un copier-coller du code source). Utilise systématiquement ce skill dès que l'utilisateur donne une URL et demande de "cloner", "reproduire", "s'inspirer de", "recréer le design de", "reconstruire" ou "faire un site/une page qui ressemble à" un site existant — même si le mot "cloner" n'est pas utilisé explicitement.
+license: MIT
+---
+
+# Site Cloner
+
+Reconstruit un site web existant (à partir d'une URL) sous forme de composants Next.js/TypeScript/Tailwind propres, fidèles visuellement mais jamais copiés bruts. Le but n'est pas de dupliquer le code source (souvent minifié, illisible, non conventionnel) mais de comprendre le design et de le reconstruire proprement.
+
+## Avant de commencer : vérifier la légitimité
+
+Si l'URL correspond à un concurrent direct de l'utilisateur, à un site avec une identité de marque forte (logo, charte, contenu propriétaire), ou si l'utilisateur veut une reproduction pixel-perfect destinée à la mise en prod publique, fais une remarque brève (une phrase) avant de continuer — pas besoin de bloquer, juste s'assurer que c'est bien de l'inspiration/prototypage et pas une duplication problématique. Pour un site de référence générique (landing page, portfolio, SaaS non concurrent), continue directement sans poser de question.
+
+Ne copie jamais de contenu texte propriétaire (textes marketing, témoignages clients, articles) verbatim — reformule ou utilise un contenu placeholder, sauf si l'utilisateur possède le site ou a explicitement les droits dessus.
+
+## Workflow
+
+### Étape 1 — Fetch de la page
+
+Récupère le contenu rendu de l'URL fournie (structure, texte, liens, images référencées) avec l'outil de fetch web disponible dans l'environnement.
+
+Si tu as besoin du HTML/CSS brut (classes, structure DOM exacte, variables CSS) plutôt que du texte extrait, et que l'environnement le permet, complète avec une requête brute (ex: `curl`) sur le domaine cible. Dans la plupart des cas, un fetch avec extraction texte/markdown suffit pour comprendre la structure ; pour les détails fins de CSS (couleurs exactes, media queries), privilégie l'inspection visuelle (étape 2) plutôt que de parser du CSS minifié.
+
+Note ce que tu identifies :
+- Structure de la page (header, hero, sections, footer, nav)
+- Composants récurrents (cards, boutons, formulaires)
+- Contenu texte (à reformuler, voir section précédente)
+
+### Étape 2 — Capture visuelle
+
+Le rendu réel (mise en page, espacements, responsive) est ce qui compte le plus pour un clonage fidèle — le HTML seul ne suffit pas à percevoir l'agencement visuel.
+
+- Si un outil de capture d'écran / navigateur headless est disponible (MCP de browsing, Chrome, Playwright avec accès réseau au domaine), utilise-le pour obtenir un screenshot desktop et un screenshot mobile.
+- **Si aucun outil de ce type n'est disponible** : base-toi sur le HTML/texte extrait à l'étape 1 pour déduire la structure, et **demande à l'utilisateur une capture d'écran** (desktop + mobile si pertinent) s'il a besoin d'une fidélité visuelle précise — notamment pour les espacements, les proportions, ou un design complexe. Ne bloque pas le travail en attendant : propose une première reconstruction basée sur le HTML, et affine si l'utilisateur fournit des captures.
+
+### Étape 3 — Extraction du design system
+
+À partir du HTML/CSS récupéré et/ou des captures d'écran, identifie couleurs, typographie, breakpoints, spacing scale et style des composants.
+
+Pour la méthodologie détaillée d'extraction (où chercher chaque token, comment déduire une palette à partir d'un screenshot, comment identifier une échelle d'espacement cohérente), consulte [references/design-system-extraction.md](references/design-system-extraction.md).
+
+Présente le design system extrait sous forme de résumé structuré (pas juste dans le code) avant de passer à la reconstruction, pour que l'utilisateur puisse valider ou ajuster.
+
+### Étape 4 — Reconstruction en Next.js/TypeScript/Tailwind
+
+Ne copie jamais le code source brut. Reconstruis :
+
+- **Composants réutilisables** (`.tsx`), typés, découpés logiquement (ex: `Hero.tsx`, `PricingCard.tsx`, `Navbar.tsx`) — livrés comme fichiers prêts à être intégrés dans un projet existant, pas comme un projet Next.js complet avec sa propre structure de dossiers, sauf si l'utilisateur demande explicitement un projet autonome.
+- **Tailwind** : traduis le design system extrait en classes Tailwind ; si des couleurs/tailles reviennent souvent, propose les entrées correspondantes pour `tailwind.config` plutôt que des valeurs arbitraires répétées partout.
+- **Conventions du projet cible** : si l'utilisateur a un projet ouvert avec ses propres conventions (gestion d'état, structure de dossiers `app/`, etc.), aligne-toi dessus plutôt que d'imposer une structure générique.
+- **Responsive** : reproduis le comportement observé aux breakpoints identifiés, pas juste le rendu desktop.
+
+### Étape 5 — Passage par un skill de design (si disponible)
+
+Avant de livrer le résultat final, si un skill de design frontend (ex: `frontend-design`) est disponible dans l'environnement, consulte-le et applique ses principes pour :
+
+- Vérifier que la hiérarchie typographique est intentionnelle et pas juste calquée mécaniquement
+- Éviter les défauts génériques si le site source lui-même avait des tics de template
+- S'assurer que l'ensemble a une cohérence visuelle réelle, pas un assemblage de composants clonés indépendamment
+
+C'est cette étape qui évite l'effet "clone mécanique moche" : le but final est un résultat qui a l'air pensé, pas recopié.
+
+## Livraison
+
+- Résume en quelques lignes ce qui a été extrait (design system) et ce qui a été reconstruit.
+- Si le résultat dépasse ~20 lignes de code ou plusieurs composants, livre-le comme fichier(s) plutôt qu'inline dans la conversation.
+- Signale explicitement tout ce que tu n'as pas pu vérifier faute de capture d'écran (ex: "espacements approximatifs, à ajuster avec un visuel").

package/site-cloner/references/design-system-extraction.md

@@ -0,0 +1,53 @@
+# Extraction du design system — méthodologie
+
+Guide de référence pour l'étape 3 du workflow `site-cloner`. Consulte ce fichier quand tu as le HTML/CSS et/ou les captures d'écran en main et que tu dois en extraire un design system exploitable.
+
+## Couleurs
+
+Ordre de priorité pour trouver la palette :
+
+1. **Variables CSS** (`:root { --primary: ... }`) si présentes dans le `<style>` ou les fichiers CSS liés — c'est la source la plus fiable.
+2. **Classes utilitaires répétées** (ex: classes Tailwind déjà présentes sur le site source, `bg-[#1a2b3c]`) — indiquent directement les valeurs hex.
+3. **Inspection visuelle du screenshot** — repère : couleur de fond principale, couleur du texte principal, couleur d'accent (boutons CTA, liens), couleur secondaire (souvent dans les badges/tags), couleurs d'état (succès/erreur si visibles).
+
+Restitue une palette de 5 à 8 couleurs maximum (fond, texte, primaire, secondaire, accent, + variantes clair/foncé si le site a un mode sombre). Ne complique pas avec 20 nuances si le site n'en utilise réellement que 5-6.
+
+## Typographie
+
+- Cherche les imports Google Fonts dans le `<head>` (`<link href="fonts.googleapis.com/...">`) ou les `@import` CSS — c'est la source la plus directe.
+- Si aucun import trouvé, identifie la famille par son style visuel dans le screenshot (serif vs sans-serif, géométrique vs humaniste) et propose une police proche disponible sur Google Fonts.
+- Relève la hiérarchie : taille du H1, du H2, du corps de texte, et les graisses utilisées (regular/medium/bold). Un site pro utilise rarement plus de 4-5 paliers de taille.
+- Note si une police différente est utilisée pour les titres vs le corps de texte (pattern courant : une police display pour les titres, une police neutre pour le corps).
+
+## Breakpoints
+
+- Cherche les `@media` queries dans le CSS pour les valeurs exactes.
+- À défaut, déduis du comportement observé : la plupart des sites modernes suivent des paliers standards proches de ceux de Tailwind (640px, 768px, 1024px, 1280px). Sauf signal contraire, aligne-toi sur ces valeurs plutôt que d'inventer des breakpoints personnalisés — ça simplifie l'intégration dans un projet Tailwind existant.
+
+## Spacing scale
+
+- Repère l'unité de base récurrente dans les marges/paddings (souvent 4px ou 8px comme incrément).
+- Une échelle cohérente suit généralement une progression régulière (4, 8, 12, 16, 24, 32, 48, 64...). Si les valeurs observées sont irrégulières, c'est probablement dû à l'imprécision de l'extraction plutôt qu'à un vrai choix de design — arrondis à l'échelle standard la plus proche plutôt que de reproduire des valeurs bizarres comme `13px` ou `27px`.
+
+## Style des composants
+
+À noter séparément pour chaque type de composant récurrent (boutons, cards, inputs, nav) :
+
+- **Rayon de bordure** : anguleux (0-2px), légèrement arrondi (4-8px), très arrondi (12px+), ou pill (9999px)
+- **Ombres** : absentes, subtiles (élévation légère), marquées (effet "flottant")
+- **Transitions/animations visibles** : hover states, transitions de couleur, micro-interactions
+- **Bordures** : présence de bordures fines vs séparation uniquement par l'espace/l'ombre
+
+## Présentation du résumé à l'utilisateur
+
+Structure recommandée avant de passer à la reconstruction :
+
+```
+Couleurs : fond #FFF, texte #1A1A1A, primaire #2563EB, accent #F59E0B
+Typographie : Inter (corps), Poppins (titres) — H1 40px/bold, H2 28px/semibold, body 16px/regular
+Breakpoints : standards Tailwind (sm/md/lg/xl)
+Spacing : échelle 4px, incréments principaux 8/16/24/32/48
+Composants : boutons pill avec ombre légère au hover, cards à coins arrondis 12px sans bordure
+```
+
+Ce résumé sert de base de validation avant de générer le code — il coûte peu de temps et évite de reconstruire deux fois si l'utilisateur veut ajuster une couleur ou une police avant que le code ne soit généré.