dominikmartn/nothing-design-skill

A Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.

2,616
GitHub 스타
157
포크
언어
MIT
라이선스
2026.04.01
최근 푸시
2026.06.16
별표한 날

AI 분석

설치 난이도: 쉬움
큐레이터 노트
Nothing 디자인 스타일을 자주 사용하는 Claude Code 사용자에게 적극 추천. 설치가 간편하고 즉시 사용 가능하며, 디자인 일관성을 유지하는 데 큰 도움이 됨.

강점

  • Nothing 특유의 모노크롬/타이포그래픽 디자인을 Claude Code에서 바로 재현 가능
  • HTML/CSS, SwiftUI, React/Tailwind 등 다양한 플랫폼 출력 지원
  • 설치가 매우 간단하며, 스킬 디렉토리에 폴더 복사만으로 사용 가능

약점

  • Claude Code에 종속되어 있어 다른 AI 도구에서는 사용 불가
  • 디자인 스타일이 Nothing에 한정되어 있어 범용성이 낮음
  • 참조 파일(tokens, components 등)의 상세 수준을 README만으로는 파악하기 어려움

주의사항

  • Claude Code가 설치되어 있어야 하며, 스킬 디렉토리 경로(~/.claude/skills/)가 정확해야 함
  • 생성된 UI가 실제 Nothing 제품과 완전히 동일하지 않을 수 있음
  • 스킬 업데이트 시 기존 복사본을 덮어써야 할 수 있음

시작 가이드

  • 레포지토리를 클론하고 nothing-design 폴더를 ~/.claude/skills/에 복사
  • Claude Code를 실행하고 '/nothing-design' 명령어로 스킬 테스트
  • 참조 파일(tokens.md, components.md 등)을 검토하여 커스터마이징 가능성 확인

README 한국어 번역

이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.

Nothing Design Skill

Nothing의 비주얼 언어에서 영감을 받은 Claude Code용 디자인 시스템 스킬입니다. 모노크롬, 타이포그래픽, 인더스트리얼 스타일을 따릅니다.

저는 Claude에게 동일한 디자인 규칙(스위스 타이포그래피, OLED 블랙, 세그먼트 진행 표시줄, 도트 매트릭스 모티프)을 계속해서 설명해야 했습니다. 그래서 이를 재사용 가능한 스킬로 패키징했습니다.

!미리보기

제공 기능

Claude에게 /nothing-design이라고 말하거나 "Nothing 스타일"이라고 하면 다음 원칙에 따라 UI를 생성합니다:

  • 3계층 시각적 계층 구조(디스플레이, 본문, 메타데이터 — 이것만 있음)
  • Space Grotesk + Space Mono + Doto 폰트 스택
  • 전체 다크/라이트 모드 토큰 시스템
  • 세그먼트 진행 표시줄, 기계식 토글, 계기판 스타일 위젯
  • HTML/CSS, SwiftUI 또는 React/Tailwind로 출력

설치

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

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

끝입니다. 다음에 Claude Code를 시작하면 스킬을 사용할 수 있습니다.

내부 구성

파일 설명
SKILL.md 디자인 철학, 제작 규칙, 워크플로우
references/tokens.md 색상, 폰트, 간격, 모션 토큰
references/components.md 버튼, 카드, 리스트, 테이블, 오버레이
references/platform-mapping.md CSS, SwiftUI, React 출력 매핑

라이선스

MIT

원본 저장소: dominikmartn/nothing-design-skill

라이선스: MIT

게재 제외를 원하시면 삭제 요청을 보내주세요.