设计系统生成工具

npx senior-design-director-mcp install

{
  "mcpServers": {
    "senior-design-director": {
      "command": "npx",
      "args": ["-y", "senior-design-director-mcp"]
    }
  }
}

claude mcp add senior-design-director -- npx -y senior-design-director-mcp

{
  "mcpServers": {
    "senior-design-director": {
      "command": "npx",
      "args": ["-y", "senior-design-director-mcp"]
    }
  }
}

{
  "mcpServers": {
    "senior-design-director": {
      "command": "npx",
      "args": ["-y", "senior-design-director-mcp"]
    }
  }
}

[mcp_servers.senior-design-director]
command = "npx"
args = ["-y", "senior-design-director-mcp"]

codex mcp add senior-design-director -- npx -y senior-design-director-mcp

npm install -g senior-design-director-mcp

npx skills add https://github.com/AbrahamOO/senior-design-director-mcp --skill senior-design-director

complete-project-discovery   → 15-question brief: audience, brand, CTA, tone, platform
get-discovery-questions      → Fetch all questions to prepare answers in advance
get-project-brief            → Review the saved brief
update-project-brief         → Refine any field without re-running discovery

generate-user-flow           → Entry points, task states, decision forks, error/empty states, conversion checkpoints

generate-color-palette       → Primary palette + two alternatives, with hex, RGB, usage rationale
validate-color-contrast      → WCAG contrast ratio check for any two hex colors
create-design-system         → Full design tokens (pt for iOS, dp for Android, rem for web)
generate-component-library   → Platform-native component specs

generate-content-architecture  → Three-act scroll narrative and page structure
generate-copy-guidelines       → Voice, vocabulary, headline formulas, CTA copy

check-accessibility            → WCAG 2.2 AA compliance report
get-accessibility-checklist    → Full checklist for implementation review
analyze-performance            → Core Web Vitals analysis
get-core-web-vitals-targets    → Good / needs improvement / poor thresholds
get-performance-budget         → Resource budgets for JS, CSS, images, fonts

check-accessibility            → WCAG 2.2 + VoiceOver/TalkBack + touch targets
get-accessibility-checklist    → 17-item mobile checklist (Dynamic Type, Reduce Motion…)
analyze-mobile-performance     → Cold/warm launch, frame rate, memory, battery analysis
get-mobile-performance-targets → iOS and Android benchmark tables

template://component/*         → Ready-to-use HTML/CSS components
reference://easing             → Animation easing functions and timing
reference://gsap-motion        → Full GSAP reference for scroll animations
reference://webflow-animation  → Webflow IX2 patterns and performance rules

reference://ios-hig            → Apple HIG: navigation, Dynamic Type, safe areas, SF Symbols
reference://material-design    → Material Design 3: dynamic color, type scale, motion

generate-3d-experience         → Full R3F scene, camera spline, scroll hook, shaders, CSS layout

list-brand-templates   → Lists all 72 brands grouped by industry with their resource URIs
brand://{slug}         → Full design reference for that brand (e.g. brand://stripe, brand://airbnb)

~/.senior-design-director-mcp/projects/{project-name}.json

src/
├── index.ts                   # MCP server, tool/resource registration, request handlers
├── install.ts                 # One-command installer: detects clients, writes configs, installs skill
├── types/
│   └── index.ts               # ProjectBrief, ColorPalette, DesignSystem, AccessibilityReport, etc.
├── tools/
│   ├── projectDiscovery.ts    # Discovery questions, brief builder, storage CRUD
│   ├── colorPalette.ts        # Palette generation, contrast validation
│   ├── designSystem.ts        # Typography, spacing, breakpoints, motion, component specs
│   ├── contentArchitecture.ts # Three-act structure, page architecture, copy guidelines
│   ├── accessibility.ts       # WCAG compliance checker, checklist
│   ├── performance.ts         # Core Web Vitals analysis, budget guidelines
│   └── immersive3d.ts         # Scroll-driven 3D experience generator (R3F, camera spline, shaders)
├── resources/
│   ├── templates.ts           # Component templates and design references
│   └── designTemplates.ts     # 72 brand design templates loader
templates/                     # Brand design reference files (airbnb.md, stripe.md, …)
└── utils/
    └── storage.ts             # File-based persistent storage for project briefs

# Install dependencies
npm install

# Build TypeScript
npm run build

# Watch mode (rebuilds on file changes)
npm run watch

# Run directly without building
npm run dev

echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}' | node dist/index.js