mcp-probe-kit 1.13.0 → 1.15.1

package/build/utils/cache-manager.js

@@ -0,0 +1,156 @@
+/**
+ * 缓存管理器
+ *
+ * 管理 UI/UX 数据的缓存，支持版本检查和自动更新
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import * as https from 'https';
+/**
+ * 缓存管理器
+ */
+export class CacheManager {
+    cacheDir;
+    packageName;
+    autoUpdate;
+    constructor(options = {}) {
+        this.cacheDir = options.cacheDir || path.join(os.homedir(), '.mcp-probe-kit', 'ui-ux-data');
+        this.packageName = options.packageName || 'uipro-cli';
+        this.autoUpdate = options.autoUpdate ?? true;
+        this.ensureCacheDir();
+    }
+    /**
+     * 确保缓存目录存在
+     */
+    ensureCacheDir() {
+        if (!fs.existsSync(this.cacheDir)) {
+            fs.mkdirSync(this.cacheDir, { recursive: true });
+        }
+    }
+    /**
+     * 获取缓存元数据
+     */
+    getMetadata() {
+        const metadataPath = path.join(this.cacheDir, 'metadata.json');
+        if (!fs.existsSync(metadataPath)) {
+            return null;
+        }
+        try {
+            const content = fs.readFileSync(metadataPath, 'utf-8');
+            return JSON.parse(content);
+        }
+        catch (error) {
+            console.error('Failed to read cache metadata:', error);
+            return null;
+        }
+    }
+    /**
+     * 检查缓存是否存在
+     */
+    hasCache() {
+        return this.getMetadata() !== null;
+    }
+    /**
+     * 获取 npm 包的最新版本
+     */
+    async getLatestVersion() {
+        return new Promise((resolve, reject) => {
+            const url = `https://registry.npmjs.org/${this.packageName}/latest`;
+            https.get(url, (res) => {
+                let data = '';
+                res.on('data', (chunk) => {
+                    data += chunk;
+                });
+                res.on('end', () => {
+                    try {
+                        const pkg = JSON.parse(data);
+                        resolve(pkg.version);
+                    }
+                    catch (error) {
+                        reject(new Error(`Failed to parse package metadata: ${error}`));
+                    }
+                });
+            }).on('error', (error) => {
+                reject(new Error(`Failed to fetch package metadata: ${error}`));
+            });
+        });
+    }
+    /**
+     * 检查是否有更新
+     */
+    async checkUpdate() {
+        const metadata = this.getMetadata();
+        const latestVersion = await this.getLatestVersion();
+        if (!metadata) {
+            return {
+                hasUpdate: true,
+                latestVersion,
+            };
+        }
+        return {
+            hasUpdate: metadata.version !== latestVersion,
+            currentVersion: metadata.version,
+            latestVersion,
+        };
+    }
+    /**
+     * 读取缓存文件
+     */
+    readFile(filename) {
+        const filePath = path.join(this.cacheDir, filename);
+        if (!fs.existsSync(filePath)) {
+            return null;
+        }
+        try {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            if (filename.endsWith('.json')) {
+                return JSON.parse(content);
+            }
+            return content;
+        }
+        catch (error) {
+            console.error(`Failed to read cache file ${filename}:`, error);
+            return null;
+        }
+    }
+    /**
+     * 列出所有缓存文件
+     */
+    listFiles() {
+        if (!fs.existsSync(this.cacheDir)) {
+            return [];
+        }
+        const files = [];
+        const walk = (dir, prefix = '') => {
+            const entries = fs.readdirSync(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                const fullPath = path.join(dir, entry.name);
+                const relativePath = prefix ? `${prefix}/${entry.name}` : entry.name;
+                if (entry.isDirectory()) {
+                    walk(fullPath, relativePath);
+                }
+                else if (entry.isFile() && entry.name !== 'metadata.json') {
+                    files.push(relativePath);
+                }
+            }
+        };
+        walk(this.cacheDir);
+        return files;
+    }
+    /**
+     * 清空缓存
+     */
+    clear() {
+        if (fs.existsSync(this.cacheDir)) {
+            fs.rmSync(this.cacheDir, { recursive: true, force: true });
+        }
+        this.ensureCacheDir();
+    }
+    /**
+     * 获取缓存目录路径
+     */
+    getCacheDir() {
+        return this.cacheDir;
+    }
+}

package/build/utils/design-reasoning-engine.d.ts

