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

npm install @openclaw/design-compliance-bot

Or use as an OpenClaw skill:

openclaw skill install design-compliance-bot

Quick Start

1. Create design-rules.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:

cp .env.example .env
# Add your tokens

3. Check a file:

design-compliance check --file YOUR_FIGMA_FILE_KEY

CLI Usage

# 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

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

{
  "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

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

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

CI/CD Integration

# .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

// 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

# 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