Pluck: A Chrome Extension to Copy and Paste UI Components into AI Tools
Pluck is a Chrome extension that allows users to capture the full details of any UI component on a website and paste it directly into AI coding tools, eliminating the need to manually describe the component.
Why it matters
Pluck streamlines the workflow of recreating UI components in AI coding tools, saving time and improving accuracy.
Key Points
- 1Pluck captures the DOM structure, computed styles, layout data, and assets of any UI component with a single click
- 2The structured prompt can be pasted into AI tools like Claude, Cursor, Lovable, etc. to recreate the component accurately
- 3Pluck also supports copying components as editable SVG layers directly into Figma
- 4The extension is built using Plasmo, React, Next.js, tRPC, and runs on the Bun runtime
Details
Pluck is a Chrome extension that solves the problem of having to manually describe UI components to AI coding tools. Instead of spending time translating visual details into words, users can simply click on a component they want to recreate and Pluck will capture the full DOM structure, computed styles, layout data, and assets. This structured prompt can then be pasted directly into AI tools like Claude, Cursor, Lovable, etc. to generate the component accurately on the first try. Beyond LLM prompts, Pluck can also copy components as editable SVG layers into Figma, which is useful for building design systems. The extension is built using a modern tech stack including Plasmo, React, Next.js, tRPC, and the Bun runtime.
No comments yet
Be the first to comment