codymaster 4.1.3 → 4.3.0

package/skills/cm-ux-master/README-zh.md

@@ -0,0 +1,135 @@
+<div align="center">
+
+# ✦ MasterDesign Agent
+
+> **你构思，AI美化。**
+
+[English](README.md) • [Tiếng Việt](README-vi.md) • [中文](README-zh.md) • [Русский](README-ru.md)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+![Platforms](https://img.shields.io/badge/platforms-6-brightgreen.svg)
+![Entries](https://img.shields.io/badge/design%20rules-838%2B-purple.svg)
+![UX Laws](https://img.shields.io/badge/UX%20Laws-48-ff69b4.svg)
+![Tests](https://img.shields.io/badge/tests-7%20suites-green.svg)
+
+</div>
+
+---
+
+## 🛑 真正的问题
+
+你有一个绝妙的想法。你把它描述给 AI 工具。但 AI 生成的界面……**丑得不忍直视**。
+看起来千篇一律，"AI味"十足，没有统一的设计系统。表单太长、按钮太小、用户体验一塌糊涂。
+
+这是 90% 创始人、开发者和产品经理面临的残酷现实。再好的代码，界面丑陋等于白做。
+
+## ✨ 魔法解决方案
+
+**MasterDesign Agent** 把你的任何 AI 编码工具变成一个**专业设计工作室**。
+它在你常用的 IDE 或 CLI 后台默默运行。你只需说出你的想法，AI 就会自动应用世界一流的设计标准。
+
+| ❌ 没有 MasterDesign Agent | ✦ 有了 MasterDesign Agent |
+|---------------------|--------------|
+| AI 生成千篇一律的"AI味"界面 | 工作室品质的UI，让客户眼前一亮 |
+| 间距和颜色混乱不一致 | 统一的专业设计系统 |
+| 按钮太小，菜单像迷宫 | 基于48条科学UX法则自动优化 |
+| 没有自动质量检测 | 37项自动化设计测试 |
+| 请设计师：$3K–$15K，等好几周 | **$0，60秒内出成果** |
+
+---
+
+## 🚀 v2.0 新功能
+
+我们对工具包进行了全面的重磅升级：
+
+- 🧬 **Harvester v3（全面提取）：** 从任意网站提取50-80+设计令牌。捕获色彩直方图、语义色彩、灰度梯度、字体比例、间距和布局参数。5分钟内克隆顶级网站的设计DNA。
+- 🗂️ **项目注册表（Project Registry）：** 轻松管理多个设计系统项目。将多个页面的采集数据合并为一个统一项目。
+- 📖 **设计文档生成器：** 自动生成精美的HTML设计文档（色板、字体样本、组件示例）。
+- 🔗 **Token Mapper & Semi MCP Bridge：** 将设计令牌直接映射到 Semi Design UI 变量。自动生成CSS覆盖、Figma JSON 和 React 组件模板。
+- 🧪 **7套完整测试：** 全面的设计TDD（测试驱动设计）覆盖。
+
+---
+
+## 🧠 完整的设计智能
+
+MasterDesign Agent 不是一个模板。它是包含 **838+ 设计规则**的庞大智能矩阵，覆盖 **13 技术栈**和 **13 个行业**（金融科技、SaaS、电商等）。
+
+- **67种UI风格：** 从玻璃拟态到粗犷主义。
+- **96种配色方案 & 57种字体搭配：** 精心挑选，视觉效果拉满。
+- **48条UX法则：** 自动应用希克定律（减少选择）、费茨定律（增大点击区域）、多赫蒂阈值（快速反馈）等。
+- **37项设计测试：** 在AI生成代码前充当严格的QA过滤器。
+
+---
+
+## ⚡ 60秒快速上手
+
+### 第一步：检查 Python
+确保已安装 Python 3：
+```bash
+python3 --version
+```
+
+### 第二步：克隆 & 安装
+```bash
+git clone https://github.com/relukdev/ux-master.git
+cd ux-master
+python3 scripts/install.py
+```
+
+安装程序会自动检测你的AI工具并立即配置。
+*想指定特定平台？*
+```bash
+python3 scripts/install.py --platform cursor
+python3 scripts/install.py --platform amp --global
+# 或者全部安装：
+python3 scripts/install.py --platform all --global
+```
+
+### 第三步：见证魔法
+打开你的AI工具（如Cursor），输入提示：
+> *"创建一个高端水疗中心的着陆页，现代简约风格。"*
+
+如果 AI 提到了 **设计系统、UX法则或设计测试** — 恭喜，MasterDesign Agent 已经激活了！🎉
+
+---
+
+## 🔌 支持的AI平台
+
+与你的工作流程无缝集成：
+- **Cursor** (`--platform cursor`) - 最受欢迎的AI IDE。
+- **Claude / Amp** (`--platform amp`) - Anthropic 强大的CLI工具。
+- **Gemini CLI** (`--platform gemini`) - Google 的AI助手。
+- **Antigravity** (`--platform antigravity`) - Google 的VS Code扩展。
+- **OpenCode** (`--platform opencode`) - 开源替代方案。
+- **Claude Code** (`--platform claude`) - 旧版支持。
+
+---
+
+## 💎 免费版 vs 专业版
+
+| 功能 | 免费版 | 专业版 |
+|---------|------|-----|
+| 价格 | **$0** | **$39**（一次性付费） |
+| 设计规则 & UX法则 | 838+ & 48 | 838+ & 48 |
+| 设计测试 | 37 | 37 |
+| Harvester（提取器） | **v1（~15令牌）** | **v3（80+令牌）** 🔥 |
+| Token Mapper | ❌ | ✅ CSS/Figma |
+| 设计文档生成器 | ❌ | ✅ HTML输出 |
+| 项目注册表 | ❌ | ✅ |
+| 支持 | 社区 | 优先 |
+
+> **立即升级专业版：** 👉 [ux-master.dev/pro](https://ux-master.dev/pro)
+
+---
+
+## 🤝 参与贡献
+欢迎贡献！如果你想改进AI推理规则、添加新的技术栈指南或扩展UX法则：
+1. Fork 仓库并创建分支（`git checkout -b feature/amazing-idea`）。
+2. 提交更改。
+3. 推送分支并创建 Pull Request。
+
+## 📄 许可证
+MIT License — 可自由用于任何项目。
+
+---
+> **MasterDesign Agent** — 一个人 = 整个设计团队。 ✦

package/skills/cm-ux-master/README.md

@@ -0,0 +1,489 @@
+# 🎨 UX Master v4 — AI-Powered Design System Platform
+
+[![Version](https://img.shields.io/badge/version-4.0.0-blue.svg)](https://github.com/ux-master/ux-master)
+[![Python](https://img.shields.io/badge/python-3.8+-green.svg)](https://python.org)
+[![License](https://img.shields.io/badge/license-MIT-yellow.svg)](LICENSE)
+
+> **One command. Complete design system. 10x productivity.**
+
+Extract, analyze, and generate production-ready design systems from any website in minutes. Powered by AI, built for scale, integrated with Figma & Google Stitch.
+
+![Harvester v4 Demo](docs/assets/demo-banner.png)
+
+---
+
+## ✨ What is UX Master?
+
+UX Master v4 is an **AI-powered design system extraction and generation platform** that transforms how teams create, maintain, and scale design systems.
+
+### The Problem We Solve
+
+| Traditional Workflow | With UX Master v4 |
+|---------------------|-------------------|
+| ❌ Weeks documenting design systems manually | ✅ Extract in 5 minutes |
+| ❌ Inconsistent hardcoded values | ✅ Standardized CSS tokens |
+| ❌ Back-and-forth design handoffs | ✅ Exact tokens + components |
+| ❌ Design debt accumulates | ✅ Audit + maintain automatically |
+
+### The Result
+- **480x faster** design system extraction
+- **100% consistency** across products
+- **Zero manual documentation**
+- **Production-ready code** instantly
+
+---
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# Clone repository
+git clone https://github.com/ux-master/ux-master.git
+cd ux-master
+
+# Install dependencies
+pip install playwright
+playwright install chromium
+
+# Or use setup script
+python setup.py
+```
+
+### Basic Usage
+
+```bash
+# Extract design system from any website
+python scripts/wizard.py --url https://example.com
+
+# Or use quick-start script
+./templates/quick-start.sh https://example.com
+```
+
+### Output
+
+```
+output/example/
+├── design-system.css          # 150+ CSS variables
+├── design-system.json         # Structured tokens
+├── figma-tokens.json          # Figma Tokens Studio
+├── DESIGN.md                  # Google Stitch prompt
+├── screenshot-desktop.png     # Visual reference
+├── screenshot-mobile.png      # Mobile viewport
+└── components/
+    ├── button/
+    │   ├── component.tsx      # TypeScript + Tailwind
+    │   └── index.ts
+    ├── card/
+    ├── input/
+    └── ... (15+ components)
+```
+
+---
+
+## 🎯 Key Features
+
+### 🔍 Harvester v4 — AI Visual Extraction
+- **120+ tokens** extracted automatically (colors, typography, spacing, shadows)
+- **Color psychology analysis** — understands emotional impact
+- **Layout pattern recognition** — detects grids, sidebars, headers
+- **Component blueprint extraction** — buttons, cards, inputs, tables
+- **Accessibility audit** — contrast ratios, missing labels
+
+### 🤖 MCP Server — AI Assistant Integration
+- Native integration with **Claude, Cursor, Windsurf**
+- 5 powerful tools: extract, generate, export, create prompts
+- AI can extract and generate directly from chat
+
+### 🎨 Figma Bridge — Bidirectional Sync
+- **Export**: Send tokens to Figma Tokens Studio
+- **Import**: Convert Figma designs to code
+- **Compare**: Diff between design and implementation
+- **Sync**: Keep design and code always aligned
+
+### ✨ Google Stitch Integration
+- Generate **DESIGN.md** for AI design generation
+- Create **optimized prompts** for specific screens
+- **Batch generate** multiple screens with consistent style
+- AI-generated UI that matches your design system
+
+### 💻 Component Generator
+- **15+ component types**: Button, Card, Input, Badge, Table, Tabs, etc.
+- **3 frameworks**: React + Tailwind, Semi Design, Vue 3
+- **TypeScript + types**: Full type safety
+- **Production-ready**: Best practices built-in
+
+### 🖥️ Interactive CLI Wizard
+- Beautiful animations and progress bars
+- Interactive prompts with helpful defaults
+- Preset templates for common use cases
+- One-command complete workflow
+
+---
+
+## 📖 Documentation
+
+### By Role
+
+| Role | Documentation | Quick Start |
+|------|--------------|-------------|
+| 🎨 **Designers** | [Guide for Designers](docs/guides/for-designers.md) | Extract → Figma → Stitch |
+| 📊 **Product Managers** | [Guide for Product Managers](docs/guides/for-product-managers.md) | Audit → Report → Decision |
+| 💻 **Developers** | [Guide for Developers](docs/guides/for-developers.md) | Extract → Components → Code |
+| 🔧 **Technical** | [How It Works](docs/technical/how-it-works.md) | Architecture & API |
+
+### Documentation Structure
+
+```
+docs/
+├── README.md                      # Documentation hub
+├── guides/                        # Persona guides
+│   ├── for-designers.md
+│   ├── for-product-managers.md
+│   └── for-developers.md
+├── technical/                     # Technical docs
+│   ├── how-it-works.md
+│   ├── api-reference.md
+│   └── harvester-v4.md
+├── tutorials/                     # Step-by-step guides
+│   ├── quickstart.md
+│   ├── tutorials.md
+│   └── user-guide.md
+└── examples/
+    └── demo-script.md
+```
+
+
+
+---
+
+## 🛠️ Usage Examples
+
+### Example 1: SaaS Dashboard Design System
+
+```bash
+# Extract existing dashboard
+python scripts/wizard.py --url https://app.vercel.com --name "DashboardDS"
+
+# Generate dashboard components
+python scripts/component_generator.py \
+  --input output/DashboardDS/design-system.json \
+  --component card --component table --component tabs
+
+# Create Stitch prompts for new screens
+python scripts/stitch_integration.py batch \
+  --input output/DashboardDS/design-system.json \
+  --screens dashboard settings profile
+
+# Export to Figma for design team
+python scripts/figma_bridge.py export \
+  --input output/DashboardDS/design-system.json \
+  --name "DashboardDS"
+```
+
+### Example 2: Multi-Product Consistency Audit
+
+```bash
+# Extract all products
+for product in app1 app2 app3; do
+  python scripts/wizard.py --url https://$product.company.com --name $product
+done
+
+# Compare and generate report
+python scripts/figma_bridge.py compare \
+  --harvester output/app1/design-system.json \
+  --figma output/app2/figma-tokens.json > consistency-report.md
+```
+
+### Example 3: MCP Server with Claude
+
+```json
+// ~/.config/claude/claude_desktop_config.json
+{
+  "mcpServers": {
+    "ux-master": {
+      "command": "python3",
+      "args": ["/path/to/ux-master/mcp-server/server.py"]
+    }
+  }
+}
+```
+
+```
+User: Extract design system from https://linear.app
+
+Claude: [Uses harvest_url tool]
+✓ Extracted 47 color tokens
+✓ Extracted 18 typography tokens
+✓ Detected 12 components
+
+User: Generate landing page components
+
+Claude: [Uses generate_components tool]
+✓ Generated Button, Card, Input, Hero components
+
+User: Export to Figma
+
+Claude: [Uses export_to_figma tool]
+✓ Exported figma-tokens.json
+```
+
+### Example 4: CI/CD Integration
+
+```yaml
+# .github/workflows/design-system.yml
+name: Design System Check
+
+on:
+  schedule:
+    - cron: '0 0 * * 1'  # Weekly
+
+jobs:
+  extract:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup
+        run: |
+          pip install playwright
+          playwright install chromium
+      
+      - name: Extract design system
+        run: |
+          python scripts/wizard.py \
+            --url https://staging.myapp.com \
+            --output ./staging-ds
+      
+      - name: Compare with production
+        run: |
+          python scripts/figma_bridge.py compare \
+            --harvester ./production-ds/design-system.json \
+            --figma ./staging-ds/figma-tokens.json
+```
+
+---
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                     UX Master v4 Platform                        │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                  │
+│   🌐 Input Layer                                                 │
+│   ├── URL Extraction (Playwright)                               │
+│   ├── Figma Import                                              │
+│   └── Manual Token Definition                                   │
+│                                                                  │
+│   🔍 Processing Layer                                            │
+│   ├── Harvester v4 (AI Visual Extraction)                       │
+│   │   ├── Color Histogram Analysis                              │
+│   │   ├── Typography Hierarchy Detection                        │
+│   │   ├── Layout Pattern Recognition                            │
+│   │   └── Component Blueprint Extraction                        │
+│   ├── Design System Indexer (Semi Design Architecture)          │
+│   │   ├── Color System (Primary → Neutrals)                     │
+│   │   ├── Typography Scale                                      │
+│   │   ├── Spacing System (8px Grid)                             │
+│   │   └── Shadow & Border Tokens                                │
+│   └── Token Compiler                                            │
+│                                                                  │
+│   📤 Output Layer                                                │
+│   ├── CSS Variables (design-system.css)                         │
+│   ├── JSON Tokens (design-system.json)                          │
+│   ├── Figma Tokens (figma-tokens.json)                          │
+│   ├── React/Vue Components                                      │
+│   ├── DESIGN.md (Google Stitch)                                 │
+│   └── Screenshots (Desktop + Mobile)                            │
+│                                                                  │
+│   🔌 Integration Layer                                           │
+│   ├── MCP Server (Claude/Cursor)                                │
+│   ├── Figma Bridge (Bidirectional Sync)                         │
+│   └── Google Stitch (AI Design Generation)                      │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 📊 Performance Metrics
+
+| Metric | Traditional | UX Master v4 | Improvement |
+|--------|-------------|--------------|-------------|
+| **Extraction Time** | 40 hours | 5 minutes | **480x** |
+| **Component Generation** | 32 hours | Instant | **∞** |
+| **Figma Handoff** | 8 hours | 1 command | **∞** |
+| **Consistency** | 70% | 100% | **43%** |
+| **Developer Onboarding** | 2 weeks | 1 hour | **336x** |
+
+---
+
+## 🎯 Use Cases
+
+### For Design Teams
+- ✅ **Design System Migration**: Extract legacy → Generate new
+- ✅ **Brand Consistency**: Audit multiple products
+- ✅ **Rapid Prototyping**: Extract reference → Generate variations
+- ✅ **Design Handoff**: Exact tokens + components
+
+### For Product Teams
+- ✅ **Design Debt Audit**: Quantify inconsistencies
+- ✅ **M&A Integration**: Unify acquired products
+- ✅ **Vendor Evaluation**: Objective comparison
+- ✅ **Roadmap Planning**: Data-driven decisions
+
+### For Development Teams
+- ✅ **Component Library**: Production-ready code
+- ✅ **Token Standardization**: CSS variables
+- ✅ **Framework Migration**: Extract → Convert → Generate
+- ✅ **CI/CD Integration**: Automated checks
+
+---
+
+## 🛡️ Design System Architecture
+
+Based on **Semi Design** (DouyinFE) — battle-tested by ByteDance:
+
+### Color System
+```css
+/* Brand Colors */
+--semi-color-primary
+--semi-color-secondary
+--semi-color-tertiary
+
+/* Semantic Colors */
+--semi-color-success
+--semi-color-warning
+--semi-color-danger
+--semi-color-info
+
+/* Neutral Scale (50-900) */
+--semi-color-neutral-50  /* Lightest */
+--semi-color-neutral-900 /* Darkest */
+
+/* Background Layers */
+--semi-color-bg-0  /* Page */
+--semi-color-bg-1  /* Card */
+--semi-color-bg-2  /* Sidebar */
+--semi-color-bg-3  /* Header */
+--semi-color-bg-4  /* Modal */
+
+/* Text Colors */
+--semi-color-text-0  /* Primary */
+--semi-color-text-1  /* Secondary */
+--semi-color-text-2  /* Tertiary */
+--semi-color-text-3  /* Disabled */
+```
+
+### Spacing System (8px Grid)
+```css
+--semi-spacing-none: 0
+--semi-spacing-tight: 8px
+--semi-spacing-base: 16px
+--semi-spacing-loose: 24px
+```
+
+### Typography Scale
+```css
+--semi-font-size-header-1: 32px
+--semi-font-size-header-2: 28px
+--semi-font-size-regular: 14px
+--semi-font-size-small: 12px
+```
+
+---
+
+## 🧪 Testing
+
+```bash
+# Run test suite
+python scripts/test_harvester_v4.py
+
+# Output:
+[TEST] File Structure...           ✓ PASS
+[TEST] Harvester v4 JS...          ✓ PASS
+[TEST] Color Utilities...          ✓ PASS
+[TEST] Design System Indexer...    ✓ PASS
+[TEST] Component Generator...      ✓ PASS
+
+Result: 5/5 tests passed
+```
+
+---
+
+## 🚦 Requirements
+
+- **Python**: 3.8+
+- **Playwright**: For browser automation
+- **Node.js**: Optional, for JavaScript components
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+### Development Setup
+
+```bash
+# Clone repository
+git clone https://github.com/ux-master/ux-master.git
+cd ux-master
+
+# Create virtual environment
+python -m venv venv
+source venv/bin/activate
+
+# Install dev dependencies
+pip install -r requirements-dev.txt
+
+# Run tests
+pytest
+```
+
+---
+
+## 📜 License
+
+MIT License — see [LICENSE](LICENSE) for details.
+
+---
+
+## 🌟 Acknowledgments
+
+- **Semi Design** (DouyinFE) — Design system architecture
+- **Playwright** — Browser automation
+- **Figma Tokens Studio** — Design token management
+- **Google Stitch** — AI design generation
+
+---
+
+## 📞 Support
+
+- 📧 Email: support@ux-master.dev
+- 💬 Discord: [Join our community](https://discord.gg/ux-master)
+- 🐦 Twitter: [@uxmaster](https://twitter.com/uxmaster)
+- 📚 Documentation: [docs.ux-master.dev](https://docs.ux-master.dev)
+
+---
+
+## 🎉 What Users Say
+
+> "This is insane. I just got a complete design system in 5 minutes. What used to take weeks!" — **Sarah, Product Designer**
+
+> "Saved us $250,000 in consulting fees. We audited 10 products in 2 days instead of 6 months." — **VP Engineering, Fortune 500**
+
+> "10x productivity boost, no exaggeration. Our developers love the exact tokens and generated components." — **Alex, Frontend Lead**
+
+---
+
+<div align="center">
+
+**[⬆ Back to Top](#-ux-master-v4--ai-powered-design-system-platform)**
+
+**Made with ❤️ by UX Master Team**
+
+**[Documentation](docs/) • [Examples](docs/examples/) • [API Reference](docs/technical/api-reference.md)**
+
+</div>