The Surveyor

Mission Role & Focus

The Surveyor specializes in design-to-code alignment by giving the agent visual spatial awareness, ensuring UI layouts exactly match the designer's intent without manual pixel-pushing.

The Target Feature

Refactor the Topic Backlog card component, the "Add Topic" form, and page layout to conform to a specific designer mockup.

The Agent Friction

Standard developer agents style code blindly. Feeding them low-resolution screenshots results in guessing layout margins, paddings, flex configurations, and colors. This leads to endless iterations of visual tweaking.

Explorer Setup & Pointers

• Figma Credentials: Access your Figma Account settings and generate a Personal Access Token.
• Figma Mockup: Acquire the Figma File URL and the specific Node ID of the target mockup frame (found in the URL query parameter node-id=... in your browser).
• Figma MCP Server: Register the official Figma MCP server in your harness settings (e.g., inside ~/.claude/settings.json or .agent/mcp.json).

  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    }
  }

• Let the Agent Query: Prompt the agent to inspect the Figma file using the get_file or get_file_nodes tool provided by the newly registered MCP server.

Mission Objectives

1. Configure and run the Figma MCP server locally.
2. Spec out the styling change by running /opsx:propose backlog-styling. Show that the agent uses the Figma MCP tools to extract margins, paddings, and CSS color tokens automatically.
3. Implement and verify the component styles, ensuring the agent uses variables defined in index.css or creates matching design tokens.
4. Discuss in the Show-and-Tell how direct design API telemetry improves visual code generation compared to manual design translation.