How would you structure a design-system component API for a product team?
PICTURE THIS: A SENTENCE BECOMES TOKENS
The model does not read letters like humans. It reads these pieces, then predicts the next one.
Simple meaning
I keep a small set of variants, sizes, and an asChild or polymorphic pattern so consumers do not fork the CSS.
WHY — React instead of guessing?
Why interviewers care about React:
question about React.
trade-offs, and what you would actually do on a Frontend project - not buzzwords.
Name the idea, why it exists, then one short example.
End with when you use it and one common pitfall.
STEPS — What happens with tokens?
Before the model can read a sentence, it goes through these steps:
- 1I keep a small
set of variants, sizes, and an asChild or polymorphic pattern so consumers do not fork the CSS.
- 2Accessibility is built in:
labels, keyboard, and contrast tokens.
- 3Breaking changes go through
versioning because dozens of apps will depend on the button.
- 4Context mix
Attention looks at nearby tokens together.
- 5Next token
The model scores what should come next.
- 6Decode
IDs turn back into readable text.
EXAMPLE — See it in action
Let's see how a real sentence is tokenized (tokens may vary by model):
Note: Actual tokens and IDs depend on the tokenizer (e.g., GPT, Llama, etc.).
Key takeaway
I keep a small set of variants, sizes, and an asChild or polymorphic pattern so consumers do not fork the CSS. Accessibility is built in: labels, keyboard, and contrast tokens.