DesignSystem-Pro-Max - Design System Intelligence

Searchable database of design system specifications, component guidelines, color tokens, typography scales, and framework-specific best practices.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

When user requests design system work (search specs, generate code, audit compliance), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

• Component type: Button, Input, Modal, Table, etc.
• Framework: AntD, Material-UI, Bootstrap, Tailwind, Chakra, Elements, Figma
• Task type: Search specs, generate code, audit violations
• Output format: CSS (primary), component code

Step 2: Search Design Specifications

Use search.py to gather comprehensive information:

python3 .claude/skills/ds-pro-max/scripts/search.py "<keyword>" --domain <domain> [--max-results <n>]
python3 .claude/skills/ds-pro-max/scripts/search.py "<keyword>" --stack <stack> [--max-results <n>]

Available Domains:

Available Stacks:

Step 3: Generate Compliant Code

Use generate.py to generate CSS code based on specifications:

python3 .claude/skills/ds-pro-max/scripts/generate.py "<query>" --stack <stack> --output <file.css>

Example:

# Generate color token CSS for Ant Design
python3 .claude/skills/ds-pro-max/scripts/generate.py "primary color tokens" --stack react-antd --output colors.css

# Generate spacing scale for Tailwind
python3 .claude/skills/ds-pro-max/scripts/generate.py "spacing scale" --stack tailwind --output spacing.css

Step 4: Audit Code for Compliance

Use audit.py to check code for design system compliance:

python3 .claude/skills/ds-pro-max/scripts/audit.py <file.css> --stack <stack>

Audit checks include:

• Naming conventions (kebab-case, CSS variables)
• Property value validity (colors, spacing tokens)
• Accessibility (color contrast, focus states)
• Best practices (shorthands, specificity)

Example Workflows

Example 1: Create a Primary Button

User request: "Create a primary button using Ant Design"

AI should:

# 1. Search component specs
python3 .claude/skills/ds-pro-max/scripts/search.py "primary button" --domain component --stack react-antd

# 2. Search color specs
python3 .claude/skills/ds-pro-max/scripts/search.py "primary color" --domain color --stack react-antd

# 3. Generate CSS if needed
python3 .claude/skills/ds-pro-max/scripts/generate.py "primary button styles" --stack react-antd --output button.css

Then: Synthesize results and implement:

import { Button } from 'antd';

<Button type="primary">Primary Button</Button>

Example 2: Migrate Bootstrap to Tailwind

User request: "Convert Bootstrap button to Tailwind"

AI should:

# 1. Search Bootstrap button spec
python3 .claude/skills/ds-pro-max/scripts/search.py "button" --stack bootstrap

# 2. Search Tailwind button spec
python3 .claude/skills/ds-pro-max/scripts/search.py "button utility classes" --stack tailwind

# 3. Generate Tailwind CSS
python3 .claude/skills/ds-pro-max/scripts/generate.py "button styles" --stack tailwind --output tailwind-button.css

Then: Provide migration:

<!-- Before (Bootstrap) -->
<button class="btn btn-primary">Click</button>

<!-- After (Tailwind) -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click</button>

Example 3: Audit CSS for Compliance

User request: "Check this CSS for Ant Design compliance"

AI should:

# Audit the CSS file
python3 .claude/skills/ds-pro-max/scripts/audit.py styles.css --stack react-antd

Then: Report violations with fixes:

/* Violation: Using non-standard color */
.btn-primary { background: #1890; }
/* Fix: Use standard color token */
.btn-primary { background: var(--primary-color); }

Common Design System Rules

Naming Conventions

Color Tokens

Spacing Scale

Accessibility

Pre-Delivery Checklist

Before delivering design system code, verify:

Compliance

• All colors use CSS variables/tokens
• Spacing follows the defined scale
• Naming follows framework conventions
• Component props match framework API

Accessibility

• Color contrast meets WCAG AA (4.5:1)
• Focus states are visible
• ARIA labels present where needed
• Keyboard navigation works

Best Practices

• No hardcoded values (use tokens)
• Consistent naming across files
• Proper component composition
• Framework-specific patterns followed

Tips for Better Results

1. Be specific - "AntD primary button" > "button"
2. Use stack flag - Get framework-specific guidelines
3. Search multiple domains - Component + Color + Typography = Complete spec
4. Generate before implementing - Get CSS structure from generate.py
5. Audit your code - Check for violations before delivery
6. Reference official docs - Always link to framework documentation

CLI Reference

search.py

python3 scripts/search.py "<query>" [options]

Options:
  --domain, -d    Domain to search (component, color, typography, spacing, tokens)
  --stack, -s     Stack to search (react-antd, material-ui, figma-tokens, etc.)
  --max-results, -n  Maximum results (default: 3)
  --json          Output as JSON
  --list-domains  List available domains
  --list-stacks   List available stacks

generate.py

python3 scripts/generate.py "<query>" [options]

Options:
  --stack, -s     Stack for code generation (required)
  --output, -o    Output file path (required)
  --format, -f    Output format (default: css)

audit.py

python3 scripts/audit.py <file.css> [options]

Options:
  --stack, -s     Stack for compliance check (required)
  --format, -f    Output format (default: text)
  --fixes         Include suggested fixes