create_theme
Generate custom Tailwind CSS themes with AI assistance for consistent design systems. Specify brand color, style, color shades, typography, and spacing to create and export a tailwind.config.js file.
Instructions
Generate custom Tailwind theme with AI assistance
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| brandColor | Yes | Primary brand color (hex, rgb, or color name) | |
| colorCount | No | Number of color shades to generate | |
| includeConfig | No | Generate tailwind.config.js | |
| spacing | No | Include custom spacing scale | |
| style | No | Design style | modern |
| typography | No | Include typography scale |
Input Schema (JSON Schema)
{
"properties": {
"brandColor": {
"description": "Primary brand color (hex, rgb, or color name)",
"type": "string"
},
"colorCount": {
"default": 9,
"description": "Number of color shades to generate",
"maximum": 11,
"minimum": 5,
"type": "number"
},
"includeConfig": {
"default": true,
"description": "Generate tailwind.config.js",
"type": "boolean"
},
"spacing": {
"default": true,
"description": "Include custom spacing scale",
"type": "boolean"
},
"style": {
"default": "modern",
"description": "Design style",
"enum": [
"minimal",
"modern",
"classic",
"bold",
"elegant"
],
"type": "string"
},
"typography": {
"default": true,
"description": "Include typography scale",
"type": "boolean"
}
},
"required": [
"brandColor"
],
"type": "object"
}