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); }