npm install

npm run build

{
  "mcpServers": {
    "ai-design-expert": {
      "command": "node",
      "args": ["dist/mcp/server.js"]
    }
  }
}

{
  "mcpServers": {
    "ai-design-expert": {
      "command": "node",
      "args": ["/absolute/path/to/ai-design-expert/dist/mcp/server.js"]
    }
  }
}

用户: 请分析 docs/requirements/raw/example-landing-page.md 并生成设计稿

用户: 请分析 docs/requirements/raw/example-landing-page.md 并生成设计稿

用户: 请分析 docs/references/design.png 并提取 Design Tokens

用户: 根据 project-req.md 和 reference.png 生成设计稿，并进行视觉审计

{
  "filePath": "docs/requirements/raw/example.md"
}

{
  "imagePath": "docs/references/design.png"
}

{
  "requirement": {...},
  "tokens": {...},
  "outputPath": "output/"
}

{
  "designCode": "<html>...</html>",
  "referenceImagePath": "docs/references/design.png"
}

ai-design-expert/
├── 📄 配置文件
│   ├── .claude.json               # Claude Code 配置
��   ├── package.json               # 项目依赖
│   ├── skill.json                 # Skill 定义
│   └── tsconfig.json              # TypeScript 配置
│
├── 📚 文档
│   ├── CLAUDE.md                  # AI 行为指令
│   ├── README.md                  # 本文件
│   ├── INSTALL.md                 # 详细安装指南
│   └── PROGRESS.md                # 进度追踪
│
├── 🔧 MCP 服务器 (src/mcp/)
│   ├── server.ts                  # 服务器入口
│   ├── tools/                     # 4 个工具实现
│   │   ├── index.ts
│   │   ├── requirement-analyzer.ts
│   │   ├── token-extractor.ts
│   │   ├── design-generator.ts
│   │   └── visual-auditor.ts
│   └── utils/
│       └── vision-client.ts       # 4.5v MCP 集成
│
├── 📦 工具库 (src/lib/)
│   ├── index.ts
│   ├── utils.ts                   # 通用工具函数
│   └── token-parser.ts            # Token 解析器
│
├── 🎨 组件模板 (src/components/)
│   └── atoms/                     # 原子组件参考
│       ├── Button.tsx
│       ├── Card.tsx
│       └── index.ts
│
├── 🎯 Design Tokens
│   └── src/theme/tokens.json      # 默认设计变量
│
├── 📝 提示词模板 (prompts/)
│   ├── analyze-requirement.md
│   ├── extract-design-tokens.md
│   └── generate-design-spec.md
│
└── 📂 示例数据 (docs/requirements/)
    └── raw/                       # 需求文档
        ├── example-landing-page.md
        └── example-dashboard.md

用户输入
  ↓
1. analyze_requirement("docs/project-brief.md")
   → 需求分析 JSON
  ↓
2. extract_tokens("docs/reference-design.png")
   → Design Tokens JSON
  ↓
3. generate_design({ requirement, tokens, outputPath: "output/" })
   → 生成 index.html + tailwind.config.js
  ↓
4. audit_visual({ designCode, referenceImagePath })
   → 审计报告 + 改进建议
  ↓
最终交付：完整的设计稿

# 开发模式（测试 MCP Server）
npm run dev
# 应该看到: ✅ AI 设计专家 MCP 服务器已启动

# 构建
npm run build

# 运行测试
npm test

# 代码检查
npm run lint

# 格式化代码
npm run format

npm run dev
# 应该看到: ✅ AI 设计专家 MCP 服务器已启动

rm -rf node_modules package-lock.json
npm install
npm run build

npm run build
# 查看具体错误信息并修复

{
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#6366f1",
    ...
  }
}