← ClaudeAtlas

nqh-app-designerlisted

Dùng khi Hiếu chỉ nói MỘT Ý TƯỞNG APP và muốn ra màn hình UI đẹp, bấm/sửa được — skill tự nghiên cứu đối thủ, chốt hướng thẩm mỹ, rồi dựng màn hình trên canvas. Kích hoạt khi nói 'thiết kế app', 'làm UI cho', 'dựng màn hình', 'mockup app', 'design lại app này'.
wanghie/nqh-skills · ★ 0 · Web & Frontend · score 72
Install: claude install-skill wanghie/nqh-skills
# NQH App Designer Biến một câu ý tưởng thành bộ màn hình app đẹp, bấm được, sửa được trên canvas. Hiếu nói ý — skill lo research, lo thẩm mỹ, lo dựng. ## Luật số 1: ĐÂY LÀ MÀN HÌNH APP, KHÔNG PHẢI SLIDE Sai lầm hay gặp nhất: dựng ra deck đầy chữ rồi gọi đó là design. - Mỗi artboard = MỘT MÀN HÌNH ĐIỆN THOẠI 390×844 (hoặc 1440×900 nếu là web). - Chữ trên màn hình chỉ là chữ THẬT trong app: nhãn nút, tên mục, con số. Không phân tích, không giải thích, không bullet. - Mọi ghi chú/lý do thiết kế đi vào **sticky note** (`annotations` trong canvas.json), KHÔNG nằm trong artboard. - Nếu một artboard có trên ~40 từ, gần như chắc chắn đang làm sai. ## Quy trình 5 bước ### 1. Chốt brief bằng đúng 3 câu hỏi (AskUserQuestion) Không hỏi lan man. Chỉ 3 thứ quyết định mọi thứ còn lại: - **Ai dùng & để làm gì** (một câu) - **Nền tảng**: app điện thoại / web / cả hai - **Cảm giác**: chọn 1 — tối & game-y (Solo Leveling, neon) · sáng & sạch (Apple, Notion) · ấm & thân thiện (Finch, Duolingo) · nghiêm & dữ liệu (Linear, Bloomberg) Nếu Hiếu không có mặt để trả lời: tự chốt, ghi rõ giả định một dòng ở cuối, làm tiếp — không dừng chờ. ### 2. Nghiên cứu trước khi vẽ (BẮT BUỘC, không bỏ qua) - WebSearch 3-5 app cùng ngách. Với mỗi app lấy: các tab chính, màn hình lõi, cơ chế giữ chân, điểm bị chê nhiều nhất trong review thật. - Ưu tiên nguồn: App Store / Google Play / tài liệu chính chủ / help center. Ghi rõ **fact có nguồn** vs **suy đoán**. - Nếu container bị chặn ra store: dùng Chrome tr