Design systems with shadcn, Figma, and tweakcn

Design systems fail when tokens drift between tools. shadcn/ui solves this by using a small set of semantic CSS variables that map cleanly to Tailwind utilities.

When you design in Figma with a community kit that uses the same variable names, and generate themes in tweakcn, you get a loop that stays consistent: design, theme, implement.

Keep variable names fixed across Figma, tweakcn, and code. Only values should change when switching themes.

Use --background, --foreground, --primary, --accent, and --radius everywhere. Never invent parallel naming schemes per tool.

Avoid hardcoded colors in page components. Let presets swap values while names stay fixed.

Duplicate the community Figma kit, compose screens from instances, export tweakcn themes, and implement with Cursor using existing shadcn components.