{
  "feature": "design-polish",
  "version": "1.0.0",
  "category": "ui",
  "description": "Apply finishing touches that elevate interface quality through accent borders, background decoration, empty states, minimal borders, and small details that compound into a professional appearance.\n",
  "rules": {
    "supercharge_the_defaults": "Supercharge the defaults — primary buttons, inputs, and frequently used elements deserve extra attention",
    "add_color_with_accent_borders": "Add color with accent borders — thin colored borders create visual interest without visual noise",
    "decorate_backgrounds": "Decorate backgrounds — subtle patterns, gradients, or texture can make backgrounds feel intentional",
    "dont_overlook_empty_states": "Don't overlook empty states — users see these moments; empty states are opportunities for personality and guidance",
    "use_fewer_borders": "Use fewer borders — reduce reliance on borders; use spacing, shadows, or color to define sections instead",
    "think_outside_the_box": "Think outside the box — small details (rounded corners, icons, micro-copy) compound into polished feel"
  },
  "outcomes": {
    "primary_action_button_designed": {
      "priority": 1,
      "given": [
        "primary action button is designed"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "background_color",
          "value": "saturated brand color"
        },
        {
          "action": "set_field",
          "target": "text_color",
          "value": "high_contrast"
        },
        {
          "action": "set_field",
          "target": "padding",
          "value": "generous (12-16px vertical)"
        },
        {
          "action": "set_field",
          "target": "border_radius",
          "value": "subtle (4-8px)"
        },
        {
          "action": "set_field",
          "target": "hover_state",
          "value": "darker shade or slight shadow"
        }
      ],
      "result": "primary button is inviting and clearly clickable"
    },
    "form_input_field_styled": {
      "priority": 2,
      "given": [
        "form input field is styled"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "border",
          "value": "thin (1px) neutral color"
        },
        {
          "action": "set_field",
          "target": "accent_border",
          "value": "colored bottom border on focus"
        },
        {
          "action": "set_field",
          "target": "background",
          "value": "subtle background color or white"
        },
        {
          "action": "set_field",
          "target": "padding",
          "value": "adequate (8-12px)"
        }
      ],
      "result": "input has visual interest on interaction without looking cluttered"
    },
    "empty_state_displayed": {
      "priority": 3,
      "given": [
        "empty state is displayed to user"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "visual_element",
          "value": "illustration or icon"
        },
        {
          "action": "set_field",
          "target": "headline",
          "value": "explains why state is empty"
        },
        {
          "action": "set_field",
          "target": "description",
          "value": "helpful next step or action"
        },
        {
          "action": "set_field",
          "target": "cta_button",
          "value": "obvious action to transition to filled state"
        }
      ],
      "result": "empty state guides user and reflects product personality"
    },
    "section_needs_visual_boundary": {
      "priority": 4,
      "given": [
        "section or content area needs visual boundary"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "primary_method",
          "value": "spacing and background color"
        },
        {
          "action": "set_field",
          "target": "secondary_method",
          "value": "subtle shadow (if layered)"
        },
        {
          "action": "set_field",
          "target": "border_usage",
          "value": "minimal or none"
        }
      ],
      "result": "boundaries are clear without visual clutter from borders"
    },
    "background_needs_visual_interest": {
      "priority": 5,
      "given": [
        "background needs visual interest"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "technique",
          "value": "subtle gradient, pattern, or texture"
        },
        {
          "action": "set_field",
          "target": "opacity",
          "value": "low (5-15%)"
        },
        {
          "action": "set_field",
          "target": "purpose",
          "value": "supports content, doesn't compete"
        }
      ],
      "result": "background feels intentional and sophisticated"
    }
  },
  "fields": [
    {
      "name": "primary_button_style",
      "type": "text",
      "label": "Color, padding, and hover state treatment",
      "required": false
    },
    {
      "name": "input_focus_treatment",
      "type": "text",
      "label": "Visual feedback on form input focus",
      "required": false
    },
    {
      "name": "empty_state_elements",
      "type": "text",
      "label": "Illustration, copy, and CTA for empty states",
      "required": false
    },
    {
      "name": "border_strategy",
      "type": "text",
      "label": "How borders are used (minimal, shadows, spacing instead)",
      "required": false
    },
    {
      "name": "background_decoration",
      "type": "text",
      "label": "Pattern, gradient, or texture approach",
      "required": false
    }
  ],
  "tags": [
    "design-system",
    "visual-design",
    "interaction-design"
  ],
  "related": [
    {
      "feature": "visual-hierarchy",
      "type": "recommended",
      "reason": "Polish amplifies hierarchy through refined visual signals"
    },
    {
      "feature": "color-system",
      "type": "recommended",
      "reason": "Polish uses strategic color accents from system"
    },
    {
      "feature": "depth-elevation",
      "type": "recommended",
      "reason": "Shadows and layering enhance polish"
    },
    {
      "feature": "animation-state-machine",
      "type": "optional",
      "reason": "Micro-interactions add polish to state transitions"
    }
  ],
  "agi": {
    "goals": [
      {
        "id": "reliable_design_polish",
        "description": "Apply finishing touches that elevate interface quality through accent borders, background decoration, empty states, minimal borders, and small details that compound into a professional appearance.\n",
        "success_metrics": [
          {
            "metric": "success_rate",
            "target": ">= 99%",
            "measurement": "Successful operations divided by total attempts"
          },
          {
            "metric": "error_rate",
            "target": "< 1%",
            "measurement": "Failed operations divided by total attempts"
          }
        ],
        "constraints": []
      }
    ],
    "autonomy": {
      "level": "semi_autonomous"
    },
    "safety": {
      "action_permissions": [
        {
          "action": "primary_action_button_designed",
          "permission": "autonomous"
        },
        {
          "action": "form_input_field_styled",
          "permission": "autonomous"
        },
        {
          "action": "empty_state_displayed",
          "permission": "autonomous"
        },
        {
          "action": "section_needs_visual_boundary",
          "permission": "autonomous"
        },
        {
          "action": "background_needs_visual_interest",
          "permission": "autonomous"
        }
      ]
    },
    "tradeoffs": [
      {
        "prefer": "accessibility",
        "over": "aesthetics",
        "reason": "UI must be usable by all users including those with disabilities"
      }
    ]
  }
}