/ Annuaire / Playground / Nothing Design Skill
← Tous les serveurs ↗ GitHub
● Communauté dominikmartn ⚡ Instantané

Nothing Design Skill

par dominikmartn · dominikmartn/nothing-design-skill

Générez des interfaces dans l'esthétique Nothing — monochrome, dot-matrix, typographie industrielle, couches transparentes — sans copier-coller le CSS depuis inspect-element.

Nothing Design Skill encode le langage visuel de la marque Nothing (le fabricant de téléphones) comme skill Claude Code. Utilisez-le pour des landing pages, des dashboards, des sites marketing ou des interfaces d'application lorsque vous souhaitez cette ambiance monochrome-industrielle-minimale avec des accents dot-matrix et une typographie affirmée. Génère du Tailwind/CSS idiomatique qui correspond aux conventions réelles du langage.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

Cas d'usage

Usages concrets : Nothing Design Skill

Construire une landing page dans le style Nothing

👤 Développeurs frontend / designer-développeurs ⏱ ~45 min intermediate

Quand l'utiliser : Le brief de marque dit « industriel / minimal » ; vous voulez une landing de style Nothing sans inventer un système depuis zéro.

Déroulement
  1. Établir les tokens
    Nothing-design : émets les design tokens (couleurs, échelle typographique, espacement) pour ma config Tailwind.✓ Copié
    → Extrait d'extension Tailwind avec palette monochrome + polices mono/grotesk
  2. Composer le hero
    Génère une section hero : chiffre surdimensionné '01.', titre, sous-titre, fond de grille dot-matrix. Tailwind uniquement, pas d'images.✓ Copié
    → JSX hero correspondant au langage
  3. Affiner
    Le titre devrait être plus affirmé — Nothing utilise un fort contraste et du grotesk. Ajustez.✓ Copié
    → Grammage et espacement de la police changent pour correspondre à la marque

Résultat : Landing page qui semble appartenir à un produit de l'univers Nothing.

Pièges
  • Ajouter des couleurs chaudes casse le langage — Le skill rejette les suggestions hors palette si on le demande ; appuyez-vous dessus
Combiner avec : filesystem · shadcn-ui-mcp

Restyliser un dashboard existant dans le style Nothing

👤 Devs maintenant des outils internes ⏱ ~60 min advanced

Quand l'utiliser : L'admin interne ressemble à Bootstrap 4 ; vous voulez qu'il paraisse intentionnel.

Déroulement
  1. Inventaire
    Nothing-design : scanne src/components/. Liste les composants et propose un équivalent dans le langage Nothing pour chacun.✓ Copié
    → Proposition par composant
  2. Refactoriser l'un d'eux
    Refactorise DataTable.tsx dans le style Nothing. Police mono pour les chiffres, séparateurs dot-matrix, accent uniquement au survol de ligne.✓ Copié
    → Composant mis à jour correspondant au langage

Résultat : Dashboard monochrome cohérent.

Pièges
  • Difficile à lire d'un coup d'œil — Augmentez le contraste ; Nothing est à fort contraste, pas faible contraste

Générer un deck marketing dans l'esthétique Nothing

👤 Développeurs marketing ⏱ ~30 min intermediate

Quand l'utiliser : Vous voulez un deck qui ne ressemble pas à un template générique.

Déroulement
  1. Composer
    Nothing-design : génère un deck HTML de 12 diapos pour le lancement du produit. Utilisez des chiffres surdimensionnés comme marqueurs de section.✓ Copié
    → Deck HTML unique correspondant au langage

Résultat : Deck qui renforce la marque sans effort.

Pièges
  • Trop sombre pour une salle de conférence lumineuse — Le skill propose une inversion 'light' — demandez-la
Combiner avec : guizang-ppt-skill

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

nothing-design-skill + shadcn-ui-mcp

Utiliser les composants shadcn, thématisés selon Nothing

shadcn : récupère Form. Nothing-design : restylise-le selon le langage de marque.✓ Copié
nothing-design-skill + filesystem

Appliquer à l'ensemble d'un projet

Nothing-design : scanne components/, propose des restyles, puis applique-les un par un.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
emit_tokens (aucun) Configuration du projet 0
generate_component kind: hero|cta|table|card, content Ajouter une section 0
restyle_existing path, target_kind Mettre les composants legacy en conformité 0

Coût et limites

Coût d'exécution

Quota d'API
N/A
Tokens par appel
500–3000
Monétaire
Gratuit
Astuce
Générez les tokens une fois, puis stylisez les composants de manière incrémentale — ne rééméttez pas les tokens à chaque appel

Sécurité

Permissions, secrets, portée

Portées minimales : filesystem-read filesystem-write
Stockage des identifiants : Aucun
Sortie de données : Aucun

Dépannage

Erreurs courantes et correctifs

La sortie utilise d'autres couleurs

Re-promptez : 'monochrome uniquement, accent-rouge autorisé à <10% de surface'

Le couplage typographique semble incorrect

Spécifiez les polices mono + grotesk exactes dans le prompt ; la valeur par défaut est JetBrains Mono + Inter

Le fond dot-matrix ressemble à du bruit

Réduisez la densité des points ; le skill est trop dense par défaut pour certains écrans

Alternatives

Nothing Design Skill vs autres

AlternativeQuand l'utiliserCompromis
Valeurs par défaut shadcn/uiVous voulez un look plus conventionnelGénérique ; pas de voix de marque
Tailwind UIVous voulez soigné mais génériqueRessemble à tous les autres sites Tailwind UI
Système de design personnaliséVous avez un designer de marqueLent ; coûteux

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills