DEV Community: Antoni Silvestrovič

I built a Chrome extension that lets you copy any UI component and paste it into AI coding tools

Antoni Silvestrovič — Sun, 05 Apr 2026 15:56:02 +0000

You know the workflow. You see a beautiful component on some website — a pricing card, a navbar, a hero section — and you want something like it in your project.

So you open your AI tool and start typing:

"Make a card with rounded corners, a subtle box shadow, the title in 18px semibold, padding maybe 24px, the button is blue — no, more like indigo — with white text..."

Three prompts later, it still doesn't look right. You're spending more time describing the design than it would take to just code it.

This felt broken to me. The component is right there on your screen. Every color value, every pixel of spacing, every font weight — your browser already knows all of it. Why are we translating visuals into words for an AI to translate back into code?

So I built Pluck.

What it does

Pluck is a free Chrome extension. You click any component on any website, and it captures the full picture — DOM structure, computed styles for every element, layout relationships, images, icons, SVGs — and packages it into a structured prompt.

You paste that prompt into Claude, Cursor, Lovable, Bolt, v0, or whatever you use. The AI recreates the component on the first try because it has all the context it needs.

No describing. No back-and-forth. One click, one paste.

How it works under the hood

When you click an element, Pluck:

Walks the DOM tree from your selected element down through all children
Reads computed styles for every node — not the stylesheet rules, but the actual rendered values (so inherited styles, cascade resolution, and overrides are all accounted for)
Extracts layout data — flexbox/grid relationships, positioning, dimensions
Captures assets — images as data URIs, inline SVGs, icon references
Packages everything into a structured prompt format that's optimized for how LLMs parse context

The output is tailored to your stack. You pick your CSS framework (Tailwind, CSS Modules, Styled Components, Vanilla Extract) and UI framework (React, Vue, Svelte, Solid, Qwik), and Pluck generates the prompt accordingly.

Since it runs entirely in your browser, it works on any page — including dashboards, admin panels, and pages behind authentication. Nothing leaves your machine until you paste it.

Example

Say you want to recreate a pricing card from Stripe's website.

Without Pluck: You'd spend 5-10 minutes in dev tools eyeballing values, then write a long prompt, then iterate 2-3 times when the AI gets the spacing or colors wrong.

With Pluck: Click the card. Cmd+V into Claude. Done. The AI gets the exact border-radius, the exact padding, the exact color values, the exact font stack — because you gave it all of that information in one shot.

Copy to Figma

Beyond LLM prompts, Pluck can also copy components as editable SVG layers directly into Figma. The layers, styles, and structure are preserved, so you get an actual editable design — not a flat screenshot.

This is useful if you're building a design system and want to pull reference components from existing sites as a starting point.

The tech stack

For the technically curious:

Extension: Built with Plasmo (React-based Chrome extension framework) + React 19
Web app: Next.js + TypeScript + Tailwind + shadcn/ui
API: Hono + tRPC for end-to-end type-safe APIs
Database: PostgreSQL + Drizzle ORM
Monorepo: Turborepo managing the extension, web app, and API server
Runtime: Bun

Plasmo was a great choice for the extension — it abstracts away the manifest v3 boilerplate and lets you write React components that render in content scripts, popups, and sidepanels.

tRPC deserves a shoutout too. Having full type safety from the database schema through the API to the frontend, with zero code generation, is a huge DX win when you're iterating fast as a solo dev.

Pricing

Free: 50 captures/month in LLM prompt mode, +3/month in Figma mode
Unlimited: $10/month, Unlimited captures

The free tier is genuinely usable — 50 captures per month covers most people's needs.

Try it out

Pluck is available on the Chrome Web Store. Install it, click something on a website you like, paste it into your AI tool of choice, and see what happens.

I'd love to hear:

How accurate are the recreations in your tool of choice?
What components or sites does it struggle with?
What would make this more useful for your workflow?

Drop a comment or find me on X. Happy to answer questions about the tech or the product.

routes.ts

Antoni Silvestrovič — Sun, 25 Jun 2023 00:00:00 +0000

Introduction

Tracking all the routes you have in your frontend application can be difficult.
The first time developers need to link between pages usually results in URLs
that are defined inline, just passed as an href to the link component. This
results in a lot of problems later on when someone needs to update the route
path, or when someone accidentally mistypes the link URL. With time developers
start to realise that there’s a better way to deal with accessing URLs in their
applications.

In this guide I’m aiming document my experience with defining web app routes.
There are a couple of fundamental principles that you should keep in mind when
defining routes:

JavaScript/TypeScript definition should describe what URL you will get.
Don’t be afraid to make it look complex if it simplifies life of it’s user.
Try to go as static as possible. Depending on lifetime hooks is usually a bad idea.

Basic example

Lets start with the most simple example you will need. If your application does
not have any dynamic routes, this might be all you will need.

const ROUTES = {
  index: "/",
  books: "/books"
  users: {
    index: "/users",
    me: "/users/me",
  },
  externalLink: "https://quassum.com/"
}

ROUTES.books       // -> /books
ROUTES.users.index // -> /users
ROUTES.users.me    // -> /users/me

Every route level get’s their own object here. The root level routes stay in the
root level object. As soon as there are nested routes we add another object. In
this case you can see that since /users have a nested route /users/me
everything that starts with /users goes into its’ own object. For the /users
route itself we add index key that corresponds with the way browsers deal with
the index.html file.

