Communitygithub.com

esthersjw/esther-design-system

Système de design personnel d'ESTHER不二 (esthersjw). Déclenché automatiquement pour toute tâche de design front-end : pages HTML, sites personnels, pages tutoriel, pages de présentation, landing pages, etc. Inclut l'ADN de marque et plusieurs sous-spécifications par scénario.

Qu'est-ce que esther-design-system ?

Ce skill définit un système de design complet pour la marque personnelle d'ESTHER不二 (esthersjw). Il est conçu pour être utilisé par des agents IA (comme Claude Code, Cursor, etc.) lors de la création de pages web, de pages tutoriel, de pages de présentation, de landing pages, de pages d'événement, de pages de type application, de portfolios, ou encore de contenus visuels comme des fiches graphiques (type Xiaohongshu) ou des mises en page pour WeChat. Son objectif est de garantir une cohérence visuelle stricte avec l'identité de marque, tout en offrant une flexibilité via des scénarios prédéfinis. Le workflow se déroule en 7 étapes : clarification des besoins, lecture des spécifications, copie d'un template, sélection de combinaisons de mise en page, sélection de composants, auto-vérification via une checklist, et livraison du fichier HTML final. Les principes clés sont de toujours partir d'un template, d'utiliser des mises en page différentes pour chaque section, et de passer la checklist de niveau P0 avant de livrer. Le skill interdit strictement l'utilisation de styles par défaut du navigateur et impose l'utilisation de composants définis dans les fichiers de référence.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add esthersjw/esther-design-system
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

© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 L'utilisation de ce Skill nécessite de créditer l'auteur original, l'utilisation commerciale est interdite, et toute modification doit être partagée sous la même licence.

Conditions de déclenchement : Le skill est activé lorsque l'utilisateur demande la création de pages HTML, de pages personnelles, de pages tutoriel, de pages de présentation, de landing pages, de pages d'événement, de pages de type application, de portfolios, ou toute autre tâche de design front-end. Il est également déclenché par des phrases comme "faire une fiche graphique", "carte graphique", "fiche Xiaohongshu", "transformer un article en carte", "convertir en fiche graphique", "faire une carte".

Mode d'emploi (Workflow en 7 étapes)

Étape 1 : Clarifier le besoin

Demandez à l'utilisateur de préciser 5 questions :

  1. Type — Tutoriel/Présentation/Vulgarisation ? Page d'événement/Landing ? Application/Fonctionnel ? Fiche graphique ? Mise en page WeChat ?
  2. Public — À qui est destiné le contenu ? Quel est leur niveau technique ?
  3. Nombre de sections — Combien de blocs de contenu sont prévus ?
  4. Contenu brut — Quels textes/images/données sont disponibles ?
  5. Contraintes strictes — Y a-t-il des éléments obligatoires à inclure ? Une couleur de marque partenaire ?

Étape 2 : Lire les spécifications

  1. Obligatoire brand-dna.md — Vérifiez les spécifications fondamentales de la marque.
  2. Selon le type, lisez le fichier de scénario correspondant :
    • Tutoriel/Présentation/Vulgarisation → references/scene-tutorial.md
    • Page d'événement/Rencontre/Landing → references/scene-landing.md
    • Application/Fonctionnel (Tableau de bord/Bibliothèque/Canvas) → references/scene-app.md
    • Fiche graphique/Fiche Xiaohongshu/Article en carte → references/scene-cards.md
    • Mise en page WeChat/Distribution de contenu → references/scene-wechat.md

Étape 3 : Copier le template

Choisissez le template correspondant depuis assets/ comme point de départ :

  • Tutoriel → assets/template-tutorial.html
  • Page d'événement/Landing → assets/template-landing.html
  • Application/Fonctionnel → assets/template-app.html
  • Fiche graphique → assets/template-cards.html

Partez toujours du template, ne codez pas de zéro.

Étape 4 : Choisir des combinaisons de mise en page

Depuis references/layouts.md, sélectionnez 3 à 5 motifs de mise en page différents et attribuez un motif différent à chaque section.

La mise en page de chaque section doit être différente.

(Pour le mode fiche graphique : référez-vous aux techniques de mise en page recommandées dans scene-cards.md et choisissez une technique différente pour chaque page.)

Étape 5 : Choisir des composants pour remplir le contenu

Depuis references/components.md, sélectionnez les composants à insérer dans chaque section.

Règle stricte : Interdiction d'utiliser tout style HTML par défaut. Tous les blocs de citation, listes, tableaux, et cartes doivent être créés en utilisant le code des composants correspondants depuis components.md. N'utilisez pas de <blockquote> par défaut, de border-left par défaut, de <ul>/<ol> sans style, ni de <table> par défaut. Si aucun composant approprié n'est trouvé dans components.md, concevez-en un qui respecte les spécifications de brand-dna.md, mais n'utilisez jamais les styles par défaut du navigateur.

Étape 6 : Auto-vérification

Vérifiez chaque point de la references/checklist.md :

  • P0 Obligatoire — Tous les points doivent être validés ; si un seul échoue, modifiez.
  • P1 Recommandé — Faites de votre mieux pour les satisfaire.
  • P2 Bonus — Des améliorations supplémentaires bienvenues.

(Pour le mode fiche graphique : vérifiez également la Checklist en bas de scene-cards.md ; pour le mode WeChat : vérifiez également la Checklist en bas de scene-wechat.md, en vous assurant que les titres ne subissent pas de coupures non sémantiques ou de césures de mots anglais.)

Étape 7 : Livraison

Générez le fichier HTML final, qui doit pouvoir s'ouvrir directement dans un navigateur.

Aide-mémoire des types de scénario

TypeFichier de scénarioTemplate
Tutoriel/Présentation/Vulgarisationreferences/scene-tutorial.mdassets/template-tutorial.html
Page d'événement/Rencontre/Landingreferences/scene-landing.mdassets/template-landing.html
Application/Fonctionnelreferences/scene-app.mdassets/template-app.html
Fiche graphique/Fiche Xiaohongshureferences/scene-cards.mdassets/template-cards.html
Mise en page WeChatreferences/scene-wechat.mdassets/template-wechat.html

Principes clés

  • Partez toujours du template, ne codez pas de zéro — Les templates intègrent déjà les variables de marque et la structure de base.
  • La mise en page de chaque section doit être différente — Évitez la monotonie en sélectionnant différents motifs depuis layouts.md.
  • Exécutez la checklist après chaque réalisation — Tous les points P0 doivent être validés avant livraison.

Interdits

Respectez strictement la liste des interdits dans brand-dna.md, non reproduite ici. Ligne rouge absolue : une capture d'écran publiée sur Twitter ne doit pas trahir "encore une création IA".

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