{
  "feature": "feature-first-design",
  "version": "1.0.0",
  "category": "ui",
  "description": "Start design with core features and user workflows before deciding on app shell or navigation. This prevents design paralysis and ensures information architecture is driven by real requirements.\n",
  "rules": {
    "start_with_feature_not_layout": "Start with a feature, not a layout — design the actual functionality (search, form, display) before worrying about navigation or shell",
    "detail_comes_later": "Detail comes later — low-fidelity mockups (wireframes, sketches) are fine initially; color, icons, and polish come after core flows work",
    "dont_design_too_much": "Don't design too much — design one feature end-to-end before moving to the next; don't try to design the entire app in abstract",
    "work_in_cycles": "Work in cycles — iterate between design and code; use working prototypes to identify real problems faster than abstract mockups",
    "be_pessimist_about_features": "Be a pessimist about features — don't imply functionality you aren't ready to build; design only what's committed",
    "make_it_real_early": "Make it real early — build and test with real data as soon as possible, not static mockups"
  },
  "outcomes": {
    "new_feature_being_designed": {
      "priority": 1,
      "given": [
        "new feature is being designed"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "design_focus",
          "value": "core workflow and required fields"
        },
        {
          "action": "set_field",
          "target": "ignore_for_now",
          "value": "navigation, shell, layout architecture"
        },
        {
          "action": "set_field",
          "target": "fidelity_level",
          "value": "low (wireframe or sketch)"
        }
      ],
      "result": "design effort is focused on real requirements, not assumptions"
    },
    "feature_design_ready_for_implementation": {
      "priority": 2,
      "given": [
        "feature design is ready for implementation"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "next_step",
          "value": "build functional prototype in code"
        },
        {
          "action": "set_field",
          "target": "defer",
          "value": "color, icons, typography refinement"
        },
        {
          "action": "set_field",
          "target": "test_with",
          "value": "real data, real user workflow"
        }
      ],
      "result": "design moves into code early for faster iteration"
    },
    "working_prototype_reveals_problems": {
      "priority": 3,
      "given": [
        "working prototype reveals design problems"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "response",
          "value": "iterate in code, not in design tool"
        },
        {
          "action": "emit_event",
          "event": "design.iteration.active",
          "payload": [
            "problem_discovered",
            "solution_iteration"
          ]
        }
      ],
      "result": "design problems are caught early with real user interaction"
    },
    "multiple_features_planned": {
      "priority": 4,
      "given": [
        "multiple features are planned"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "design_sequence",
          "value": "highest-priority feature first, end-to-end"
        },
        {
          "action": "set_field",
          "target": "avoid",
          "value": "designing all features in parallel"
        }
      ],
      "result": "each feature is complete and tested before next begins"
    }
  },
  "flows": {
    "feature_first_design_cycle": {
      "description": "Iterative design cycle starting from feature, not layout",
      "steps": [
        {
          "id": "understand_requirements",
          "action": "define_feature_scope",
          "actor": "designer",
          "description": "Identify core workflow and required fields for the feature"
        },
        {
          "id": "create_wireframe",
          "action": "sketch_wireframe",
          "actor": "designer",
          "description": "Sketch low-fidelity wireframe focusing on feature, not shell"
        },
        {
          "id": "build_prototype",
          "action": "implement_prototype",
          "actor": "developer",
          "description": "Developer builds functional prototype from wireframe"
        },
        {
          "id": "test_prototype",
          "action": "test_with_real_data",
          "actor": "designer",
          "description": "Test prototype with real data and identify problems"
        },
        {
          "id": "iterate_design",
          "action": "refine_design",
          "actor": "designer",
          "condition": "problems discovered in prototype",
          "description": "Iterate on design to fix discovered issues"
        },
        {
          "id": "polish_feature",
          "action": "apply_visual_polish",
          "actor": "designer",
          "condition": "prototype works correctly",
          "description": "Add visual refinement (color, icons, spacing)"
        },
        {
          "id": "ship_feature",
          "action": "merge_to_main",
          "actor": "developer",
          "description": "Merge polished feature to main"
        }
      ]
    }
  },
  "fields": [
    {
      "name": "priority_features",
      "type": "text",
      "label": "Ranked list of features to design and build",
      "required": false
    },
    {
      "name": "current_feature",
      "type": "text",
      "label": "Feature currently in design cycle",
      "required": false
    },
    {
      "name": "design_phase",
      "type": "text",
      "label": "Current phase (requirements, wireframe, prototype, iterate, polish)",
      "required": false
    }
  ],
  "tags": [
    "design-process",
    "methodology",
    "workflow"
  ],
  "related": [
    {
      "feature": "design-polish",
      "type": "optional",
      "reason": "Polish is applied after core feature is working"
    },
    {
      "feature": "form-design",
      "type": "recommended",
      "reason": "Forms are common features to start with"
    },
    {
      "feature": "accessibility",
      "type": "required",
      "reason": "Accessibility is considered from start, not bolted on later"
    }
  ],
  "agi": {
    "goals": [
      {
        "id": "reliable_feature_first_design",
        "description": "Start design with core features and user workflows before deciding on app shell or navigation. This prevents design paralysis and ensures information architecture is driven by real requirements.\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": "new_feature_being_designed",
          "permission": "autonomous"
        },
        {
          "action": "feature_design_ready_for_implementation",
          "permission": "autonomous"
        },
        {
          "action": "working_prototype_reveals_problems",
          "permission": "autonomous"
        },
        {
          "action": "multiple_features_planned",
          "permission": "autonomous"
        }
      ]
    },
    "tradeoffs": [
      {
        "prefer": "accessibility",
        "over": "aesthetics",
        "reason": "UI must be usable by all users including those with disabilities"
      }
    ],
    "coordination": {
      "protocol": "request_response",
      "consumes": [
        {
          "capability": "accessibility",
          "from": "accessibility",
          "fallback": "degrade"
        }
      ]
    }
  }
}