@@ -0,0 +1,158 @@
+/**
+ * 设计推理引擎
+ *
+ * 根据产品类型和需求，智能推荐完整的设计系统
+ * 基于 100 条行业规则和最佳实践
+ *
+ * 完全匹配原版 Python 实现：
+ * https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+ */
+export interface DesignRequest {
+    productType: string;
+    description?: string;
+    stack?: string;
+    targetAudience?: string;
+    keywords?: string[];
+}
+export interface ReasoningRule {
+    No: string;
+    UI_Category: string;
+    Recommended_Pattern: string;
+    Style_Priority: string;
+    Color_Mood: string;
+    Typography_Mood: string;
+    Key_Effects: string;
+    Decision_Rules: Record<string, string>;
+    Anti_Patterns: string;
+    Severity: string;
+}
+export interface DesignSystemRecommendation {
+    target: string;
+    pattern: LandingPagePattern;
+    style: StyleRecommendation;
+    colors: ColorPalette;
+    typography: TypographyPairing;
+    effects: EffectsRecommendation;
+    antiPatterns: string[];
+    checklist: string[];
+    reasoning: string;
+}
+export interface LandingPagePattern {
+    name: string;
+    description: string;
+    conversion: string;
+    cta: string;
+    sections: string[];
+}
+export interface StyleRecommendation {
+    primary: string;
+    keywords: string[];
+    bestFor: string[];
+    performance: string;
+    accessibility: string;
+}
+export interface ColorPalette {
+    primary: string;
+    secondary: string;
+    cta: string;
+    background: string;
+    text: string;
+    notes: string;
+}
+export interface TypographyPairing {
+    heading: string;
+    body: string;
+    mood: string;
+    bestFor: string[];
+    googleFontsUrl: string;
+}
+export interface EffectsRecommendation {
+    shadows: string;
+    transitions: string;
+    hover: string;
+    animations: string;
+}
+/**
+ * 设计推理引擎（完全匹配 Python 版本）
+ */
+export declare class DesignReasoningEngine {
+    private productsData;
+    private stylesData;
+    private colorsData;
+    private typographyData;
+    private landingData;
+    private uxGuidelinesData;
+    private reasoningData;
+    /**
+     * 加载数据
+     */
+    loadData(data: {
+        products: any[];
+        styles: any[];
+        colors: any[];
+        typography: any[];
+        landing: any[];
+        uxGuidelines: any[];
+        reasoning: ReasoningRule[];
+    }): void;
+    /**
+     * 生成设计系统推荐（完全匹配 Python 版本）
+     */
+    generateRecommendation(request: DesignRequest): DesignSystemRecommendation;
+    /**
+     * 应用推理规则
+     */
+    private applyReasoning;
+    /**
+     * 查找推理规则
+     */
+    private findReasoningRule;
+    /**
+     * 搜索风格（带优先级）
+     */
+    private searchStyles;
+    /**
+     * 搜索配色
+     */
+    private searchColors;
+    /**
+     * 搜索字体
+     */
+    private searchTypography;
+    /**
+     * 搜索落地页模式
+     */
+    private searchLanding;
+    /**
+     * 带评分的搜索
+     */
+    private searchWithScore;
+    /**
+     * 选择最佳匹配（基于优先级）
+     */
+    private selectBestMatch;
+    /**
+     * 提取阴影效果
+     */
+    private extractShadows;
+    /**
+     * 提取过渡时间
+     */
+    private extractTransitions;
+    /**
+     * 提取悬停效果
+     */
+    private extractHover;
+    /**
+     * 匹配产品类型（增强版 - 使用 BM25 风格的匹配）
+     */
+    private matchProductType;
+    /**
+     * 生成检查清单
+     */
+    private generateChecklist;
+    /**
+     * 生成推理说明
+     */
+    private generateReasoningText;
+}

package/build/utils/design-reasoning-engine.js

