css_art_generator
Create pure CSS drawings, animations, and interactive art using clever techniques without images. Generate production-ready code, tests, and documentation for various art types and complexity levels.
Instructions
Create pure CSS drawings, animations, and interactive art with no images required - just clever CSS techniques
WORKFLOW: Ideal for creating production-ready code, tests, and documentation TIP: Generate unlimited iterations locally, then review with Claude SAVES: Claude context for strategic decisions
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| analysisDepth | No | Level of art complexity | detailed |
| analysisType | No | Type of art generation to perform | comprehensive |
| animationStyle | No | Animation style (if applicable) | smooth |
| artType | No | Type of CSS art to create | drawing |
| code | No | Existing CSS art code to enhance (for single-art analysis) | |
| colorScheme | No | Color palette for the art | vibrant |
| complexity | No | Art complexity level | intermediate |
| filePath | No | Path to existing CSS art file to enhance | |
| files | No | Array of specific CSS art files (for multi-art analysis) | |
| language | No | Programming language | css |
| maxDepth | No | Maximum directory depth for art file discovery (1-3) | |
| projectPath | No | Working directory for CSS art project (e.g., C:\dev\css-art) | |
| responsive | No | Make art responsive to screen size | |
| techniques | No | CSS techniques to showcase | |
| theme | No | Art theme or subject | modern |
Implementation Reference
- Main handler function that executes the tool: detects single/multi mode, validates params, sets up LLM, and routes to appropriate generation logic.async execute(params: any, llmClient: any) { return await withSecurity(this, params, llmClient, async (secureParams) => { try { // 1. Auto-detect analysis mode based on parameters const analysisMode = this.detectAnalysisMode(secureParams); // 2. Validate parameters based on detected mode this.validateParameters(secureParams, analysisMode); // 3. Setup model const { model, contextLength } = await ModelSetup.getReadyModel(llmClient); // 4. Route to appropriate generation method if (analysisMode === 'single-file') { return await this.executeSingleArtGeneration(secureParams, model, contextLength); } else { return await this.executeMultiArtGeneration(secureParams, model, contextLength); } } catch (error: any) { return ErrorHandler.createExecutionError('css_art_generator', error); } }); }
- Comprehensive input schema defining parameters for CSS art generation, supporting both single art pieces and multi-art projects.parameters = { // Single-art parameters code: { type: 'string' as const, description: 'Existing CSS art code to enhance (for single-art analysis)', required: false }, filePath: { type: 'string' as const, description: 'Path to existing CSS art file to enhance', required: false }, // Multi-art parameters projectPath: { type: 'string' as const, description: 'Working directory for CSS art project (e.g., C:\\dev\\css-art)', required: false }, files: { type: 'array' as const, description: 'Array of specific CSS art files (for multi-art analysis)', required: false, items: { type: 'string' as const } }, maxDepth: { type: 'number' as const, description: 'Maximum directory depth for art file discovery (1-3)', required: false, default: 2 }, // CSS Art specific parameters artType: { type: 'string' as const, description: 'Type of CSS art to create', enum: ['drawing', 'animation', 'interactive', 'logo', 'character', 'landscape', 'abstract', 'custom'], default: 'drawing', required: false }, complexity: { type: 'string' as const, description: 'Art complexity level', enum: ['simple', 'intermediate', 'advanced', 'masterpiece'], default: 'intermediate', required: false }, animationStyle: { type: 'string' as const, description: 'Animation style (if applicable)', enum: ['none', 'subtle', 'smooth', 'bouncy', 'dramatic', 'infinite'], default: 'smooth', required: false }, colorScheme: { type: 'string' as const, description: 'Color palette for the art', enum: ['vibrant', 'pastel', 'monochrome', 'neon', 'earth', 'sunset', 'ocean', 'custom'], default: 'vibrant', required: false }, theme: { type: 'string' as const, description: 'Art theme or subject', enum: ['nature', 'geometric', 'character', 'space', 'retro', 'modern', 'fantasy', 'custom'], default: 'modern', required: false }, techniques: { type: 'array' as const, description: 'CSS techniques to showcase', items: { type: 'string' as const }, default: ['gradients', 'shadows', 'transforms', 'pseudo-elements'], required: false }, responsive: { type: 'boolean' as const, description: 'Make art responsive to screen size', default: true, required: false }, // Universal parameters language: { type: 'string' as const, description: 'Programming language', required: false, default: 'css' }, analysisDepth: { type: 'string' as const, description: 'Level of art complexity', enum: ['basic', 'detailed', 'comprehensive'], default: 'detailed', required: false }, analysisType: { type: 'string' as const, description: 'Type of art generation to perform', enum: ['showcase', 'educational', 'comprehensive'], default: 'comprehensive', required: false } };
- Helper method that constructs the three-stage prompt (system, data, output) for generating a single CSS art piece, containing the core creative instructions and templates.private getSingleArtPromptStages(params: any): PromptStages { const { artType, complexity, animationStyle, colorScheme, theme, techniques, responsive, analysisDepth, analysisType, code } = params; const systemAndContext = `You are a visionary CSS artist and master of web technologies specializing in ${analysisDepth} ${analysisType} pure CSS art creation. **Your Mission**: Create stunning, mind-blowing CSS art that pushes the absolute boundaries of what's possible with pure CSS - no images, no JavaScript, just pure creative genius. **CSS Art Context:** - Art Type: ${artType} - Complexity: ${complexity} - Animation Style: ${animationStyle} - Color Scheme: ${colorScheme} - Theme: ${theme} - CSS Techniques: ${JSON.stringify(techniques)} - Responsive Design: ${responsive} - Artistic Depth: ${analysisDepth} - Showcase Level: ${analysisType} **Your Legendary Expertise:** - 15+ years creating impossible CSS art that makes developers say "How did they DO that?!" - Master of advanced CSS properties: clip-path, filter, transform-3d, custom properties - Expert in CSS animations and keyframes that bring art to life - Pioneer of pseudo-element wizardry (:before, :after) for complex illustrations - Specialist in gradient artistry and shadow manipulation for photorealistic effects - Genius of responsive CSS art that adapts beautifully to any screen size - Teacher of advanced CSS techniques through beautiful, educational examples **CSS Art Philosophy:** 1. **Pure CSS Magic** - No images, no SVG, no JavaScript - just CSS superpowers 2. **Visual Impact** - Art should make viewers stop and stare in amazement 3. **Technical Mastery** - Showcase advanced CSS techniques creatively 4. **Educational Value** - Code should inspire and teach other developers 5. **Responsive Beauty** - Art looks perfect on phones, tablets, and desktops 6. **Performance** - Smooth animations, optimized rendering, hardware acceleration 7. **Creative Innovation** - Push boundaries of what people think CSS can do **Advanced CSS Techniques Mastery:** - **Gradients**: Linear, radial, conic - create complex lighting and textures - **Clip-path**: Cut out complex shapes and create stunning geometry - **Filters**: blur(), drop-shadow(), hue-rotate() for photographic effects - **Transforms**: 3D rotation, perspective, scaling for dimensional art - **Pseudo-elements**: :before and :after for layered compositions - **CSS Variables**: Dynamic colors and responsive scaling - **Keyframes**: Smooth, captivating animations that tell stories - **Box-shadow**: Multiple shadows for depth, glow, and complex shapes - **Border-radius**: Create organic curves and perfect circles - **Position absolute/relative**: Precise layering and composition **${colorScheme.charAt(0).toUpperCase() + colorScheme.slice(1)} Color Psychology:** ${this.getColorSchemeGuidelines(colorScheme)} **${theme.charAt(0).toUpperCase() + theme.slice(1)} Theme Inspiration:** ${this.getThemeInspiration(theme)} Your task is to create CSS art so beautiful and technically impressive that it becomes a masterpiece showcase of pure CSS potential.`; const dataPayload = code ? `**Existing CSS Art to Enhance:** \`\`\`css ${code} \`\`\` **Enhancement Request:** Please analyze the existing CSS art and enhance it with the requested features while maintaining the artistic vision and improving the technical execution.` : `**New CSS Art Generation Request:** Create a brand new ${artType} artwork from scratch with the specified parameters. **${artType.charAt(0).toUpperCase() + artType.slice(1)} Art Inspiration:** ${this.getArtTypeInspiration(artType)} **${complexity.charAt(0).toUpperCase() + complexity.slice(1)} Complexity Guidelines:** ${this.getComplexityGuidelines(complexity)} **Animation Style - ${animationStyle}:** ${this.getAnimationGuidelines(animationStyle)}`; const outputInstructions = `**Generate a complete, stunning CSS art piece as a single HTML file:** \`\`\`html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Art: ${artType.charAt(0).toUpperCase() + artType.slice(1)} - ${theme.charAt(0).toUpperCase() + theme.slice(1)} Theme</title> <style> /* RESET AND BASE STYLES */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: ${this.getBackgroundSuggestion(colorScheme, theme)}; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; /* For full-screen art */ } /* MAIN ARTWORK CONTAINER */ .css-art { /* Primary art container with perfect centering */ position: relative; /* Responsive scaling based on screen size */ } /* ADVANCED CSS ART TECHNIQUES */ /* 1. COMPLEX SHAPES WITH CLIP-PATH */ .shape-layer { /* Use clip-path for impossible geometric shapes */ } /* 2. GRADIENT MASTERY */ .gradient-layer { /* Multiple gradients for lighting and texture */ background: linear-gradient(...), radial-gradient(...), conic-gradient(...); } /* 3. PSEUDO-ELEMENT WIZARDRY */ .detail::before, .detail::after { /* Create complex layered compositions */ content: ''; position: absolute; /* Intricate shapes and details */ } /* 4. 3D TRANSFORMS AND PERSPECTIVE */ .dimensional { transform-style: preserve-3d; perspective: 1000px; /* 3D rotation and depth effects */ } /* 5. ADVANCED ANIMATIONS */ @keyframes ${animationStyle}Animation { /* Smooth, captivating animation keyframes */ 0% { /* Initial state */ } 50% { /* Mid-point transformation */ } 100% { /* Final state */ } } /* 6. MULTIPLE BOX-SHADOWS FOR DEPTH */ .shadow-art { box-shadow: /* Multiple shadows for complex shapes */ inset 0 0 20px rgba(...), 0 0 40px rgba(...), 0 0 80px rgba(...); } /* 7. CSS FILTERS FOR EFFECTS */ .filter-effects { filter: blur(2px) drop-shadow(0 0 10px rgba(...)) hue-rotate(45deg) saturate(1.5); } /* 8. RESPONSIVE DESIGN */ @media (max-width: 768px) { .css-art { /* Mobile-optimized scaling */ transform: scale(0.8); } } @media (max-width: 480px) { .css-art { /* Small screen adaptations */ transform: scale(0.6); } } /* 9. CSS CUSTOM PROPERTIES FOR THEMING */ :root { --primary-color: ${this.getPrimaryColor(colorScheme)}; --secondary-color: ${this.getSecondaryColor(colorScheme)}; --accent-color: ${this.getAccentColor(colorScheme)}; --art-size: clamp(200px, 50vw, 600px); } /* 10. INTERACTIVE HOVER EFFECTS (IF APPLICABLE) */ .css-art:hover { /* Subtle interactive enhancements */ } /* ARTWORK-SPECIFIC STYLES */ /* [Generate detailed, creative CSS for the specific ${artType} artwork] */ </style> </head> <body> <div class="css-art"> <!-- HTML structure for the CSS art --> <!-- Minimal, semantic markup that enables CSS magic --> <div class="main-element"> <div class="detail layer-1"></div> <div class="detail layer-2"></div> <div class="detail layer-3"></div> <!-- Additional elements as needed for complex compositions --> </div> </div> <!-- Optional: Art information overlay --> <div class="art-info" style="position: fixed; bottom: 20px; left: 20px; color: white; font-size: 14px; opacity: 0.7;"> <strong>Pure CSS Art:</strong> ${artType} • ${theme} theme • ${colorScheme} colors <br><small>No images • No JavaScript • Just CSS magic ✨</small> </div> </body> </html> \`\`\` **Critical CSS Art Requirements:** ✅ **Pure CSS Only** - No images, no SVG, no JavaScript dependencies ✅ **Visual Impact** - Art should be immediately stunning and memorable ✅ **Advanced Techniques** - Showcase at least 5 advanced CSS properties creatively ✅ **${colorScheme} Color Mastery** - Beautiful, cohesive color palette execution ✅ **${animationStyle} Animation** - Smooth, purposeful animations that enhance the art ✅ **Responsive Design** - Perfect scaling on all devices (mobile to desktop) ✅ **Performance Optimized** - Smooth 60fps animations, hardware acceleration ✅ **Educational Value** - Code comments explaining advanced techniques ✅ **Technical Innovation** - Push boundaries of CSS art possibilities **Advanced CSS Showcase Standards:** - **Clip-path mastery** for impossible geometric shapes - **Multiple gradient layers** for realistic lighting and texture - **Pseudo-element wizardry** for complex layered compositions - **3D transforms** for dimensional depth and perspective - **Filter combinations** for photographic effects and atmosphere - **Custom property theming** for responsive and dynamic styling - **Animation orchestration** for smooth, captivating movement - **Box-shadow artistry** for depth, glow, and complex forms **Artistic Excellence Standards:** - Museum-quality visual composition and balance - Color harmony that evokes emotion and atmosphere - Technical execution that inspires other developers - Responsive behavior that maintains artistic integrity - Performance that runs smoothly on any device Create CSS art so incredible that developers will study your code to learn how it's possible!`; return { systemAndContext, dataPayload, outputInstructions }; }
- Helper method constructing prompts for multi-file CSS art collections and galleries, including file structure and cohesive design system.private getMultiArtPromptStages(params: any): PromptStages { const { analysisResult, analysisType, analysisDepth, artCount, artType, theme, colorScheme } = params; const systemAndContext = `You are a master CSS art curator and gallery director specializing in ${analysisDepth} ${analysisType} CSS art collection development. **Your Mission**: Create a comprehensive CSS art gallery or enhance an existing art project with multiple interconnected artworks that tell a cohesive visual story. **Art Collection Context:** - Collection Type: ${analysisType} - Collection Depth: ${analysisDepth} - Art Pieces in Collection: ${artCount} - Primary Art Type: ${artType} - Unifying Theme: ${theme} - Color Harmony: ${colorScheme} - Mode: Multi-Art Collection Development **Your Elite Expertise:** - 20+ years curating digital art galleries and interactive experiences - Expert in creating cohesive visual narratives across multiple artworks - Master of scalable CSS architectures with shared design systems - Specialized in progressive art experiences that guide viewer journeys - Pioneer of elegant multi-art frameworks with unified aesthetics **Collection Architecture Philosophy:** 1. **Visual Cohesion** - Unified color palette and artistic style across all pieces 2. **Progressive Complexity** - Artworks build artistic narrative and technical sophistication 3. **Shared Design System** - Common CSS variables and reusable art components 4. **Interactive Gallery** - Elegant navigation between individual art pieces 5. **Responsive Exhibition** - Beautiful presentation on all devices and screen sizes 6. **Educational Journey** - Each artwork teaches different advanced CSS techniques Your task is to create a masterful CSS art collection that showcases both individual artistic brilliance and cohesive gallery experience.`; const dataPayload = `**CSS Art Collection Analysis Results:** ${JSON.stringify(analysisResult, null, 2)}`; const outputInstructions = `**Generate a comprehensive CSS art gallery as multiple coordinated files:** \`\`\` // File Structure for CSS Art Collection: index.html // Main gallery navigation and overview shared/ art-gallery.css // Shared gallery framework and navigation css-variables.css // Unified color schemes and design tokens responsive-gallery.css // Mobile-friendly gallery layouts artworks/ ${artType}-piece-1.html // Individual art pieces as standalone files ${artType}-piece-2.html // Each showcasing different CSS techniques ${artType}-piece-3.html // Progressive complexity and innovation animations/ gallery-transitions.css // Smooth navigation animations artwork-interactions.css // Interactive hover and focus effects \`\`\` **Gallery Collection Features:** - **Art Navigation**: Beautiful gallery interface for browsing artworks - **Unified Theme**: Cohesive ${theme} aesthetic with ${colorScheme} color harmony - **Progressive Showcase**: Each artwork demonstrates different advanced CSS techniques - **Interactive Experience**: Smooth transitions and elegant art presentation - **Educational Value**: Gallery teaches CSS artistry through visual examples - **Responsive Design**: Perfect viewing experience on all devices - **Performance Optimized**: Fast loading, smooth animations throughout **Individual Artwork Quality:** Each art piece in the collection must be: ✅ **Visually Stunning** - Museum-quality CSS art execution ✅ **Technically Advanced** - Showcases unique CSS techniques and innovation ✅ **Thematically Consistent** - Follows the unified ${theme} visual narrative ✅ **Educationally Valuable** - Teaches specific advanced CSS concepts ✅ **Performance Optimized** - Smooth, hardware-accelerated animations ✅ **Responsive Excellence** - Beautiful on all screen sizes **Gallery Architecture:** - **CSS Design System**: Shared variables for colors, spacing, and typography - **Modular Structure**: Each artwork as independent, reusable component - **Navigation Framework**: Elegant transitions between art pieces - **Progressive Enhancement**: Advanced features for capable browsers - **Educational Documentation**: Code comments explaining artistic techniques **Collection Themes:** - **${theme} Artistic Vision**: Unified visual story across all artworks - **Technical Progression**: From foundational to advanced CSS techniques - **Interactive Narrative**: User journey through CSS art possibilities - **Responsive Gallery**: Adaptive layouts for optimal art viewing Create a CSS art collection that establishes a new standard for web-based digital art galleries!`; return { systemAndContext, dataPayload, outputInstructions }; }
- src/prompts/fun/css-art-generator.ts:26-30 (registration)Plugin class registration with name, category, and description for the css_art_generator tool.export class CSSArtGenerator extends BasePlugin implements IPromptPlugin { name = 'css_art_generator'; category = 'generate' as const; description = 'Create pure CSS drawings, animations, and interactive art with no images required - just clever CSS techniques';