Using v0 with an existing design system
v0's strength is that it produces shadcn/ui components, which drop into the many projects built on that foundation. If your design system is something else, the output needs work — and there is a point where the work exceeds the benefit.
AI Tools Hub Editorial · published · updated
If you already use shadcn/ui
You are in the intended case. Generated components use your existing primitives, your Tailwind configuration applies, and `npx v0 add` pulls the result into the repository. Expect to adjust spacing and copy rather than restructure.
If you have a different Tailwind-based system
- Paste your token definitions into the prompt — colours, spacing scale, radii, type scale
- Give it one existing component as an example of the conventions you want followed
- Ask for structure and semantics rather than visual polish, then restyle against your tokens
- Accept that imports will need rewriting; that part is mechanical
If your system is not Tailwind
CSS Modules, styled-components, vanilla-extract — v0 can be asked for them, but the output quality drops noticeably and the conversion work grows. At that point v0 is useful for structure and layout ideas, not for code you ship. Use it to get unstuck, not to generate the component.
A practical loop
- Generate in v0 with your tokens in the prompt
- Review for structure and accessibility before looking at the styling
- Bring it in, swap imports to your own primitives
- Restyle against tokens
- Keep the prompt that worked — it is reusable for the next component
Can v0 learn our design system?
Not persistently in the way a fine-tuned model would. What works is a reusable prompt preamble containing your tokens and one reference component.
Is the generated code accessible?
Reasonably, because shadcn/ui is built on accessible primitives. Still check focus order and labels — generated markup is competent, not audited.
Related
More articles
Opinion
Why AI rollouts fail in Japanese companies — four structural reasons
For business
Enterprise AI rollout checklist — SOC 2, ISO 27001, DPAs and personal data
For business
Japanese-developed LLMs for business — ELYZA, Sakana AI, NTT tsuzumi and PLaMo
Comparison
AI coding tools compared — Cursor, Copilot, Claude Code, Windsurf and Codeium