# Design Compliance Bot

OpenClaw skill for automated design system compliance checking with Figma integration.

## Features

- ✅ **Rule Engine** - Define brand guidelines (colors, typography, spacing, border radius)
- 🔍 **Figma Scanning** - Automatically analyze Figma files for violations
- 📊 **Reports** - Generate HTML/PDF compliance reports
- ⏰ **Scheduled Checks** - Cron-based periodic audits
- 🔔 **Notifications** - Slack/Discord alerts for violations
- 🐛 **GitHub Issues** - Auto-create issues for critical violations

## Installation

```bash
npm install @openclaw/design-compliance-bot
```

Or use as an OpenClaw skill:

```bash
openclaw skill install design-compliance-bot
```

## Quick Start

1. Create `design-rules.json`:

```json
{
  "colors": {
    "primary": ["#FF6B35", "#F7931E"],
    "secondary": ["#4ECDC4"],
    "neutral": ["#2C3E50", "#ECF0F1"]
  },
  "typography": {
    "families": ["Inter", "Roboto"],
    "sizes": [12, 14, 16, 24, 32],
    "weights": [400, 600, 700]
  },
  "spacing": {
    "values": [4, 8, 16, 24, 32],
    "tolerance": 2
  }
}
```

2. Set up environment:

```bash
cp .env.example .env
# Add your tokens
```

3. Check a file:

```bash
design-compliance check --file YOUR_FIGMA_FILE_KEY
```

## CLI Usage

```bash
# Check design compliance
design-compliance check --file FILE_KEY --rules design-rules.json

# Generate report
design-compliance report --file FILE_KEY --output report.html

# Schedule periodic checks
design-compliance schedule --cron "0 9 * * *" --files FILE_KEY1 FILE_KEY2

# With notifications
design-compliance check --file FILE_KEY --slack-webhook https://...
```

## Programmatic Usage

```typescript
import { DesignComplianceBot } from '@openclaw/design-compliance-bot';

const bot = new DesignComplianceBot({
  figmaToken: process.env.FIGMA_ACCESS_TOKEN!,
  rules: './design-rules.json',
  githubToken: process.env.GITHUB_TOKEN,
});

// Check a file
const violations = await bot.check('YOUR_FILE_KEY');

// Generate report
await bot.generateReport('YOUR_FILE_KEY', {
  format: 'html',
  output: 'report.html',
});

// Schedule checks
bot.schedule('0 9 * * *', async () => {
  await bot.check('YOUR_FILE_KEY');
});
```

## Configuration

### Design Rules

```json
{
  "colors": {
    "primary": ["#hex"],
    "secondary": ["#hex"],
    "neutral": ["#hex"],
    "allowUnknown": false
  },
  "typography": {
    "families": ["Font Name"],
    "sizes": [12, 16, 24],
    "weights": [400, 700]
  },
  "spacing": {
    "values": [4, 8, 16],
    "tolerance": 2
  },
  "borderRadius": {
    "values": [0, 4, 8],
    "tolerance": 1
  },
  "ignore": {
    "frames": ["*-WIP", "*-Draft"],
    "components": ["Experimental/*"]
  },
  "severity": {
    "colors": "critical",
    "typography": "warning",
    "spacing": "info"
  }
}
```

### Environment Variables

```env
FIGMA_ACCESS_TOKEN=your_figma_token
GITHUB_TOKEN=your_github_token
SLACK_WEBHOOK_URL=your_slack_webhook
DISCORD_WEBHOOK_URL=your_discord_webhook
```

## Examples

### Daily Design Audit

```bash
# Add to crontab
0 9 * * * cd /path/to/project && design-compliance check --file FILE_KEY --slack-webhook $SLACK_URL
```

### CI/CD Integration

```yaml
# .github/workflows/design-check.yml
name: Design Compliance
on: [push]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install -g @openclaw/design-compliance-bot
      - run: design-compliance check --file ${{ secrets.FIGMA_FILE_KEY }}
        env:
          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_TOKEN }}
```

### OpenClaw Integration

```typescript
// In your OpenClaw automation
import { DesignComplianceBot } from '@openclaw/design-compliance-bot';

export async function dailyDesignCheck() {
  const bot = new DesignComplianceBot({
    figmaToken: process.env.FIGMA_ACCESS_TOKEN!,
    rules: './design-rules.json',
  });

  const violations = await bot.check(process.env.FIGMA_FILE_KEY!);

  if (violations.length > 0) {
    // Send notification via OpenClaw
    await message.send({
      target: 'design-team',
      message: `⚠️ ${violations.length} design violations found!`,
    });
  }
}
```

## Reports

Reports include:

- Violation summary by type and severity
- Detailed violation list with:
  - Node name and type
  - Expected vs actual values
  - Frame and page location
  - Severity level
- Visual design with color-coded severity

## GitHub Integration

When enabled, creates issues with:

- Violation details
- Severity badges
- Auto-labels
- Links to Figma

## Development

```bash
# Install dependencies
npm install

# Build
npm run build

# Test
npm test

# Development mode
npm run dev
```

## License

MIT

## Contributing

Contributions welcome! Please open an issue or PR.

## Support

- GitHub Issues: https://github.com/openclaw/design-compliance-bot/issues
- Documentation: https://openclaw.dev/skills/design-compliance-bot