# gdb-hub / gdb__template-4-s56

- 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`
- `/workspace/inputs/input_3.png`
- `/workspace/inputs/input_4.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": "TEXT",
        "text": "2",
        "id": "0-0",
        "left": "107.99999999999999px",
        "top": "100.9501px",
        "width": "113.721px",
        "height": "190.804px",
        "transform": "none",
        "color": "rgb(27, 73, 148)",
        "fontSize": "159px",
        "fontFamily": "Inter--100",
        "fontWeight": "100",
        "textAlign": "center",
        "lineHeight": "174.889671px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Will working from home prevent virus infection?",
        "id": "0-0",
        "left": "277.36px",
        "top": "112.8px",
        "width": "694.64px",
        "height": "536.873px",
        "transform": "none",
        "color": "rgb(27, 73, 148)",
        "fontSize": "96px",
        "fontFamily": "Inter--700",
        "fontWeight": "700",
        "textAlign": "left",
        "lineHeight": "105.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Yes, ideally. Staying home limits interactions, reducing your risk of catching the virus.",
        "id": "0-1",
        "left": "277.35999999999996px",
        "top": "701.7289999999999px",
        "width": "648.966px",
        "height": "122.436px",
        "transform": "none",
        "color": "rgb(27, 73, 148)",
        "fontSize": "28px",
        "fontFamily": "Inter--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "44.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/d58de8dc-4137-473a-9ba2-beedbb7d5053.svg",
        "left": "921.293px",
        "top": "945.632px",
        "width": "50.7071px",
        "height": "26.3677px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      }
    ],
    "background": "rgb(248, 221, 43)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "TEXT",
        "text": "How to tell my employer I need to work from home?",
        "left": "107.949px",
        "top": "112.8px",
        "width": "756.483px",
        "height": "431.418px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "96px",
        "fontFamily": "Inter--700",
        "fontWeight": "700",
        "textAlign": "left",
        "lineHeight": "105.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Employers should approve your request if:\n\u2022 Health/safety supports it.\n\u2022 Work done remotely, without disruption.\n\u2022 You have necessary home tools.",
        "left": "108.0px",
        "top": "597.473px",
        "width": "657.98px",
        "height": "384.8px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "28px",
        "fontFamily": "Inter--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "44.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/ad738cc0-18be-45bf-a526-c7eeec574b93.svg",
        "left": "921.293px",
        "top": "108.0px",
        "width": "50.7071px",
        "height": "26.3677px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "5",
        "id": "0-0",
        "left": "864.4330000000001px",
        "top": "821.2980000000001px",
        "width": "113.721px",
        "height": "190.804px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "159px",
        "fontFamily": "Inter--100",
        "fontWeight": "100",
        "textAlign": "center",
        "lineHeight": "174.889671px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(248, 221, 43)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "TEXT",
        "text": "Workplace FAQs",
        "left": "108.0px",
        "top": "312.915px",
        "width": "864px",
        "height": "366.909px",
        "transform": "none",
        "color": "rgb(245, 174, 188)",
        "fontSize": "160px",
        "fontFamily": "Inter--700",
        "fontWeight": "700",
        "textAlign": "left",
        "lineHeight": "176.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Prevent COVID-19 spread",
        "left": "108.0px",
        "top": "861.2853299999999px",
        "width": "551.783px",
        "height": "103.248px",
        "transform": "none",
        "color": "rgb(245, 174, 188)",
        "fontSize": "37px",
        "fontFamily": "Inter--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "59.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "MCDOWELL DIGITAL MEDIA INC",
        "left": "347.565px",
        "top": "95.0077px",
        "width": "624.435px",
        "height": "37.6px",
        "transform": "none",
        "color": "rgb(245, 174, 188)",
        "fontSize": "32px",
        "fontFamily": "Inter--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "44.0px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/33086c2e-6a1a-4dc1-bc50-b440f78465d2.svg",
        "left": "916.404px",
        "top": "945.632px",
        "width": "55.5962px",
        "height": "28.91px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      }
    ],
    "background": "rgb(27, 73, 148)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "TEXT",
        "text": "Follow these guidelines, let's #StopTheSpread together.",
        "left": "108.0px",
        "top": "318.18133px",
        "width": "864px",
        "height": "435.103px",
        "transform": "none",
        "color": "rgb(27, 73, 148)",
        "fontSize": "85px",
        "fontFamily": "Inter--700",
        "fontWeight": "700",
        "textAlign": "left",
        "lineHeight": "110.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(245, 174, 188)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "TEXT",
        "text": "Am I at risk for COVID-19?",
        "left": "108.0px",
        "top": "112.8px",
        "width": "675.612px",
        "height": "325.964px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "96px",
        "fontFamily": "Inter--700",
        "fontWeight": "700",
        "textAlign": "left",
        "lineHeight": "105.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "You're more likely to catch COVID-19 if:\n \n\u2022 are 60+ years old\n\u2022 have a long-term medical condition like heart disease, lung disease, diabetes, cancer or high blood pressure\n are immunosuppressed or have a weak immune system\n \nIf you fall under any of these, contact your employer to request work from home.",
        "left": "108.0px",
        "top": "487.59999999999997px",
        "width": "645.046px",
        "height": "478.8px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "28px",
        "fontFamily": "Inter--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "44.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "3",
        "id": "0-0",
        "left": "864.433px",
        "top": "101.39280000000001px",
        "width": "113.721px",
        "height": "190.804px",
        "transform": "none",
        "color": "rgb(239, 89, 67)",
        "fontSize": "159px",
        "fontFamily": "Inter--100",
        "fontWeight": "100",
        "textAlign": "center",
        "lineHeight": "174.889671px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/2c59b7be-b455-4cd4-9ea1-ead85f6e739c.svg",
        "left": "921.293px",
        "top": "945.632px",
        "width": "50.7071px",
        "height": "26.3677px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      }
    ],
    "background": "rgb(245, 174, 188)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  }
]

Skeleton to style:
{
  "width": "1080px",
  "height": "1080px",
  "components": [
    {
      "type": "TEXT",
      "text": "If caring for an elderly person, should I work from home?",
      "id": "0-0",
      "left": "108.0px",
      "top": "112.79999999999994px",
      "width": "882.671px",
      "height": "429.6px",
      "transform": "none"
    },
    {
      "type": "TEXT",
      "text": "Yes. If living with high-risk family members, consider working from home. This prevents catching and passing the virus.",
      "id": "0-1",
      "left": "108.0px",
      "top": "592.853px",
      "width": "830.82px",
      "height": "164.8px",
      "transform": "none"
    },
    {
      "type": "IMAGE",
      "left": "921.293px",
      "top": "945.632px",
      "width": "50.7071px",
      "height": "26.3677px",
      "transform": "none",
      "overflow": "hidden"
    },
    {
      "type": "TEXT",
      "text": "4",
      "id": "0-0",
      "left": "95.96179999999998px",
      "top": "832.1650000000001px",
      "width": "113.721px",
      "height": "190.804px",
      "transform": "none"
    }
  ]
}

The skeleton references these assets (URLs, use as-is):
["https://storage.googleapis.com/lica-video/6612a954-4706-49b4-976e-1b5df8daf14e.svg"]

## 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