设计转代码MCP服务器

# 1. Clone and install
git clone https://github.com/oogleyskr/stitch-mcp-server.git
cd stitch-mcp-server
npm install

# 2. Build
npm run build

# 3. Set authentication (pick one)
export STITCH_API_KEY="your-api-key"
# OR
export STITCH_ACCESS_TOKEN="your-access-token"
# OR have gcloud CLI configured

export STITCH_API_KEY="AIza..."

export STITCH_ACCESS_TOKEN="ya29...."
export GOOGLE_CLOUD_PROJECT="my-project-id"  # optional, for billing

gcloud auth login
gcloud auth application-default login
export GOOGLE_CLOUD_PROJECT="my-project-id"  # optional

src/
├── index.ts              # Entry point — MCP server setup, tool routing, project resolution
├── auth.ts               # Authentication (API key, access token, gcloud CLI fallback)
├── stitch-client.ts      # JSON-RPC client, download helpers, screen list parser
├── types.ts              # TypeScript interfaces (auth, RPC, tools, design context)
└── tools/
    ├── helpers.ts         # Shared utilities (extractUnique, extractCssValues, validators)
    ├── upstream.ts        # Proxy to upstream Stitch tools (7 tools)
    ├── code.ts            # Screen code/image retrieval, site building (4 tools)
    ├── workspace.ts       # Workspace project management (3 tools)
    ├── design.ts          # Design context, tokens, responsive, batch, templates (6 tools)
    ├── analysis.ts        # Accessibility, comparison, components, design diff (4 tools)
    ├── export.ts          # Style guides, design system export, trends, bulk export (4 tools)
    ├── codegen.ts         # Screen-to-React conversion (1 tool)
    ├── integration.ts     # Screen-to-PM-issue bridge (1 tool)
    └── advanced.ts        # Tailwind config, CSS vars, validation, dark mode, variants, summary (6 tools)

{
  "mcpServers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

{
  "name": "stitch",
  "command": "node",
  "args": ["/path/to/stitch-mcp-server/dist/index.js"],
  "env": {
    "STITCH_API_KEY": "your-api-key"
  },
  "tags": ["design", "ui", "stitch", "google"]
}

{
  "mcpServers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

{
  "mcp.servers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

User: "Generate a dashboard screen and convert it to React"

1. generate_screen_from_text → Creates the design in Stitch
2. get_screen_code           → Fetches the HTML
3. screen_to_react           → Converts to a React/TSX component with Tailwind
4. screen_to_tailwind_config → Extracts a matching tailwind.config.ts

User: "Check if our screens follow the design system"

1. project_summary          → Overview of all screens with consistency score
2. validate_design_system   → Check each screen against approved tokens
3. compare_designs          → Compare inconsistent screens side-by-side
4. export_design_system     → Export the corrected design system for handoff

User: "Create a dark mode version of our app"

1. list_screens             → Find all screens in the project
2. extract_design_context   → Extract the current design DNA
3. generate_dark_mode       → Generate dark variants for each screen
4. screen_to_css_variables  → Export CSS vars with dark-mode overrides

User: "Build a component library from our designs"

1. extract_components           → Pull buttons, cards, forms, nav from a screen
2. generate_component_variants  → Create 3-5 visual variants of each component
3. screen_to_react              → Convert each variant to React
4. generate_style_guide         → Create visual documentation

User: "Export everything from this project for handoff"

1. project_summary        → Get the full project overview
2. export_all_screens     → Bulk export all HTML + screenshots
3. export_design_system   → Export tokens, components, and documentation
4. generate_design_tokens → Generate CSS variables and Tailwind config

User: "Create a SaaS app prototype"

1. generate_from_template → "dashboard" with "dark theme, analytics focus"
2. generate_from_template → "settings" with "minimal style, dark theme"
3. generate_from_template → "pricing" with "3 tiers, annual toggle"
4. generate_from_template → "login" with "social auth, dark background"
5. build_site             → Map all screens to routes

async function handleMyNewTool(
  args: Record<string, unknown>,
  creds: AuthCredentials,
  projectId?: string
): Promise<McpToolResult> {
  // 1. Validate inputs
  const pid = requireString(args.projectId, "projectId");

  // 2. Fetch data
  const html = await fetchScreenHtml(pid, screenId, creds, projectId);

  // 3. Process
  const result = analyzeHtml(html);

  // 4. Return structured result
  return {
    content: [{
      type: "text",
      text: JSON.stringify({ success: true, ...result }, null, 2),
    }],
  };
}