/ Diretório / Playground / Nothing Design Skill
← Todos os servidores ↗ GitHub
● Comunidade dominikmartn ⚡ Instantâneo

Nothing Design Skill

por dominikmartn · dominikmartn/nothing-design-skill

Gere UI na estética Nothing — monocromático, dot-matrix, tipografia industrial, camadas transparentes — sem copiar CSS do inspect-element.

A Nothing Design Skill codifica a linguagem visual da marca Nothing (a fabricante de smartphones) como uma skill Claude Code. Use-a para landing pages, dashboards, sites de marketing ou UIs de app quando você quer aquela vibe monocromática-industrial-minimalista com acentos dot-matrix e tipografia confiante. Produz Tailwind/CSS idiomático que corresponde às convenções reais da linguagem.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

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.

Fluxo
  1. 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
  2. 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
  3. 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
  1. 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
  2. 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
  1. 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

FerramentaEntradasQuando chamarCusto
emit_tokens (none) Configuração do projeto 0
generate_component kind: hero|cta|table|card, content Adicionando uma seção 0
restyle_existing path, target_kind Alinhando componentes legados à linguagem 0

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

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

AlternativaQuando usarTroca
shadcn/ui defaultsVocê quer um visual mais convencionalGenérico; sem voz de marca
Tailwind UIVocê quer polido mas genéricoParece igual a todos os outros sites Tailwind UI
Custom design systemVocê tem um designer de marcaLento; caro

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills