Skip to content
Dev MCP

New Project Process

For greenfield projects, follow this order exactly. Each step depends on the output of the previous one. The workflow is the same for all platforms — the active platform agent determines the specifics.

  1. Activate the Platform Agent

    activate_agent("theme-developer")      # Liquid themes
    activate_agent("hydrogen-developer")   # Hydrogen storefronts

  2. Project Scaffolding

    Run setup from Dev MCP

    Setup detects the project type from the active agent, scaffolds the project, creates all configuration files, and saves the agent to project memory for future sessions.

  3. Design System Extraction

    design-system

    Provide Figma frame URLs for colours, typography, spacing, icons, and logos. The token file location and format are determined by the active agent.

  4. Build Primitives

    build the button component from Figma [figma desktop MCP link]

    Build atomic components mapped to Figma. These form the foundation — every composite will reference them.

  5. Build Composites

    build the product card component from Figma [figma desktop MCP link]

    Compose higher-level components from the primitives created in Step 4. The composition plan must reference existing components; duplication is never acceptable.

  6. Build Pages

    build the hero section from Figma [figma desktop MCP link]

    Assemble page-level components and routes from the component library.

  7. Refinement & QA

    refine

    Run visual QA against Figma. Fixes cascade following the active agent’s fix order.

  8. Quality Pass

    performance
    accessibility
    seo
    audit

    Run all quality commands. Address findings before launch.

  9. Maintenance (ongoing)

    maintenance

    Run periodically to check dependency health, platform version upgrades, and configuration drift.