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

Appllama 앱 디자인 스킬

Expo/React Native 모바일 화면을 애플 HIG 수준의 네이티브 감성으로 설계·구현하고 시뮬레이터 녹화로 검증하게 하는 스킬입니다.

디자인·UI고급★ 2,471⑂ 121AI 점수 9/10마지막 업데이트: 2026. 9. 6.

무엇을 해주나

  • Expo + Expo Router + TypeScript 기준의 모바일 화면 설계·구현 규칙을 클로드에게 주입합니다. 시맨틱 컬러(라이트/다크), SF Symbols, 연속 코너(borderCurve), 타이포 램프, 세이프에어리어, 햅틱 사용 규칙 등 '네이티브다움'을 만드는 디테일을 강제합니다.
  • 내비게이션 의미론을 정리해 줍니다: push vs replace, modal / formSheet / fullScreenModal / transparentModal 선택 기준, 로그인·온보딩·결제 같은 '되돌아갈 수 없는 문' 처리, 백 버튼·엣지 스와이프·안드로이드 하드웨어 백 동작.
  • 안티 슬롭(AI 티 제거) 규칙: 보라색 그라데이션 CTA, 전면 글래스모피즘, 이모지 아이콘, 여러 액센트 색 혼용 금지 등을 기계적 카운트로 사전 점검합니다.
  • 모션 규칙: 빈도 게이트(자주 쓰는 동작엔 기본 애니메이션만), 300ms 이하 이징, 제스처는 스프링 + 속도 인계, Reanimated 워크렛 사용, Reduce Motion 대응.
  • 상태 아키텍처(TanStack Query / Zustand), 체감 성능(FlashList, 스켈레톤, 이미지 최적화), 이미지 애셋 생성 파이프라인까지 커버하고, references/의 5개 문서로 심화 내용을 분리해 둡니다.
  • 시뮬레이터 루프: xcrun simctl io booted recordVideo로 플로우 전체를 녹화해 두 번(속도감 / 프레임 단위) 검토하며 60fps·프레임 튐·잘못된 테마 프레임을 잡아냅니다.

이런 분께 추천

  • Expo/React Native로 앱을 만드는 개발자 및 1인 개발자.
  • AI가 만든 화면이 '템플릿 티'가 나서 고민인 분.
  • 디자이너 없이 앱스토어 상위 앱 수준의 UI 완성도를 노리는 팀.

활용 예시

  1. "온보딩 3단계 화면을 만들어줘" → 레퍼런스 패턴을 먼저 조사하고, 완료 시 replace + Stack.Protected로 백 진입을 차단하는 구조로 구현.
  2. "이 페이월 UI 좀 다듬어줘" → 액센트 1색·코너 스케일 통일·이모지 제거 등 안티 슬롭 사전 점검 후, 라이트/다크·Dynamic Type XL까지 검증.
  3. "바텀시트가 어색해" → 제스처 릴리즈 속도를 스프링에 넘기고 detent·드래그 중 취소까지 녹화로 확인.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 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 && mkdir -p ~/.claude/skills && cp -r 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/ 폴더의 md 파일들이 함께 복사됐는지 확인합니다.
  6. Claude Code를 재시작하고 "이 화면을 네이티브 느낌으로 다듬어줘"처럼 요청하면 스킬이 발동합니다.
  7. (선택) 레퍼런스 조사 기능을 쓰려면 Appllama MCP를 연결하고, 모션 검증을 위해 Xcode iOS 시뮬레이터를 준비하세요.