All posts
June 16, 2026

Best Design System Skills for Lovable (2026)

Five Lovable Skills that turn a blank Vite project into a coherent, on-brand design system — tokens, typography, motion, icons and dark mode.

Best Design System Skills for Lovable

A strong design system is the difference between an app that looks AI-generated and one that looks shipped. These five Lovable design skills install in any TanStack Start project and compose into a single, coherent system.

1. Design Tokens

The foundation. Generates a semantic palette (background, foreground, primary, accent, muted, destructive) as HSL CSS variables in src/styles.css, plus a Tailwind v4 theme that consumes them. Dark mode is free.

Install first — every other skill on this list assumes the tokens exist.

2. Frontend Design Direction

A Claude Skill that picks the direction before you write code: type scale, motion language, surface treatments, illustration style. The output is a design brief the other skills implement against.

Use when: starting a new project, or rebranding an existing one.

3. Typography Stack

Loads a font pair (display + body) from Google Fonts via a <link> in the root route, then wires Tailwind utilities (font-display, font-body) and a fluid type scale.

Use when: the default Inter-on-everything aesthetic is killing you.

4. Motion Primitives

A set of Framer Motion components — <FadeIn>, <SlideUp>, <Stagger>, <Marquee> — tuned to the tokens. Animations match the rest of the system instead of being one-off transition-all hacks.

5. Lucide + Phosphor Icon Pack

Unifies Lucide and Phosphor under a single <Icon name="..."> component, with size, stroke and color resolved from tokens. No more mismatched icon weights across the app.

How to install the stack

Follow the order — each builds on the last:

lovable add design-tokens
lovable add typography-stack
lovable add motion-primitives
lovable add icon-pack

Run frontend-design-direction first as a Claude Skill if you want a written brief before committing to a direction.

What you get

A project that:

  • Themes with one variable change.
  • Switches to dark mode without per-component edits.
  • Animates consistently across pages.
  • Survives a designer joining the team.

Related

Related posts