adobe-xd-mcp/src/handlers/tools.js

Model Context Protocol server for Adobe XD that enables AI-powered design capabilities

/**
 * Tools handler for Adobe XD MCP Server
 * Provides AI-powered design tools for Adobe XD
 */

// Available design tools
const designTools = [
  {
    name: 'generate_website_design',
    description: 'Generate a website design based on provided description',
    parameters: {
      type: 'object',
      properties: {
        description: {
          type: 'string',
          description: 'Detailed description of the website to generate'
        },
        style: {
          type: 'string',
          description: 'Design style (e.g., minimalist, corporate, creative)'
        },
        industry: {
          type: 'string',
          description: 'Target industry for the website'
        },
        colorScheme: {
          type: 'string',
          description: 'Preferred color scheme'
        }
      },
      required: ['description']
    }
  },
  {
    name: 'create_logo',
    description: 'Generate a logo design based on provided description',
    parameters: {
      type: 'object',
      properties: {
        companyName: {
          type: 'string',
          description: 'Name of the company or brand'
        },
        industry: {
          type: 'string',
          description: 'Industry or niche of the company'
        },
        description: {
          type: 'string',
          description: 'Description of the desired logo'
        },
        style: {
          type: 'string',
          description: 'Logo style (e.g., minimalist, vintage, modern)'
        },
        colorScheme: {
          type: 'string',
          description: 'Preferred color scheme'
        }
      },
      required: ['companyName', 'description']
    }
  },
  {
    name: 'design_ui_component',
    description: 'Generate a UI component based on provided specification',
    parameters: {
      type: 'object',
      properties: {
        componentType: {
          type: 'string',
          description: 'Type of component (e.g., button, card, navbar, form)'
        },
        description: {
          type: 'string',
          description: 'Detailed description of the component'
        },
        style: {
          type: 'string',
          description: 'Component style'
        }
      },
      required: ['componentType', 'description']
    }
  },
  {
    name: 'suggest_color_palette',
    description: 'Generate a harmonious color palette based on provided criteria',
    parameters: {
      type: 'object',
      properties: {
        baseColor: {
          type: 'string',
          description: 'Base color (hex, rgb, or name)'
        },
        mood: {
          type: 'string',
          description: 'Desired mood (e.g., energetic, calm, professional)'
        },
        numberOfColors: {
          type: 'integer',
          description: 'Number of colors in the palette'
        }
      },
      required: ['mood']
    }
  },
  {
    name: 'create_design_system',
    description: 'Generate a comprehensive design system',
    parameters: {
      type: 'object',
      properties: {
        brandName: {
          type: 'string',
          description: 'Name of the brand'
        },
        industry: {
          type: 'string',
          description: 'Industry or sector'
        },
        description: {
          type: 'string',
          description: 'Description of the brand and design goals'
        },
        style: {
          type: 'string',
          description: 'Preferred style'
        }
      },
      required: ['brandName', 'description']
    }
  }
];

/**
 * List all available design tools
 * @returns {Array} Array of tool definitions
 */
async function listTools() {
  return designTools;
}

/**
 * Execute a specific design tool
 * @param {string} name - Name of the tool to execute
 * @param {Object} parameters - Tool parameters
 * @returns {Object} Tool execution result
 */
async function executeTool(name, parameters) {
  switch (name) {
    case 'generate_website_design':
      return await generateWebsiteDesign(parameters);
    case 'create_logo':
      return await createLogo(parameters);
    case 'design_ui_component':
      return await designUIComponent(parameters);
    case 'suggest_color_palette':
      return await suggestColorPalette(parameters);
    case 'create_design_system':
      return await createDesignSystem(parameters);
    default:
      throw new Error(`Unknown tool: ${name}`);
  }
}

/**
 * Generate a website design
 * @param {Object} parameters - Website design parameters
 * @returns {Object} Generated design data
 */
async function generateWebsiteDesign(parameters) {
  try {
    // Return a structured object with specifications that the client-side AI agent
    // from Windsurf/Cursor can use to generate the actual design
    
    const designRequest = {
      type: 'website_design',
      description: parameters.description,
      style: parameters.style || 'Not specified',
      industry: parameters.industry || 'Not specified',
      colorScheme: parameters.colorScheme || 'Not specified',
      timestamp: new Date().toISOString()
    };
    
    return {
      design: {
        designRequest: designRequest,
        instructions: `
          Please generate a website design based on the following specifications:
          
          Description: ${parameters.description}
          Style: ${parameters.style || 'Not specified'}
          Industry: ${parameters.industry || 'Not specified'}
          Color Scheme: ${parameters.colorScheme || 'Not specified'}
          
          The design should include:
          - Layout structure
          - Color palette (with specific hex codes)
          - Typography recommendations
          - Component styles
          - Visual elements
          - Key interactions
        `
      }
    };
  } catch (error) {
    console.error('Error generating website design:', error);
    throw new Error(`Failed to generate website design: ${error.message}`);
  }
}

