Nothing Design Skill은 Claude Code가 Nothing 브랜드에서 영감을 받은 모노크롬·타이포그래픽·인더스트리얼 UI를 생성하도록 지침과 디자인 토큰을 제공하는 에이전트 스킬이다. 반복적으로 프롬프트에 디자인 규칙을 쓰는 대신, SKILL.md와 참조 파일로 시각 언어를 패키징한다.

무엇을 제공하나

스킬은 /nothing-design 또는 “Nothing style” 같은 요청에 반응해 다음 원칙을 적용한다.

• display/body/metadata 3계층 시각 위계
• Space Grotesk, Space Mono, Doto 중심 폰트 스택
• light/dark mode token system
• segmented progress bar
• mechanical toggle
• instrument-style widget
• HTML/CSS, SwiftUI, React/Tailwind 출력 매핑

구성

nothing-design/
├── SKILL.md
└── references/
    ├── tokens.md
    ├── components.md
    └── platform-mapping.md

SKILL.md는 디자인 철학과 작업 흐름을 설명하고, references/는 색상·폰트·간격·모션·컴포넌트·플랫폼별 구현 매핑을 나눠 담는다. 이는 좋은 agent-skills 구조의 전형적인 예다. 항상 필요한 트리거 정보는 작게 유지하고, 세부 디자인 사양은 필요할 때만 읽게 한다.

설치

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

Claude Code를 다시 시작하면 스킬을 사용할 수 있다.

언제 유용한가

• Claude Code에 특정 브랜드·디자인 언어를 일관되게 적용하고 싶을 때
• 프론트엔드 생성물의 스타일을 매번 긴 프롬프트로 설명하기 싫을 때
• UI 토큰과 컴포넌트 규칙을 에이전트가 참조 가능한 형태로 패키징하고 싶을 때

이 스킬 자체보다 중요한 점은 패턴이다. 디자인 감각을 단발성 프롬프트가 아니라 재사용 가능한 스킬로 만든다.

관련 문서

• agent-skills — AI 에이전트의 능력을 확장하는 스킬 시스템
• agent-skills-tips-engineering — 실무 엔지니어링 워크플로를 스킬로 내재화하는 원칙
• taste-skill — AI 에이전트의 UI 품질을 높이는 프론트엔드 스킬

참고 자료

• dominikmartn/nothing-design-skill — GitHub 공식 저장소