클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
목록으로

Appllama 앱 디자인 스킬

Expo/React Native 화면을 애플 HIG 수준의 네이티브 감각으로 설계·구현하고 시뮬레이터로 검증하게 만드는 모바일 UI 지침서.

디자인·UI고급1265AI 점수 9/10마지막 업데이트: 2026. 8. 23.

무엇을 해주나

  • Expo Router / React Native 기반 화면을 네이티브처럼 느껴지는 수준으로 설계·구현하도록 Claude의 판단 기준을 고정합니다.
  • 시맨틱 컬러·다크모드, 네이티브 컨트롤, SF Symbols, 연속 코너, 스페이싱 리듬 등 네이티브 충실도 12개 법칙을 강제합니다.
  • push vs replace, modal vs formSheet vs overlay, 뒤로가기가 존재해선 안 되는 '일방통행 문'까지 내비게이션 의미론을 규정합니다.
  • 모션은 '빈도 게이트 → 목적 → 도구 → 속성 → 스프링/커브 → 스레드' 순서로 결정하고, 스프링 값(SETTLE 400/1.0, SNAP 400/0.8 등)과 이징 곡선을 구체적으로 지정합니다.
  • 보라색 그라데이션 CTA, 이모지 아이콘, 글래스모피즘 같은 AI 특유의 '템플릿 느낌'을 기계적으로 카운트해 걸러내는 안티-슬롭 규칙을 포함합니다.
  • 시뮬레이터 실행 + 화면 녹화(xcrun simctl io booted recordVideo) 후 프레임 단위 검수를 '완료 조건'으로 요구합니다.

이런 분께 추천

  • Expo / React Native로 iOS·안드로이드 앱 화면을 만드는 프론트엔드·모바일 개발자
  • Claude Code로 생성한 UI가 '어딘가 AI 티가 난다'는 피드백을 받아본 분
  • 온보딩, 페이월, 탭바, 바텀시트 등 반복되는 화면 패턴의 품질 기준을 팀에 고정하고 싶은 분
  • 애니메이션·제스처 감각(Reanimated, gesture-handler)을 제대로 잡고 싶은 분

활용 예시

  1. "온보딩 3단계 플로우 만들어줘" → 레퍼런스 패턴 조사 → Skip 포함 완료 시 replace로 히스토리 제거 → 라이트/다크 검증 → 플로우 녹화 검수까지 진행.
  2. "이 화면 좀 더 네이티브하게 다듬어줘" → 시맨틱 컬러 교체, borderCurve: 'continuous', 탭 타깃 44pt, 액센트 색 1개로 통일 등 구체적 수정.
  3. "바텀시트 추가해줘" → 직접 구현 대신 Expo Router formSheet + detents 사용, 드래그 중 취소·속도 인계·러버밴딩까지 점검.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Appllama/appllama-skills/HEAD/skills/appllama-app-design-skill/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

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

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

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

직접 명령으로 설치하기

git clone https://github.com/Appllama/appllama-skills.git /tmp/appllama-skills && mkdir -p ~/.claude/skills && cp -r /tmp/appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/

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

  1. 터미널을 엽니다.
  2. 스킬 저장소를 클론합니다: git clone https://github.com/Appllama/appllama-skills.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬을 복사합니다: cp -r appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/
  5. references/ 폴더의 문서들이 함께 복사되었는지 확인합니다(모션·내비게이션 세부 규칙이 여기 있습니다).
  6. Claude Code를 재시작하고 /skills로 목록에 나타나는지 확인합니다.
  7. Expo 프로젝트 폴더에서 "이 화면을 네이티브하게 만들어줘" 같은 요청을 하면 자동 발동합니다.
  8. (선택) 레퍼런스 화면 조사 기능을 쓰려면 Appllama MCP를 별도로 연결하고, iOS 시뮬레이터(Xcode)를 설치해 두세요.