Strategies for Accurate Design Implementation

[TaeTae-01]

When describing complex layouts to LLMs using text or images, they often fail to generate accurate code:

• Structure Confusion: Mixing up parent-child relationships and positioning.

• Token Hallucinations: Inventing random values for borders or colors.

• Responsive Failures: Failing to implement breakpoint logic correctly. (even when using spec-kit.)

So, I thought what about providing a JSON Tree as a 'Blueprint' to serve as an Intermediate Representation for design.

However, on second thought, I realized that this structured design guide might essentially just be becoming another form of a CSS file.

When applying SDD(spec-driven-development) to UI/UX, what approaches have you found most effective for ensuring strict adherence to specs while accurately achieving the intended design?

here is a visualization of the JSON schema.

classDiagram
    class UISpec {
        +DesignSystem designSystem
        +LayoutTree layoutTree
    }

    class DesignSystem {
        +Map colors
        +Map shapes
        +Note: "Abstracted Design Tokens"
    }

    class ComponentNode {
        +String component
        +Map styles
        +List~ComponentNode~ children
        +Note: "Recursive DOM Structure"
    }

    UISpec --> DesignSystem : Definitions
    UISpec --> LayoutTree : Structure
    LayoutTree --> ComponentNode : Root
    ComponentNode --> ComponentNode : Nested Children
    ComponentNode ..> DesignSystem : References Tokens

Loading

This schema forces the AI to strictly follow the parent-child relationships defined in children, preventing layout hallucinations.

{
  "designSystem": {
    "colors": { "primary": "#000000", "bg": "#f0f2f5" },
    "shapes": { "cardBorder": "3px solid black" }
  },
  "layoutTree": {
    "root": {
      "element": "main",
      "styles": { "layout": "flex-col", "gap": "20px" },
      "children": [
        {
          "component": "Header",
          "styles": { "text": "center" }
        },
        {
          "component": "GameBoard",
          "styles": { "border": "cardBorder" } // References designSystem
        }
      ]
    }
  }
}