Skip to content

README.md

Latest commit

 

History

History
320 lines (245 loc) · 8.74 KB

README.md

File metadata and controls

320 lines (245 loc) · 8.74 KB
Raw
file_type documentation
title Design Partner Agent
description Multi-provider AI design consultant for design systems, accessibility assessment, and UI/UX review
version 1.0.1
created_date 2026-07-22
last_updated 2026-08-19
maintainer LightSpeed Team
authors
LightSpeed Team
license GPL-3.0
stability stable
status production
domain design
focus partner-collaboration
tags
design
accessibility
figma
design-systems
ui-ux

Design Partner Agent

Multi-provider AI design consultant for design systems, accessibility assessment, and collaborative design work.

Overview

The Design Partner Agent provides expert design consultation across Figma, design systems, and accessibility standards. Deploy as a design partner for strategic guidance, design system audits, component documentation, and WCAG 2.2 AA compliance assessment.

Domain Coverage

  • Design Systems – Architecture, component libraries, token management
  • Accessibility – WCAG 2.2 AA compliance, color contrast, semantic markup
  • UI/UX Review – Design quality, interaction patterns, visual consistency
  • Figma Integration – File inspection, token extraction, Code Connect mapping
  • Documentation – Component specs, design decisions, usage guidelines

Key Features

✅ Design system analysis and validation
✅ WCAG 2.2 AA accessibility audits
✅ Component documentation and specifications
✅ Design token extraction and management
✅ Figma design file integration
✅ Color contrast and readability assessment
✅ Design decision record generation
✅ Multi-provider design sync
✅ Responsive design review
✅ Component variant documentation

Provider Support Matrix

Provider Status Tier Key Features
Claude ✅ Production Full Deep analysis, streaming, file operations, design token export
GitHub Copilot ✅ Production Full GitHub Projects integration, design sync, workflows
OpenAI ✅ Production Full Function calling, API automation, batch processing

Provider Strengths

Claude: Best for in-depth design analysis, design system audits, comprehensive documentation generation
Copilot: Best for GitHub-native workflows, design sync with repos, GitHub Projects integration
OpenAI: Best for API automation, design tooling integration, batch processing workflows

Installation & Setup

Claude Integration

# 1. Enable agent in Claude Code
claude code --agent design-partner

# 2. Configure Figma API access in .claude/settings.json

<!-- security:documentation-example - placeholder value, not a real credential -->
```json
{
  "agents": {
    "design-partner": {
      "enabled": true,
      "integrations": {
        "figma": {
          "api_key": "YOUR_FIGMA_API_KEY_HERE"
        }
      }
    }
  }
}

3. Verify configuration

claude agent validate design-partner


## GitHub Copilot Integration

```bash
# 1. Install skill in GitHub Copilot
gh extension install lightspeedwp/copilot-design-partner

# 2. Configure in .github/copilot-config.yml
agents:
  design-partner:
    enabled: true
    skills:
      - design-system-analysis
      - accessibility-audit
      - component-documentation

# 3. Enable in GitHub Projects
gh project configure --agent design-partner

OpenAI Integration

# 1. Configure API credentials
export OPENAI_API_KEY="sk-..."

# 2. Update agent configuration
curl -X POST https://api.openai.com/v1/assistants \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d @openai/assistant-config.json

# 3. Deploy function schemas
cp openai/tools.json /path/to/openai-functions/

Usage Examples

Design System Audit (Claude)

claude chat --agent design-partner

User: > Audit our design system in Figma.
      > Check component consistency, verify accessibility,
      > and document all design tokens.
      > File: https://figma.com/file/abc123/design-system

Agent: 
[Connects to Figma API, analyzes file structure]
[Extracts and validates design tokens]
[Checks color contrast ratios]
[Generates comprehensive audit report]

Output:
- Design System Audit Report (Markdown)
- Token Documentation (JSON/CSV)
- Component Inventory
- Accessibility Compliance Checklist
- Remediation Roadmap

Accessibility Review (Copilot)

@design-partner review this design for WCAG 2.2 AA compliance
figma-file: https://figma.com/file/xyz789/marketing-site

Agent analyzes:
- Color contrast ratios
- Semantic structure
- Interactive element states
- Responsive accessibility
- Focus management

Outputs:
- GitHub Issue with accessibility violations
- Pull request with design recommendations
- Automated accessibility report

Component Documentation (OpenAI)

curl -X POST https://api.openai.com/v1/threads/runs \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "assistant_id": "asst_design_partner",
    "messages": [{
      "role": "user",
      "content": "Generate component documentation for Button family including all variants and states"
    }]
  }'

Agent generates:
- Component specification document
- Variant and state matrix
- Usage guidelines
- Code examples
- Accessibility requirements

Core Capabilities

1. Design System Analysis

  • Component library structure review
  • Token organization assessment
  • Design pattern identification
  • Consistency checking across components

2. Accessibility Assessment

  • WCAG 2.2 AA compliance verification
  • Color contrast ratio analysis
  • Keyboard navigation review
  • Screen reader compatibility check
  • Focus management assessment

3. Component Documentation

  • Specification generation
  • Variant and state documentation
  • Usage guidelines and examples
  • Props and API documentation
  • Code Connect mapping

4. Design Token Management

  • Token extraction from Figma
  • Token naming conventions
  • Token hierarchy validation
  • Export to multiple formats (JSON, CSS, JavaScript)

5. Figma Integration

  • Design file inspection and analysis
  • Component variant mapping
  • Design token extraction
  • Code Connect integration
  • Design-to-code documentation

6. UI/UX Review

  • Visual consistency assessment
  • Interaction pattern review
  • Responsive design validation
  • Usability heuristics evaluation
  • Design quality scoring

Configuration Files

File Purpose Size
AGENT.md Complete agent specification 500-700 lines
claude/agent.md Claude-specific instructions 400-500 lines
claude/tools.json Claude tool schemas 500-700 lines
copilot/agent.md Copilot skill definitions 400-500 lines
copilot/skills.yaml YAML skill specifications 400-500 lines
openai/agent.md OpenAI API configuration 400-500 lines
openai/tools.json OpenAI function schemas 500-700 lines
shared/core-prompt.md Provider-agnostic methodology 800-1000 lines

Quick Command Reference

# Claude Code
claude agent enable design-partner
claude chat --agent design-partner

# GitHub Copilot
@design-partner analyze design-system
@design-partner audit accessibility

# OpenAI API
openai assistant call design-partner

Security & Compliance

  • ✅ Read-only Figma access (design team maintains source of truth)
  • ✅ WCAG 2.2 AA compliance verification
  • ✅ No credential exposure
  • ✅ Audit trail for all design reviews
  • ✅ GDPR and CCPA compliant
  • ✅ Design IP protection

Troubleshooting

Issue: Figma API connection fails
Solution: Verify Figma API key in environment variables and API rate limits

Issue: Design tokens not extracting correctly
Solution: Ensure design file has proper token naming conventions and plugin installed

Issue: Color contrast calculation differs from Figma
Solution: Use WCAG AA formula verification; some tools may use different calculation methods

Related Resources

Support

For issues, feature requests, or agent improvements:

Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!

Contributing

Please see CONTRIBUTING.md for details.