Tastemaker

Skill thiết kế UI trích màu/typography từ ảnh tham chiếu thật, khóa style cho từng dự án và luân phiên cấu trúc trang để tránh giao diện 'kiểu AI' nhàn nhạt.

Thiết kế · UITrung cấp★ 444⑂ 44Điểm AI 9/10Cập nhật lần cuối: 29 thg 9, 2026

Làm được gì

Bám vào pixel thật: khi bạn dán ảnh, screenshot hay URL, skill chạy extract_palette.py để lấy màu chủ đạo, tỉ lệ tương phản, độ sáng thật rồi dựng token từ số liệu đó thay vì mô tả bằng lời.
Không có tham chiếu: phân loại "mood" từ ý tưởng sản phẩm rồi generate_palette.py --mood <mood> tạo palette mới, đảm bảo dễ đọc, kèm bộ font phù hợp.
Ghi nhớ thay vì suy lại: ghi palette, typography và ma trận tương phản vào .tastemaker/style-lock.md; hồ sơ thẩm mỹ cá nhân lưu ở ~/.tastemaker/profile.md.
Chống lặp cấu trúc: đọc log.json và structure-history.json để chọn macrostructure và archetype khác lần trước, tránh mô-típ hero → 3 card → testimonial → CTA.
Tài sản hình ảnh trong một lượt: ảnh từ Openverse (không cần API key), icon/logo thương hiệu qua Iconify, minh họa qua ideagram đi kèm, xuất favicon — chỉ dùng nguồn không yêu cầu ghi công hiển thị.
4 chế độ: build (mặc định), study (bóc DNA thiết kế tham chiếu), audit (chấm điểm, không sửa code), comps (viết brief cho công cụ tạo ảnh).

Phù hợp với ai

Dev dùng Claude Code làm landing page/dashboard nhưng kết quả lúc nào cũng giống nhau
Founder solo, người làm side project không có designer
Frontend dev theo stack React + Tailwind + shadcn muốn lấy component từ registry rồi restyle đồng nhất
Nhóm đã có PRD/spec, muốn chỉ thiết kế đúng các màn hình trong phạm vi

Ví dụ sử dụng

"Làm landing page theo vibe của ảnh Dribbble này" → trích palette bằng script → kiểm tra tương phản → ghi style lock → dựng trang kèm ảnh, icon, minh họa.
"Tại sao trang này nhìn như AI làm?" → chế độ audit cho điểm theo checklist chống 'AI slop' và danh sách lỗi xếp theo mức nghiêm trọng, không sửa file.
"Dựng landing cho sản phẩm thứ hai" → đọc lịch sử cấu trúc các dự án cũ và chọn shape/nav/footer khác để không bị lặp template.

· · · 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/codeswithroh/tastemaker/HEAD/skills/tastemaker/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/tastemaker từ repo GitHub codeswithroh/tastemaker vào ~/.claude/skills/tastemaker/ 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/codeswithroh/tastemaker.git /tmp/tastemaker && mkdir -p ~/.claude/skills && cp -r /tmp/tastemaker/skills/tastemaker ~/.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.
Tạo thư mục skill: mkdir -p ~/.claude/skills
Clone repo: git clone https://github.com/codeswithroh/tastemaker.git /tmp/tastemaker
Copy skill: cp -r /tmp/tastemaker/skills/tastemaker ~/.claude/skills/
Kiểm tra: ls ~/.claude/skills/tastemaker phải thấy SKILL.md, references/, scripts/, ideagram/.
Cần Python 3 cho các script: kiểm tra python3 --version, cài thêm thư viện nếu script yêu cầu (ví dụ pip install pillow).
(Tùy chọn) Tải 20–30 SVG miễn phí từ undraw.co vào ~/.ideagram/undraw/ để phần minh họa đạt chất lượng tốt nhất — chỉ làm một lần.
Khởi động lại Claude Code rồi thử: "làm landing page theo vibe ảnh này" — skill sẽ tự kích hoạt.

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