You find a hero block you like. You paste the link into Cursor or Claude Code and ask for "this hero on my landing page". A minute later you have a hero: different spacing, a different gradient, no entrance animation. It looks like every other AI-generated landing page.

I build a component registry for this exact workflow, and I spent a long time finding out where the design gets lost. Short version: not in the code. It gets lost in the summary.

The flow that should work

pick a component → copy an instruction → paste it into the agent → agent runs `npx shadcn add <url>` → your project has exactly what the preview showed

Enter fullscreen mode

Exit fullscreen mode

The instruction is generated from the component's metadata, not hand-written: component ID, install command, dependencies, what to keep (motion, typography, spacing, responsive behaviour), what may change (copy, links, accent colour), and an explicit rule not to rebuild it from scratch.

On paper that's enough.…