create_theme
Generate custom Tailwind CSS themes with AI assistance by providing a brand color and design preferences to create color palettes, typography scales, and configuration files.
Instructions
Generate custom Tailwind theme with AI assistance
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| brandColor | Yes | Primary brand color (hex, rgb, or color name) | |
| style | No | Design style | modern |
| colorCount | No | Number of color shades to generate | |
| includeConfig | No | Generate tailwind.config.js | |
| typography | No | Include typography scale | |
| spacing | No | Include custom spacing scale |
Implementation Reference
- src/utils/tool-functions.ts:40-49 (handler)Placeholder implementation of the create_theme tool handler function, imported and called by the MCP server.
export async function createTheme(args: ThemeCreationOptions) { return { content: [ { type: 'text', text: `Created theme: ${args.name}\nStyle: ${args.style}\nPrimary Color: ${args.primaryColor || 'auto'}` } ] }; } - src/index.ts:189-230 (schema)Tool definition including input schema for 'create_theme' in the TOOLS array used for listing tools.
{ name: 'create_theme', description: 'Generate custom Tailwind theme with AI assistance', inputSchema: { type: 'object', properties: { brandColor: { type: 'string', description: 'Primary brand color (hex, rgb, or color name)' }, style: { type: 'string', enum: ['minimal', 'modern', 'classic', 'bold', 'elegant'], default: 'modern', description: 'Design style' }, colorCount: { type: 'number', default: 9, minimum: 5, maximum: 11, description: 'Number of color shades to generate' }, includeConfig: { type: 'boolean', default: true, description: 'Generate tailwind.config.js' }, typography: { type: 'boolean', default: true, description: 'Include typography scale' }, spacing: { type: 'boolean', default: true, description: 'Include custom spacing scale' } }, required: ['brandColor'] } }, - src/index.ts:439-440 (registration)Dispatch in the CallToolRequestSchema handler that routes 'create_theme' calls to the createTheme function.
case 'create_theme': return await createTheme(args as unknown as ThemeCreationOptions); - src/types.ts:27-41 (schema)TypeScript interface defining the expected input shape for the create_theme tool parameters.
export interface ThemeCreationOptions { name: string; style: 'modern' | 'classic' | 'minimal' | 'vibrant' | 'dark' | 'corporate' | 'creative' | 'custom'; primaryColor?: string; accentColor?: string; baseColors?: 'neutral' | 'warm' | 'cool' | 'custom'; typography?: 'sans' | 'serif' | 'mono' | 'custom'; borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; shadows?: 'none' | 'sm' | 'md' | 'lg' | 'xl'; spacing?: 'tight' | 'normal' | 'relaxed' | 'loose'; generateVariants?: boolean; includeDarkMode?: boolean; accessibility?: boolean; framework?: 'tailwind' | 'css-variables' | 'scss' | 'both'; }