Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Bộ điều phối Frontend & Thiết kế

Skill tổng quản cho mọi việc UI/UX: tự chọn bộ quy tắc gu thẩm mỹ, hệ thống thiết kế thương hiệu và kiểm toán hiệu năng để tránh giao diện 'nhàn nhạt kiểu AI'.

Thiết kế · UINâng cao★ 67,531⑂ 5,507Điểm AI 9/10Cập nhật lần cuối: 9 thg 8, 2026

Skill này làm gì

  • Phân tích yêu cầu frontend và chỉ nạp số file tối thiểu từ 4 bộ quy tắc: design, perfection, ui-ux-db, designpowers.
  • Bắt buộc tạo DESIGN.md (token màu, typography, spacing, motion, ràng buộc accessibility, nợ thiết kế) trước khi viết component.
  • Kết hợp 12 "taste skill" (minimal, brutalist, premium, redesign…) với 70 hệ thống thiết kế thương hiệu như Linear, Stripe, Notion, Vercel.
  • Kiểm toán hiệu năng bằng Playwright Chromium + Lighthouse (mục tiêu 100 điểm mọi hạng mục) và kiểm tra re-render của React.
  • Cung cấp CLI tra cứu palette màu, cặp font, loại biểu đồ, cấu trúc landing page từ cơ sở dữ liệu CSV.

Phù hợp với ai

  • Người thấy UI do AI tạo luôn bị đơn điệu, thiếu "chất" thiết kế.
  • Lập trình viên frontend, indie hacker thường làm landing page, dashboard SaaS.
  • Đội nhóm muốn kiểm soát đồng thời chất lượng thị giác và Core Web Vitals.

Ví dụ sử dụng

  • "Làm landing page kiểu Linear" → nạp design/linear.app.md + taste skill + quy tắc hiệu năng, viết DESIGN.md rồi mới code.
  • "Code y hệt ảnh screenshot này" → dùng luồng image-to-code, trích token/layout/trạng thái vào DESIGN.md và QA so sánh từng pixel.
  • "Audit tốc độ trang này" → build production, chạy Lighthouse qua Playwright 3–5 lần cho mobile và desktop, lấy trung vị để chẩn đoán.
  • "Thêm micro-interaction cho sinh động" → tham chiếu catalog beui.dev rồi áp motion token của dự án.

· · · 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/code-yeongyu/oh-my-openagent/HEAD/packages/skills-loader-core/src/features/builtin-skills/frontend/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 Claude Skill Mart.
Copy thư mục packages/skills-loader-core/src/features/builtin-skills/frontend từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/code-yeongyu-frontend-2/ 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/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills/frontend && cp -r oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/

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

  1. Mở terminal.
  2. Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills/frontend
  4. Copy toàn bộ nội dung skill: cp -r oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/
  5. Kiểm tra có cả SKILL.md và thư mục references/ (thiếu references thì phần điều phối sẽ không chạy).
  6. Nếu muốn dùng kiểm toán hiệu năng, cài trước Node.js + Playwright (Chromium) và Python (uv).
  7. Khởi động lại Claude Code, sau đó chỉ cần nói "thiết kế UI", "làm landing page" là skill tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION