design_block
Create detailed designs for specific blocks in a component-based system using natural language prompts. Supports Vue, React, and Angular for precise frontend development.
Instructions
Design a specific block. This is the second-stage tool in the block-based design strategy for detailed component design.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| blockId | Yes | ID of the design block to design | |
| blockInfo | No | Detailed information of the block (optional) | |
| integratedContext | No | Integration context (optional): contains the overall strategy and completed block designs to return an updated integrated design snapshot | |
| prompt | Yes | Specific requirement description for the block |
Implementation Reference
- src/tools/design/block.ts:19-117 (handler)The core handler function `designBlockTool` that implements the tool logic: validates inputs, builds design request, calls `processSmartBlockDesign`, handles integration, formats MCP-compliant response with text and JSON data.export async function designBlockTool(args: any): Promise<{ content: any[] }> { const startTime = Date.now(); try { // Validate input parameters if (!args || typeof args.blockId !== 'string' || !args.blockId.trim()) { throw new Error('Missing required parameter: blockId is required'); } if (!Array.isArray(args.prompt)) { throw new Error('Missing required parameter: prompt is required'); } // Build request object const request: ComponentDesignRequest = { prompt: args.prompt, rules: Array.isArray(args.rules) ? args.rules : [], aiModel: getRecommendedModel(ModelPurpose.DESIGN), // 使用内置的推荐模型 component: args.component, }; // Process smart block design const blockDesign: ComponentDesign = await processSmartBlockDesign( request, args.blockId, args.blockInfo, args.integratedContext ); // 构建完整的返回结果 const result: DesignToolResult = { success: true, data: blockDesign, metadata: { processingTime: Date.now() - startTime, model: request.aiModel, timestamp: new Date().toISOString(), blockId: args.blockId, }, }; // 如果有集成上下文，尝试集成设计 let integrated = null; if ( args.integratedContext?.strategy && args.integratedContext?.blockDesigns ) { try { integrated = integrateDesign(args.integratedContext.strategy, [ ...args.integratedContext.blockDesigns, blockDesign, ]); } catch (e) { console.warn('[BlockTool] integrateDesign error:', e); } } return { content: [ { type: 'text', text: formatBlockDesignResult(blockDesign, args.blockId), }, { type: 'text', text: JSON.stringify({ result, integrated, nextAction: integrated ? { tool: 'integrate_design', arguments: { strategy: args.integratedContext?.strategy, blockDesigns: [ ...(args.integratedContext?.blockDesigns || []), blockDesign, ], }, reason: 'Block design completed, ready for integration', } : null, }), }, ], }; } catch (error) { console.error('Design block tool error:', error); const message = error instanceof Error ? error.message : 'Unknown error occurred'; return { content: [ { type: 'text', text: `❌ Block design failed: ${message}`, }, ], }; } }
- src/mcp-server.ts:107-156 (registration)Tool registration in the listTools handler: defines name 'design_block', description, and detailed inputSchema for validation.{ name: 'design_block', description: 'Design a specific block. This is the second-stage tool in the block-based design strategy for detailed component design.', inputSchema: { type: 'object', properties: { blockId: { type: 'string', description: 'ID of the design block to design', }, prompt: { type: 'array', description: 'Specific requirement description for the block', items: { type: 'object', properties: { type: { type: 'string', enum: ['text', 'image'] }, text: { type: 'string' }, image: { type: 'string' }, }, required: ['type'], }, }, blockInfo: { type: 'object', description: 'Detailed information of the block (optional)', properties: { blockId: { type: 'string' }, blockType: { type: 'string', enum: ['layout', 'component', 'logic'], }, title: { type: 'string' }, description: { type: 'string' }, priority: { type: 'string', enum: ['high', 'medium', 'low'] }, }, }, integratedContext: { type: 'object', description: 'Integration context (optional): contains the overall strategy and completed block designs to return an updated integrated design snapshot', properties: { strategy: { type: 'object' }, blockDesigns: { type: 'array' }, }, }, }, required: ['blockId', 'prompt'], },
- src/mcp-server.ts:193-194 (registration)Tool dispatch in the callTool handler: routes 'design_block' calls to the designBlockTool implementation.case 'design_block': return await designBlockTool(args);
- src/types/mcp-types.ts:68-77 (schema)TypeScript interface definition for DesignBlock, used in block design strategy and results.export interface DesignBlock { blockId: string; blockType: 'layout' | 'component' | 'logic'; title: string; description: string; components: string[]; dependencies: string[]; estimatedTokens: number; priority: 'high' | 'medium' | 'low'; }