figma-implement-design

🎯

figma-implement-design

Thiết kế & sáng tạo · Figma

• design
• figma
• frontend

Xem mã nguồn trên GitHub →

Mô tả

Skill chính thức từ Figma giúp Claude đọc dữ liệu thiết kế (qua Figma API/Dev Mode) và sinh ra code frontend khớp chính xác với thiết kế gốc - đúng khoảng cách, màu sắc, typography, và ánh xạ đúng component thay vì “đoán” lại bằng mắt từ ảnh chụp màn hình.

Khi nào nên dùng

• Có sẵn một file Figma đã thiết kế xong và cần code lại thành component React/HTML thực tế, khớp pixel với bản thiết kế.
• Cần đảm bảo spacing/màu sắc lấy đúng từ design token trong Figma thay vì áng chừng.

Khi nào không nên dùng

• Chưa có thiết kế Figma cụ thể, chỉ có ý tưởng mô tả bằng lời - nên dùng skill sinh thiết kế (design generation) trước.
• Không có quyền truy cập Figma API/file - skill cần dữ liệu thực từ Figma để hoạt động chính xác.

Ví dụ

“Lấy thiết kế màn hình checkout trong file Figma này và code thành component React, dùng đúng theo Tailwind config đã cấu hình.”

“So sánh component Button hiện tại trong code với thiết kế trong Figma, chỗ nào lệch spacing thì sửa lại.”

Mô tả tổng hợp từ danh mục cộng đồng, chưa kiểm chứng trực tiếp - kiểm tra quyền truy cập Figma API mà skill yêu cầu trước khi cấp cho một agent tự động.

Nguồn

Tổng hợp từ danh mục VoltAgent/awesome-agent-skills, skill gốc do Figma công bố tại officialskills.sh/figma/skills/figma-implement-design.

← Xem tất cả Skills