Purrx

Describe the slide, don't position it

Design SlideML, an XML layout language language models can write reliably: slides, rows, columns, boxes and text, with padding and gap instead of coordinates.

9 min+15 XP

In lesson 1.2, the model struggled because it had to pick numbers that depend on each other and on text it can't measure. So we change what we ask for. Instead of where each box goes, the model describes how the slide is organized, and our code works out the positions.

Positioning (what we avoid)

title   x=48  y=48  w=624 h=40
card 1  x=48  y=112 w=195 h=245
card 2  x=263 y=112 w=195 h=245
card 3  x=477 y=112 w=195 h=245

Change one card's width and every number after it is wrong.

Describing (SlideML)

<slide padding="48" gap="24">
  <text>Title</text>
  <row grow="1" gap="20">
    <box>…</box> <box>…</box> <box>…</box>
  </row>
</slide>

Add a fourth card and the engine re-divides the row.

Positions force the model to do geometry in its head. Structure only asks it for what it's good at: words and organization.

SlideML

We'll call the language . If you've used HTML with flexbox, it will feel familiar. Five elements are enough for any slide:

  • <slide>: the whole slide, 720 × 405 points. Stacks its children top to bottom.
  • <column>: stacks its children top to bottom.
  • <row>: places its children side by side.
  • <box>: like a column, usually with a background fill. Cards and panels.
  • <text>: words, with fontSize, bold, color and align.

Space: padding, gap and grow

  • padding is space , between its edge and its children.
  • gap is , and only between them.
  • grow asks for a . width or height asks for a fixed size.

Your first SlideML slide

This lesson adds an example file to the project. Read it, then look at what the engine you're about to build will turn it into:

examples/slide.xml
<!-- A slide described by structure, not coordinates. -->
<slide padding="48" gap="24" fill="#FFFFFF">
  <text fontSize="32" bold="true" color="#1F2937">Why small factories buy cobots</text>
  <row grow="1" gap="20">
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Labor</text>
      <text fontSize="16" color="#374151">Skilled workers are hard to hire and keep.</text>
    </box>
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Cost</text>
      <text fontSize="16" color="#374151">Most cobot cells pay for themselves within a year.</text>
    </box>
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Safety</text>
      <text fontSize="16" color="#374151">They work next to people without safety cages.</text>
    </box>
  </row>
</slide>
examples/slide.xml, compiled by the engine you've built so far. Every box was positioned by code; the model never saw a coordinate.

Why XML and not JSON?

  • Nesting reads naturally. A row inside a slide is visibly inside it.
  • Text sits between tags, so there are no escaped quotes in every sentence.
  • Models have seen a lot of it (HTML is XML-like), so they write it fluently, and it streams well: a slide is complete the moment its closing tag arrives, which you'll use in module 10.

Your project so far

5 files · 1 new or changed in this lesson

examples/slide.xml

<!-- A slide described by structure, not coordinates. -->
<slide padding="48" gap="24" fill="#FFFFFF">
  <text fontSize="32" bold="true" color="#1F2937">Why small factories buy cobots</text>
  <row grow="1" gap="20">
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Labor</text>
      <text fontSize="16" color="#374151">Skilled workers are hard to hire and keep.</text>
    </box>
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Cost</text>
      <text fontSize="16" color="#374151">Most cobot cells pay for themselves within a year.</text>
    </box>
    <box fill="#EEF2FF" padding="20" gap="8">
      <text fontSize="20" bold="true" color="#4F46E5">Safety</text>
      <text fontSize="16" color="#374151">They work next to people without safety cages.</text>
    </box>
  </row>
</slide>

Key takeaways

  • SlideML describes structure (rows, columns, text) and never coordinates.
  • Padding is space inside a container; gap is space between its children. There is no margin.
  • XML suits models: they've seen a lot of it, it nests clearly, and it's easy to check.

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 +15 XP you are about to earn.

Continue with Google