---
name: studio
description: Show design options side by side in the Studio panel of Gradespace IDE. Use whenever the user asks for design options, variants, mockups, layouts or alternatives to compare and pick from, such as "give me three hero designs" or "show me a few logo ideas".
---

# Studio

Gradespace IDE has a Studio panel that shows design options side by side. The user picks one, or comments on one, and that goes into their next message to you.

## Make the options

1. Make 2 to 4 options that are different ideas (layout, image or message), not one design with changed colours. Unless the user asks, don't change the app's code to do this.
2. Save each option as one self-contained file in `.gradespace/studio/<short-name>/` in the project, for example `a.html`, `b.html` and `c.html`. HTML, PNG, JPG, PDF and plain text work. HTML must inline its styles and images, because Studio loads only that one file. Design HTML for a 1280px wide screen.
3. Write `studio.json` in the same folder. Each `file` is relative to that folder, and each `id` must be different:

```json
{
  "title": "What this set is",
  "recommended": "a",
  "variants": [
    { "id": "a", "title": "Short name", "note": "One line on the idea", "file": "a.html" },
    { "id": "b", "title": "Short name", "note": "One line on the idea", "file": "b.html" }
  ]
}
```

`recommended` is optional. Leave out `picked`: Studio writes it when the user picks.

4. Add `.gradespace/` to `.git/info/exclude`, so the options stay out of commits.
5. In your reply, list the options with one line each, say which you recommend and why, and say they are in Studio.

## When the user picks or comments

A message may contain lines like these:

- `Studio pick for "<title>": option b, <folder>/b.html. Refine only this one.`
- `Studio comment on option b of "<title>" (<folder>/b.html): <what to change>`

Treat them as the user's choice and feedback. Refine only the option they name, in place or as a new set. If you are unsure which option was chosen, read `picked` in `studio.json`.
