Avocode MCP MCP Server

About

## Avocode MCP Server: Design Handoff Automation The **Avocode MCP Server** integrates the design-to-code handoff platform directly into Google Antigravity, enabling AI assistants to extract code, assets, and specifications from design files programmatically. This integration streamlines the design-development workflow by automating the handoff process. ### Why Avocode MCP? - **Multi-Format Support**: Process Sketch, Figma, XD, Photoshop, and Illustrator files in one platform - **Code Generation**: Extract CSS, Swift, Android XML, and React Native code from design layers - **Asset Export**: Automatically export optimized assets in multiple formats and resolutions - **Design Specs**: Generate accurate measurements, colors, and typography specifications - **Version Comparison**: Compare design versions and identify visual differences ### Key Features #### 1. Code Extraction ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Extract the CSS code for this button component from the design file" }], tools=[{ "name": "avocode_code", "description": "Extract code from designs" }] ) ``` #### 2. Asset Export ```python # Export design assets response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Export all icons from this screen as SVG and PNG at 1x, 2x, and 3x" }], tools=[{"name": "avocode_export", "description": "Export design assets"}] ) ``` #### 3. Spec Generation ```python # Generate specifications response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Generate the style guide specifications including colors, fonts, and spacing" }], tools=[{"name": "avocode_specs", "description": "Generate design specs"}] ) ``` #### 4. Version Compare ```python # Compare design versions response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Compare the current design with the previous version and highlight changes" }], tools=[{"name": "avocode_compare", "description": "Compare design versions"}] ) ``` ### Configuration ```json { "mcpServers": { "avocode": { "command": "npx", "args": ["-y", "@anthropic/mcp-avocode"], "env": { "AVOCODE_ACCESS_TOKEN": "your-avocode-access-token" } } } } ``` ### Use Cases **Developer Handoff**: Automate the extraction of code, assets, and specs from design files for developers. **Design System Building**: Extract consistent styles and components to build design system documentation. **Asset Pipeline**: Create automated workflows that export production-ready assets from design updates. **QA Verification**: Compare implementations against design specs for visual quality assurance. The Avocode MCP Server brings design handoff automation directly into your development workflow, eliminating manual extraction tasks.

Installation

{
  "mcpServers": {
    "avocode": {}
  }
}

How to Use