Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Share

v0 prompt that respects the design tokens you already have

Open · 52 views · asked by yuki_builds · edited
v0reacttailwind

Generated components arrive with their own blues and their own spacing, and then you spend longer fixing them than writing them. Naming the file the tokens live in, and listing the states, fixed both for me.

Prompt
Copied 1 time
Build [component] using only what is already in this project:
- Colours, radii and shadows: the CSS variables in globals.css. No hex values.
- Spacing and type: existing Tailwind classes, no arbitrary values like p-[13px].
- Components: reuse what is in components/ui. Do not install anything.

Match the density of [existing component] and give it the same states: default, hover, focus-visible, disabled, loading, empty.
Comment
Listing the states is the part v0 needs most, otherwise you get no hover and no disabled. aiko_n · edited

Activity