Ask Gemini to write a slide in SlideML
Teach Gemini the SlideML language with a system instruction, pull the XML out of its reply, and parse it into a tree: your first AI-generated slide structure.
You have a language and a parser. Now let's see whether Gemini can write the language. It's never seen SlideML, because we just invented it, so everything it knows has to come from the prompt.
LANGUAGE_GUIDE
elements, attributes, rules
Gemini
writes one <slide>
extractTag()
drops ``` fences and chatter
parseXml()
a tree, or a clear error
The manual: LANGUAGE_GUIDE
This lesson adds src/prompt.js. Its LANGUAGE_GUIDE goes in the system instruction, because it applies to every request, while the topic changes each time.
// Everything the model needs to know about our slide language.
// A model can only use rules it has been told, so this text is part of the program.
export const LANGUAGE_GUIDE = `You design PowerPoint slides by writing SlideML, a small XML layout language.
Never use x/y coordinates. Describe the structure and the layout engine positions everything.
Elements:
- <slide> the whole slide (720 × 405 points). Stacks its children top to bottom.
- <column> stacks children top to bottom.
- <row> places children side by side, left to right.
- <box> like a column, usually with a fill color, for cards and panels.
- <text> a piece of text. Put the words inside the tag.
Attributes (numbers are points):
- padding="24" space inside a container, between its edge and its children
- gap="16" space between the children of a container
- fill="#EEF2FF" background color of a slide, column, row or box
- grow="1" take a share of the leftover space
- width="200" or height="120" a fixed size
- text only: fontSize="20" bold="true" color="#1F2937" align="left|center|right"
Rules:
- Use padding on containers and gap between children. There is no margin.
- Keep text short: slides are read from across a room.
- Reply with exactly one <slide> element and nothing else.`;- It lists everything that's allowed. A model can't use an attribute it wasn't told about, and will invent one it thinks is plausible if the list is vague.
- It repeats the key decision: never coordinates.
- It says exactly what to reply with: one
<slide>and nothing else.
Cleaning up the reply
Even when told "nothing else", models often wrap XML in ```xml fences or add "Here's your slide:". extractTag(text, "slide") finds the first <slide and the last </slide> and keeps only what's between them.
Run it a few times. The XML will usually parse. Look at it in the Output tab: that's structure a layout engine can position correctly, which is exactly what you'll build in the next module.
Key takeaways
- The system instruction is the model's manual: every element, attribute and rule it may use.
- Always extract the part you asked for; models add fences and sentences around it.
- Parsing right away turns a malformed reply into a clear error instead of a broken file later.
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.