diff --git a/.claude/skills/team-uidesign/SKILL.md b/.claude/skills/team-uidesign/SKILL.md index e0a6bd22..65c22594 100644 --- 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=" --design-system") + │ Skill("ui-ux-pro-max", args="accessibility animation responsive --domain ux") + │ Skill("ui-ux-pro-max", args=" --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 | diff --git a/.claude/skills/team-uidesign/roles/coordinator.md b/.claude/skills/team-uidesign/roles/coordinator.md index f8c34ec2..f9f06930 100644 --- 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 diff --git a/.claude/skills/team-uidesign/roles/designer.md b/.claude/skills/team-uidesign/roles/designer.md index 1faeef72..b065ddeb 100644 --- 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 diff --git a/.claude/skills/team-uidesign/roles/implementer.md b/.claude/skills/team-uidesign/roles/implementer.md index 20bd0d5b..90a075fe 100644 --- 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" + } } ``` diff --git a/.claude/skills/team-uidesign/roles/researcher.md b/.claude/skills/team-uidesign/roles/researcher.md index 0ee5e41b..b8050af3 100644 --- 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] 调研完成` }) diff --git a/.claude/skills/team-uidesign/roles/reviewer.md b/.claude/skills/team-uidesign/roles/reviewer.md index 9f6296e2..de732639 100644 --- 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')}