Pluck a Pricing Table and Rebuild It in Tailwind in 10 Minutes

Pricing tables are a good test of any design-to-code workflow. They have a lot of small decisions packed into a small space: column widths, the highlighted plan, the badge, the feature list with check icons, the button hierarchy, and how it all collapses on a phone. Describe one in words and the AI gets maybe half of it. Hand it the real thing and it gets nearly all of it.

Here's the full loop, timed. You'll need the Pluck extension, a project that uses Tailwind, and an AI coding tool. We'll use Cursor, but Claude Code, Codex, Lovable, v0 or Bolt all take the same paste.

Minute 0 to 2: find and pluck

Open a pricing page you like. For this walkthrough, pick any SaaS pricing page with three plans and a highlighted middle one, since that's the most common shape and the one you'll most likely want.

Click the Pluck icon. Hover over the page. The highlight follows your cursor and snaps to elements; move up until the outline covers the whole pricing section, not a single plan card. You want the container because it carries the grid: column gap, equal heights, and the breakpoints where it goes from three columns to one.

Click to select it.

Minute 2 to 3: copy as a prompt

In the popup, choose AI prompt. Set the stack picker to Tailwind and your framework (React here). Click copy.

What's on your clipboard now: the element tree with every node's computed styles (grid and flex settings, padding, colours, font sizes and weights, border radii, shadows), the responsive changes at each breakpoint, and a screenshot of the section. The screenshot rides alongside the text, so a tool that accepts images sees what it's rebuilding as well as reading it.

Minute 3 to 4: paste with one line of intent

In Cursor, open the chat (or Composer for a multi-file change), paste, and add this above the pasted block:

Create apps/web/src/components/pricing.tsx: a React + Tailwind pricing section matching this reference. Use our <Button> from @/components/ui/button, our brand primary instead of the reference's accent, and read plans from the PLANS array in @/lib/plans. Keep the highlighted middle plan, the badge and the feature list with check icons.

That's it. The pluck carries the design; the line carries the intent: file location, components to reuse, data source, and the two or three things you plucked it for.

Send it.

Minute 4 to 7: review the first result

The first generation is usually structurally right. Check these things specifically:

• Grid. Three columns at desktop, one at mobile, with the gap from the reference. If the reference used grid-cols-3 with a gap-8, you should see the equivalent.
• The highlighted plan. A different background or border, maybe slightly scaled, with the badge positioned over the top edge. Look for the absolute positioning on the badge and a relative on the card.
• Typography. The price in a large weight, the period in a muted small size, feature items at body size. These come straight from the captured font sizes.
• Buttons. Primary on the highlighted plan, secondary on the others. If the model used plain <button>s, remind it about your component.
• Icons. Check marks in the feature list. The model may import from whatever icon library it assumes; point it at yours.

Here's a shortened version of what we got back for a three-plan reference:

<section className="mx-auto grid max-w-6xl gap-8 px-4 py-16 sm:grid-cols-3">
	{PLANS.map((plan) => (
		<div
			className={cn(
				"relative flex flex-col rounded-2xl border p-8",
				plan.highlighted && "border-primary shadow-lg"
			)}
			key={plan.id}
		>
			{plan.highlighted && (
				<span className="absolute -top-3 right-6 rounded-full bg-primary px-3 py-1 text-primary-foreground text-xs">
					Most popular
				</span>
			)}
			<h3 className="font-semibold text-lg">{plan.name}</h3>
			<p className="mt-4 font-bold text-5xl tracking-tight">
				${plan.price}
				<span className="font-normal text-base text-muted-foreground">
					/month
				</span>
			</p>
			...

The radii, the badge offset and the price type scale all came from the reference's actual values. We didn't type any of them.

Minute 7 to 10: adjust

Three follow-up messages usually finish it. Ours were:

1. "The highlighted card should use our primary colour with white text, like our hero CTA." Brand swap.
2. "Add a monthly/yearly toggle above the grid that switches the displayed price. Yearly shows two months free." Behaviour the reference didn't have.
3. "On mobile put the highlighted plan first." A responsive tweak the reference didn't make but we wanted.

Then run your formatter and look at it in the browser at a few widths.

What to adjust afterwards

A pluck gets you the structure and the surface. A few things are always yours to decide:

• Brand. Colours and fonts from the reference are placeholders. Swap them for your tokens; if your project has a theme file, name it in the instruction so the model reaches for it instead of hard-coding hex values.
• Content. Plan names, prices and features should come from data, not be typed into JSX. The instruction above wires them to a PLANS array for that reason.
• Interaction. Hover states and focus rings are captured, but a billing toggle or a "contact sales" modal is your logic.
• Accessibility. Make sure the badge isn't the only way the highlighted plan is announced, buttons have accessible names, and the check icons are decorative (aria-hidden) with the feature text doing the work.
• Originality. You plucked a layout pattern that hundreds of sites share. Once it's in your colours with your copy and your spacing scale, it's yours. Shipping a pixel-for-pixel copy of a specific competitor's table isn't the goal and isn't a good idea.

Variations

• Different tool, same paste. The pasted content is plain text plus an image. In Claude Code the instruction is identical. In Lovable you'd drop the file path and say where on the page it goes.
• Different stack. Change the stack picker to Vue, Svelte, Solid or Qwik, and Tailwind to CSS Modules, Styled Components or Vanilla Extract. The captured data is the same; the prompt framing changes.
• Figma first. If a designer wants to adjust the layout before anyone writes code, copy the same section as Figma and paste editable layers into a file. See How to Clone Any Website to Figma.
• Save for later. The pluck is already in your Studio library. Next quarter's pricing redesign starts from there.

Try it on your own pricing page

Install Pluck, pluck a pricing section, paste it with one line. The Free plan includes 50 plucks a month, which is enough to rebuild your whole marketing site's worth of sections before deciding whether to upgrade. The Tailwind use-case page has the short version of this workflow.