feat(team-uidesign): integrate ui-ux-pro-max design intelligence

- researcher: add Stream 4 (design intelligence via Skill invocation), generate design-intelligence.json - designer: consume recommended colors/typography/style for token defaults, add anti-patterns to specs - reviewer: add 5th audit dimension (Industry Compliance 20%), rebalance weights, anti-pattern checking - implementer: inject stack guidelines and anti-patterns into code-developer prompts, add validation - coordinator: add industry selection, industryConfig mapping, update shared memory and session schema - SKILL.md: update shared memory schema, add design intelligence data flow docs, session directory
2026-02-27 09:13:07 +08:00 · 2026-02-17 21:51:34 +08:00
parent d47b194df7
commit 1f53f2de27
6 changed files with 233 additions and 26 deletions
--- a/.claude/skills/team-uidesign/SKILL.md
+++ b/.claude/skills/team-uidesign/SKILL.md
@@ -221,18 +221,44 @@ Convergence: audit.score >= 8 && audit.critical_count === 0

 ```json
 {
+  "design_intelligence": {},
  "design_token_registry": {
-    "colors": {}, "typography": {}, "spacing": {}, "shadows": {}
+    "colors": {}, "typography": {}, "spacing": {}, "shadows": {}, "borders": {}
  },
  "style_decisions": [],
  "component_inventory": [],
  "accessibility_patterns": [],
-  "audit_history": []
+  "audit_history": [],
+  "industry_context": { "industry": "", "config": {}, "detected_stack": "" }
 }
 ```

 每个角色在 Phase 2 读取，Phase 5 写入自己负责的字段。

+### Design Intelligence (ui-ux-pro-max)
+
+Researcher 通过 `Skill(skill="ui-ux-pro-max", args="...")` 获取设计智能，写入 `design-intelligence.json`，下游角色消费：
+
+```
+researcher (Stream 4)
+  │ Skill("ui-ux-pro-max", args="<industry> <keywords> --design-system")
+  │ Skill("ui-ux-pro-max", args="accessibility animation responsive --domain ux")
+  │ Skill("ui-ux-pro-max", args="<keywords> --stack <detected-stack>")
+  ↓
+design-intelligence.json
+  ├─→ designer: recommended colors/typography/style → token values, anti-patterns → component specs
+  ├─→ reviewer: anti-patterns → Industry Compliance audit dimension (20% weight)
+  └─→ implementer: stack guidelines → code generation, anti-patterns → validation
+```
+
+**数据流**:
+- `design_system.colors/typography/style` → designer 用于令牌默认值（recommended-first 模式）
+- `recommendations.anti_patterns[]` → reviewer 审查合规性，designer/implementer 避免违反
+- `stack_guidelines` → implementer 代码生成约束
+- `ux_guidelines[]` → designer 组件规格中的实现提示
+
+**降级策略**: 当 ui-ux-pro-max 不可用时，使用 LLM 通用知识生成默认值，`_source` 标记为 `"llm-general-knowledge"`。
+
 ## Session Directory

 ```
@@ -242,7 +268,9 @@ Convergence: audit.score >= 8 && audit.critical_count === 0
 ├── research/                   # Researcher output
 │   ├── design-system-analysis.json
 │   ├── component-inventory.json
-│   └── accessibility-audit.json
+│   ├── accessibility-audit.json
+│   ├── design-intelligence.json       # ui-ux-pro-max 设计智能
+│   └── design-intelligence-raw.md     # ui-ux-pro-max 原始输出
 ├── design/                     # Designer output
 │   ├── design-tokens.json
 │   ├── component-specs/
@@ -376,3 +404,5 @@ Session: ${sessionFolder}
 | 双轨同步失败 | 回退到单轨顺序执行 |
 | 设计令牌冲突 | Reviewer 仲裁，Coordinator 介入 |
 | BUILD 找不到设计文件 | 等待 Sync Point 或上报 |
+| ui-ux-pro-max 不可用 | 降级为 LLM 通用知识，`_source: "llm-general-knowledge"` |
+| 行业反模式检查失败 | Reviewer 标记 Industry Compliance 维度为 N/A |
--- a/.claude/skills/team-uidesign/roles/coordinator.md
+++ b/.claude/skills/team-uidesign/roles/coordinator.md
@@ -80,6 +80,18 @@ AskUserQuestion({
        { label: "完整设计系统", description: "从零构建完整设计系统（令牌 + 组件 + 布局）" }
      ]
    },
+    {
+      question: "产品类型/行业：",
+      header: "Industry",
+      multiSelect: false,
+      options: [
+        { label: "SaaS/科技", description: "SaaS 产品、开发者工具、科技平台" },
+        { label: "电商/零售", description: "电商平台、零售网站、商品展示" },
+        { label: "医疗/金融", description: "医疗健康、金融服务（严格合规要求）" },
+        { label: "教育/内容", description: "教育平台、内容管理、媒体" },
+        { label: "其他", description: "其他行业或通用设计" }
+      ]
+    },
    {
      question: "设计约束：",
      header: "Constraint",
@@ -101,6 +113,16 @@ const pipelineMap = {
  '完整设计系统': 'full-system'
 }
 const pipeline = pipelineMap[scopeChoice]
+
+// Industry config — affects audit strictness and design intelligence
+const industryChoice = userAnswers.Industry
+const industryConfig = {
+  'SaaS/科技': { strictness: 'standard', mustHave: ['响应式', '暗色模式'] },
+  '电商/零售': { strictness: 'standard', mustHave: ['响应式', '快速加载'] },
+  '医疗/金融': { strictness: 'strict', mustHave: ['WCAG AA', '高对比度', '清晰排版'] },
+  '教育/内容': { strictness: 'standard', mustHave: ['可读性', '响应式'] },
+  '其他': { strictness: 'standard', mustHave: [] }
+}[industryChoice] || { strictness: 'standard', mustHave: [] }
 ```

 ### Phase 2: Create Team + Spawn Workers
