Nothing Design Skill: Nothing 디자인 언어로 모노크롬 UI를 생성하는 Claude Code 스킬

Nothing Design Skill 소개

AI 코딩 에이전트로 화면을 만들다 보면, 매번 같은 디자인 규칙을 처음부터 설명하게 되는 순간이 옵니다. Nothing Design Skill의 저자도 Claude에게 스위스 타이포그래피, OLED 블랙, 세그먼트형 진행 바, 도트매트릭스 모티프 같은 규칙을 반복해서 불러 주다가, 이를 재사용 가능한 스킬 하나로 묶었다고 밝힙니다. 그렇게 만들어진 결과물이 Nothing의 시각 언어에서 영감을 받은 Claude Code용 디자인 시스템 스킬입니다.

Nothing Design Skill은 모노크롬, 타이포그래피 중심, 산업적(industrial) 무드라는 세 가지 인상을 일관되게 구현하는 데 초점을 둡니다. Claude Code에서 /nothing-design 을 호출하거나 "Nothing style" 이라고 말하면, 스킬에 정의된 원칙을 따라 화면을 생성합니다. 디자이너가 매번 톤을 잡아 주지 않아도 같은 미감이 반복 가능한 형태로 나오게 만드는 것이 이 스킬의 목적입니다.

preview

이 스킬은 특정 프레임워크에 묶이지 않습니다. 같은 디자인 원칙을 HTML/CSS, SwiftUI, React/Tailwind 중 원하는 형태로 출력할 수 있어, 웹과 iOS, 컴포넌트 기반 프론트엔드를 오가며 일관된 룩앤필을 유지할 수 있습니다.

Nothing Design Skill이 생성하는 것

스킬이 따르는 원칙은 분명한 묶음으로 정리되어 있습니다. 화면은 디스플레이, 본문, 메타데이터의 세 계층 시각 위계 만으로 구성되며, 그 이상으로 위계를 늘리지 않습니다. 글꼴은 Space Grotesk와 Space Mono, Doto를 조합한 스택을 사용하고, 다크 모드와 라이트 모드를 모두 포함하는 토큰 시스템이 색·간격·모션을 관리합니다. 컴포넌트로는 세그먼트형 진행 바, 기계식 토글, 계기판을 닮은 위젯이 제공되어 Nothing 특유의 산업적 인상을 화면 단위에서 재현합니다. 이렇게 만들어진 결과는 HTML/CSS, SwiftUI, React/Tailwind 중 하나로 출력됩니다.

Nothing Design Skill의 구성과 설치

스킬 폴더 안은 역할별 문서로 나뉘어 있습니다. SKILL.md 는 디자인 철학과 제작 규칙, 워크플로를 담고, references/tokens.md 는 색·글꼴·간격·모션 토큰을, references/components.md 는 버튼·카드·리스트·테이블·오버레이 같은 컴포넌트를, references/platform-mapping.md 는 CSS·SwiftUI·React 출력 매핑을 정의합니다.

설치는 저장소를 클론한 뒤 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를 실행하면 스킬이 인식되어 바로 사용할 수 있습니다.

Nothing Design Skill의 라이선스

Nothing Design Skill은 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:github: Nothing Design Skill 프로젝트 GitHub 저장소

더 읽어보기




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다!
텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: