Claude Code Skills로 Apple 감성 UI 자동 생성

개요: 왜 Apple풍 UI에 Skills를 쓰는가

• AI가 만든 화면은 종종 "AI 티" 나는 디자인이 됨

• 페이지가 늘수록 버튼·여백·색감 불일치 문제가 커짐

• 목표: 한 번 세팅 후, 프롬프트만 던져도 일관된 Apple 스타일 UI가 자동으로 나오는 워크플로우 만들기

Claude Code Skills 핵심 개념

• 정의: 특정 분야 노하우를 묶어 둔 "전문 지식 모듈"

• 특징

  • 필요할 때만 불러 쓰는 "지식 서랍" → 토큰 절약

  • 각 스킬에 문서, 예시 코드, 스크립트 포함 가능 → 작업용 툴킷처럼 사용

• 사용 방식

  • 평소엔 일반 코딩 보조

  • "Apple 스타일로" 등 특정 요청 시 해당 스킬만 로딩

디자인 작업에 Skills가 잘 맞는 이유

• 디자인의 핵심: 일관된 룰 유지

  • 색상, 여백, 타이포, 컴포넌트, 애니메이션 등

• Skills 장점

  • 토큰 아끼면서도 디자인 룰 유지

  • 여러 페이지를 만들어도 스타일 균일

  • "디자인 시스템"을 스킬로 캡슐화해 재사용 가능

claude-skill-creator 스킬로 스킬 생성 자동화

• 문제: 공식 skill-creator는 설정·플러그인 과정이 번거로움

• 해결: "스킬을 만드는 스킬"인 claude-skill-creator를 먼저 만들어 자동 생성에 활용

• 디렉터리 구조

  • 프로젝트 전용: .claude/skills

  • 공용 사용: ~/.claude/skills

  • 예: .claude/skills/claude-skill-creator/SKILL.md

• SKILL.md YAML 핵심

  • name: 스킬 식별자 (소문자·숫자·하이픈)

  • description: 무엇을, 언제, 어떤 키워드에 반응해 하는지 구체적으로 작성

• Claude는 description을 보고 "어떤 요청에 어떤 스킬을 쓸지" 자동 판단

스킬 인식 확인 방법

• Claude Code에 질문:

  • "당신이 인식하고 있는 Claude Skills를 알려주세요."

• 기대 응답 예:

  • claude-skill-creator

    • 스킬 생성 방법 안내

    • YAML, 디렉터리 구조, 베스트 프랙티스 설명

    • 새 스킬 생성·업데이트에 사용

• 여기까지 되면 이후 스킬 생성 작업을 AI에 맡길 준비 완료

apple-design 스킬 만들기

• 목표: Apple Human Interface Guidelines를 참고해 Apple 스타일 UI를 만드는 스킬 생성

• 프롬프트 예

  • "claude-skill-creator 스킬을 사용해서, Apple풍의 세련된 디자인을 만드는 새로운 Claude Skills 'apple-design'을 프로젝트 내에 만들어 주세요."

• 포인트

  • 프롬프트에 claude-skill-creator 명시 → 해당 스킬 확실히 호출

  • 새 스킬 이름: apple-design

• 실행 시 선택지

  • "Use skill 'claude-skill-creator'?"

    1. Yes

    2. Yes, and don't ask again for this project

    3. No ...

• 생성 후 구조

  • .claude/skills/apple-design/SKILL.md

• 주의

  • 파일명은 반드시 SKILL.md여야 스킬로 인식

• 이로써 "Apple풍 UI 지식 덩어리"를 필요할 때만 꺼내 쓰는 구조 완성

references 폴더로 Apple 디자인 룰 세분화

• 필요성: 실무에서 여러 화면을 만들수록 룰을 더 잘게 나누는 것이 유리

• 활용 프롬프트 예

  • "claude-skill-creator를 사용해서 apple-design 스킬을 더 발전시켜 주세요. references 폴더를 활용해 디자인 시스템 문서를 세분화해 주세요."

• 예시 구조

  • apple-design/SKILL.md

  • apple-design/references/

    • principles.md (디자인 원칙)

    • colors.md (색상 시스템)

    • typography.md (폰트·계층)

    • glassmorphism.md (유리 느낌)

    • animations.md (애니메이션 가이드)

    • frameworks/react.md, tailwind.md

    • components/buttons.md, cards.md, navigation.md

    • examples/landing-page.md

• 장점

  • SKILL.md는 입구, 상세 룰은 references에서 필요할 때 참조

  • 예: buttons.md에

    • 프라이머리/세컨더리 버튼 색·패딩·폰트·라운드·상태(호버/포커스/비활성) 정의

  • 버튼 룰만 바꿔도 전체 화면의 버튼 일관되게 수정 가능

스킬 유무에 따른 화면 비교 포인트

• 공통 프롬프트(요약)

  • 스마트홈 관리 앱 설정 화면

  • 1페이지, 제목·설명

  • 내비게이션 메뉴 3~5개

  • 설정 카드 3개 이상

  • 토글/버튼, 프라이머리·세컨더리 버튼

  • HTML/CSS만, 스크롤 없이 1 화면

1. 스킬 없는 경우 특징

• 과한 그라데이션

• 보라·파랑 계열 과도한 사용

• 여백·라운드·컴포넌트 비율이 미묘하게 제각각

• 전형적인 "AI 티 나는" UI

2. apple-design 스킬 사용 + 마지막에

• "apple-design 스킬을 사용해서 만들어 주세요." 추가

• 콘솔 로그: "The 'apple-design' skill is running"

• 결과 특징

  • 여유 있는 전체 여백

  • 카드·헤더·버튼 정렬·간격이 명확히 통일

  • 색감·타이포가 Apple Human Interface Guidelines 방향과 유사

  • 토글 스위치가 iOS 설정 토글과 비슷한 비율·구조

• 핵심 차이

  • 화면이 쌓일수록 스킬 사용 시 전체 통일감이 유지됨

  • 스킬 없이 만든 UI는 화면이 많아질수록 서로 안 맞기 시작

정리: 감각 대신 룰을 Claude에 심기

• Claude Code Skills

  • 필요할 때만 꺼내 쓰는 전문 지식 모듈

• claude-skill-creator

  • 스킬 생성·갱신을 자동화하는 "메타 스킬"

• apple-design 스킬

  • Apple Human Interface Guidelines 기반 Apple풍 UI를 일관되게 생성

• references 폴더

  • 버튼·카드·네비·타이포 등 디자인 시스템을 문서별로 구조화

• 실질 효과

  • 같은 프롬프트라도

    • 스킬 없음 → AI 티 나는 UI

    • 스킬 있음 → 규칙이 살아 있는 프로덕션 느낌 UI

• 실천 순서

  1. 프로젝트에 .claude/skills 폴더 생성

  2. claude-skill-creator 스킬 세팅

  3. "apple-design 스킬 만들어줘" 요청

  4. 이후 화면 생성 시 "apple-design 스킬을 사용해 달라"고 명시

참고

Claude Skillsで簡単にApple風デザインを自動生成！AIっぽいデザインから脱却する方法 - https://zenn.dev/tmasuyama1114/articles/apple_design_skills