With dynamic parameters

The next step in the route definition journey are the dynamic routes. As soon as
you will have data coming from a database you will most likely need dynamic
routes. This is solved with a simple function. With TypeScript it’s also
type-safe!

const ROUTES = {
  users: {
    index: "/users",
    byId: (id: string) => `/users/${id}`,
  }
}

ROUTES.users.byId('1234') // -> /users/1234

Dynamic routes become easy to handle with this setup. Every time you want to
access a user by their ID you have to use byId function, which reminds you
that you need to pass an id which has to be of type string.

You can also use objects instead of regular parameters…

const ROUTES = {
  users: {
    index: "/users",
    byId: ({ id }: { id: string }) => `/users/${id}`,
  },
};

ROUTES.users.byId({ id: "1234" }); // -> /users/1234

With multiple dynamic parameters

Naturally, it becomes slightly more complex when you have multiple dynamic
segments. But nothings that we cannot manage.

const ROUTES = {
  users: {
    index: "/users",
    byId: (id: string) => {
      return {
        bySlug: (slug: string) => `/users/${id}/${slug}`,
      };
    },
  },
};

ROUTES.users.byId("1234").bySlug("something"); // -> /users/1234/something

Here, instead of returning the URL from byId straight away, we return an
object with another function you can call. In this case you just chain these
function calls and you get a nicely formatted URL.

Don’t forget that in these dynamic segments you are not forced to pass simple
types through parameters. You could have a function that takes a whole object
and just returns one string, joining multiple properties from that object into
url. For example, you could have URL defined form user data:

const ROUTES = {
  user: {
    publicUrl: {
      byUserData: (user: UserData) => `/u/${user.username}/${user.id}`,
    },
  },
};

The main thing to keep in mind here is the first principle that I’ve described
in the intro. Your structure should explain to it’s user how the URL will look
like. Try to avoid cases where you just have: userById but then return a url
that looks like this: /user/info/something/[id]/something-else

With optional dynamic parameters

Having optional parameters is also quite simple. You can achieve this by either
having optional parameters or optional property in an object. The only thing you
have to keep in mind is how you manage the cases when that parameter is not
passed in.

const joinIfPresent = (base: string, str?: string) =>
  str ? `${base}${str}` : base;

const ROUTES = {
  users: {
    index: "/users",
    byId: ({ id, slug }: { id: string; slug?: string }) =>
      `/users/${id}${joinIfPresent("/", slug)}`,
  },
};

With mid-route dynamic parameters

This one is quite simple, but important to show. If you have a the dynamic
segment somewhere in the middle of the route. This is how you handle it.

const ROUTES = {
  users: {
    index: "/users",
    byId: ({ id }: { id: string }) => {
      return {
        settings: `/users/${id}/settings`,
        account: `/users/${id}/account`,
      };
    },
  },
};

With global dynamic parameters

Sometimes you need to have global parameter. In this case it’s locale of your
URL. If you provide locale, it will be available throughout the routes. The fact
that you have to pass it into the localisation strings manually might look like
not the best solution, but remember, we might have external links here, or some
links might not be localised. When doing it manually we ensure that it’s exactly
where it’s supposed to be, while enabling flexibility to modify the URL
structure.

const getRoutes = (locale?: string = "en") => {
  const l = locale === "en" ? "" : `/${locale}`;

  return {
    users: {
      index: `${l}/users`,
      byId: (id: string) => `${l}/users/${id}`,
    },
  };
};

With hooks inside

Now, getRoutes should be preferred when it comes to providing global
variables, but sometimes it makes sense to use hooks instead. When you can only
access certain data from a hook, it might be fine to convert your getRoutes to
useRoutes and put the hook you depend on inside.

The main thing to keep in mind here is that you have to make sure that your
hooks work reliably on the server side. If you don’t, you will encounter
hydration errors, so make sure that data matches between server and client side.

const getRoutes = (locale?: string = "en") => {
  const l = locale === "en" ? "" : `/${locale}`;

  return {
    users: {
      index: `${l}/users`,
      byId: (id: string) => `${l}/users/${id}`,
    },
  };
};

const useRoutes = () => {
  const locale = useLocale();
  const l = locale == "en" ? "" : `/${locale}`;

  return getRoutes(l);
};

// In your component
const YourComponent = () => {
  const routes = useRoutes();

  // when locale is "de", then it links to: /de/users/1234
  return <a href={routes.users.byId("1234")} />;
};

Summary

The examples in this guide offer most of the use cases you will need for a
centralised route definition. Feel free to use this guide as a look up
cheatsheet.

Modern and Useful React Snippets

Antoni Silvestrovič — Mon, 29 May 2023 00:00:00 +0000

TailwindCSS type-safe component

TIP: Select "MyComponent" in VSCode and press cmd + d several times to
select all occurances of "MyComponent". Then type in the name of your
component.

import { cn } from "@/lib/utils";

interface MyComponentProps extends React.ComponentProps<"div"> {
  // Custom props go here
}

const MyComponent = ({
  className,
  children,
  ...props
}: React.PropsWithChildren<MyComponentProps>) => {
  return (
    <div className={cn("", className)} {...props}>
      {children}
    </div>
  );
};

export { MyComponent, type MyComponentProps };