/ Verzeichnis / Playground / Nothing Design Skill
← Alle Server ↗ GitHub
● Community dominikmartn ⚡ Sofort

Nothing Design Skill

von dominikmartn · dominikmartn/nothing-design-skill

UI im Nothing-Stil generieren — monochrom, Dot-Matrix, Industrie-Typografie, transparente Ebenen — ohne CSS aus dem Inspektor zu kopieren.

Nothing Design Skill codiert die Nothing-Markensprache (die visuelle Identität des Smartphone-Herstellers) als Claude-Code-Skill. Verwenden für Landing-Pages, Dashboards, Marketing-Sites oder App-UIs, wenn dieser monochrom-industriell-minimale Vibe mit Dot-Matrix-Akzenten und selbstbewusster Typografie gewünscht wird. Gibt idiomatisches Tailwind/CSS aus, das den tatsächlichen Konventionen der Markensprache entspricht.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren 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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die 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
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

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

Continue nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Nothing Design Skill

Eine Landing-Page im Nothing-Stil bauen

👤 Frontend-Entwickler / Designer-Entwickler ⏱ ~45 min intermediate

Wann einsetzen: Das Marken-Briefing sagt "industriell / minimal"; eine Nothing-artige Landing soll ohne eigenes System von Grund auf entstehen.

Voraussetzungen
  • Skill installiert — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
  • Tailwind-Projekt — Bestehende Next.js- oder Vite-Tailwind-Einrichtung
Ablauf
  1. Tokens erstellen
    Nothing-design: Design-Tokens (Farben, Typskala, Abstände) für die Tailwind-Konfiguration ausgeben.✓ Kopiert
    → Tailwind-Extension-Snippet mit monochromatischer Palette + Mono/Grotesk-Fonts
  2. Hero zusammenstellen
    Eine Hero-Section generieren: überdimensionale Ziffer "01.", Headline, Subhead, Dot-Matrix-Gitterhintergrund. Nur Tailwind, keine Bilder.✓ Kopiert
    → Hero-JSX entspricht der Markensprache
  3. Verfeinern
    Die Headline sollte selbstbewusster sein — Nothing verwendet hohen Kontrast und Grotesk. Anpassen.✓ Kopiert
    → Schriftstärke und Buchstabenabstand ändern sich entsprechend der Marke

Ergebnis: Landing-Page, die wie ein Nothing-Produkt wirkt.

Fallstricke
  • Warme Farben hinzufügen bricht die Markensprache — Skill lehnt Out-of-Palette-Vorschläge ab, wenn gefragt; darauf verlassen
Kombinieren mit: filesystem · shadcn-ui-mcp

Ein bestehendes Dashboard im Nothing-Stil umgestalten

👤 Entwickler, die interne Tools warten ⏱ ~60 min advanced

Wann einsetzen: Internes Admin-Interface sieht aus wie Bootstrap 4; es soll intentional wirken.

Ablauf
  1. Inventur
    Nothing-design: src/components/ scannen. Komponenten auflisten und ein Nothing-Sprach-Gegenstück für jede vorschlagen.✓ Kopiert
    → Pro-Komponente-Vorschlag
  2. Eine umstrukturieren
    DataTable.tsx im Nothing-Stil umstrukturieren. Mono-Font für Zahlen, Dot-Matrix-Trennlinien, Akzent nur beim Hover einer Zeile.✓ Kopiert
    → Aktualisierte Komponente entspricht der Markensprache

Ergebnis: Kohärentes monochromes Dashboard.

Fallstricke
  • Auf einen Blick schwer lesbar — Kontrast erhöhen; Nothing ist hoher Kontrast, kein niedriger Kontrast

Ein Marketing-Deck im Nothing-Stil generieren

👤 Marketing-Entwickler ⏱ ~30 min intermediate

Wann einsetzen: Ein Foliendeck soll erstellt werden, das nicht wie ein generisches Template aussieht.

Ablauf
  1. Zusammenstellen
    Nothing-design: ein 12-Folien-HTML-Deck für den Produktlaunch generieren. Überdimensionale Ziffern als Abschnittsmarkierungen verwenden.✓ Kopiert
    → Einzelnes HTML-Deck entspricht der Markensprache

Ergebnis: Deck verstärkt die Marke ohne Aufwand.

Fallstricke
  • Zu dunkel für einen hellen Projektionsraum — Skill liefert eine Hell-Invertierung — anfordern
Kombinieren mit: guizang-ppt-skill

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

nothing-design-skill + shadcn-ui-mcp

shadcn-Komponenten verwenden, im Nothing-Stil gestaltet

shadcn: Formular abrufen. Nothing-design: in die Markensprache umgestalten.✓ Kopiert
nothing-design-skill + filesystem

Auf ein ganzes Projekt anwenden

Nothing-design: components/ scannen, Umgestaltungen vorschlagen, dann einzeln anwenden.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
emit_tokens (keine) Projekt-Setup 0
generate_component kind: hero|cta|table|card, content Einen Abschnitt hinzufügen 0
restyle_existing path, target_kind Legacy-Komponenten in die Markensprache bringen 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
N/A
Tokens pro Aufruf
500–3000
Kosten in €
Kostenlos
Tipp
Tokens einmal generieren, dann inkrementell Komponenten gestalten — Tokens nicht bei jedem Aufruf neu ausgeben

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-read filesystem-write
Credential-Speicherung: Keine
Datenabfluss: Keine

Fehlerbehebung

Häufige Fehler und Lösungen

Ausgabe verwendet andere Farben

Neu-Prompt: "nur monochrom, Akzent-Rot erlaubt bei <10% Oberfläche"

Typografie-Kombination wirkt falsch

Die genauen Mono- und Grotesk-Fonts im Prompt angeben; Standard ist JetBrains Mono + Inter

Dot-Matrix-Hintergrund sieht aus wie Rauschen

Punktdichte reduzieren; der Skill standardmäßig zu dicht für einige Bildschirme

Alternativen

Nothing Design Skill vs. andere

AlternativeWann stattdessenKompromiss
shadcn/ui-StandardlooksKonventionelleres Aussehen gewünschtGenerisch; keine Markenstimme
Tailwind UIPoliert aber generisch gewünschtSieht aus wie jede andere Tailwind-UI-Site
Eigenes Design-SystemEin Brand-Designer vorhanden istLangsam; teuer

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen