uplift.page
← library
prompt🎨 Design systemsv2 · updated 2026-06-12

Design system starter

Tokens, primitives, and motion rules - shadcn/ui + Tailwind + Radix.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/design-system-starter/raw

prompt.md
# Design system starter

A small design system that keeps a product visually coherent: tokens, eight primitives, and motion rules everyone (including agents) can follow.

## Recommended stack

- **Tailwind CSS v4** - tokens & utilities. CSS-variable tokens with utility ergonomics; the config is the design language.
- **shadcn/ui + Radix** - primitives. Accessible behavior solved; you own the code and restyle freely.
- **Storybook (or a /kitchen-sink route)** - catalog. One page showing every component state keeps drift visible.

## Build steps

1. Define tokens first: 1 neutral scale, 1 accent, 2 font families, 4px spacing grid, 3 radii, 3 shadows max.
2. Adopt 8 primitives before any custom components: Button, Input, Card, Dialog, Dropdown, Toast, Table, Badge.
3. Write motion rules: 150–250ms, ease-out, opacity/transform only, respect prefers-reduced-motion.
4. Document do/don't pairs per component with real product examples.
5. Add a kitchen-sink page rendering every variant; review it on every theme change.

## Watch out for

- Twelve grays and five blues - tokens exist to remove decisions.
- Wrapping every shadcn component 'just in case' with prop-drilling indirection.
- Animating height/width/top (layout) instead of transform/opacity.

## Definition of done

- A new screen built only with system pieces looks native to the product
- Dark mode works by token swap alone
- The kitchen-sink page has zero one-off styles

The full prompt

A small design system that keeps a product visually coherent: tokens, eight primitives, and motion rules everyone (including agents) can follow.

Recommended stack

  • Tailwind CSS v4 - tokens & utilities. CSS-variable tokens with utility ergonomics; the config is the design language.
  • shadcn/ui + Radix - primitives. Accessible behavior solved; you own the code and restyle freely.
  • Storybook (or a /kitchen-sink route) - catalog. One page showing every component state keeps drift visible.

Build steps

  1. Define tokens first: 1 neutral scale, 1 accent, 2 font families, 4px spacing grid, 3 radii, 3 shadows max.
  2. Adopt 8 primitives before any custom components: Button, Input, Card, Dialog, Dropdown, Toast, Table, Badge.
  3. Write motion rules: 150–250ms, ease-out, opacity/transform only, respect prefers-reduced-motion.
  4. Document do/don't pairs per component with real product examples.
  5. Add a kitchen-sink page rendering every variant; review it on every theme change.

Watch out for

  • Twelve grays and five blues - tokens exist to remove decisions.
  • Wrapping every shadcn component 'just in case' with prop-drilling indirection.
  • Animating height/width/top (layout) instead of transform/opacity.

Definition of done

  • A new screen built only with system pieces looks native to the product
  • Dark mode works by token swap alone
  • The kitchen-sink page has zero one-off styles

Served from the uplift.page library and refreshed within 5 minutes of every update.