DesignSystem-Pro-Max

设计系统 CLI 工具 / Design System CLI Tool

跨多个 UI 框架搜索设计规范、生成符合规范的代码并审计合规性
Search design specifications, generate compliant code, and audit compliance across multiple UI frameworks

Features • Installation • Usage • Stacks • Contributing • License

---

术语对照表 / Terminology

---

Features / 功能

• 🔍 Search / 搜索 - Search design specifications (components, colors, typography, tokens) / 搜索设计规范（组件、颜色、排版、令牌）
• 🎨 Generate / 生成 - Generate compliant CSS code / 生成符合规范的 CSS 代码
• ✅ Audit / 审计 - Audit code for compliance violations with fix suggestions / 审计代码合规性并提供修复建议
• 🌐 Multi-Stack / 多技术栈 - Support for AntD, Material-UI, Figma, Bootstrap, Tailwind, Chakra, Elements / 支持多种 UI 框架
• 🔌 AI Assistant Integration / AI 助手集成 - Claude Code, Cursor, Windsurf, GitHub Copilot

---

Installation / 安装

Via CLI / 通过命令行 (Recommended / 推荐)

npm install -g ds-pro-max
ds-pro-max init --ai claude

Manual / 手动安装

git clone https://github.com/kyirexy/DesignSystem-Pro-Max-skill.git
cd DesignSystem-Pro-Max-skill
pip install -r requirements.txt

---

Usage / 使用

CLI Commands / CLI 命令

# Search design specs / 搜索设计规范
ds-pro-max search "AntD primary button" --stack react-antd

# Generate compliant CSS / 生成符合规范的 CSS
ds-pro-max generate "Figma color tokens" --stack figma-tokens --output tokens.css

# Audit code / 审计代码
ds-pro-max audit styles.css --stack tailwind

Python API / Python 接口

from .claude.skills.ds-pro-max.scripts.core import search

result = search("primary button", domain="component", max_results=3)
print(result)

AI Assistant Integration / AI 助手集成

When using Claude Code, Cursor, or Windsurf, simply describe what you need:
使用 Claude Code、Cursor 或 Windsurf 时，只需描述您的需求：

"Create a primary button using Ant Design"
"使用 Ant Design 创建一个主按钮"

The AI will automatically search the design system specs and generate compliant code.
AI 会自动搜索设计系统规范并生成符合规范的代码。

---

Supported Stacks / 支持的技术栈

---

Available Domains / 可用领域

---

Development / 开发

Setup / 设置

# Install dev dependencies / 安装开发依赖
pip install -r requirements-dev.txt

# Install CLI dependencies / 安装 CLI 依赖
cd cli
npm install

Running Tests / 运行测试

# Run all tests / 运行所有测试
pytest tests/ -v

# Run with coverage / 运行测试并生成覆盖率报告
pytest tests/ --cov=.claude/skills/ds-pro-max/scripts --cov-report=html

Building CLI / 构建 CLI

cd cli
npm run build

---

Architecture / 架构

DesignSystem-Pro-Max-skill/
├── .claude/skills/ds-pro-max/    # Claude Code skill / 技能
│   ├── scripts/
│   │   ├── core.py               # BM25 search engine / 搜索引擎
│   │   ├── search.py             # Search CLI / 搜索命令
│   │   ├── generate.py           # Generate CLI / 生成命令
│   │   └── audit.py              # Audit CLI / 审计命令
│   └── data/                     # CSV knowledge base / CSV 知识库
│       ├── components.csv
│       ├── colors.csv
│       └── stacks/               # Stack-specific guidelines / 技术栈规范
├── cli/                          # NPM CLI package / NPM CLI 包
└── tests/                        # Test suite / 测试套件

---

Star History / 星标历史

...