Pluck: Tiện ích mở rộng Chrome giúp sao chép thành phần UI và dán vào công cụ lập trình AI

Bạn có thể sẽ thấy quen thuộc với quy trình này. Bạn lướt web và nhìn thấy một thành phần giao diện đẹp mắt — một thẻ giá (pricing card), thanh điều hướng (navbar), hay phần giới thiệu (hero section) — và bạn muốn có thứ gì đó tương tự trong dự án của mình.

Vì vậy, bạn mở công cụ lập trình AI và bắt đầu gõ:

"Tạo cho tôi một thẻ có bo góc, đổ bóng nhẹ, tiêu đề to 18px đậm, padding khoảng 24px, nút bấm màu xanh — không, phải là màu chàm (indigo) — với chữ trắng..."

Sau ba lần hỏi (prompt), nó vẫn trông chưa đúng ý. Bạn dành nhiều thời gian để mô tả thiết kế hơn là thời gian cần thiết để viết code.

Tôi cảm thấy quy trình này thật sự kém hiệu quả. Thành phần đó đang ở ngay trước mắt bạn. Mọi giá trị màu sắc, mọi pixel khoảng cách, mọi độ đậm của phông chữ — trình duyệt của bạn đã biết tất cả những điều đó. Tại sao chúng ta phải chuyển đổi hình ảnh thành lời nói để AI rồi lại dịch ngược thành code?

Vì vậy, tôi đã xây dựng Pluck.

Pluck Usage Demo

Pluck hoạt động như thế nào?

Pluck là một tiện ích mở rộng Chrome miễn phí. Bạn chỉ cần bấm vào bất kỳ thành phần nào trên bất kỳ trang web, và nó sẽ nắm bắt toàn bộ bức tranh — cấu trúc DOM, kiểu dáng đã tính toán (computed styles) cho mọi phần tử, mối quan hệ bố cục, hình ảnh, biểu tượng, SVG — và đóng gói tất cả vào một prompt có cấu trúc.

Bạn dán prompt đó vào Claude, Cursor, Lovable, Bolt, v0 hoặc bất kỳ công cụ nào bạn đang dùng. AI sẽ tái tạo lại thành phần đó ngay từ lần thử đầu tiên vì nó có đầy đủ ngữ cảnh cần thiết.

Không cần mô tả. Không cần qua lại nhiều lần. Chỉ một cú nhấp chuột, một lần dán.

Cơ chế hoạt động bên trong

Khi bạn bấm vào một phần tử, Pluck sẽ thực hiện các bước sau:

• Duyệt cây DOM từ phần tử bạn chọn xuống tất cả các phần tử con.
• Đọc các kiểu dáng đã tính toán cho mọi nút — không phải là quy tắc stylesheet, mà là các giá trị kết quả thực tế (do đó, các kiểu kế thừa, giải quyết cascade và các ghi đè đều được tính đến).
• Trích xuất dữ liệu bố cục — các mối quan hệ flexbox/grid, định vị, kích thước.
• Bắt giữ tài nguyên — hình ảnh dưới dạng data URIs, SVG nội tuyến, tham chiếu biểu tượng.
• Đóng gói mọi thứ vào định dạng prompt có cấu trúc được tối ưu hóa cho cách LLM phân tích ngữ cảnh.

Đầu ra được tùy chỉnh theo stack của bạn. Bạn chọn framework CSS (Tailwind, CSS Modules, Styled Components, Vanilla Extract) và framework UI (React, Vue, Svelte, Solid, Qwik), và Pluck sẽ tạo prompt tương ứng.

Vì nó chạy hoàn toàn trên trình duyệt của bạn, nó hoạt động trên mọi trang web — bao gồm cả bảng điều khiển, trang quản trị và các trang sau khi đăng nhập. Không có dữ liệu nào rời khỏi máy của bạn cho đến khi bạn dán nó đi.

Ví dụ thực tế

Giả sử bạn muốn tái tạo lại một thẻ giá từ trang web của Stripe.

Không có Pluck: Bạn sẽ dành 5-10 phút trong công cụ dành cho nhà phát triển (DevTools) để ước lượng giá trị, sau đó viết một prompt dài, và phải lặp lại 2-3 lần khi AI nhận sai khoảng cách hoặc màu sắc.

Có Pluck: Bấm vào thẻ. Cmd+V vào Claude. Xong. AI sẽ nhận được chính xác border-radius, padding, giá trị màu sắc, và phông chữ — vì bạn đã cung cấp tất cả thông tin đó trong một lần.

Sao chép vào Figma

Ngoài việc tạo prompt cho LLM, Pluck cũng có thể sao chép các thành phần dưới dạng các lớp SVG có thể chỉnh sửa trực tiếp vào Figma. Các lớp, kiểu dáng và cấu trúc được bảo toàn, giúp bạn có một thiết kế thực sự có thể chỉnh sửa — không phải là một ảnh chụp màn hình phẳng.

Tính năng này rất hữu ích nếu bạn đang xây dựng một hệ thống thiết kế (design system) và muốn kéo các thành phần tham chiếu từ các trang web hiện có làm điểm khởi đầu.

Công nghệ sử dụng

Đối với những ai thích tìm hiểu về kỹ thuật:

• Tiện ích: Được xây dựng với Plasmo (framework tiện ích Chrome dựa trên React) + React 19.
• Web app: Next.js + TypeScript + Tailwind + shadcn/ui.
• API: Hono + tRPC cho các API an toàn kiểu dữ liệu (type-safe) từ đầu đến cuối.
• Database: PostgreSQL + Drizzle ORM.
• Monorepo: Turborepo quản lý tiện ích, web app và máy chủ API.
• Runtime: Bun.

Plasmo là một lựa chọn tuyệt vời cho tiện ích — nó trừu tượng hóa các mã boilerplate của manifest v3 và cho phép bạn viết các thành phần React hiển thị trong content scripts, popups và sidepanels.

tRPC cũng xứng đáng được nhắc đến. Việc có độ an toàn kiểu dữ liệu (type safety) đầy đủ từ lược đồ cơ sở dữ liệu thông qua API đến frontend, với không cần tạo mã, là một chiến thắng lớn về trải nghiệm nhà phát triển (DX) khi bạn đang lặp lại nhanh chóng.

Bảng giá

• Miễn phí: 50 lần chụp/tháng ở chế độ prompt LLM, +3 lần/tháng ở chế độ Figma.
• Không giới hạn: 10 USD/tháng, chụp không giới hạn.

Gói miễn phí thực sự rất hữu dụng — 50 lần chụp mỗi tháng đã đáp ứng đủ nhu cầu của hầu hết mọi người.

Hãy thử trải nghiệm

Pluck có sẵn trên Chrome Web Store. Hãy cài đặt nó, bấm vào một thứ gì đó trên trang web bạn thích, dán vào công cụ AI bạn chọn, và xem kết quả.

Tôi rất muốn nghe ý kiến từ bạn:

• Mức độ chính xác của việc tái tạo trong công cụ bạn chọn thế nào?
• Có thành phần hoặc trang web nào nó gặp khó khăn không?
• Điều gì sẽ làm cho nó hữu ích hơn cho quy trình làm việc của bạn?

Hãy để lại bình luận hoặc tìm tôi trên X. Tôi rất sẵn lòng giải đáp các câu hỏi về công nghệ hoặc sản phẩm.