design_component

Analyze user requirements and generate block-based component designs for Vue, React, and Angular. Breaks complex needs into manageable steps, supporting updates and detailed project generation.

Instructions

Analyze user requirements and develop a block-based design strategy. Use this when users ask to 'design component', 'create component', or 'component design'. For complex needs, it breaks down into multiple blocks with step-by-step guidance.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`component`	No	Existing component information (optional, for updates)
`prompt`	Yes	User business requirements or design description

Implementation Reference

src/tools/design/component.ts:59-74 (handler)

Main handler function that executes the design_component tool logic: validates args, generates smart design strategy, determines next action, builds response content.

export async function designComponentTool(args: any): Promise<ToolResponse> {
  try {
    const validatedArgs = validateAndNormalizeArgs(args);
    const request = buildDesignRequest(validatedArgs);

    // Use smart design strategy
    const designStrategy = await generateSmartDesignStrategy(request);

    const nextAction = generateNextAction(designStrategy, validatedArgs);
    const content = buildResponseContent(designStrategy, nextAction);

    return { content };
  } catch (error) {
    return buildErrorResponse(error);
  }
}

src/tools/design/component.ts:24-32 (schema)

TypeScript interface defining input arguments for the tool.

interface DesignComponentArgs {
  prompt: Prompt[];
  rules?: any[];
  component?: {
    id: string;
    name: string;
    code: string;
  };
}

src/mcp-server.ts:59-91 (registration)

MCP tool registration in listTools handler: defines name 'design_component', description, and input schema.

  name: 'design_component',
  description:
    "Analyze user requirements and develop a block-based design strategy. Use this when users ask to 'design component', 'create component', or 'component design'. For complex needs, it breaks down into multiple blocks with step-by-step guidance.",
  inputSchema: {
    type: 'object',
    properties: {
      prompt: {
        type: 'array',
        description: 'User business requirements or design description',
        items: {
          type: 'object',
          properties: {
            type: { type: 'string', enum: ['text', 'image'] },
            text: { type: 'string' },
            image: { type: 'string' },
          },
          required: ['type'],
        },
      },
      component: {
        type: 'object',
        description:
          'Existing component information (optional, for updates)',
        properties: {
          id: { type: 'string' },
          name: { type: 'string' },
          code: { type: 'string' },
        },
      },
    },
    required: ['prompt'],
  },
},

src/mcp-server.ts:187-188 (registration)
Dispatch handler in callToolRequest that maps 'design_component' to designComponentTool execution.
```
case 'design_component':
  return await designComponentTool(args);
```

src/tools/design/component.ts:79-89 (helper)

Helper function to validate and normalize input arguments.

function validateAndNormalizeArgs(args: any): DesignComponentArgs {
  if (!args || !Array.isArray(args.prompt)) {
    throw new Error('Missing required parameter: prompt is required');
  }

  return {
    prompt: args.prompt,
    rules: Array.isArray(args.rules) ? args.rules : [],
    component: args.component,
  };
}

mcp-garendesign