Outils ›

Générateur de demande de skin

Choisissez l’ambiance de votre site. La demande à droite suit les règles de skin v1.5, pour que l’IA produise un fichier que vous pouvez importer tout de suite.

Votre demande

[Style souhaité : Scène K-pop éclatante, fond #f6f3ee, couleur d’accent #d2462f, coins légèrement arrondis (environ 8px), un thème clair (texte foncé sur fond clair). Utilisez exactement ces couleurs pour --aml-bg et --aml-accent / --aml-accent-fill.]

En utilisant le style ci-dessus, créez un seul fichier HTML de « skin » pour mon site musical. Respectez exactement ces règles.

[Règles]
1. Un seul fichier HTML. Mettez tout le CSS dans un unique <style> à l’intérieur de <head>. Restez léger — 30KB maximum.
2. Interdits : <script>, attributs on…= comme onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), images externes ou polices web externes. Pour un motif, utilisez un dégradé CSS (gradient).
3. Le site dessine lui-même les lignes de titres, le menu, le lecteur, les albums et le livre d’or. Je choisis seulement les couleurs et la mise en page. Utilisez exactement ce squelette :
   <!doctype html><html lang="{{lang}}"><head><meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="(couleur de fond)"><title>{{site_name}}</title><style> … </style></head>
   <body class="aml-kit">
   {{banner}}
   {{hero}}
   <div class="aml-bar">{{menu}}{{lang_select}}</div>
   {{ad_top}}
   {{content}}
   {{footer}}
   {{player}}
   </body></html>
   ({{menu}}, {{content}} et {{player}} doivent chacun apparaître exactement une fois. N’écrivez jamais de noms de variables dans des commentaires.)
4. Dans :root à l’intérieur de <style>, définissez toutes ces variables de couleur (changer seulement celles-ci recolore tout le site) :
   --aml-bg (fond de page) --aml-panel (lignes de titres, cartes) --aml-panel-2 (cases enfoncées) --aml-text (texte) --aml-muted (texte secondaire)
   --aml-line (lignes fines) --aml-glass (barre de menu et lecteur, semi-transparents : rgb(… / .74))
   --aml-accent (texte et lignes d’accent) --aml-accent-fill (fond des boutons) --aml-accent-ink (texte des boutons)
   --aml-hero-a (part de la couleur du profil mélangée dans l’en-tête : 8% en clair, 20% en sombre) --aml-art-shadow (ombre des albums ou none)
   --aml-viz-color (barres pendant la lecture) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (fenêtre des paroles) --aml-footer-color --aml-social-color --aml-ext-color
   Mettez une liste de polices de l’appareil dans --aml-font (par exemple : -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Le texte doit contraster avec son fond à 4.5:1 ou plus (pas de texte gris sur du gris). Le texte secondaire (--aml-muted) aussi, à 4.5:1 ou plus sur --aml-panel.
6. Pour plus de décoration, ajoutez du CSS à ces classes (forme uniquement — ne déplacez ni ne redimensionnez trop les éléments) :
   .aml-hero (en-tête) .aml-hero-name (nom du site) .aml-profile (photo ronde) .aml-btn-primary (bouton « tout écouter »)
   .aml-bar (barre de menu) .aml-menu-item / .aml-menu-item.is-active (pastilles du menu)
   .aml-section-title (titres) .aml-track (carte d’un titre) .aml-track.is-playing (titre en lecture) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (pochette d’album) .aml-gb-form .aml-gb-post (livre d’or) .aml-footer
   Ne changez pas la position ni la taille du lecteur (.aml-player) ni du visualiseur (.aml-viz) — seulement les couleurs.
7. Vérifiez que le rendu est beau sur un téléphone (390px de large). Le design intégré s’adapte déjà aux téléphones, donc ne fixez pas de largeurs.

Affichez uniquement le fichier HTML terminé, dans un seul bloc de code.

Copiez la demande et collez-la dans ChatGPT ou Claude gratuit.
Si la réponse est coupée, tapez « continue ».
Enregistrez le code dans un fichier .html et vérifiez-le : Vérificateur de skin
Importez-le dans votre page d’administration, rubrique Skins.