Senior Design Director MCP

MCP高级设计总监

](https://www.npmjs.com/package/senior-design-director-mcp) ](https://www.npmjs.com/package/senior-design-director-mcp)  ](https://nodejs.org)

MCP高级设计总监 赋予您的AI编码代理高级创意总监的能力。它运行一个结构化的15个问题的项目发现过程，为web和移动设备（iOS、Android、React Native、Flutter）生成完整的设计系统，验证WCAG的可访问性，分析核心web Vitals，并提供生产就绪的组件模板——所有这些都基于一个持久的项目简报，因此每个设计决策都保持一致。

适用于 克劳德代码, 光标, 帆板运动, OpenAI Codex, 克劳德桌面版，以及任何兼容MCP的客户端。

______________________________________________________________________

为什么存在

大多数AI设计工具都会给出通用的答案。该服务器首先深入了解您的项目——受众、品牌定位、竞争格局、叙事弧线——并从该背景中得出每种颜色、排版和内容决策。

• 简短驱动 --每一条推荐都可以追溯到网站是为谁服务的，以及它必须完成什么
• 系统的 --颜色、类型、间距、运动和组件都连接到一个设计系统
• 符合标准 --WCAG 2.1 AA可访问性和核心网络重要信息内置于工作流程中，而不是在最后附加
• 持久 --项目简报在服务器重启后仍然有效，并在每次对话中携带上下文
• 电影的 --当项目需要时，在Z轴上生成具有真实深度的滚动驱动3D体验

______________________________________________________________________

快速开始

一个命令设置（推荐）

运行一次以配置所有MCP客户端并安装代理技能：

npx senior-design-director-mcp install

检测安装了哪些客户端，为每个客户端编写正确的配置，并安装代理技能。运行后重新启动所有打开的客户端。

手动设置——选择您的客户

克劳德桌面版

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json 窗户： %APPDATA%\Claude\claude_desktop_config.json

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

保存后重新启动Claude Desktop。

克劳德代码（CLI）

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

或添加到 ~/.claude.json （全球）或 .mcp.json （项目级）使用与Claude Desktop相同的JSON格式。

光标

打开 设置→ 光标设置→ MCP，单击 添加新的MCP服务器，然后粘贴：

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

帆板运动

macOS/Linux： ~/.codeium/windsurf/mcp_config.json 窗户： %USERPROFILE%\.codeium\windsurf\mcp_config.json

或通过 级联面板→ MCP图标→ 添加服务器:

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

食品法典委员会（OpenAI）

添加 ~/.codex/config.toml （全球）或 .codex/config.toml （项目）：

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

或者通过CLI：

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

全局安装（可选）

npm install -g senior-design-director-mcp

然后使用 senior-design-director-mcp 作为命令——否 npx 或 -y 需要。

代理技能（手册）

如果您更喜欢只安装代理技能而不安装自动安装程序：

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

第2阶段——用户流

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

在设计系统之前运行此程序。平台感知——移动流遵循iOS HIG/Material 3导航模式；web流包括每页的滚动深度目标。

第3阶段——设计系统

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

第4阶段——内容战略

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

第5阶段——质量保证

网状物：

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

第6阶段——实施

网状物：

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

第7阶段——沉浸式3D（可选）

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

______________________________________________________________________

工具参考

项目发现

complete-project-discovery --所需参数：

情绪基调选项： 充满活力与灵感·冷静与值得信赖·精致与高端·俏皮与平易近人·大胆与叛逆·热情与人性·专业与权威·创新与未来·脚踏实地与真实

所有其他 complete-project-discovery 参数是可选的——尽可能多地填写以获得更精确的输出。看 完整参数列表 在......下面

______________________________________________________________________

色彩与设计系统

______________________________________________________________________

内容和文案

______________________________________________________________________

无障碍

______________________________________________________________________

演出

______________________________________________________________________

沉浸式3D

参数：

______________________________________________________________________

资源参考

资源通过MCP资源系统访问，并返回即用型内容。

组件模板

所有组件模板都使用CSS自定义属性(--color-primary, --color-secondary其直接映射到所生成的设计系统。

品牌设计模板

72个真实世界的品牌参考，涵盖颜色系统、排版、间距、运动和UI模式。使用 list-brand-templates 按行业浏览，然后将任何模板作为MCP资源加载。

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

可以同时存储多个项目。可以直接从文件系统检查或备份公文包。

______________________________________________________________________

常见问题

这适用于Claude Desktop和Claude Code吗？ 对。跑 npx senior-design-director-mcp install 并且它自动配置两者。

我需要永久安装吗？ 否。运行一次命令安装程序。之后，服务器通过自动启动 npx 每当你的客户端连接时，Node.js 18+是唯一的先决条件。

它是否适用于非Claude MCP客户？ 对。服务器使用标准的模型上下文协议，并与任何兼容MCP的客户端一起工作。

我可以在不重新运行完整发现的情况下更新简报吗？ 对。使用 update-project-brief 更改特定字段。服务器将更新合并到现有简报中。

它是生成实际代码还是只是规范？ 两者都有。设计系统工具返回Claude用于编写实现代码的结构化规范。 template://component/* 资源提供即用型HTML/CSS。 generate-3d-experience 输出完整的、可复制粘贴的TypeScript文件。

运行安装命令后，代理技能未出现。 安装程序尝试 skills CLI优先；如果不可用，则将技能文件直接写入 ~/.claude/skills/senior-design-director/SKILL.md。重新启动客户端。如果它仍然没有出现，请运行手动回退： npx skills add https://github.com/AbrahamOO/senior-design-director-mcp --skill senior-design-director --yes --global

它针对的是什么设计栈？ 堆栈不可知。将设计标记输出为CSS自定义属性、组件HTML/CSS和结构化JSON规范，Claude可以适应React、Vue、Svelte、Webflow或任何其他堆栈。

这与直接问Claude设计问题有何不同？ 如果没有这个服务器，Claude在对话之间就不会记住你的项目，也不会给出通用的答案。此服务器将详细的项目简报保存到磁盘上，因此每个响应都基于您的特定受众、定位和目标，并且上下文会自动跨会话传递。

______________________________________________________________________

complete-project-discovery 可选参数

尽可能多地填写，以获得更精确的设计输出。

______________________________________________________________________

建筑

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

所有工具都是纯函数，接受纯参数并返回结构化JSON。服务器将每个都注册为MCP工具，并使用完整的JSON模式进行参数验证。

______________________________________________________________________

发展

# 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

通过管道传输MCP JSON-RPC初始化消息手动测试服务器：

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

______________________________________________________________________

设计原则

• 一次性系统 --每个颜色、类型选择和间距值都连接到一个系统
• 装饰前的叙述 --内容架构来自故事，而不是布局偏好
• 性能即设计 --缓慢的经历是破碎的经历
• 可访问性作为基线 --WCAG AA合规性是底线，而不是天花板
• 有目的的运动 --动画引导注意力、信号状态并强化品牌
• 简短的驱动决策 --每一条推荐都可以追溯到网站是为谁服务的，以及它必须完成什么
• 装饰深度 --3D体验赢得每一个多边形；几何学服务于叙事

______________________________________________________________________

贡献

欢迎捐款。请确保：

• TypeScript类型定义正确
• 工具返回结构化JSON响应
• 资源使用适当的MIME类型
• 代码遵循现有模式

______________________________________________________________________

许可证

麻省理工学院