@@ -0,0 +1,363 @@
+/**
+ * 设计推理引擎
+ *
+ * 根据产品类型和需求，智能推荐完整的设计系统
+ * 基于 100 条行业规则和最佳实践
+ *
+ * 完全匹配原版 Python 实现：
+ * https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+ */
+/**
+ * 设计推理引擎（完全匹配 Python 版本）
+ */
+export class DesignReasoningEngine {
+    productsData = [];
+    stylesData = [];
+    colorsData = [];
+    typographyData = [];
+    landingData = [];
+    uxGuidelinesData = [];
+    reasoningData = [];
+    /**
+     * 加载数据
+     */
+    loadData(data) {
+        this.productsData = data.products;
+        this.stylesData = data.styles;
+        this.colorsData = data.colors;
+        this.typographyData = data.typography;
+        this.landingData = data.landing;
+        this.uxGuidelinesData = data.uxGuidelines;
+        this.reasoningData = data.reasoning;
+    }
+    /**
+     * 生成设计系统推荐（完全匹配 Python 版本）
+     */
+    generateRecommendation(request) {
+        // Step 1: 匹配产品类型
+        const productRule = this.matchProductType(request);
+        const category = productRule['Product Type'] || 'General';
+        // Step 2: 应用推理规则
+        const reasoning = this.applyReasoning(category);
+        const stylePriority = reasoning.stylePriority;
+        // Step 3: 使用优先级搜索各个领域
+        const styleResults = this.searchStyles(request, stylePriority);
+        const colorResults = this.searchColors(request);
+        const typographyResults = this.searchTypography(request);
+        const landingResults = this.searchLanding(request);
+        // Step 4: 选择最佳匹配
+        const bestStyle = this.selectBestMatch(styleResults, stylePriority);
+        const bestColor = colorResults[0] || {};
+        const bestTypography = typographyResults[0] || {};
+        const bestLanding = landingResults[0] || {};
+        // Step 5: 组合效果（优先使用搜索结果）
+        const styleEffects = bestStyle['Effects & Animation'] || '';
+        const reasoningEffects = reasoning.keyEffects;
+        const combinedEffects = styleEffects || reasoningEffects;
+        // Step 6: 构建最终推荐
+        return {
+            target: request.productType,
+            pattern: {
+                name: bestLanding.Pattern || reasoning.pattern,
+                description: bestLanding.Description || '',
+                conversion: bestLanding['Conversion Focus'] || '',
+                cta: bestLanding['CTA Placement'] || 'Above fold',
+                sections: (bestLanding['Section Order'] || 'Hero, Features, CTA').split(',').map((s) => s.trim()),
+            },
+            style: {
+                primary: bestStyle['Style Category'] || 'Minimalism',
+                keywords: (bestStyle.Keywords || '').split(',').map((k) => k.trim()),
+                bestFor: (bestStyle['Best For'] || '').split(',').map((b) => b.trim()),
+                performance: bestStyle.Performance || 'Good',
+                accessibility: bestStyle.Accessibility || 'WCAG AA',
+            },
+            colors: {
+                primary: bestColor['Primary (Hex)'] || '#2563EB',
+                secondary: bestColor['Secondary (Hex)'] || '#3B82F6',
+                cta: bestColor['CTA (Hex)'] || '#F97316',
+                background: bestColor['Background (Hex)'] || '#F8FAFC',
+                text: bestColor['Text (Hex)'] || '#1E293B',
+                notes: bestColor.Notes || bestColor.Usage || '',
+            },
+            typography: {
+                heading: bestTypography['Heading Font'] || 'Inter',
+                body: bestTypography['Body Font'] || 'Inter',
+                mood: bestTypography['Mood/Style Keywords'] || reasoning.typographyMood,
+                bestFor: (bestTypography['Best For'] || '').split(',').map((b) => b.trim()),
+                googleFontsUrl: bestTypography['Google Fonts URL'] || '',
+            },
+            effects: {
+                shadows: this.extractShadows(combinedEffects),
+                transitions: this.extractTransitions(combinedEffects),
+                hover: this.extractHover(combinedEffects),
+                animations: combinedEffects,
+            },
+            antiPatterns: (reasoning.antiPatterns || '').split('+').map((p) => p.trim()).filter(Boolean),
+            checklist: this.generateChecklist(bestStyle, request),
+            reasoning: this.generateReasoningText(productRule, bestStyle, bestColor, bestTypography, reasoning),
+        };
+    }
+    /**
+     * 应用推理规则
+     */
+    applyReasoning(category) {
+        const rule = this.findReasoningRule(category);
+        if (!rule) {
+            return {
+                pattern: 'Hero + Features + CTA',
+                stylePriority: ['Minimalism', 'Flat Design'],
+                colorMood: 'Professional',
+                typographyMood: 'Clean',
+                keyEffects: 'Subtle hover transitions',
+                antiPatterns: '',
+                decisionRules: {},
+                severity: 'MEDIUM',
+            };
+        }
+        return {
+            pattern: rule.Recommended_Pattern || 'Hero + Features + CTA',
+            stylePriority: (rule.Style_Priority || '').split('+').map((s) => s.trim()),
+            colorMood: rule.Color_Mood || '',
+            typographyMood: rule.Typography_Mood || '',
+            keyEffects: rule.Key_Effects || '',
+            antiPatterns: rule.Anti_Patterns || '',
+            decisionRules: rule.Decision_Rules || {},
+            severity: rule.Severity || 'MEDIUM',
+        };
+    }
+    /**
+     * 查找推理规则
+     */
+    findReasoningRule(category) {
+        const categoryLower = category.toLowerCase();
+        // 1. 精确匹配
+        for (const rule of this.reasoningData) {
+            if (rule.UI_Category.toLowerCase() === categoryLower) {
+                return rule;
+            }
+        }
+        // 2. 部分匹配
+        for (const rule of this.reasoningData) {
+            const uiCat = rule.UI_Category.toLowerCase();
+            if (uiCat.includes(categoryLower) || categoryLower.includes(uiCat)) {
+                return rule;
+            }
+        }
+        // 3. 关键词匹配
+        for (const rule of this.reasoningData) {
+            const uiCat = rule.UI_Category.toLowerCase();
+            const keywords = uiCat.replace(/[\/\-]/g, ' ').split(/\s+/);
+            if (keywords.some(kw => categoryLower.includes(kw))) {
+                return rule;
+            }
+        }
+        return null;
+    }
+    /**
+     * 搜索风格（带优先级）
+     */
+    searchStyles(request, priority) {
+        const query = `${request.productType} ${request.description || ''} ${priority.join(' ')}`.toLowerCase();
+        return this.searchWithScore(this.stylesData, query, ['Style Category', 'Keywords', 'Best For']).slice(0, 3);
+    }
+    /**
+     * 搜索配色
+     */
+    searchColors(request) {
+        const query = `${request.productType} ${request.description || ''}`.toLowerCase();
+        return this.searchWithScore(this.colorsData, query, ['Name', 'Usage', 'Product Type']).slice(0, 2);
+    }
+    /**
+     * 搜索字体
+     */
+    searchTypography(request) {
+        const query = `${request.productType} ${request.description || ''}`.toLowerCase();
+        return this.searchWithScore(this.typographyData, query, ['Mood/Style Keywords', 'Best For']).slice(0, 2);
+    }
+    /**
+     * 搜索落地页模式
+     */
+    searchLanding(request) {
+        const query = `${request.productType} ${request.description || ''}`.toLowerCase();
+        return this.searchWithScore(this.landingData, query, ['Pattern', 'Keywords']).slice(0, 2);
+    }
+    /**
+     * 带评分的搜索
+     */
+    searchWithScore(data, query, fields) {
+        const scored = data.map(item => {
+            let score = 0;
+            const text = fields.map(f => item[f] || '').join(' ').toLowerCase();
+            // 简单的关键词匹配评分
+            const queryWords = query.split(/\s+/).filter(w => w.length > 2);
+            for (const word of queryWords) {
+                if (text.includes(word)) {
+                    score += 1;
+                }
+            }
+            return { item, score };
+        });
+        return scored
+            .filter(s => s.score > 0)
+            .sort((a, b) => b.score - a.score)
+            .map(s => s.item);
+    }
+    /**
+     * 选择最佳匹配（基于优先级）
+     */
+    selectBestMatch(results, priorityKeywords) {
+        if (!results || results.length === 0) {
+            return {};
+        }
+        if (!priorityKeywords || priorityKeywords.length === 0) {
+            return results[0];
+        }
+        // 1. 尝试精确风格名称匹配
+        for (const priority of priorityKeywords) {
+            const priorityLower = priority.toLowerCase().trim();
+            for (const result of results) {
+                const styleName = (result['Style Category'] || '').toLowerCase();
+                if (priorityLower === styleName || styleName.includes(priorityLower) || priorityLower.includes(styleName)) {
+                    return result;
+                }
+            }
+        }
+        // 2. 按关键词评分
+        const scored = results.map(result => {
+            let score = 0;
+            const resultStr = JSON.stringify(result).toLowerCase();
+            for (const kw of priorityKeywords) {
+                const kwLower = kw.toLowerCase().trim();
+                // 风格名称匹配（高分）
+                if ((result['Style Category'] || '').toLowerCase().includes(kwLower)) {
+                    score += 10;
+                }
+                // 关键词字段匹配（中分）
+                else if ((result.Keywords || '').toLowerCase().includes(kwLower)) {
+                    score += 3;
+                }
+                // 其他字段匹配（低分）
+                else if (resultStr.includes(kwLower)) {
+                    score += 1;
+                }
+            }
+            return { result, score };
+        });
+        scored.sort((a, b) => b.score - a.score);
+        return scored[0] && scored[0].score > 0 ? scored[0].result : results[0];
+    }
+    /**
+     * 提取阴影效果
+     */
+    extractShadows(effects) {
+        if (effects.toLowerCase().includes('shadow')) {
+            const match = effects.match(/([^+]*shadow[^+]*)/i);
+            return match ? match[1].trim() : 'Subtle shadows';
+        }
+        return 'Subtle shadows';
+    }
+    /**
+     * 提取过渡时间
+     */
+    extractTransitions(effects) {
+        const match = effects.match(/(\d+[-–]\d+ms|\d+ms)/);
+        return match ? match[0] : '200-300ms';
+    }
+    /**
+     * 提取悬停效果
+     */
+    extractHover(effects) {
+        if (effects.toLowerCase().includes('hover')) {
+            const match = effects.match(/([^+]*hover[^+]*)/i);
+            return match ? match[1].trim() : 'Gentle hover states';
+        }
+        return 'Gentle hover states';
+    }
+    /**
+     * 匹配产品类型（增强版 - 使用 BM25 风格的匹配）
+     */
+    matchProductType(request) {
+        const query = `${request.productType} ${request.description || ''} ${request.keywords?.join(' ') || ''}`.toLowerCase();
+        // 使用更智能的匹配算法
+        let bestMatch = this.productsData[0] || {}; // 默认使用第一个
+        let bestScore = 0;
+        for (const product of this.productsData) {
+            const keywords = (product.Keywords || '').toLowerCase();
+            const productType = (product['Product Type'] || '').toLowerCase();
+            const considerations = (product['Key Considerations'] || '').toLowerCase();
+            let score = 0;
+            // 1. 精确匹配产品类型（最高权重）
+            if (query.includes(productType)) {
+                score += 20;
+            }
+            // 2. 部分匹配产品类型
+            const productWords = productType.split(/[\s/]+/);
+            for (const word of productWords) {
+                if (word.length > 2 && query.includes(word)) {
+                    score += 5;
+                }
+            }
+            // 3. 关键词匹配（中等权重）
+            const keywordList = keywords.split(',').map((k) => k.trim());
+            for (const keyword of keywordList) {
+                if (keyword.length > 2 && query.includes(keyword)) {
+                    score += 2;
+                }
+            }
+            // 4. 考虑因素匹配（低权重）
+            const considerationWords = considerations.split(/[\s,\.]+/);
+            for (const word of considerationWords) {
+                if (word.length > 3 && query.includes(word)) {
+                    score += 0.5;
+                }
+            }
+            if (score > bestScore) {
+                bestScore = score;
+                bestMatch = product;
+            }
+        }
+        return bestMatch;
+    }
+    /**
+     * 生成检查清单
+     */
+    generateChecklist(style, request) {
+        const transitions = this.extractTransitions(style['Effects & Animation'] || '');
+        const checklist = [
+            'No emojis as icons (use SVG: Heroicons/Lucide)',
+            'cursor-pointer on all clickable elements',
+            `Hover states with smooth transitions (${transitions})`,
+            'Light mode: text contrast 4.5:1 minimum',
+            'Focus states visible for keyboard nav',
+            'prefers-reduced-motion respected',
+            'Responsive: 375px, 768px, 1024px, 1440px',
+            'Loading states for async operations',
+            'Error states with clear messages',
+            'Alt text for all images',
+        ];
+        // 根据技术栈添加特定检查项
+        if (request.stack?.toLowerCase().includes('react')) {
+            checklist.push('React keys on list items');
+            checklist.push('useCallback for event handlers');
+        }
+        else if (request.stack?.toLowerCase().includes('vue')) {
+            checklist.push('v-for with :key bindings');
+            checklist.push('Computed properties for derived state');
+        }
+        return checklist;
+    }
+    /**
+     * 生成推理说明
+     */
+    generateReasoningText(productRule, style, colors, typography, reasoning) {
+        const parts = [];
+        parts.push(`Product Type: ${productRule['Product Type']}`);
+        parts.push(`Recommended Style: ${style['Style Category'] || reasoning.stylePriority[0]}`);
+        parts.push(`Reasoning: ${(style['Best For'] || '').split(',').slice(0, 3).join(', ')}`);
+        parts.push(`Color Strategy: ${colors.Notes || colors.Usage || reasoning.colorMood}`);
+        parts.push(`Typography Mood: ${typography['Mood/Style Keywords'] || reasoning.typographyMood}`);
+        parts.push(`Performance: ${style.Performance || 'Good'}`);
+        parts.push(`Accessibility: ${style.Accessibility || 'WCAG AA'}`);
+        return parts.join('\n');
+    }
+}