Nothing Design Skill — Instalar & Demo ao vivo

Por que usar

Principais recursos

Paleta estritamente monocromática (branco/preto/apenas acento vermelho)
Backgrounds de grid dot-matrix e numerais decorativos
Combinação de tipografia industrial (mono + sans grotesk)
Componentes em camadas transparentes / vidro
Receitas de componentes: hero, feature grid, CTA, data table
Saída pronta para Tailwind

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um 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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Nothing Design Skill

Monte uma landing page no estilo Nothing

👤 Devs frontend / designer-desenvolvedores ⏱ ~45 min intermediate

Quando usar: O briefing de marca diz 'industrial / minimal'; você quer uma landing com sabor Nothing sem inventar um sistema do zero.

Pré-requisitos

Skill instalada — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
Projeto Tailwind — Setup existente de Next.js ou Vite + Tailwind

Fluxo

Estabeleça os tokens

Nothing-design: emita os design tokens (cores, escala tipográfica, espaçamento) para minha configuração Tailwind.✓ Copiado

→ Trecho de extensão Tailwind com paleta monocromática + fontes mono/grotesk
Monte o hero

Gere uma seção hero: numeral grande '01.', headline, subhead, background de grid dot-matrix. Apenas Tailwind, sem imagens.✓ Copiado

→ Hero JSX correspondendo à linguagem
Refine

A headline deve ser mais confiante — Nothing usa alto contraste e grotesk. Ajuste.✓ Copiado

→ Peso e tracking de tipo alterados para corresponder à marca

Resultado: Landing page que parece pertencer a um produto adjacente ao Nothing.

Armadilhas

Adicionar cores quentes quebra a linguagem — A skill rejeita sugestões fora da paleta se pedida; apoie-se nela

Combine com: filesystem · shadcn-ui-mcp

Reestilize um dashboard existente no estilo Nothing

👤 Devs mantendo ferramentas internas ⏱ ~60 min advanced

Quando usar: O admin interno parece Bootstrap 4; você quer que pareça intencional.

Fluxo

Faça o inventário

Nothing-design: escaneie src/components/. Liste os componentes e proponha um equivalente na linguagem Nothing para cada um.✓ Copiado

→ Proposta por componente
Refatore um

Refatore DataTable.tsx para o estilo Nothing. Fonte mono para numéricos, divisores dot-matrix, acento apenas no hover de linha.✓ Copiado

→ Componente atualizado correspondendo à linguagem

Resultado: Dashboard monocromático coeso.

Armadilhas

Difícil de ler de relance — Aumente o contraste; Nothing é alto contraste, não baixo contraste

Gere um deck de marketing na estética Nothing

👤 Devs de marketing ⏱ ~30 min intermediate

Quando usar: Você quer um deck que não pareça um template genérico.

Fluxo

Monte

Nothing-design: gere um deck HTML de 12 slides para lançamento de produto. Use numerais grandes como marcadores de seção.✓ Copiado

→ Deck HTML único correspondendo à linguagem

Resultado: Deck que reforça a marca sem esforço.

Armadilhas

Muito escuro para uma sala de projetor clara — A skill tem uma inversão 'light' — solicite-a

Combine com: guizang-ppt-skill

Combinações

Combine com outros MCPs para 10× de alavancagem

nothing-design-skill + shadcn-ui-mcp

Use componentes shadcn, temados para Nothing

shadcn: obtenha Form. Nothing-design: reestilize para a linguagem da marca.✓ Copiado

nothing-design-skill + filesystem

Aplique em um projeto inteiro

Nothing-design: escaneie components/, proponha reestilizações, depois aplique uma por uma.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
emit_tokens	(none)	Configuração do projeto
generate_component	kind: hero\|cta\|table\|card, content	Adicionando uma seção
restyle_existing	path, target_kind	Alinhando componentes legados à linguagem

Custo e limites

O que custa rodar

Cota de API: N/A
Tokens por chamada: 500–3000
Monetário: Gratuito
Dica: Gere os tokens uma vez, depois estilize componentes incrementalmente — não reemita tokens a cada chamada

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-read filesystem-write

Armazenamento de credenciais: Nenhum

Saída de dados: Nenhuma

Esta é uma interpretação feita por fã; não é afiliada à empresa Nothing

Solução de problemas

Erros comuns e correções

Output uses other colors

Reprompt: 'apenas monocromático, acento vermelho permitido em <10% da superfície'

Type pairing feels off

Especifique as fontes mono + grotesk exatas no prompt; padrão é JetBrains Mono + Inter

Dot-matrix background looks like noise

Reduza a densidade dos pontos; a skill usa densidade excessiva por padrão em algumas telas

Alternativas

Nothing Design Skill vs. outros

Alternativa	Quando usar	Troca
shadcn/ui defaults	Você quer um visual mais convencional	Genérico; sem voz de marca
Tailwind UI	Você quer polido mas genérico	Parece igual a todos os outros sites Tailwind UI
Custom design system	Você tem um designer de marca	Lento; caro

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills