Communitygithub.com

Castor6/tactus

Utilisez cette compétence lorsque l'utilisateur demande de créer, concevoir, développer, améliorer ou styliser une interface frontend ou un élément visuel.

Qu'est-ce que tactus ?

Cette compétence permet à Claude Code de générer des interfaces frontend esthétiques et distinctives en chargeant automatiquement des prompts de systèmes de design depuis le répertoire `prompts/`. Au lieu de produire des interfaces génériques, elle applique des esthétiques spécifiques comme le Neo-brutalism, le Modern Dark, le Cyberpunk ou le Bauhaus. Elle est déclenchée automatiquement pour toute demande liée au frontend, à l'UI, à l'UX, au design web ou au styling, même si aucun style n'est explicitement mentionné. La compétence guide l'utilisateur dans le choix d'un style approprié, puis applique les tokens de design, les motifs de composants et les facteurs distinctifs ("Bold Factor") pour produire un code de qualité professionnelle, respectueux de l'accessibilité et du responsive design.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Castor6/tactus/tree/HEAD/.agents/skills/design-style
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

Compétence de Style de Design

Objectif

Cette compétence aide Claude Code à créer de belles interfaces frontend distinctives en récupérant automatiquement des prompts de systèmes de design depuis le répertoire prompts/. Au lieu de produire des interfaces génériques, cette compétence permet à Claude de construire des interfaces avec des esthétiques de design spécifiques comme le Neo-brutalism, le Modern Dark, le Luxury, le Cyberpunk, et plus encore.

Quand l'utiliser

Cette compétence est invoquée automatiquement lorsque :

  • L'utilisateur demande de créer une page web, une page d'atterrissage ou une application web
  • L'utilisateur demande un composant UI avec un style de design spécifique
  • L'utilisateur mentionne le frontend, React, Vue ou le développement web
  • L'utilisateur demande une esthétique spécifique (par exemple, "rends-le moderne et sombre" ou "utilise un style brutaliste")

Styles de Design Disponibles

Les systèmes de design suivants sont disponibles dans le répertoire prompts/ :

  • Academia - Savant, classique, raffiné
  • ArtDeco - Glamour luxueux des années 1920
  • Bauhaus - Minimalisme géométrique fonctionnaliste
  • BoldTypography - Design axé sur la typographie
  • Botanical - Inspiré de la nature, organique
  • Claymorphism - Éléments 3D doux, semblables à de l'argile
  • Cyberpunk - Futuriste, néon, haute technologie
  • Enterprise - Professionnel, corporate, évolutif
  • FlatDesign - Propre, minimal, 2D
  • Fluent2 - Système de design Microsoft Fluent 2
  • HumanistLiterary - Chaleureux, littéraire, conversationnel (esthétique Claude)
  • Industrial - Brut, mécanique, utilitaire
  • Kinetic - Dynamique, axé sur le mouvement
  • Luxury - Premium, élégant, sophistiqué
  • Material - Google Material Design
  • Maximalism - Audacieux, expressif, abondant
  • MinimalDrak - Thème sombre minimal (note : faute d'orthographe dans l'original)
  • ModernDark - Interface sombre contemporaine avec profondeur
  • Monochrome - Noir et blanc, contraste élevé
  • Neo-brutalism - Brutalisme audacieux, brut, coloré
  • Neumorphism - Interface douce, skeuomorphique
  • Newsprint - Inspiré du journal
  • Organic - Formes naturelles et fluides
  • PlayfulGeometric - Formes géométriques amusantes
  • Professional - Propre, axé sur les affaires
  • Retro - Vintage, nostalgique
  • Saas - Esthétique SaaS moderne
  • Sketch - Dessiné à la main, artistique
  • Swiss - Style typographique international
  • TerminalCLI - Esthétique d'interface en ligne de commande
  • Vaporwave - Esthétique des années 80/90, nostalgique
  • Web3 - Décentralisé, inspiré de la crypto

Comment ça marche

Étape 1 : Comprendre l'intention de l'utilisateur

Lorsque l'utilisateur demande un travail frontend, déterminez d'abord :

  1. Stack technique - Quel framework utilisent-ils ? (React, Vue, Next.js, etc.)
  2. Préférence de design - Ont-ils mentionné un style ou une esthétique spécifique ?
  3. Portée du composant - Composant unique, page complète ou application entière ?

Étape 2 : Sélectionner le style de design

Si l'utilisateur spécifie un style :

  • Faites correspondre sa demande aux styles disponibles (par exemple, "brutaliste" → Neo-brutalism)
  • Correspondance insensible à la casse (brutalism, Brutalism, BRUTALISM fonctionnent tous)

Si l'utilisateur ne spécifie pas :

  • Pour les projets modernes et professionnels → ModernDark ou Professional
  • Pour les projets créatifs et audacieux → Neo-brutalism ou BoldTypography
  • Pour les projets minimaux et propres → FlatDesign ou Swiss
  • Pour les projets d'entreprise/corporate → Enterprise

Demandez à l'utilisateur si vous n'êtes pas sûr du style qui correspond à ses besoins.

Étape 3 : Récupérer le système de design

Utilisez l'outil Read pour charger le fichier de prompt approprié :

Read: prompts/<NomDuStyle>.md

Par exemple :

  • prompts/Neo-brutalism.md
  • prompts/ModernDark.md
  • prompts/Cyberpunk.md

Étape 4 : Appliquer le système de design

Une fois que vous avez chargé le prompt du système de design :

  1. Intériorisez la philosophie de design - Comprenez les principes fondamentaux, les signatures visuelles et les facteurs de différenciation
  2. Extrayez les tokens de design - Couleurs, typographie, espacement, ombres, bordures
  3. Suivez les motifs de composants - Utilisez les styles de boutons, mises en page de cartes, etc. spécifiés
  4. Appliquez le "Facteur Audacieux" (Bold Factor) - Implémentez les éléments de signature qui rendent le design authentique
  5. Évitez les anti-motifs - N'utilisez pas de techniques qui brisent l'esthétique

Étape 5 : Construire avec contexte

Avant d'écrire du code :

  • Identifiez la stack technique existante de l'utilisateur
  • Comprenez leur architecture de composants
  • Notez toutes les contraintes (frameworks CSS, bibliothèques de design, etc.)

Lors de l'écriture du code :

  • Respectez leurs motifs et conventions existants
  • Centralisez les tokens de design dans des variables CSS ou un fichier de configuration
  • Créez des composants réutilisables et composables
  • Expliquez brièvement vos choix architecturaux

Normes de qualité :

  • Préservez ou améliorez l'accessibilité
  • Assurez un design responsive sur tous les appareils
  • Faites des choix de design délibérés et créatifs (pas de code générique)
  • Laissez la base de code plus propre que vous ne l'avez trouvée

Exemples

Exemple 1 : L'utilisateur spécifie un style

Utilisateur : "Crée une page d'atterrissage pour mon produit SaaS avec un design néo-brutaliste"

Actions de la compétence :

  1. Détectez les mots-clés : "page d'atterrissage", "néo-brutaliste"
  2. Mappez "néo-brutaliste" → prompts/Neo-brutalism.md
  3. Lisez le prompt du système de design
  4. Posez des questions de clarification : "Quelle stack technique utilisez-vous ? React, Vue ou HTML/CSS pur ?"
  5. Construisez la page d'atterrissage en suivant les principes du Neo-brutalism (bordures épaisses, ombres dures, couleurs audacieuses, etc.)

Exemple 2 : L'utilisateur ne spécifie pas de style

Utilisateur : "Aide-moi à construire un site portfolio"

Actions de la compétence :

  1. Détectez : "site portfolio" (contexte créatif)
  2. Suggérez des options : "Souhaitez-vous un style de design spécifique ? Je peux le créer en Modern Dark (sophistiqué), Neo-brutalism (audacieux et créatif), ou Swiss (minimal et propre)."
  3. L'utilisateur répond avec sa préférence
  4. Chargez le prompt approprié et construisez

Exemple 3 : Demande de composant

Utilisateur : "Ajoute un formulaire de contact à mon application Next.js. Rends-le moderne et professionnel."

Actions de la compétence :

  1. Mots-clés : "Next.js", "moderne et professionnel"
  2. Sélectionnez : ModernDark.md (moderne) ou Professional.md (professionnel)
  3. Lisez le système de design
  4. Construisez le composant de formulaire en respectant les motifs Next.js de l'utilisateur
  5. Utilisez les tokens de design du prompt (couleurs, typographie, ombres, etc.)

Commandes de Référence Rapide

Lors de l'implémentation, vous pouvez référencer rapidement des sections spécifiques :

Couleurs :

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

Typographie :

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

Motifs de composants :

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

Conseils pour de Meilleurs Résultats

  1. Lisez l'intégralité du prompt - Ne le parcourez pas. Les sections sur la philosophie de design et la différenciation sont essentielles.
  2. Implémentez les éléments de signature - Chaque système de design a une section "Bold Factor". Ces éléments sont ce qui le rend authentique.
  3. Évitez les anti-motifs - Chaque prompt liste ce qu'il NE FAUT PAS faire. Suivez ces règles strictement.
  4. Posez des questions - Si les besoins de l'utilisateur ne sont pas clairs, demandez avant de construire.
  5. Respectez le code existant - Ne combattez pas leur stack technique. Intégrez le système de design dans leurs motifs existants.

Notes

  • Tous les prompts de systèmes de design suivent la même structure : les sections <role> et <design-system>
  • Les prompts incluent des palettes de couleurs détaillées, des échelles typographiques, des motifs de composants et des exemples d'implémentation
  • Chaque style est prêt pour la production et a été soigneusement conçu pour une distinction visuelle
  • Les prompts sont conçus pour empêcher les interfaces génériques à l'aspect IA

Améliorations Futures

Améliorations potentielles de cette compétence :

  • Prise en charge de la combinaison de styles (par exemple, "Cyberpunk + Minimal")
  • Workflow de création de style personnalisé
  • Extraction de tokens de design vers JSON/CSS
  • Génération de bibliothèques de composants à partir des prompts

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