Show HN: Pluck – Copy any UI from any website, paste it into AI coding tools

https://www.pluck.so/

20 16 4 months ago

Hey HN! I built Pluck — a free Chrome extension that lets you click any component on any website and copy it as a structured prompt for AI coding tools (Claude, Cursor, v0, Bolt, etc.). You can also export directly into Figma!

It (should) work on any page, including ones behind auth, since it runs entirely in your browser.

Tech stack for the curious: Plasmo for the extension, Next.js + Hono + tRPC for the web/API, Drizzle + Postgres for the DB, all in a Turborepo monorepo.

Free tier gives you 50 captures/month (should be plenty). Unlimited is $10/mo.

Would love feedback — especially on the capture quality and whether the prompts it generates actually produce good results in your tool of choice.

apothegm• 4 months ago

This sounds like a copyright violation machine.

I say that both as someone who writes vooyrighted code and someone responsible for ensuring my company’s code doesn’t violate anyone else’s copyright.

bring-shrubbery7• 4 months ago

Valid concern, but I guess screenshot feature on every computer could also be considered as copyright violation.

You're right though - don't use this tool to violate copyright please :)

mavamaarten• 4 months ago

I was thinking the same. Plagiarism as a service, lol

bring-shrubbery7• 4 months ago

If you love plagiarising, I will not be able to stop you :(

aj-newcode• 4 months ago

Nice idea.

Is 'plucking' something and pasting the prompt into Claude the same as taking a screenshot and uploading it to Claude?

I tend to upload screenshots a lot. If 'plucking' essentially does the same thing, without cluttering my desktop with screenshots, I'd be interested in trying it out.

bring-shrubbery7• 4 months ago

It's not, it actually currently doesn't even take screenshots. It actually looks at the html and includes actual structure and values from the webpage.

Thanks for asking, maybe I should make it clearer on the website I would also add a screenshot functionality later, if people feel like current approach is not enough.

4m1rk• 4 months ago

Depending on your OS/screenshot tool, you can bind a key to select an area and copy it to the clipboard, then paste directly into Claude (Ctrl/Command+V). No cluttering.

thepasch3• 4 months ago

What does this do other than copy the selected HTML into a new API prompt that says “describe this”?

salomonk_mur• 4 months ago

Well, that does sound quite useful.

bring-shrubbery7• 4 months ago

When you just copy the html, you get a ton of useless repeating data. This tool removed a lot of duplicated things, structures the styling in a better way where we don't spam the styling rules. The goal is to provide just the useful info, without the noise.

Having said that, it does do essentially what you described, but when prototyping fast, and not designing from scratch it's extremely useful.

thepasch3• 4 months ago

Right, but that sounds like something any frontier LLM could one-shot. It’s a basic browser extension that wraps elements in the DOM and sends them to an LLM API embedded in a prompt. This would be neat as an open-source repo, but charging $10/month for this is certainly a choice.

terrycody• 4 months ago

I'd wish there will be a wordpdress plugin can do simialr thing: one click to export any website's design to own theme.

Show HN: Pluck – Copy any UI from any website, paste it into AI coding tools

Related Stories