/ 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

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json
{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add nothing-design-skill -- git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

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.

Prérequis
  • Skill installé — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
  • Projet Tailwind — Configuration Next.js ou Vite + Tailwind existante
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