Skill thiết kế ứng dụng Appllama

Bộ quy tắc giúp Claude thiết kế và code màn hình Expo/React Native đạt chuẩn native theo Apple HIG, kèm vòng kiểm thử bằng quay video simulator.

Thiết kế · UINâng cao★ 2,444⑂ 119Điểm AI 9/10Cập nhật lần cuối: 6 thg 9, 2026

Làm được gì

Áp đặt các nguyên tắc fidelity native cho stack Expo + Expo Router + TypeScript: màu semantic cho cả light/dark, SF Symbols, borderCurve: 'continuous', thang typography, safe area, haptics đúng chỗ, định dạng số kiểu sản phẩm.
Hệ thống hóa ngữ nghĩa điều hướng: khi nào push và khi nào replace, chọn modal / formSheet / fullScreenModal / transparentModal, xử lý "cửa một chiều" (đăng nhập, onboarding, thanh toán) bằng Stack.Protected, và hành vi back trên iOS lẫn Android.
Luật chống "slop AI": cấm gradient tím phát sáng, glassmorphism tràn lan, emoji làm icon, nhiều màu nhấn — kèm bước đếm cơ học trước khi build.
Luật chuyển động: cổng tần suất (thao tác hàng ngày dùng animation hệ thống), dưới 300 ms với ease-out mạnh, gesture dùng spring nhận velocity, worklet Reanimated, tôn trọng Reduce Motion.
Kèm hướng dẫn state (TanStack Query, Zustand), hiệu năng cảm nhận (FlashList, skeleton, expo-image) và pipeline tạo asset hình ảnh; chi tiết nằm trong 5 file references/.
Vòng lặp simulator bắt buộc: quay xcrun simctl io booted recordVideo, xem hai lần (cảm giác và từng frame) để bắt drop frame, frame sai theme, layout nhảy.

Phù hợp với ai

Lập trình viên Expo/React Native, indie dev làm app một mình.
Ai thấy UI do AI tạo ra bị "trông như template".
Nhóm không có designer nhưng muốn chất lượng UI ngang app top store.

Ví dụ sử dụng

"Làm màn hình onboarding 3 bước" → nghiên cứu pattern tham chiếu trước, kết thúc bằng replace + Stack.Protected để back không quay lại được.
"Chỉnh lại paywall này" → chạy pre-flight chống slop (1 màu nhấn, thang bo góc thống nhất, 0 emoji) rồi kiểm tra light/dark và Dynamic Type XL.
"Bottom sheet kéo bị cứng" → chuyển sang spring nhận velocity khi nhả tay, kiểm tra detent và huỷ giữa lúc kéo qua bản ghi video.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/Appllama/appllama-skills/HEAD/skills/appllama-app-design-skill/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.

↓ Tải ZIP

Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/appllama-app-design-skill từ repo GitHub Appllama/appllama-skills vào ~/.claude/skills/appllama-app-design-skill/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

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

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

Mở Terminal.
Clone repo: git clone https://github.com/Appllama/appllama-skills.git
Tạo thư mục skill: mkdir -p ~/.claude/skills
Copy skill: cp -r appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/
Kiểm tra thư mục references/ đã được copy kèm.
Khởi động lại Claude Code, rồi thử yêu cầu: "làm màn hình này trông native hơn".
(Tuỳ chọn) Kết nối Appllama MCP để tra cứu màn hình tham chiếu và cài Xcode iOS Simulator để kiểm thử chuyển động.

Xem mã nguồn trên GitHub ↗Giấy phép: MIT