Teach the model your language
Generate the system prompt from your component library: usage lines, props and descriptions, rules and one complete example, so the model's instructions never go out of date.
The model will write whole decks with your components. It's never seen them, so the system instruction has to teach every one: how to write it, which props it takes, and what it's for. You could type that out by hand. Then you'd add a component, forget to update the prompt, and wonder why the model never uses it.
Role and output rule
“Reply with exactly one <deck>”
Component catalog
generated from library.js: never out of date
Rules
start with TitleSlide, short text, escape <
One complete example
shows every rule at once
Documentation generated from code
Every component already carries a description and a description for each prop. describeComponent turns one component into its documentation:
<Card title="…">…</Card>: A card with a heading and one or two sentences inside: <Card title="…">Text</Card>
- title (required): Card heading, 1 to 3 words- The usage line shows every prop as an attribute, and uses the
<Name>…</Name>form only when the template has a<slot/>. Components without children are shown self-closing. - One line per prop says whether it's required and what it's for.
buildSystemPrompt(library) (written for you) joins every component's documentation with the rules and a complete example deck.
Under the hood — How long is this prompt, and does that matter?
With nine components it's about 700 tokens. It's sent with every deck request, so it costs a little on every call. It's still a bargain: it replaces thousands of output tokens of raw layout the model would otherwise write. In module 10 you'll measure token use for real.
The rule of thumb is to document what the model needs to choose correctly, and nothing about how components are built inside. The model never needs to know a Card has 20 points of .
Key takeaways
- Generate the component documentation from the definitions, so prompt and code can't disagree.
- Show each component exactly as it's written, with required and optional props marked.
- One complete example teaches the format better than a page of rules.
Sign in to run the exercise
Reading is free. Writing code here needs an account so we have somewhere to keep your Gemini key and the +30 XP you are about to earn.