nothing-design-skill  by dominikmartn

AI-powered UI generation skill

Created 4 days ago

New!

1,107 stars

Top 34.4% on SourcePulse

GitHubView on GitHub
Project Summary

A Claude Code skill designed to generate user interfaces adhering to the Nothing design language. It offers a streamlined way for developers to implement a monochrome, typographic, and industrial aesthetic, benefiting users who require rapid integration of this specific visual style.

How It Works

The skill encapsulates Nothing's distinct design rules, including Swiss typography, deep OLED blacks, segmented progress bars, and dot-matrix motifs, into a reusable format for Claude Code. It enforces a strict three-layer visual hierarchy (display, body, metadata) and leverages a curated font stack comprising Space Grotesk, Space Mono, and Doto. This approach ensures consistency and simplifies the application of the Nothing aesthetic across different UI elements.

Quick Start & Requirements

  • Install: Clone the repository and copy the nothing-design folder into your Claude Code skills directory: cp -r nothing-design-skill/nothing-design ~/.claude/skills/. The skill becomes available upon restarting Claude Code.
  • Prerequisites: Requires the Claude Code environment.
  • Dependencies: No external dependencies beyond Claude Code are specified.
  • Links: The repository serves as the primary documentation.

Highlighted Details

  • Implements the Nothing design language, characterized by its monochrome, typographic, and industrial visual style.
  • Enforces a minimalist three-layer visual hierarchy: display, body, and metadata.
  • Utilizes a specific font stack: Space Grotesk for headings, Space Mono for code/monospace, and Doto for specific elements.
  • Features a comprehensive token system supporting both full dark and light modes.
  • Includes distinct UI components such as segmented progress bars, mechanical toggles, and instrument-style widgets.
  • Supports output generation in multiple formats: HTML/CSS, SwiftUI, and React/Tailwind.

Maintenance & Community

No specific details regarding contributors, sponsorships, or community channels (like Discord/Slack) are provided in the README.

Licensing & Compatibility

  • License: MIT License.
  • Compatibility: The MIT license is permissive and generally compatible with commercial use and closed-source projects.

Limitations & Caveats

The skill's functionality is exclusively tied to the Claude Code platform. Its utility is confined to projects specifically aiming to adopt the Nothing design aesthetic, offering limited flexibility for other design directions.

Health Check
Last Commit

4 days ago

Responsiveness

Inactive

Pull Requests (30d)
1
Issues (30d)
1
Star History
1,125 stars in the last 4 days

Explore Similar Projects

Feedback? Help us improve.