christianaotic595/nothing-design-skill

O que nothing-design-skill faz?

Crie uma habilidade de design inspirada na Nothing para Claude Code com tokens de UI monocromáticos, regras de tipografia e componentes industriais para HTML, SwiftUI e React.

Visão Geral

Esta skill fornece diretrizes de design e componentes reutilizáveis ​​que seguem a estética minimalista e industrial da Nothing. Inclui:

• Tokens de design: Cores (preto, branco, cinza), fontes (Inter, JetBrains Mono), espaçamentos, bordas e sombras.
• Componentes: Botões, cartões, barras de progresso, inputs e mais, prontos para uso em HTML, SwiftUI e React.
• Regras de tipografia: Tamanhos, pesos e hierarquia de texto para uma aparência limpa e moderna.

Como Usar

1. Ative a skill no Claude Code com o comando /skill nothing-design-skill.
2. Peça para gerar componentes ou páginas completas no estilo Nothing.
3. Exemplo: "Crie um cartão de produto no estilo Nothing usando React."

Tokens de Design

Cores

• --color-background: #000000 (preto)
• --color-surface: #1a1a1a (cinza escuro)
• --color-text-primary: #ffffff (branco)
• --color-text-secondary: #8c8c8c (cinza claro)
• --color-accent: #ffffff (branco para destaque)
• --color-border: #333333 (cinza médio)

Tipografia

• Fonte principal: Inter (sans-serif)
• Fonte para código: JetBrains Mono (monoespaçada)
• Tamanhos: 12px, 14px, 16px, 20px, 24px, 32px, 48px

Espaçamentos

• 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

Bordas e Sombras

• Raio de borda: 0 (sem bordas arredondadas, estilo industrial)
• Sombras: 0 4px 6px rgba(0, 0, 0, 0.1)

Componentes

Botão (React)

import React from 'react';

const Button = ({ children, onClick, variant = 'primary' }) => {
  const baseStyle = {
    fontFamily: 'Inter, sans-serif',
    fontSize: '16px',
    border: '2px solid #ffffff',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
  };

  const primaryStyle = {
    backgroundColor: '#ffffff',
    color: '#000000',
    ...baseStyle,
  };

  const secondaryStyle = {
    backgroundColor: 'transparent',
    color: '#ffffff',
    ...baseStyle,
  };

  return (
    <button
      style={variant === 'primary' ? primaryStyle : secondaryStyle}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

Cartão (HTML)

<div class="card-nothing">
  <h2 class="card-title">Título do Cartão</h2>
  <p class="card-description">Descrição do cartão no estilo Nothing.</p>
  <button class="card-button">Ação</button>
</div>

<style>
  .card-nothing {
    background-color: #ffffff;
    border: 2px solid #000000;
    padding: 24px;
    font-family: 'Inter', sans-serif;
  }
  .card-title {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
  }
  .card-description {
    font-size: 16px;
    color: #333333;
  }
  .card-button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.3s ease;
  }
  .card-button:hover {
    opacity: 0.8;
  }
</style>

Barra de Progresso (SwiftUI)

import SwiftUI

struct ProgressBar: View {
    var progress: Double // 0.0 a 1.0
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .fill(Color.gray.opacity(0.3))
                Rectangle()
                    .fill(Color.black)
                    .frame(width: geometry.size.width * CGFloat(progress))
            }
        }
        .frame(height: 8)
    }
}

struct ProgressBar_Previews: PreviewProvider {
    static var previews: some View {
        ProgressBar(progress: 0.7)
            .padding()
    }
}

Licença

MIT