Bộ định tuyến thiết kế Frontend (frontend)

Skill định tuyến mọi yêu cầu UI/UX sang bốn bộ quy tắc — gu thẩm mỹ, hệ thống thương hiệu, hiệu năng và vận hành thiết kế — để cho ra giao diện ở đẳng cấp designer senior.

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

Nó làm được gì

Hoạt động như router: chỉ nạp đúng những tệp tham chiếu cần thiết cho yêu cầu, thay vì đọc tất cả. Có 12 skill về gu thẩm mỹ (minimal, brutalist, premium/soft, redesign...) và 70 hệ thống thiết kế thương hiệu (Linear, Stripe, Vercel, Notion, Apple...).
Cổng DESIGN.md: buộc phải có tệp DESIGN.md (token màu, typography, spacing, primitive, motion, ràng buộc accessibility, nợ thiết kế được chấp nhận) trước khi viết bất kỳ component nào.
Cổng hiệu năng: audit Lighthouse bằng Playwright Chromium thật, mục tiêu 100 điểm mọi hạng mục, và cấm gian lận bằng cách bỏ animation hay ẩn nội dung.
Trung thực với reference: với ảnh chụp, mockup hoặc URL, skill trích xuất token và trạng thái qua getComputedStyle rồi kiểm tra lại bằng /visual-qa ở 375/768/1280px.
Có CLI tra cứu ui-ux-db cho palette, cặp font, loại biểu đồ, cấu trúc landing page theo từng stack.

Phù hợp với ai

Lập trình viên thường bị nhận xét "giao diện trông rất AI, thiếu điểm nhấn".
Nhóm startup hoặc dev solo phải tự làm landing page, dashboard mà không có designer.
Frontend engineer muốn đồng thời đạt Core Web Vitals, accessibility và chất lượng thị giác.

Ví dụ sử dụng

"Làm landing page kiểu Linear" → nạp design/README.md + linear.app.md + taste-skill.md + perfection/README.md, viết DESIGN.md, dựng primitive rồi mới dựng trang.
"Dashboard này xấu, cải thiện đi" → dùng redesign-skill.md với quy trình audit-trước, trích token từ UI hiện có rồi nâng cấp từng bước.
"Audit và tăng tốc trang web" → build production, chạy lighthouse-audit.py cho preset mobile và desktop 3–5 lần, lấy trung vị và sửa từ tầng kiến trúc.

· · · 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/omo-opencode/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)

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 packages/omo-opencode/src/features/builtin-skills/frontend từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/frontend/ 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/omo-opencode/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.

Mở terminal và chuyển tới thư mục làm việc bạn muốn.
Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Tạo thư mục skill: mkdir -p ~/.claude/skills/frontend
Copy toàn bộ skill (gồm references/ và scripts/): cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/
Cài công cụ phụ trợ: Node.js + Playwright (Chromium), Python 3 và uv để chạy script audit hiệu năng.
Khởi động lại Claude Code, thử yêu cầu "thiết kế lại trang landing của tôi" để xem skill có được kích hoạt.
Kiểm tra ls ~/.claude/skills/frontend/references — nếu thiếu các tệp tham chiếu này, router sẽ không hoạt động đúng.

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