Nothing의 시각 언어에서 영감을 받은 Claude Code의 디자인 시스템 기술. 흑백, 타이포그래피, 인더스트리얼.

나는 같은 디자인 규칙을 클로드에게 계속해서 설명했다 — 스위스 타이포그래피, OLED 검은색, 분할된 진행 바, 도트 매트릭스 모티프. 그래서 나는 그것을 재사용 가능한 기술로 포장했다.

네가 얻는 것들

Claude에게 /nothing-design라고 말하거나 "Nothing style"이라고 말하면 다음 원칙에 따라 UI가 생성됩니다:

• 3층 시각적 계층 구조 (디스플레이, 본문, 메타데이터 — 그게 전부)
• 스페이스 그로테스크 + 스페이스 모노 + 도토 폰트 스택
• 완전한 다크 및 라이트 모드 토큰 시스템
• 분할된 진행 바, 기계식 토글, 계기판 위젯
• HTML/CSS, SwiftUI, 또는 React/Tailwind로 출력

설치

nothing-design 폴더를 Claude Code 스킬 디렉터리에 복사하세요:

그게 전부입니다. 다음에 Claude Code를 시작할 때는 이 기술이 사용 가능합니다.

안에 뭐가 들어 있을까

면허증

MIT

Nothing Design Skill

A design system skill for Claude Code inspired by Nothing’s visual language. Monochrome, typographic, industrial.

I kept describing the same design rules to Claude over and over — Swiss typography, OLED blacks, segmented progress bars, dot-matrix motifs. So I packaged it into a reusable skill.

What you get

Tell Claude /nothing-design or say “Nothing style” and it generates UI following these principles:

• Three-layer visual hierarchy (display, body, metadata — that’s it)
• Space Grotesk + Space Mono + Doto font stack
• Full dark and light mode token system
• Segmented progress bars, mechanical toggles, instrument-style widgets
• Output as HTML/CSS, SwiftUI, or React/Tailwind

Install

Copy the nothing-design folder into your Claude Code skills directory:

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

That’s it. Next time you start Claude Code, the skill is available.

What’s inside

License

MIT