Superdesign MCP Server

Instructions

Implementation Reference

• src/index.ts:2083-2140 (handler)

  Handler function for superdesign_generate tool. Parses input using GenerateDesignSchema, computes output directory and filenames, generates detailed specifications text for Claude Code to create design files, and returns it as tool response.

          const superdesignDir = getSuperdeignDirectory();
          const designIterationsDir = path.join(superdesignDir, 'design_iterations');
          const baseName = generateBaseName(prompt);
          const extension = (design_type === 'logo' || design_type === 'icon') ? 'svg' : 'html';
          
          // Create file list for variations
          const fileList = [];
          for (let i = 1; i <= variations; i++) {
            fileList.push(`${baseName}_${i}.${extension}`);
          }
          
          // Build design specifications
          let specifications = `DESIGN SPECIFICATION FOR CLAUDE CODE:
  
  IMPORTANT: You must generate and save the following design files based on these specifications.
  
  === DESIGN PARAMETERS ===
  - Type: ${design_type}
  - Prompt: ${prompt}
  - Framework: ${framework}
  - Files to create: ${variations} variations
  - File format: ${extension.toUpperCase()}
  
  === FILES TO CREATE ===
  ${fileList.map((file, index) => `${index + 1}. ${path.join(designIterationsDir, file)}`).join('\n')}
  
  === DESIGN GUIDELINES ===
  ${design_type === 'wireframe' ? '- Create minimal black and white wireframes with no colors\n- Use simple line styles like Balsamiq\n- No annotations or decorative elements' : ''}
  ${design_type === 'component' ? `- Generate a single ${framework} component with mock data\n- Focus only on the component itself\n- Include proper component structure for ${framework}` : ''}
  ${design_type === 'logo' || design_type === 'icon' ? '- Create proper SVG code with vector graphics\n- Ensure SVG is valid and well-structured\n- Focus on clean, scalable design' : ''}
  ${design_type === 'ui' ? '- Create complete responsive HTML interface\n- Use Tailwind CSS via CDN\n- Follow all UI design guidelines below' : ''}
  
  === SUPERDESIGN SYSTEM PROMPT ===
  ${SUPERDESIGN_SYSTEM_PROMPT}
  
  === EXECUTION INSTRUCTIONS ===
  1. Create the superdesign/design_iterations directory if it doesn't exist
  2. Generate ${variations} unique variations of the ${design_type} based on the prompt: "${prompt}"
  3. Save each variation with the exact filenames listed above
  4. Each variation should be different but follow the same design brief
  5. Follow all Superdesign guidelines and constraints
  6. **AFTER ALL ${variations} FILES ARE COMPLETED**: Use the superdesign_gallery tool to generate and automatically open the gallery
  7. **DO NOT** open individual design files - only open the gallery at the end
  
  **WORKFLOW:**
  - Step 1-5: Create all design files
  - Step 6: Call superdesign_gallery tool (which will auto-open the gallery)
  - Step 7: User will see all designs in the integrated gallery interface
  
  Please proceed to create these ${variations} design files now, then automatically generate and open the gallery.`;
  
          return {
            content: [{ type: "text", text: specifications }],
          };
        }
  
        case "superdesign_iterate": {

• src/index.ts:24-29 (schema)

  Zod schema for validating input parameters of the superdesign_generate tool.

  const GenerateDesignSchema = z.object({
    prompt: z.string().describe("Design prompt describing what to create"),
    design_type: z.enum(["ui", "wireframe", "component", "logo", "icon"]).describe("Type of design to generate"),
    variations: z.number().min(1).max(5).default(3).describe("Number of design variations to create"),
    framework: z.enum(["html", "react", "vue"]).default("html").describe("Framework for UI components")
  });

• src/index.ts:1933-1959 (registration)

  Tool registration in the listTools response, including name, description, and JSON schema matching the Zod schema.

  name: "superdesign_generate",
  description: "Returns design specifications for Claude Code to generate UI designs, wireframes, components, logos, or icons",
  inputSchema: {
    type: "object",
    properties: {
      prompt: { type: "string", description: "Design prompt describing what to create" },
      design_type: { 
        type: "string", 
        enum: ["ui", "wireframe", "component", "logo", "icon"],
        description: "Type of design to generate" 
      },
      variations: { 
        type: "number", 
        minimum: 1, 
        maximum: 5, 
        default: 3,
        description: "Number of design variations to create" 
      },
      framework: {
        type: "string",
        enum: ["html", "react", "vue"],
        default: "html",
        description: "Framework for UI components"
      }
    },
    required: ["prompt", "design_type"],
  },

• src/index.ts:76-95 (helper)

  Helper function to get or create the superdesign directory structure, used by the generate handler.

  function getSuperdeignDirectory(workspacePath?: string): string {
    const basePath = workspacePath || process.cwd();
    const superdesignDir = path.join(basePath, 'superdesign');
    
    if (!existsSync(superdesignDir)) {
      mkdirSync(superdesignDir, { recursive: true });
    }
    
    const designIterationsDir = path.join(superdesignDir, 'design_iterations');
    if (!existsSync(designIterationsDir)) {
      mkdirSync(designIterationsDir, { recursive: true });
    }
    
    const designSystemDir = path.join(superdesignDir, 'design_system');
    if (!existsSync(designSystemDir)) {
      mkdirSync(designSystemDir, { recursive: true });
    }
    
    return superdesignDir;
  }

• src/index.ts:286-288 (helper)

  Helper function to generate a base filename from the design prompt, used in handler.

  function generateBaseName(prompt: string): string {
    return prompt.toLowerCase().replace(/[^a-z0-9]/g, '_').substring(0, 20);
  }