You start a project on a UI Kit Pack and it carries you a long way — the buttons, cards, forms, navigation, tables, all consistent, all themed to your brand. And then you hit the wall every kit eventually hits: you need the one component it doesn't include. A kanban board. A vertical timeline. A multi-step wizard. A feature-comparison table with the specific shape your product needs. Now you've got two bad instincts and one good one. The bad instincts are to hand-build it (and watch it come out subtly off) or to fork the whole system to accommodate it. The good one is to generate the missing piece and wire it into the kit's existing token layer, so it themes like a native part of the set. This guide is that workflow — using PromptUI to create the component and your pack's CSS variables to make it belong.
This Is the “Extend” Guide, Not the “Build” One
If you're standing up a design system from scratch, that's a different (and prior) workflow — defining tokens and dressing components, which we cover in tokens to components. This guide assumes you already have a token-driven kit and just need to add a component it doesn't ship. Different problem, different move.
Why Hand-Building the Missing Piece Drifts
The reason a hand-rolled addition looks wrong is rarely the component itself — it's that you eyeballed the values. You reach for a blue that's close to the kit's blue, a radius that's about right, a shadow that's roughly the same. Each near-miss is invisible alone, and glaring in aggregate: the new panel sits next to the kit's cards looking like it wandered in from a different app. The whole point of a token-driven kit is that every component borrows the same decisions instead of restating them. So the fix isn't to guess the values more carefully — it's to make your new component read from the same variables everything else does. Get that right and “matches the kit” stops being a design chore and becomes automatic.
The Workflow: Generate, Then Re-Point
Four steps take you from “the kit is missing X” to “X is a themed part of the kit.” The first three make the component; the fourth — the one everybody skips — is what makes it belong.
1 Pull your kit's token values
Open your pack's CSS and find its token layer — the :root block of CSS custom properties that holds the colors, radius, shadows, and spacing. UI Kit Packs are token-driven by design, so these are already named and centralized; they are your design system's source of truth. Copy out the handful you'll need for the new component — the primary color, the surface color, the border radius, the base spacing. You're not inventing anything here; you're reading decisions that already exist.
2 Describe the component to PromptUI
Open PromptUI and write a plain-English prompt for the missing component — and put your kit's actual values in the prompt. PromptUI's input is built to take exactly this: your colors, the components you want, and your style preferences. So instead of “make a kanban board,” you write “a three-column kanban board, cards with a 12px radius, primary color #3B82F6, soft shadows, clean and minimal.” Feeding it the real numbers gets you a first result that's already in the right ballpark, not a generic component you'll fight later.
3 Refine it in the generator
The first generation is a draft, not a delivery. Refine the prompt and regenerate, or — faster — manually adjust the colors, components, and styles right in the generator interface before you download. Nudge the spacing, tighten the states, get the structure and the look close enough that the only thing left is wiring. When it's there, export the HTML and CSS (PromptUI's Unlimited plan also exports Tailwind config and React components if that's your stack).
4 Re-point it at your kit's CSS variables
This is the step that turns a lookalike into a system member. Go through the generated CSS and swap its hardcoded values for var() references to your pack's tokens. The literal #3B82F6 becomes var(--color-primary); the 12px radius becomes var(--radius-md); the shadow becomes var(--shadow-card). Now the new component doesn't just look like the kit — it reads from the identical token layer, which means the day you change a token, it repaints right alongside every native component. You've extended the system, not bolted something onto it.
What the Re-Point Actually Looks Like
The whole trick is a find-and-replace with intent. PromptUI hands you something like this — correct, but with the values baked in:
.kanban-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-left: 3px solid #3B82F6;
}You rewrite it to borrow your pack's tokens instead of restating their values:
.kanban-card {
background: var(--color-surface); /* was #ffffff */
border-radius: var(--radius-md); /* was 12px */
box-shadow: var(--shadow-card); /* was 0 1px 3px… */
border-left: 3px solid var(--color-primary); /* was #3B82F6 */
}Nothing about how it looks changed today. Everything about how it behaves did: this card is now governed by the same source of truth as the rest of the kit. Re-theme the pack, and the kanban board you added comes along for free.
The Token Layer Is the Glue
This works because a UI Kit Pack isn't a pile of components — it's a set of components plus a shared layer of CSS variables they all consume. When your generated component consumes that same layer, there's no longer a “kit” and a “custom thing”; there's one system with one more member. That's the difference between extending a design system and quietly starting a second one next to it.
Which Tool for Which Job
UI Kit Packs, PromptUI, and the UI Kit Generator all live in the same token-first world — the right one depends on what you're actually trying to do:
| You need… | Reach for |
|---|---|
| A ready-made, token-driven component set to build on | UI Kit Packs (8 systems, 16 families) |
| One specific component your kit doesn't include | PromptUI — then re-point it (this guide) |
| A whole branded kit generated from a few settings | UI Kit Generator |
| To design the token layer itself, by hand | Brand Token Studio |
For the extend workflow specifically, the pairing is Packs plus PromptUI. UI Kit Packs run $9.99 for a Core kit, $14.99 for a Studio Exclusive, or $49.99 for the complete bundle of all eight. PromptUI has a free generation to try it, a $19 one-time Starter pack of five (credits never expire), and a $39/mo Unlimited plan that adds the Tailwind and React exports plus the refinement tool. Neither locks you in — the output is plain HTML, CSS, Tailwind, and React you own.
The Bottom Line
A kit not shipping the exact component you need isn't a dead end — it's a two-tool job. Generate the missing piece with PromptUI, feeding it your kit's real values so it starts close; refine it in the generator until the look is right; then re-point its CSS at your pack's variables so it reads from the same token layer as everything else. The payoff is that your addition isn't a foreign object — it's a citizen of the design system, themed automatically, updated by the same token swap, indistinguishable from the components that shipped in the box. That's how you keep one system instead of slowly growing two: you extend it, on purpose, through the layer that was built to be extended.
Generate the Component Your Kit Is Missing
Describe it in plain English, refine it in the browser, and wire it into your kit's tokens. PromptUI has a free generation to try the workflow — no account, full commercial rights.
Open PromptUI