클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

Design Is — 디터 람스 디자인 감사

디터 람스의 10가지 '좋은 디자인' 원칙으로 UI를 증거 기반 채점하고, 신규·개선·재설계 판정과 실행 계획 프롬프트까지 만들어 주는 스킬.

디자인·UI중급★ 90,139⑂ 7,846AI 점수 8/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

디터 람스의 10원칙(혁신적·유용함·심미적·이해 가능·눈에 거슬리지 않음·정직함·오래감·디테일·환경친화적·최소한의 디자인)을 기준으로 UI/제품 화면을 감사합니다.

  • 범위 고정(Phase 0): 무엇을·누구를 위해 감사하는지 00-scope.md로 먼저 명시
  • 증거 수집(Phase 1): 구조/시각/카피·정직성/무게·마찰/접근성 서브에이전트를 병렬 투입해 요소 수, 간격·타입 스케일, 최저 명암비, 초기 JS 용량, 다크패턴 등을 file:line과 함께 수집
  • 채점(Phase 2): 원칙별 0~3점 앵커를 그대로 적용, 애매하면 낮은 점수, 평균이 아니라 최악 사례 기준
  • 판정(Phase 3): 총점 20 이상이면 REFINE, 20 미만 또는 핵심 원칙 0점이면 REDESIGN, 산출물이 없으면 NEW
  • 인계(Phase 4): 판정에 맞는 /make-plan 프롬프트를 복붙 가능한 형태로 생성

결과물은 DESIGN-IS-<날짜>/ 폴더에 스코프·증거·스코어카드·판정·인계 프롬프트 5개 문서로 남습니다.

이런 분께 추천

  • 감(feel)이 아니라 근거로 디자인 리뷰를 남기고 싶은 프로덕트 디자이너·프론트엔드 개발자
  • 리디자인이냐 개선이냐를 팀에 설득해야 하는 리드/PM
  • 랜딩페이지나 대시보드의 상태 처리(빈 상태·로딩·에러·포커스) 누락을 체계적으로 점검하려는 1인 개발자

활용 예시

  1. "이 대시보드 디자인 감사해줘, 경로는 src/features/dashboard" → 구조·시각 증거 수집 후 02-scorecard.md에 18/30, 판정 REDESIGN, 상위 4개 개선 과제를 뽑아 /make-plan 프롬프트 생성
  2. "우리 결제 화면이 람스 원칙에 맞는지 봐줘" → 카피·정직성 서브에이전트가 강제 구독 연장·숨은 비용 같은 다크패턴을 문장 단위로 지적하고 #6 정직함 0점 처리
  3. "아직 화면은 없는데 신규 온보딩을 설계하고 싶어" → Phase 1~2를 건너뛰고 verdict = NEW로 신규 설계용 /make-plan 템플릿을 채워서 반환

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 thedotmack/claude-mem 의 plugin/skills/design-is 폴더를 내 ~/.claude/skills/design-is/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/thedotmack/claude-mem.git /tmp/claude-mem && mkdir -p ~/.claude/skills && cp -r /tmp/claude-mem/plugin/skills/design-is ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 저장소를 임시 폴더에 복제합니다: git clone https://github.com/thedotmack/claude-mem.git /tmp/claude-mem
  2. 스킬 폴더가 없다면 만듭니다: mkdir -p ~/.claude/skills
  3. 이 스킬만 복사합니다: cp -r /tmp/claude-mem/plugin/skills/design-is ~/.claude/skills/
  4. ~/.claude/skills/design-is/SKILL.md 파일이 있는지 확인합니다.
  5. Claude Code를 재시작한 뒤 "이 디자인 감사해줘(design audit)"처럼 요청하면 스킬이 트리거됩니다.
  6. (권장) 인계 프롬프트를 바로 쓰려면 같은 저장소의 /make-plan 명령과 agent-browser 스킬도 함께 설치하세요. 없으면 감사 결과 문서까지만 활용하면 됩니다.
GitHub에서 원본 보기 ↗라이선스: Apache-2.0