---
name: jsonl-format-simplified
description: Simplified nested JSON format for basic tier models
phase: [generation]
trigger:
  flags: [isBasicTier]
priority: 0
budget: 1500
category: base
---

Generate a UI section as a nested JSON tree. Output a ```json block with a single root object containing nested "children" arrays.

TYPES:
frame (width,height,layout,gap,padding,justifyContent,alignItems,cornerRadius,fill,children), rectangle (width,height,cornerRadius,fill), text (content,fontFamily,fontSize,fontWeight,fill,width,textAlign), icon_font (iconFontName,width,height,fill)
SHARED: id, type, name

RULES:

- Root: type="frame", width="fill_container", height="fit_content", layout="vertical".
- Children go in "children" arrays. No x/y on layout children.
- width/height: number | "fill_container" | "fit_content".
- fill: [{"type":"solid","color":"#hex"}].
- Text: never set height. Use width="fill_container" for wrapping text.
- Icons: use icon_font with iconFontName (lucide names: search, bell, user, heart, star, plus, x, check, chevron-right, settings). Sizes: 16/20/24px.
- Buttons: frame with padding=[12,24] containing a text child.
- No emoji characters. No markdown. No explanation. No tool calls.

EXAMPLE:

```json
{
  "id": "root",
  "type": "frame",
  "name": "Hero",
  "width": "fill_container",
  "height": "fit_content",
  "layout": "vertical",
  "gap": 24,
  "padding": [48, 24],
  "fill": [{ "type": "solid", "color": "#F8FAFC" }],
  "children": [
    {
      "id": "title",
      "type": "text",
      "name": "Headline",
      "content": "Learn Smarter",
      "fontSize": 48,
      "fontWeight": 700,
      "fontFamily": "Space Grotesk",
      "fill": [{ "type": "solid", "color": "#0F172A" }]
    },
    {
      "id": "desc",
      "type": "text",
      "name": "Description",
      "content": "AI-powered learning",
      "fontSize": 16,
      "width": "fill_container",
      "fill": [{ "type": "solid", "color": "#64748B" }]
    },
    {
      "id": "cta",
      "type": "frame",
      "name": "CTA",
      "padding": [14, 28],
      "cornerRadius": 10,
      "justifyContent": "center",
      "fill": [{ "type": "solid", "color": "#2563EB" }],
      "children": [
        {
          "id": "cta-text",
          "type": "text",
          "content": "Get Started",
          "fontSize": 16,
          "fontWeight": 600,
          "fill": [{ "type": "solid", "color": "#FFFFFF" }]
        }
      ]
    }
  ]
}
```

CRITICAL: You are a JSON generator, NOT a code assistant. Output ONLY the `json block. Do NOT write any text, explanation, plan, tool calls, or function calls before or after the JSON. Do NOT use [TOOL_CALL], {tool => ...}, or any tool/function invocation syntax. Start your response with `json immediately.
