UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/workflows.ts:106-173 (handler)

  Main handler implementation for workflow_build_design_system tool. Parses input with Zod, builds design system from Storybook or code source, generates tokens/components/docs, returns structured output.

  async buildDesignSystem(args: any) {
    const params = BuildDesignSystemSchema.parse(args);
    
    try {
      const designSystem: any = {
        name: 'Design System',
        version: '1.0.0',
        source: params.source,
        created: new Date().toISOString(),
        tokens: {},
        components: [],
        documentation: {}
      };
  
      switch (params.source) {
        case 'storybook':
          // Build from Storybook
          if (params.includeComponents) {
            const stories = await this.storybookTools.getStories({ url: params.sourceId });
            designSystem.components = this.extractStorybookComponents(stories);
          }
          break;
          
        case 'code':
          // Build from code analysis
          designSystem.components = await this.analyzeCodeComponents(params.sourceId);
          break;
      }
  
      if (params.includeDocumentation) {
        designSystem.documentation = this.generateSystemDocumentation(designSystem);
      }
  
      // Generate output files
      const outputs = {
        tokens: params.includeTokens ? this.generateTokenFiles(designSystem.tokens) : null,
        components: params.includeComponents ? this.generateComponentFiles(designSystem.components) : null,
        documentation: params.includeDocumentation ? this.generateDocFiles(designSystem.documentation) : null
      };
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              designSystem,
              outputs,
              summary: {
                tokenCategories: Object.keys(designSystem.tokens).length,
                componentCount: designSystem.components.length,
                documentationPages: Object.keys(designSystem.documentation).length
              }
            }, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error building design system: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/workflows.ts:15-21 (schema)

  Zod input schema definition used for validating tool arguments in the handler.

  const BuildDesignSystemSchema = z.object({
    source: z.enum(['storybook', 'code']),
    sourceId: z.string(),
    includeTokens: z.boolean().default(true),
    includeComponents: z.boolean().default(true),
    includeDocumentation: z.boolean().default(true)
  });

• src/index.ts:275-291 (registration)

  Tool registration entry in ListToolsRequestHandler providing name, description, and inputSchema.

    name: 'workflow_build_design_system',
    description: 'Generate complete design system from components',
    inputSchema: {
      type: 'object',
      properties: {
        source: {
          type: 'string',
          enum: ['storybook', 'code']
        },
        sourceId: { type: 'string' },
        includeTokens: { type: 'boolean', default: true },
        includeComponents: { type: 'boolean', default: true },
        includeDocumentation: { type: 'boolean', default: true }
      },
      required: ['source', 'sourceId']
    }
  }

• src/index.ts:334-335 (registration)

  Dispatch case in CallToolRequestHandler that routes execution to WorkflowTools.buildDesignSystem method.

  case 'workflow_build_design_system':
    return await this.workflowTools.buildDesignSystem(args);