@@ -119,11 +141,13 @@ Bash(`mkdir -p "${sessionFolder}/research" "${sessionFolder}/design/component-sp

 // Initialize shared-memory.json
 const sharedMemory = {
+  design_intelligence: {},
  design_token_registry: { colors: {}, typography: {}, spacing: {}, shadows: {}, borders: {} },
  style_decisions: [],
  component_inventory: [],
  accessibility_patterns: [],
  audit_history: [],
+  industry_context: { industry: industryChoice, config: industryConfig },
  _metadata: { created_at: new Date().toISOString(), pipeline: pipeline }
 }
 Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
@@ -141,7 +165,8 @@ const teamSession = {
  completed_tasks: [],
  sync_points: [],
  gc_state: { round: 0, max_rounds: 2, converged: false },
-  user_preferences: { scope: scopeChoice, constraints: constraintChoices },
+  user_preferences: { scope: scopeChoice, constraints: constraintChoices, industry: industryChoice },
+  industry_config: industryConfig,
  pipeline_progress: {
    total: pipeline === 'component' ? 4 : pipeline === 'system' ? 6 : 7,
    completed: 0
--- a/.claude/skills/team-uidesign/roles/designer.md
+++ b/.claude/skills/team-uidesign/roles/designer.md
@@ -62,6 +62,14 @@ try {
  }
 } catch {}

+// Read design intelligence from ui-ux-pro-max (if available)
+let designIntelligence = null
+try {
+  designIntelligence = JSON.parse(Read(`${sessionFolder}/research/design-intelligence.json`))
+} catch {}
+const recommended = designIntelligence?.design_system || {}
+const antiPatterns = designIntelligence?.recommendations?.anti_patterns || []
+
 // If GC fix task, read audit feedback
 let auditFeedback = null
 if (isFixTask) {
@@ -85,20 +93,22 @@ if (isTokenTask) {
  const stylingApproach = research.designSystem?.styling_approach || 'css-variables'

  // Generate design tokens following W3C Design Tokens Format
+  // Use recommended values from design intelligence (ui-ux-pro-max), fallback to defaults
  const designTokens = {
    "$schema": "https://design-tokens.github.io/community-group/format/",
+    "_source": designIntelligence ? `ui-ux-pro-max (${designIntelligence._source})` : "defaults",
    "color": {
      "primary": {
        "$type": "color",
-        "$value": { "light": "#1976d2", "dark": "#90caf9" }
+        "$value": { "light": recommended.colors?.primary || "#1976d2", "dark": recommended.colors?.primaryDark || "#90caf9" }
      },
      "secondary": {
        "$type": "color",
-        "$value": { "light": "#dc004e", "dark": "#f48fb1" }
+        "$value": { "light": recommended.colors?.secondary || "#dc004e", "dark": recommended.colors?.secondaryDark || "#f48fb1" }
      },
      "background": {
        "$type": "color",
-        "$value": { "light": "#ffffff", "dark": "#121212" }
+        "$value": { "light": recommended.colors?.background || "#ffffff", "dark": "#121212" }
      },
      "surface": {
        "$type": "color",
@@ -118,7 +128,7 @@ if (isTokenTask) {
    },
    "typography": {
      "font-family": {
-        "base": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] },
+        "base": { "$type": "fontFamily", "$value": recommended.typography?.heading || ["Inter", "system-ui", "sans-serif"] },
        "mono": { "$type": "fontFamily", "$value": ["JetBrains Mono", "monospace"] }
      },
      "font-size": {
@@ -220,6 +230,12 @@ if (isComponentTask) {
 | primary | Main action | color.primary |
 | secondary | Secondary action | color.secondary |
 | outline | Ghost style | border only |
+
+## Anti-Patterns (from Design Intelligence)
+${antiPatterns.length > 0 ? antiPatterns.map(p => \`- ❌ \${p}\`).join('\\n') : '(No industry-specific anti-patterns)'}
+
+## Implementation Hints
+${designIntelligence?.ux_guidelines?.slice(0, 3).map(g => \`- 💡 \${g}\`).join('\\n') || '(Standard implementation)'}
 `

  // Write spec for each component
--- a/.claude/skills/team-uidesign/roles/implementer.md
+++ b/.claude/skills/team-uidesign/roles/implementer.md
@@ -70,6 +70,15 @@ if (isComponentBuild) {
 const auditFiles = Glob({ pattern: `${sessionFolder}/audit/audit-*.md` })
 const latestAudit = auditFiles.length > 0 ? Read(auditFiles[auditFiles.length - 1]) : null

+// Read design intelligence for stack guidelines and anti-patterns
+let designIntelligence = null
+try {
+  designIntelligence = JSON.parse(Read(`${sessionFolder}/research/design-intelligence.json`))
+} catch {}
+const stackGuidelines = designIntelligence?.stack_guidelines || {}
+const antiPatterns = designIntelligence?.recommendations?.anti_patterns || []
+const uxGuidelines = designIntelligence?.ux_guidelines || []
+
 // Detect project tech stack from codebase
 // Read existing project patterns for code style alignment
 ```
@@ -184,6 +193,12 @@ Files:
 - Focus indicator visible (use design token)
 - Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)

+### Anti-Patterns to Avoid (from Design Intelligence)
+${antiPatterns.map(p => \`- ❌ \${p}\`).join('\\n') || '(None specified)'}
+
+### Stack Guidelines
+${JSON.stringify(stackGuidelines, null, 2) || '(Standard implementation)'}
+
 ### Constraints
 - NO hardcoded colors/spacing — all from design tokens
 - Follow existing codebase patterns for component structure
@@ -232,7 +247,16 @@ if (isComponentBuild) {
    if (hardcoded.length > 0) {
      // Flag as warning — should use design tokens
    }
+    // Check for cursor: pointer on interactive elements
+    // Check for focus styles (outline or box-shadow on :focus)
+    // Check for responsive media queries
  })
+
+  // Anti-pattern self-check (from design intelligence)
+  if (antiPatterns.length > 0) {
+    // Verify implementation doesn't violate any anti-patterns
+    // e.g., check for patterns like "too many font sizes", "inconsistent spacing"
+  }
 }
 ```

--- a/.claude/skills/team-uidesign/roles/researcher.md
+++ b/.claude/skills/team-uidesign/roles/researcher.md
@@ -8,7 +8,7 @@ Design system analyst responsible for current state assessment, component invent
 - **Task Prefix**: `RESEARCH`
 - **Responsibility Type**: Read-only analysis
 - **Responsibility**: Design system analysis, component inventory, accessibility audit
- **Toolbox**: Read, Glob, Grep, Bash(read-only), Task(cli-explore-agent), WebSearch, WebFetch
+- **Toolbox**: Read, Glob, Grep, Bash(read-only), Task(cli-explore-agent), Skill(ui-ux-pro-max), WebSearch, WebFetch

 ## Message Types

@@ -54,7 +54,7 @@ const existingPatterns = sharedMemory.accessibility_patterns || []

 ### Phase 3: Core Execution

-Research is divided into 3 parallel analysis streams:
+Research is divided into 4 analysis streams. Stream 1-3 analyze the codebase, Stream 4 retrieves design intelligence from ui-ux-pro-max.

 #### Stream 1: Design System Analysis

@@ -155,14 +155,102 @@ Schema:
 })
 ```

+#### Stream 4: Design Intelligence (ui-ux-pro-max)
+
+```javascript
+// Retrieve design intelligence via ui-ux-pro-max skill
+// Detect industry/product type from task description or session config
+const industryMatch = task.description.match(/Industry:\s*([^\n]+)/)
+const industry = industryMatch ? industryMatch[1].trim() : 'SaaS/科技'
+const keywords = task.description.replace(/Session:.*\n?/g, '').replace(/Industry:.*\n?/g, '').split(/\s+/).slice(0, 5).join(' ')
+
+// Detect tech stack
+let detectedStack = 'html-tailwind'
+try {
+  const pkg = JSON.parse(Read('package.json'))
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies }
+  if (deps['next']) detectedStack = 'nextjs'
+  else if (deps['react']) detectedStack = 'react'
+  else if (deps['vue']) detectedStack = 'vue'
+  else if (deps['svelte']) detectedStack = 'svelte'
+  if (deps['@shadcn/ui'] || deps['shadcn-ui']) detectedStack = 'shadcn'
+} catch {}
+
+// Call ui-ux-pro-max via Skill for design system recommendations
+Task({
+  subagent_type: "general-purpose",
+  run_in_background: false,
+  description: "Retrieve design intelligence via ui-ux-pro-max skill",
+  prompt: `调用 ui-ux-pro-max skill 获取设计系统推荐。
+
+## 需求
+- 产品类型/行业: ${industry}
+- 关键词: ${keywords}
+- 技术栈: ${detectedStack}
+
+## 执行步骤
+
+### 1. 生成设计系统（必须）
+Skill(skill="ui-ux-pro-max", args="${industry} ${keywords} --design-system")
+
+### 2. 补充 UX 指南
+Skill(skill="ui-ux-pro-max", args="accessibility animation responsive --domain ux")
+
+### 3. 获取技术栈指南
+Skill(skill="ui-ux-pro-max", args="${keywords} --stack ${detectedStack}")
+
+## 输出
+将所有结果整合写入: ${sessionFolder}/research/design-intelligence-raw.md
+
+包含:
+- 设计系统推荐（pattern, style, colors, typography, effects, anti-patterns）
+- UX 最佳实践
+- 技术栈指南
+- 行业反模式列表
+`
+})
+
+// Read and structure the output
+let designIntelligenceRaw = ''
+try {
+  designIntelligenceRaw = Read(`${sessionFolder}/research/design-intelligence-raw.md`)
+} catch {}
+
+const uiproAvailable = designIntelligenceRaw.length > 0
+
+// Compile design-intelligence.json
+const designIntelligence = {
+  _source: uiproAvailable ? "ui-ux-pro-max-skill" : "llm-general-knowledge",
+  _generated_at: new Date().toISOString(),
+  industry: industry,
+  detected_stack: detectedStack,
+  design_system: uiproAvailable ? parseDesignSystem(designIntelligenceRaw) : {
+    _fallback: true,
+    note: "Install ui-ux-pro-max for data-driven recommendations",
+    colors: { primary: "#1976d2", secondary: "#dc004e", background: "#ffffff" },
+    typography: { heading: ["Inter", "system-ui"], body: ["Inter", "system-ui"] },
+    style: "modern-minimal"
+  },
+  ux_guidelines: uiproAvailable ? parseUxGuidelines(designIntelligenceRaw) : [],
+  stack_guidelines: uiproAvailable ? parseStackGuidelines(designIntelligenceRaw) : {},
+  recommendations: {
+    anti_patterns: uiproAvailable ? parseAntiPatterns(designIntelligenceRaw) : [],
+    must_have: []
+  }
+}
+
+Write(`${sessionFolder}/research/design-intelligence.json`, JSON.stringify(designIntelligence, null, 2))
+```
+
 ### Phase 4: Validation

 ```javascript
