Learn how to ask the AI for UI without breaking your design tokens, spacing, or accessibility.
Take a moment to think about it this way
The AI can churn out good-looking UI fast. But it also tends to sneak in mismatched button styles, raw hex colors, and 12px touch targets. In vibe coding, your UI prompts need to point back to the design system you already have. Say "use the site tokens, min-h 44px, keep the focus ring," and the result stays consistent with your platform.
Let's connect this to everyday life
Need a new button? Have it reuse the existing Button component. Need a card? Give it your existing TutorialCard as an example. Never ask for something "as pretty as Dribbble." If you want to preserve your site's light/dark tokens, write the class names (bg-surface, text-foreground) directly into the prompt. Once it's done, tab through it with the keyboard.
Let's try it hands-on, together
// Prompt the AI to reuse tokens, not invent hex colors.
<button
type="button"
className="inline-flex min-h-[44px] items-center rounded-lg bg-accent px-4 text-sm font-medium text-accent-foreground"
>
Save note
</button>Be able to produce a UI slice that matches the site's design tokens.5-minute try-it
Write a prompt for an empty-state card. Add 3 existing class names as constraints.
One quick warning
Never treat AI output as the final, correct answer. Read through code, secrets, and user data yourself, test it, and only then put it to use.