/**
 * Create a logo design
 * @param {Object} parameters - Logo design parameters
 * @returns {Object} Generated logo data
 */
async function createLogo(parameters) {
  try {
    const designRequest = {
      type: 'logo_design',
      companyName: parameters.companyName,
      industry: parameters.industry || 'Not specified',
      description: parameters.description,
      style: parameters.style || 'Not specified',
      colorScheme: parameters.colorScheme || 'Not specified',
      timestamp: new Date().toISOString()
    };
    
    return {
      logo: {
        designRequest: designRequest,
        instructions: `
          Please generate a logo design for:
          
          Company Name: ${parameters.companyName}
          Industry: ${parameters.industry || 'Not specified'}
          Description: ${parameters.description}
          Style: ${parameters.style || 'Not specified'}
          Color Scheme: ${parameters.colorScheme || 'Not specified'}
          
          The logo design should include:
          - Visual elements
          - Typography
          - Color palette (with specific hex codes)
          - Symbolism and meaning
          - Variations (if applicable)
        `
      }
    };
  } catch (error) {
    console.error('Error creating logo:', error);
    throw new Error(`Failed to create logo: ${error.message}`);
  }
}

/**
 * Design a UI component
 * @param {Object} parameters - UI component parameters
 * @returns {Object} Generated component data
 */
async function designUIComponent(parameters) {
  try {
    const designRequest = {
      type: 'ui_component',
      componentType: parameters.componentType,
      description: parameters.description,
      style: parameters.style || 'Not specified',
      timestamp: new Date().toISOString()
    };
    
    return {
      component: {
        type: parameters.componentType,
        designRequest: designRequest,
        instructions: `
          Please design a ${parameters.componentType} UI component with:
          
          Description: ${parameters.description}
          Style: ${parameters.style || 'Not specified'}
          
          The component design should include:
          - Visual appearance
          - Interactions and states
          - Colors and typography
          - Dimensions and spacing
          - Accessibility considerations
        `
      }
    };
  } catch (error) {
    console.error('Error designing UI component:', error);
    throw new Error(`Failed to design UI component: ${error.message}`);
  }
}

/**
 * Generate a color palette
 * @param {Object} parameters - Color palette parameters
 * @returns {Object} Generated color palette
 */
async function suggestColorPalette(parameters) {
  try {
    const designRequest = {
      type: 'color_palette',
      baseColor: parameters.baseColor || 'Not specified',
      mood: parameters.mood,
      numberOfColors: parameters.numberOfColors || 5,
      timestamp: new Date().toISOString()
    };
    
    return {
      colorPalette: {
        designRequest: designRequest,
        instructions: `
          Please generate a harmonious color palette with:
          
          Base Color: ${parameters.baseColor || 'Not specified, please select an appropriate starting color'}
          Mood: ${parameters.mood}
          Number of Colors: ${parameters.numberOfColors || 5}
          
          For each color, please provide:
          - Hex color code
          - A description of the color
          - How it should be used in a design system
          - Accessibility notes (contrast considerations)
        `
      }
    };
  } catch (error) {
    console.error('Error suggesting color palette:', error);
    throw new Error(`Failed to suggest color palette: ${error.message}`);
  }
}

/**
 * Create a design system
 * @param {Object} parameters - Design system parameters
 * @returns {Object} Generated design system data
 */
async function createDesignSystem(parameters) {
  try {
    const designRequest = {
      type: 'design_system',
      brandName: parameters.brandName,
      industry: parameters.industry || 'Not specified',
      description: parameters.description,
      style: parameters.style || 'Not specified',
      timestamp: new Date().toISOString()
    };
    
    return {
      designSystem: {
        designRequest: designRequest,
        instructions: `
          Please generate a comprehensive design system for:
          
          Brand Name: ${parameters.brandName}
          Industry: ${parameters.industry || 'Not specified'}
          Description: ${parameters.description}
          Style: ${parameters.style || 'Not specified'}
          
          The design system should include:
          - Color palette (primary, secondary, accent colors with hex codes)
          - Typography (font families, sizes, weights)
          - Spacing system
          - Component styles (buttons, inputs, cards, etc.)
          - Iconography approach
          - Grid system
          - Design principles
        `
      }
    };
  } catch (error) {
    console.error('Error creating design system:', error);
    throw new Error(`Failed to create design system: ${error.message}`);
  }
}

module.exports = {
  listTools,
  executeTool
};