dickwu/apple-design-skill
Cross-platform UI/UX design reviewer based on Apple HIG. Works with Flutter, Tauri, Electron, React Native. Compatible with Claude Code, Cursor, Codex.
Apple Design Skill – Apple HIG를 위한 AI 기반 UI 리뷰어
개요
- AI 코딩 어시스턴트(Claude Code, Cursor, Codex 등)에 추가할 수 있는 재사용 가능한 스킬입니다.
- 이 스킬을 통해 어시스턴트는 디자인 리뷰어 역할을 수행하여 모바일 및 데스크톱 UI 코드를 Apple의 휴먼 인터페이스 가이드라인(HIG)에 따라 검사할 수 있습니다.
작동 방식
- 리포지토리에는 HIG 페이지를 직접 복사한 123개의 Markdown 파일(엄선된 "Liquid Glass" 가이드 포함)이 포함되어 있습니다. 각 파일에는 Apple의 문구, 제목, 표, 변경 로그 정보가 유지됩니다.
- 작은 Node 스크립트(
scripts/pull-hig.mjs)를 사용하여 developer.apple.com에서 최신 HIG 페이지를 다시 다운로드하여 참조 세트를 최신 상태로 유지할 수 있습니다. - 에이전트가 *"내 Flutter 화면을 Apple 가이드라인에 따라 검토해 줘"*와 같은 요청을 받으면 스킬은 관련 HIG 마크다운을 로드한 후 구조화된 리뷰를 생성합니다.
- Apple의 8가지 디자인 원칙
- 접근성 검사(텍스트 배율, 대비, 컨트롤 크기 등)
- 플랫폼 규칙(탭 바, 메뉴, 안전 영역 등)
- 시각적 디자인 및 완성도
- 인터랙션 패턴
- 콘텐츠 및 문체
- 각 지적 사항에는 What(내용), Why(정확한 HIG 제목 인용), 그리고 사용 중인 프레임워크(Flutter, React Native, Tauri, Electron, SwiftUI, UIKit, AppKit)로 작성된 Fix(수정)가 포함됩니다.
- 특수 모드는 앱 아이콘 리뷰, 다크 모드 확인, iPhone Duo 듀얼 스크린 레이아웃, Liquid Glass 효과, 생성 AI로 만든 UI 구성 요소를 처리합니다.
설치
- 권장 방법은 일반 스킬 CLI입니다.
npx skills add dickwu/apple-design-skill # 지원되는 모든 에이전트에 추가 - 단일 에이전트를 지정할 수 있습니다(
-a claude-code,-a cursor,-a codex). - Claude Code의 경우 리포지토리를
~/.claude/skills/apple-design에 클론할 수도 있습니다. - Cursor 및 기타 에이전트는 리포지토리와 함께 제공되는 동일한
.cursorrules/.windsurfrules파일을 읽습니다.
일반적인 사용법
에이전트에게 요청하세요:
- "내 Flutter 앱의 홈 화면을 Apple 가이드라인에 따라 검토해 줘"
- "이 Tauri 앱의 접근성을 감사해 줘"
- "이 설정 화면이 macOS 규칙을 따르나요?"
- "내 앱이 iPhone Duo의 듀얼 디스플레이를 지원하나요?"
- "이 일반적인 UI에 iOS 패턴을 깨지 않고 관점을 부여해 줘"
에이전트는 각 항목에서 문제, HIG 참조, 선택한 프레임워크에 대한 구체적인 코드 수준 수정을 설명하는 글머리 기호 리뷰로 응답합니다.
주요 구성 요소
SKILL.md– 스킬의 입장, 렌즈, 보고서 형식, 개선 워크플로우 정의.AGENTS.md– 기여자 및 지원되는 각 AI 에이전트를 위한 지침.scripts/pull-hig.mjs– Apple의 JSON API를 크롤링하여 123개의 HIG 페이지를references/hig/*.md로 렌더링하고 라우팅 테이블을 업데이트하는 종속성 없는 Node 스크립트.references/– 생성된 HIG 마크다운 파일과 플랫폼 간 변환 테이블(cross-platform.md).
중요한 이유
- Apple의 끊임없이 변화하는 가이드라인에 따라 UI를 확인하는 지루하고 세부적인 프로세스를 자동화하여 개발자 시간을 절약합니다.
- Apple 중심 디자인 언어와 크로스 플랫폼 UI 툴킷(Flutter, React Native, Tauri, Electron 등) 간의 격차를 해소합니다.
- 간단한
node scripts/pull-hig.mjs명령으로 참조 자료를 최신 상태로 유지합니다.
라이선스 및 출처
- 가이드라인 텍스트는 Apple의 공개 휴먼 인터페이스 가이드라인에서 복제된 것이며 프로젝트 소유가 아닙니다. 스킬, 스크립트, 엄선된 가이드는 리포지토리 라이선스에 따라 "있는 그대로" 제공되며, 프로젝트가 Apple과 제휴하지 않는다는 면책 조항이 포함됩니다.
지원
- 저자는 HIG 가져오기 스크립트를 유지 관리하고 스킬을 최신 상태로 유지하기 위해 GitHub Sponsors를 통한 후원을 환영합니다.
관련
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트