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

Trình chuyển đổi bản thiết kế (Vibes)

Chuyển file design.html tĩnh thành ứng dụng Vibes React + TinyBase mà không làm sai lệch thiết kế gốc.

Lập trìnhTrung cấp★ 133⑂ 5Điểm AI 8/10Cập nhật lần cuối: 27 thg 7, 2026

Làm được gì

  • Biến một design.html hoàn chỉnh (kèm <style>) thành component React/JSX theo cách cơ học, không diễn giải lại.
  • Cung cấp bảng quy đổi cú pháp: class→className, for→htmlFor, kebab-case→camelCase, style chuỗi→object, comment HTML→JSX.
  • Yêu cầu sao chép nguyên khối CSS, chỉ thay phần nội dung động bằng hook TinyBase (useRowIds, useCell, useAddRowCallback).
  • Hướng dẫn giới hạn phạm vi CSS để không đè lên VibesSwitch/VibesPanel của template, và cách ép sáng nếu thiết kế chỉ có light mode.
  • Kết thúc bằng lệnh lắp ráp bun scripts/assemble.js app.jsx index.html và checklist đối chiếu trực quan.

Phù hợp với ai

  • Lập trình viên dùng hệ VibesOS (template Vibes + TinyBase).
  • Người thường xuyên nhận mockup HTML từ designer và muốn giữ đúng 100% giao diện.
  • Ai cần dựng prototype/demo yêu cầu chính xác từng pixel.

Ví dụ sử dụng

  1. Đưa design.html và nói "làm đúng y hệt thiết kế này" → CSS giữ nguyên, chỉ danh sách nối vào dữ liệu.
  2. Chuyển <ul> tĩnh thành danh sách phản ứng với useRowIds('items').map(...).
  3. Chuyển form tĩnh thành controlled form có value/onChange và lưu dữ liệu bằng useAddRowCallback.

· · · 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/popmechanic/VibesOS/HEAD/skills/design/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 skills/design từ repo GitHub popmechanic/VibesOS vào ~/.claude/skills/popmechanic-design/ 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/popmechanic/VibesOS.git /tmp/VibesOS && mkdir -p ~/.claude/skills && cp -r /tmp/VibesOS/skills/design ~/.claude/skills/design

⚠ Đâ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. Tải mã nguồn: git clone https://github.com/popmechanic/VibesOS.git /tmp/VibesOS
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r /tmp/VibesOS/skills/design ~/.claude/skills/design
  5. Skill cần template VibesOS, file scripts/assemble.js và runtime bun (cài tại https://bun.sh). Nên làm việc ngay trong repo VibesOS hoặc cài dạng plugin.
  6. Khởi động lại Claude Code, đưa file design.html và yêu cầu "chuyển thiết kế này thành app Vibes" để kích hoạt skill.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT