# MCP Design System Bridge

A Model Context Protocol (MCP) for bidirectional synchronization between IDE and Figma for Design System management.

## Features

### 1. React Component Generation
- Generate React components with TypeScript
- Support for variants using class-variance-authority
- Interactive states (hover, focus, disabled, loading)
- Forwarded refs for composition
- Styled with Tailwind CSS + CSS Modules
- Complete JSDoc documentation
- Automatic Storybook stories
- React Testing Library tests
- Barrel exports

### 2. Figma Component Generation
- Create component frames
- Apply design tokens
- Generate variants automatically
- Create responsive auto-layout
- Integrated documentation

### 3. Figma → IDE Extraction
- Design tokens (colors, typography, shadows, spacing, borders)
- Icons (optimized SVG, multiple formats)
- Images (PNG, JPG, WebP with optimization)
- Components (structure, props, variants)

### 4. IDE → Figma Synchronization
- React component analysis
- Props and variants extraction
- Tailwind/CSS style analysis
- Interactive state detection
- Design token mapping

### 5. Bidirectional Synchronization
- Automatic change detection
- Confirmation prompts
- Visual diff
- Sync history
- Rollback capability

## Installation

```bash
npm install mcp-design-system-bridge
```

## Configuration

Create a `.mcp-config.json` file in your project root:

```json
{
  "figma": {
    "accessToken": "your-figma-access-token",
    "fileId": "your-figma-file-id"
  },
  "paths": {
    "components": "src/components",
    "tokens": "src/tokens",
    "icons": "src/icons",
    "assets": "src/assets"
  },
  "generation": {
    "useTailwind": true,
    "useCSSModules": true,
    "useStorybook": true,
    "useTests": true
  }
}
```

## Usage

### Generate React Component

```typescript
import { MCP } from 'mcp-design-system-bridge';

const mcp = new MCP({
  figmaAccessToken: 'your-token',
  figmaFileId: 'your-file-id'
});

const component = await mcp.generateReactComponent({
  name: 'Button',
  description: 'A button component',
  props: [
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary'",
      required: true
    },
    {
      name: 'size',
      type: "'sm' | 'md' | 'lg'",
      required: true
    }
  ],
  variants: [
    {
      name: 'primary',
      props: {
        backgroundColor: 'var(--color-primary-500)',
        color: 'var(--color-white)'
      }
    }
  ]
});
```

### Extract from Figma

```typescript
const assets = await mcp.extractFromFigma('node-id');
console.log(assets.tokens);
console.log(assets.components);
console.log(assets.icons);
console.log(assets.images);
```

### Sync to Figma

```typescript
const result = await mcp.syncToFigma({
  components: [/* React components */],
  tokens: {/* Design tokens */}
});
```

### Sync from Figma

```typescript
const result = await mcp.syncFromFigma({
  added: [/* New components */],
  modified: [/* Modified components */],
  deleted: [/* Deleted components */],
  conflicts: [/* Conflicts */]
});
```

## Project Structure

```
design-system/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   ├── spacing.json
│   └── shadows.json
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.types.ts
│   │   ├── Button.stories.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   ├── Input/
│   │   ├── Input.tsx
│   │   ├── Input.types.ts
│   │   ├── Input.hooks.ts
│   │   ├── Input.stories.tsx
│   │   ├── Input.test.tsx
│   │   └── index.ts
│   └── Card/
├── hooks/
│   ├── useDesignSystem.ts
│   └── useTheme.ts
├── icons/
├── assets/
├── docs/
└── .mcp-config.json
```

## Development

### Prerequisites

- Node.js 18+
- npm 8+
- Figma account with access token
- React 18+ project

### Setup

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```
3. Create `.mcp-config.json` with your Figma credentials
4. Start development:
   ```bash
   npm run dev
   ```

### Testing

```bash
npm test
```

### Building

```bash
npm run build
```

## Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

## License

MIT

## Support

For support, please open an issue in the GitHub repository.