-// Verify all 3 research outputs exist
+// Verify all 4 research outputs exist
 const requiredFiles = [
  'design-system-analysis.json',
  'component-inventory.json',
-  'accessibility-audit.json'
+  'accessibility-audit.json',
+  'design-intelligence.json'
 ]

 const missing = requiredFiles.filter(f => {
@@ -195,6 +283,8 @@ const researchSummary = {
 // Update shared memory
 sharedMemory.component_inventory = inventory.components || []
 sharedMemory.accessibility_patterns = a11yAudit.recommendations || []
+sharedMemory.design_intelligence = designIntelligence || {}
+sharedMemory.industry_context = { industry, detected_stack: detectedStack }
 Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))

 // Log and report
@@ -204,14 +294,14 @@ mcp__ccw-tools__team_msg({
  from: "researcher",
  to: "coordinator",
  type: "research_ready",
-  summary: `[researcher] 调研完成: ${researchSummary.total_components} 个组件, 可访问性等级 ${researchSummary.accessibility_level}, 样式方案 ${researchSummary.styling_approach}`,
+  summary: `[researcher] 调研完成: ${researchSummary.total_components} 个组件, 可访问性等级 ${researchSummary.accessibility_level}, 样式方案 ${researchSummary.styling_approach}, 设计智能源 ${designIntelligence?._source || 'N/A'}`,
  ref: `${sessionFolder}/research/`
 })

 SendMessage({
  type: "message",
  recipient: "coordinator",
-  content: `## [researcher] 设计系统调研完成\n\n- 现有组件: ${researchSummary.total_components}\n- 样式方案: ${researchSummary.styling_approach}\n- 可访问性等级: ${researchSummary.accessibility_level}\n- 组件库: ${designAnalysis.component_library?.name || '无'}\n\n产出目录: ${sessionFolder}/research/`,
+  content: `## [researcher] 设计系统调研完成\n\n- 现有组件: ${researchSummary.total_components}\n- 样式方案: ${researchSummary.styling_approach}\n- 可访问性等级: ${researchSummary.accessibility_level}\n- 组件库: ${designAnalysis.component_library?.name || '无'}\n- 设计智能: ${designIntelligence?._source || 'N/A'}\n- 反模式: ${designIntelligence?.recommendations?.anti_patterns?.length || 0} 条\n\n产出目录: ${sessionFolder}/research/`,
  summary: `[researcher] 调研完成`
 })

--- a/.claude/skills/team-uidesign/roles/reviewer.md
+++ b/.claude/skills/team-uidesign/roles/reviewer.md
@@ -56,6 +56,14 @@ try {
 const auditHistory = sharedMemory.audit_history || []
 const tokenRegistry = sharedMemory.design_token_registry || {}

+// Read design intelligence for industry anti-patterns
+let designIntelligence = null
+try {
+  designIntelligence = JSON.parse(Read(`${sessionFolder}/research/design-intelligence.json`))
+} catch {}
+const antiPatterns = designIntelligence?.recommendations?.anti_patterns || []
+const industryContext = sharedMemory.industry_context || {}
+
 // Read design artifacts to audit
 let designTokens = null
 let componentSpecs = []
@@ -78,14 +86,15 @@ if (isFinalAudit) {

 #### Audit Dimensions

-4 dimensions scored on 1-10 scale:
+5 dimensions scored on 1-10 scale:

 | Dimension | Weight | Criteria |
 |-----------|--------|----------|
-| Consistency | 25% | Token usage, naming conventions, visual uniformity |
-| Accessibility | 30% | WCAG AA compliance, ARIA attributes, keyboard nav, contrast |
-| Completeness | 25% | All states defined, responsive specs, edge cases |
-| Quality | 20% | Token reference integrity, documentation clarity, maintainability |
+| Consistency | 20% | Token usage, naming conventions, visual uniformity |
+| Accessibility | 25% | WCAG AA compliance, ARIA attributes, keyboard nav, contrast |
+| Completeness | 20% | All states defined, responsive specs, edge cases |
+| Quality | 15% | Token reference integrity, documentation clarity, maintainability |
+| Industry Compliance | 20% | Anti-pattern avoidance, UX best practices, design intelligence adherence |

 #### Token Audit (AUDIT for token systems)

@@ -95,7 +104,8 @@ if (isTokenAudit && designTokens) {
    consistency: { score: 0, issues: [] },
    accessibility: { score: 0, issues: [] },
    completeness: { score: 0, issues: [] },
-    quality: { score: 0, issues: [] }
+    quality: { score: 0, issues: [] },
+    industryCompliance: { score: 0, issues: [] }
  }

  // Consistency checks
@@ -117,6 +127,16 @@ if (isTokenAudit && designTokens) {
  // - $type metadata present (W3C format)
  // - Values are valid (CSS-parseable)
  // - No duplicate definitions
+
+  // Industry Compliance checks (from design intelligence)
+  // - Anti-patterns from ui-ux-pro-max not present in design
+  // - UX best practices followed (recommended style, color usage)
+  // - Design intelligence recommendations adhered to
+  // - If antiPatterns available, check each against design artifacts
+  antiPatterns.forEach(pattern => {
+    // Check if design violates this anti-pattern
+    // Flag as HIGH severity if violated
+  })
 }
 ```

@@ -156,12 +176,13 @@ if (isFinalAudit) {
 #### Score Calculation

 ```javascript
-const weights = { consistency: 0.25, accessibility: 0.30, completeness: 0.25, quality: 0.20 }
+const weights = { consistency: 0.20, accessibility: 0.25, completeness: 0.20, quality: 0.15, industryCompliance: 0.20 }
 const overallScore = Math.round(
  tokenAudit.consistency.score * weights.consistency +
  tokenAudit.accessibility.score * weights.accessibility +
  tokenAudit.completeness.score * weights.completeness +
-  tokenAudit.quality.score * weights.quality
+  tokenAudit.quality.score * weights.quality +
+  tokenAudit.industryCompliance.score * weights.industryCompliance
 )

 // Severity classification
@@ -198,10 +219,11 @@ ${isSyncPoint ? `\n**⚡ Sync Point**: ${signal === 'audit_passed' ? 'PASSED —

 | Dimension | Score | Weight | Weighted |
 |-----------|-------|--------|----------|
-| Consistency | ${tokenAudit.consistency.score}/10 | 25% | ${(tokenAudit.consistency.score * 0.25).toFixed(1)} |
-| Accessibility | ${tokenAudit.accessibility.score}/10 | 30% | ${(tokenAudit.accessibility.score * 0.30).toFixed(1)} |
-| Completeness | ${tokenAudit.completeness.score}/10 | 25% | ${(tokenAudit.completeness.score * 0.25).toFixed(1)} |
-| Quality | ${tokenAudit.quality.score}/10 | 20% | ${(tokenAudit.quality.score * 0.20).toFixed(1)} |
+| Consistency | ${tokenAudit.consistency.score}/10 | 20% | ${(tokenAudit.consistency.score * 0.20).toFixed(1)} |
+| Accessibility | ${tokenAudit.accessibility.score}/10 | 25% | ${(tokenAudit.accessibility.score * 0.25).toFixed(1)} |
+| Completeness | ${tokenAudit.completeness.score}/10 | 20% | ${(tokenAudit.completeness.score * 0.20).toFixed(1)} |
+| Quality | ${tokenAudit.quality.score}/10 | 15% | ${(tokenAudit.quality.score * 0.15).toFixed(1)} |
+| Industry Compliance | ${tokenAudit.industryCompliance.score}/10 | 20% | ${(tokenAudit.industryCompliance.score * 0.20).toFixed(1)} |

 ## Critical Issues
 ${criticalIssues.map(i => `- **[CRITICAL]** ${i.description}\n  Location: ${i.location}\n  Fix: ${i.suggestion}`).join('\n')}