# gdb-hub / gdb__template-4-s129

- taskset: [gdb-hub](https://harnessreport.com/tasks/gdb-hub.md)
- difficulty: hard
- category: design
- language: 
- runnable from the site: no
- agent timeout: 3600s

## Results by harness

_none yet_

## Instruction

```
# GDB: template-4

## Input Files

- `/workspace/inputs/input_0.png`
- `/workspace/inputs/input_1.png`
- `/workspace/inputs/input_2.png`

## Task

You are a design system assistant. Given several example layouts from the same template as style context, and one skeleton layout with structural data but missing visual styles, complete the skeleton by filling in the missing style properties (fontFamily, fontSize, color, backgroundColor, opacity, textAlign) to match the template's style. Return ONLY a valid JSON layout object.

Style context (sibling layouts):
[
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/85ce024a-4c54-4342-9113-ac07f340e2cd.svg",
        "id": "0-0",
        "left": "921.972px",
        "top": "996.609px",
        "width": "42.4208px",
        "height": "53.6355px",
        "transform": "rotate(90deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/ce8c8798-1224-4aac-b07c-789b1562687b.svg",
        "id": "0-1",
        "left": "520.608px",
        "top": "70.0667px",
        "width": "422.575px",
        "height": "432px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/1653eaac-bc53-47f8-8aae-05390fc9e6ed.jpg",
        "id": "0-2-0",
        "left": "670.733px",
        "top": "190.229px",
        "width": "409.26700000000005px",
        "height": "699.541px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "_________________________________________",
        "id": "0-3",
        "left": "110px",
        "top": "84px",
        "width": "860px",
        "height": "48px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "40px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "56.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "_________________________________________",
        "id": "0-4",
        "left": "110px",
        "top": "924px",
        "width": "860px",
        "height": "48px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "40px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "56.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "3/5",
        "id": "0-5",
        "left": "409.267px",
        "top": "59.2px",
        "width": "261.467px",
        "height": "21.7333px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "18.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "INSPIRING \nTITLE HERE. ",
        "id": "0-6",
        "left": "110px",
        "top": "314.129px",
        "width": "512.283px",
        "height": "156px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "60px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "84.0px",
        "letterSpacing": "0.08em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "When creating your own, highlight relevant points in your design. Lists are an option!",
        "id": "0-7",
        "left": "108px",
        "top": "525.738px",
        "width": "468.407px",
        "height": "199.133px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "29px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "41.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(245, 240, 231)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/06516dca-83cb-45f3-9c60-d46b9c2db446.svg",
        "id": "0-0",
        "left": "921.972px",
        "top": "996.609px",
        "width": "42.4208px",
        "height": "53.6355px",
        "transform": "rotate(90deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/85613cee-42ee-4330-ab2e-833d30301f09.svg",
        "id": "0-1",
        "left": "117.425px",
        "top": "612.637px",
        "width": "422.575px",
        "height": "432px",
        "transform": "rotate(-180deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/1edb8aac-1242-4421-ab73-3404787e72a1.jpg",
        "id": "0-2-0",
        "left": "0.0px",
        "top": "190.229px",
        "width": "409.267px",
        "height": "699.541px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "_______________________________________",
        "id": "0-3",
        "left": "110px",
        "top": "84px",
        "width": "860px",
        "height": "48px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "40px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "56.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "_______________________________________",
        "id": "0-4",
        "left": "110px",
        "top": "924px",
        "width": "860px",
        "height": "48px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "40px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "56.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "4/5",
        "id": "0-5",
        "left": "409.267px",
        "top": "59.2px",
        "width": "261.467px",
        "height": "21.7333px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "18.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "INSPIRING TITLE.",
        "id": "0-6",
        "left": "503.593px",
        "top": "314.129px",
        "width": "466.407px",
        "height": "156px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "60px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "84.0px",
        "letterSpacing": "0.08em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Engage your audience with simple, understandable language.",
        "id": "0-7",
        "left": "501.593px",
        "top": "525.738px",
        "width": "468.407px",
        "height": "117.133px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "29px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "41.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(245, 240, 231)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/32c223e4-20b3-4fd7-8ed4-fb7064d72ee7.svg",
        "id": "0-0",
        "left": "657.425px",
        "top": "432.0px",
        "width": "422.575px",
        "height": "432px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/1dbc257d-4083-4c49-8958-39b1870e0e45.jpg",
        "id": "0-1-0-0",
        "left": "0.0px",
        "top": "469.80000000000007px",
        "width": "1080.00347px",
        "height": "720.00197969px",
        "transform": "rotate(0deg)",
        "background": "rgba(1, 1, 1, 0)",
        "clipPath": "path(\"M1080.00347,500.6041855937703L0.0,500.6041855937703L0.0,149.7807723296561C0.0,149.7807723296561 224.67115849448413,0.0 543.9565080661907,0.0C890.8752086826736,0.0 1080.00347,149.7807723296561 1080.00347,149.7807723296561L1080.00347,500.6041855937703Z\")"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/ab32983a-aac5-46d9-89f6-c6a2715b3ba6.svg",
        "id": "0-2",
        "left": "518.79px",
        "top": "480.503px",
        "width": "42.4208px",
        "height": "53.6355px",
        "transform": "rotate(90deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/bac75e64-073e-4b4b-990e-c808d42234b6.svg",
        "id": "0-3",
        "left": "0px",
        "top": "0px",
        "width": "422.575px",
        "height": "432px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "SHARE INSTRUCTIONS?",
        "id": "0-4",
        "left": "182.549px",
        "top": "177.608px",
        "width": "714.903px",
        "height": "156px",
        "color": "rgb(99, 87, 76)",
        "fontSize": "60px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "84.0px",
        "letterSpacing": "0.08em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Add inspiring title.",
        "id": "0-5",
        "left": "211.287px",
        "top": "377.018px",
        "width": "686.164px",
        "height": "35.8667px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "30px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "42.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "STEPS",
        "id": "0-6",
        "left": "409.267px",
        "top": "59.2px",
        "width": "261.467px",
        "height": "21.7333px",
        "color": "rgb(131, 116, 99)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "18.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(245, 240, 231)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  }
]

Skeleton to style:
{
  "width": "1080px",
  "height": "1080px",
  "components": [
    {
      "type": "IMAGE",
      "id": "0-0",
      "left": "921.972px",
      "top": "996.609px",
      "width": "42.4208px",
      "height": "53.6355px",
      "transform": "rotate(90deg)",
      "overflow": "hidden"
    },
    {
      "type": "IMAGE",
      "id": "0-1",
      "left": "63.0796px",
      "top": "315.433px",
      "width": "422.575px",
      "height": "432px",
      "transform": "none",
      "overflow": "hidden"
    },
    {
      "type": "IMAGE",
      "id": "0-2-0",
      "left": "182.549px",
      "top": "190.229px",
      "width": "714.903px",
      "height": "341.20399999999995px",
      "transform": "rotate(0deg)",
      "overflow": "hidden"
    },
    {
      "type": "TEXT",
      "text": "___________________________________",
      "id": "0-3",
      "left": "110px",
      "top": "84px",
      "width": "860px",
      "height": "48px"
    },
    {
      "type": "TEXT",
      "text": "___________________________________",
      "id": "0-4",
      "left": "110px",
      "top": "924px",
      "width": "860px",
      "height": "48px"
    },
    {
      "type": "TEXT",
      "text": "2/5",
      "id": "0-5",
      "left": "409.267px",
      "top": "59.2px",
      "width": "261.467px",
      "height": "21.7333px"
    },
    {
      "type": "TEXT",
      "text": "INSPIRING TITLE.",
      "id": "0-6",
      "left": "182.549px",
      "top": "610.598px",
      "width": "714.903px",
      "height": "72px"
    },
    {
      "type": "TEXT",
      "text": "Social media shares facts, stories, and key information.",
      "id": "0-7",
      "left": "196.918px",
      "top": "731.637px",
      "width": "686.164px",
      "height": "117.133px"
    }
  ]
}

The skeleton references these assets (URLs, use as-is):
["https://storage.googleapis.com/lica-video/92006753-9f71-4351-b385-cbc89e1502aa.svg", "https://storage.googleapis.com/lica-video/1c91ebd3-3493-42a9-9e20-81213273cb00.svg", "https://storage.googleapis.com/lica-video/ab85f80b-1bfd-4702-87ed-0a3f58c08bbd.jpg"]

## Output

Write your answer to `/workspace/answer.json`.
Write ONLY the answer — no explanation, no markdown fences, no extra text.
```
---
Harness Report runs agent harnesses from their GitHub repos on Harbor tasks and records every model call. Every page is also `.md` and `.json`; index: https://harnessreport.com/llms.txt · MCP: https://harnessreport.com/mcp