calm-design
April 26, 2026 · View on GitHub
"AI가 만든 것 같지 않은" 프리미엄 디자인을 만들어주는 Claude 스킬
왜 calm-design인가요?
AI로 웹 디자인을 만들어 보신 적 있나요? 결과물을 보면 "아, AI가 만들었구나" 하고 바로 알 수 있습니다.
AI 디자인의 흔한 특징들:
- 보라색/파란색 그라데이션 배경
- 똑같은 크기의 카드 3개가 나란히
- "Elevate Your Experience" 같은 뻔한 문구
- 새까만 검정색 (#000000)
- 어디서 많이 본 Inter 폰트
calm-design은 이런 "AI 냄새"를 자동으로 감지하고 차단합니다. 대신, 토스·당근·Linear처럼 세련되고 차분한 디자인을 만들어줍니다.
어떻게 다른가요?
1. 50가지 이상의 "AI 냄새" 자동 차단
| 이런 건 안 나와요 | 대신 이렇게 |
|---|---|
| 보라/파란 그라데이션 | 차분한 단색 배경 |
| 3칸 똑같은 카드 | 비대칭 벤토 그리드 |
| Inter, Roboto 폰트 | Pretendard (한국어 최적화) |
| 새까만 검정 #000000 | 부드러운 차콜 #0A0A0A |
| "Elevate", "Seamless" | 자연스러운 한국어 카피 |
2. 한국어를 제대로 이해해요
- Pretendard 폰트 자동 적용 — 한국어가 예쁘게 보이는 폰트
- 한국어 줄바꿈 규칙 적용 — 단어 중간에서 안 끊김
- "김민서", "박지호" 같은 한국식 예시 이름
- 토스, 당근, 배민 등 33개 한국 브랜드 디자인 참조
3. 만들고 나서 스스로 검토해요
다른 AI는 결과물을 그냥 던져주지만, calm-design은:
- 디자인을 만들고
- 직접 눈으로 확인하고 (Vision AI)
- 문제가 있으면 자동으로 수정합니다
이렇게 말하면 돼요
"랜딩페이지 만들어줘. 토스 느낌으로, 심플하게."
"대시보드 디자인해줘. 데이터 많이 보여줘야 해."
"이 코드 좀 다듬어줘. AI 티 안 나게."
"3가지 다른 스타일로 보여줘."
말투를 바꾸면 결과도 달라져요:
- "미니멀하게" → 여백 많고 깔끔하게
- "트렌디하게" → 요즘 유행하는 스타일로
- "데이터 많이" → 정보 밀도 높게
- "차분하게" → 움직임 적게, 정적으로
예시로 보기
예시 1: SaaS 대시보드
요청: "한국 B2B SaaS 대시보드. 차분하고 데이터 많은 톤으로."
결과:
- 사이드바 + 검색창 (⌘K)
- 비대칭 KPI 카드 (2-1-1 배치)
- 차트와 활동 피드
- Pretendard 폰트, 에메랄드 포인트 컬러
→ 코드 보기
예시 2: 토스 스타일 랜딩페이지
요청: "AI 영상 편집 서비스 랜딩. 토스 느낌으로."
결과:
- 히어로 → 소셜 프루프 → 기능 소개 → CTA
- 토스 블루 단일 포인트
- 충분한 여백과 호흡감
→ 코드 보기
예시 3: 디자인 시스템 문서
요청: "이 디자인의 색상/폰트/컴포넌트를 카탈로그로 정리해줘."
결과: 한눈에 보는 디자인 시스템 문서 (HTML)
→ 코드 보기
예시 4: React 대시보드 (shadcn + zustand)
요청: "React로 대시보드 만들어줘. 프로덕션 코드로."
결과: Next.js 14 + shadcn/ui + zustand + Framer Motion 통합 예시
- shadcn Button (loading 상태 포함)
- zustand로 사이드바 상태 관리
- Framer Motion 진입 애니메이션
- lucide-react 아이콘
→ 코드 보기
# 실행 방법
cd examples/05-react-dashboard
npm install
npm run dev
참조하는 브랜드들
calm-design은 33개 브랜드의 디자인 시스템을 분석해서 참조합니다.
한국 브랜드 (15개) 토스 · 당근 · 배민 · 카카오 · 네이버 · 쿠팡 · 마켓컬리 · 무신사 · 오늘의집 · 클래스101 · 야놀자 · 직방 · 29CM · 라인 · 스타벅스코리아
글로벌 브랜드 (18개) Linear · Vercel · Stripe · Notion · Figma · Supabase · Raycast · Framer · Apple · Airbnb · Spotify · Tesla · BMW · Cursor · Superhuman · Cal.com · Mintlify · Replicate
"토스 스타일로", "Linear처럼" 하면 해당 브랜드의 디자인 톤을 참조해서 만들어줍니다.
설치 방법
방법 1: 모든 프로젝트에서 사용 (전역 설치)
터미널에서 아래 명령어를 실행하세요:
# 1. 저장소 다운로드
git clone https://github.com/calmtiger86/calm-design.git
# 2. 스킬 폴더로 복사
cp -r calm-design ~/.claude/skills/calm-design
설치 후 Claude Code를 재시작하면 모든 프로젝트에서 사용할 수 있습니다.
방법 2: 특정 프로젝트에서만 사용 (프로젝트 설치)
프로젝트 폴더에서 아래 명령어를 실행하세요:
# 1. 저장소 다운로드
git clone https://github.com/calmtiger86/calm-design.git
# 2. 프로젝트의 스킬 폴더로 복사
mkdir -p .claude/skills
cp -r calm-design .claude/skills/calm-design
설치 확인
설치가 잘 됐는지 확인하려면 Claude에게 물어보세요:
"calm-design 스킬 있어?"
또는 바로 사용해보세요:
"랜딩페이지 만들어줘"
자주 묻는 질문
Q: 코딩을 몰라도 쓸 수 있나요?
네! 자연어로 원하는 디자인을 설명하면 됩니다. 코드는 자동으로 생성되고, 바로 브라우저에서 열어볼 수 있어요.
Q: 생성된 디자인을 수정할 수 있나요?
물론이죠. "이 부분 색상 바꿔줘", "버튼 더 크게" 같이 말하면 수정해줍니다.
Q: 영어 디자인도 되나요?
네. 영어로 요청하거나 "영어로 만들어줘"라고 하면 영어 환경에 맞는 폰트(Geist 등)와 설정이 적용됩니다.
Q: 상업적으로 써도 되나요?
네, MIT 라이선스입니다. 자유롭게 사용하세요.
라이선스
MIT — 상업적 사용, 수정, 재배포 모두 자유롭습니다.
Made with ☕ by @calmtiger_