# gdb-hub / gdb__template-4-s33

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

## 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": "GROUP",
        "left": "19.0323px",
        "top": "248.592px",
        "width": "777.0683292px",
        "height": "45.164544px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M4356.299868671613,256L48.24615384615386,256C21.66153846153847,256 0,234.3384615384616 0,207.7538461538462L0,48.24615384615386C0,21.66153846153847 21.66153846153847,0 48.24615384615386,0L4356.299868671613,0C4382.884484056228,0 4404.546022517767,21.66153846153847 4404.546022517767,48.24615384615386L4404.546022517767,207.7538461538462C4404.546022517767,234.3384615384616 4382.884484056228,256 4356.299868671613,256Z\")"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/4539ece4-2856-4630-a9fb-25668a7b433d.png",
        "left": "135.396px",
        "top": "74.6667px",
        "width": "130.108px",
        "height": "298.165px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "388.34px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "447.895px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "507.543px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "567.098px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "626.652px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "687.252px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "746.806px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "806.361px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "868.005px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "647.614px",
        "top": "928.605px",
        "width": "59.14498459199999px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(137, 92, 60)",
        "backgroundColor": "rgb(137, 92, 60)",
        "clipPath": "path(\"M249.58571521998604,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L249.58571521998604,0C270.2856192719096,0 287.15220775866214,16.866588486752505 287.15220775866214,37.56649253867603L287.15220775866214,218.43350746132404C287.15220775866214,239.13341151324758 270.2856192719096,256 249.58571521998604,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "388.34px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "447.895px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "507.543px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "567.098px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "626.652px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "687.252px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "746.806px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "806.361px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "868.005px",
        "width": "526.31357688px",
        "height": "52.728576px",
        "transform": "none",
        "background": "rgb(252, 243, 229)",
        "backgroundColor": "rgb(252, 243, 229)",
        "clipPath": "path(\"M2517.716288558186,256L37.56649253867603,256C16.866588486752505,256 0,239.1334115132475 0,218.43350746132393L0,37.56649253867603C0,16.866588486752505 16.866588486752505,0 37.56649253867603,0L2517.716288558186,0C2538.4161926101096,0 2555.2827810968624,16.866588486752505 2555.2827810968624,37.56649253867603L2555.2827810968624,218.43350746132404C2555.2827810968624,239.13341151324758 2538.4161926101096,256 2517.716288558186,256Z\")"
      },
      {
        "type": "GROUP",
        "left": "109.333px",
        "top": "928.605px",
        "wi
```
_instruction cut at 16k characters_
---
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