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