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

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

Input Schema (JSON Schema)

{
  "properties": {
    "component": {
      "description": "Existing component information (optional, for updates)",
      "properties": {
        "code": {
          "type": "string"
        },
        "id": {
          "type": "string"
        },
        "name": {
          "type": "string"
        }
      },
      "type": "object"
    },
    "prompt": {
      "description": "User business requirements or design description",
      "items": {
        "properties": {
          "image": {
            "type": "string"
          },
          "text": {
            "type": "string"
          },
          "type": {
            "enum": [
              "text",
              "image"
            ],
            "type": "string"
          }
        },
        "required": [
          "type"
        ],
        "type": "object"
      },
      "type": "array"
    }
  },
  "required": [
    "prompt"
  ],
  "type": "object"
}

mcp-garendesign

design_component

Instructions

Input Schema

Input Schema (JSON Schema)

Other Tools from mcp-garendesign

Related Tools

MCP directory API