create_layout
Generate responsive layouts with Tailwind CSS for dashboards, landing pages, blogs, ecommerce sites, portfolios, and documentation. Specify layout sections and complexity to create HTML, React, Vue, or Svelte components.
Instructions
Generate responsive layouts with Tailwind CSS
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | Layout type | |
| sections | Yes | Layout sections (header, sidebar, main, footer, etc.) | |
| complexity | No | Layout complexity | medium |
| framework | No | Target framework | html |
Implementation Reference
- src/index.ts:361-392 (registration)Registration of the 'create_layout' tool in the TOOLS array, including name, description, and input schema validation.{ name: 'create_layout', description: 'Generate responsive layouts with Tailwind CSS', inputSchema: { type: 'object', properties: { type: { type: 'string', enum: ['dashboard', 'landing', 'blog', 'ecommerce', 'portfolio', 'documentation'], description: 'Layout type' }, sections: { type: 'array', items: { type: 'string' }, description: 'Layout sections (header, sidebar, main, footer, etc.)' }, complexity: { type: 'string', enum: ['simple', 'medium', 'complex'], default: 'medium', description: 'Layout complexity' }, framework: { type: 'string', enum: ['html', 'react', 'vue', 'svelte'], default: 'html', description: 'Target framework' } }, required: ['type', 'sections'] } }
- src/index.ts:449-450 (registration)Dispatch/registration of the create_layout handler in the CallToolRequestSchema switch statement.case 'create_layout': return await createLayout(args as unknown as LayoutOptions);
- src/tools/layout-generator.ts:41-138 (handler)Core handler implementation for the create_layout tool. Generates responsive Tailwind CSS layouts using Gemini AI prompt or fallback template generators, cleans output, and returns formatted response with documentation.export async function createLayout(args: LayoutRequest) { try { const { type, sections, complexity = 'medium', framework = 'html' } = args; let layoutCode = ''; if (isGeminiAvailable()) { const prompt = `Generate a complete ${complexity} ${type} layout using Tailwind CSS with the following specifications: Layout Type: ${type} Sections: ${sections.join(', ')} Complexity: ${complexity} Framework: ${framework} Requirements: 1. Create a fully responsive layout using Tailwind CSS 2. Include proper semantic HTML structure 3. Use modern CSS Grid and Flexbox techniques 4. Implement mobile-first responsive design 5. Include placeholder content that's realistic for a ${type} 6. Add proper spacing, typography, and visual hierarchy 7. Include interactive elements with hover states 8. Ensure accessibility with proper ARIA labels 9. Use appropriate color scheme and styling ${framework === 'react' ? 'Generate as React functional components with TypeScript' : ''} ${framework === 'vue' ? 'Generate as Vue 3 composition API components' : ''} ${framework === 'svelte' ? 'Generate as Svelte components' : ''} For ${type} layout, focus on: ${getLayoutFocusPoints(type)} Return complete, production-ready code with proper structure and styling.`; layoutCode = await callGemini(prompt); } else { layoutCode = generateTemplateLayout(type, sections, complexity, framework); } // Clean up the generated code layoutCode = layoutCode.replace(/```[\w]*\n?/g, '').trim(); return { content: [ { type: 'text', text: `# ${type.charAt(0).toUpperCase() + type.slice(1)} Layout - ${complexity.charAt(0).toUpperCase() + complexity.slice(1)} Complexity ## Generated Layout \`\`\`${framework === 'html' ? 'html' : framework} ${layoutCode} \`\`\` ## Layout Features - **Type**: ${type} - **Complexity**: ${complexity} - **Framework**: ${framework} - **Sections**: ${sections.join(', ')} ## Responsive Breakpoints - **Mobile**: Base styles (< 640px) - **Tablet**: sm: prefix (≥ 640px) - **Desktop**: md: prefix (≥ 768px) - **Large**: lg: prefix (≥ 1024px) - **Extra Large**: xl: prefix (≥ 1280px) ## Customization Tips - Adjust color scheme by modifying color classes - Change spacing with different padding/margin classes - Modify typography with font size and weight classes - Add animations with transition and transform classes - Customize breakpoints for different responsive behavior ## Accessibility Features - Semantic HTML structure - Proper heading hierarchy - ARIA labels where appropriate - Keyboard navigation support - Screen reader friendly content ## Performance Considerations - Optimized class usage - Minimal custom CSS required - Efficient responsive design - Fast rendering with Tailwind's utility-first approach` } ] }; } catch (error) { console.error('Layout generation error:', error); throw new Error(`Failed to create layout: ${error instanceof Error ? error.message : 'Unknown error'}`); } }