AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Trình dựng website đẳng cấp Awwwards

Chỉ từ một câu yêu cầu, skill này dẫn dắt toàn bộ quy trình ý tưởng, art direction, chuyển động, WebGL và QA để tạo ra website đạt chuẩn giải thưởng Awwwards.

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

Làm được gì

  • Nhận một dòng prompt kiểu "làm cho tôi một portfolio, tên tôi là Ana" và tự quyết định mọi thứ thay vì hỏi dồn dập.
  • Lấy thang điểm Awwwards (Design 40%, Usability 30%, Creativity 20%, Content 10%) làm chuẩn, nhắm tối thiểu 8/10 cho mọi hạng mục.
  • Sinh 3 concept từ các "lãnh địa" khác nhau, chấm điểm, chọn 1 và ghi Concept Card cùng hệ thống màu, chữ, lưới, ngôn ngữ chuyển động vào DESIGN.md.
  • Mặc định dùng Next.js (App Router + TypeScript); Astro cho microsite nặng animation; hoặc theo đúng stack dự án sẵn có. Engine chung gồm GSAP, Lenis, OGL.
  • Vòng lặp QA tối thiểu 2 lượt trên bản build production: chụp ảnh màn hình, đo Core Web Vitals, kiểm tra axe, tab keyboard, phản hồi hover, rồi nhờ một critic độc lập chấm lại điểm.

Dành cho ai

  • Designer và developer muốn dựng portfolio, website studio/agency hoặc trang ra mắt thương hiệu.
  • Freelancer, chủ dự án cá nhân cần landing page thật sự ấn tượng, không giống template.
  • Lập trình viên frontend muốn có sẵn công thức GSAP/WebGL kèm checklist accessibility và hiệu năng.

Ví dụ sử dụng

  1. "Làm portfolio cho nhiếp ảnh gia" → viết Concept Card, chọn ảnh Unsplash cùng tông làm placeholder có ghi chú, dựng trang case study và trang 404 trên Next.js.
  2. "Microsite ra mắt sản phẩm cuộn là có chuyển động" → build tĩnh bằng Astro kèm shader OGL cho khoảnh khắc chữ ký, đồng thời thiết kế bản reduced-motion.
  3. "Nâng cấp landing page trong dự án Next.js hiện có" → giữ router và style cũ, chỉ port phần engine chuyển động, rồi QA đến khi LCP mobile dưới 2.5s và CLS dưới 0.05.

· · · 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/juliobsz/skills/HEAD/awwwards/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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. 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 AI Skill Mart.
Copy thư mục awwwards từ repo GitHub juliobsz/skills vào ~/.claude/skills/awwwards/ 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/juliobsz/skills.git /tmp/juliobsz-skills && mkdir -p ~/.claude/skills && cp -r /tmp/juliobsz-skills/awwwards ~/.claude/skills/awwwards

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

  1. Kiểm tra Node.js phiên bản 20 trở lên bằng lệnh node -v.
  2. Tải repo skill: git clone https://github.com/juliobsz/skills.git /tmp/juliobsz-skills
  3. Sao chép thư mục skill: mkdir -p ~/.claude/skills && cp -r /tmp/juliobsz-skills/awwwards ~/.claude/skills/awwwards
  4. Xác nhận hai thư mục references và scripts đã nằm trong ~/.claude/skills/awwwards.
  5. Chạy một lần npx playwright install chromium để phục vụ bước chụp ảnh QA.
  6. Khởi động lại Claude Code và thử yêu cầu "làm cho tôi một portfolio, tên là ...". Nếu chỉ muốn chấm điểm một site có sẵn, dùng /jury.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT