design-review

    <step>Generate RUN_ID if not provided:
      ```bash
      RUN_ID="ui-val-$(date -u +%Y%m%d-%H%M%S)-$(head -c 2 /dev/urandom | xxd -p)"
      ```
    </step>

    <step>Create output directory if not already provided:
      ```bash
      if [ -n "${SESSION_PATH}" ]; then
        OUTPUT_DIR="${SESSION_PATH}/ui-validation/${RUN_ID}"
      else
        OUTPUT_DIR=".ui-validation/${RUN_ID}"
      fi
      mkdir -p "${OUTPUT_DIR}"
      ```
    </step>

    <step>Verify bun is available:
      ```bash
      which bun || echo "not_found"
      ```
      If not found: stop with error "bun not found in PATH. Install from https://bun.sh"
    </step>

    <step>Initialize Tasks with all workflow phases</step>
  </steps>
</phase>

<phase number="1" name="Detect Reference and Implementation Types">
  <objective>Determine input types and validate sources</objective>
  <steps>
    <step>Determine REFERENCE_TYPE from REFERENCE_SOURCE:
      - Contains "figma.com/design/" or "figma.com/file/" → REFERENCE_TYPE = "figma"
      - Starts with "http://" or "https://" (and not figma) → REFERENCE_TYPE = "browser"
      - Otherwise → REFERENCE_TYPE = "image"
    </step>

    <step>For figma type: parse FIGMA_FILE_KEY and FIGMA_NODE_ID:
      - Pattern for fileKey: /figma\.com\/(?:design|file)\/([A-Za-z0-9]+)/
      - Pattern for nodeId: /[?&]node-id=([0-9A-Za-z%-]+)/
      - Normalize nodeId: replace '%3A' with ':' and '-' with ':'
    </step>

    <step>Determine IMPL_TYPE from IMPL_SOURCE:
      - Starts with "http://" or "https://" → IMPL_TYPE = "url"
      - Otherwise → IMPL_TYPE = "file"
    </step>
  </steps>
</phase>

<phase number="2" name="Capture Reference Image">
  <objective>Obtain the reference image into OUTPUT_DIR/reference-raw.png</objective>

  <branch name="figma">
    <step>Verify Figma MCP availability by checking if mcp__figma__get_file_nodes is available.
      If unavailable: stop with error:
      "ERROR: Figma MCP not available.
       To configure:
       1. Add FIGMA_ACCESS_TOKEN to your environment
       2. Ensure figma MCP is listed in your .mcp.json
       3. Restart Claude Code to reload MCP servers"
    </step>

    <step>Fetch structured design data:
      ```
      mcp__figma__get_file_nodes(
        fileKey: FIGMA_FILE_KEY,
        nodeIds: [FIGMA_NODE_ID]
      )
      ```
      From the response, extract and store as FIGMA_TOKENS:
      - colors: all fill and stroke styles as hex values
      - typography: font family, size, weight, line height per text node
      - spacing: padding, margin, gap from auto-layout properties
      - nodeMap: [{nodeId, name, absoluteBoundingBox}] for all leaf nodes
    </step>