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
| 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 |
Input Schema (JSON Schema)
{
"properties": {
"analysisDepth": {
"default": "detailed",
"description": "Level of art complexity",
"enum": [
"basic",
"detailed",
"comprehensive"
],
"type": "string"
},
"analysisType": {
"default": "comprehensive",
"description": "Type of art generation to perform",
"enum": [
"showcase",
"educational",
"comprehensive"
],
"type": "string"
},
"animationStyle": {
"default": "smooth",
"description": "Animation style (if applicable)",
"enum": [
"none",
"subtle",
"smooth",
"bouncy",
"dramatic",
"infinite"
],
"type": "string"
},
"artType": {
"default": "drawing",
"description": "Type of CSS art to create",
"enum": [
"drawing",
"animation",
"interactive",
"logo",
"character",
"landscape",
"abstract",
"custom"
],
"type": "string"
},
"code": {
"description": "Existing CSS art code to enhance (for single-art analysis)",
"type": "string"
},
"colorScheme": {
"default": "vibrant",
"description": "Color palette for the art",
"enum": [
"vibrant",
"pastel",
"monochrome",
"neon",
"earth",
"sunset",
"ocean",
"custom"
],
"type": "string"
},
"complexity": {
"default": "intermediate",
"description": "Art complexity level",
"enum": [
"simple",
"intermediate",
"advanced",
"masterpiece"
],
"type": "string"
},
"filePath": {
"description": "Path to existing CSS art file to enhance",
"type": "string"
},
"files": {
"description": "Array of specific CSS art files (for multi-art analysis)",
"type": "array"
},
"language": {
"default": "css",
"description": "Programming language",
"type": "string"
},
"maxDepth": {
"default": 2,
"description": "Maximum directory depth for art file discovery (1-3)",
"type": "number"
},
"projectPath": {
"description": "Working directory for CSS art project (e.g., C:\\dev\\css-art)",
"type": "string"
},
"responsive": {
"default": true,
"description": "Make art responsive to screen size",
"type": "boolean"
},
"techniques": {
"default": [
"gradients",
"shadows",
"transforms",
"pseudo-elements"
],
"description": "CSS techniques to showcase",
"type": "array"
},
"theme": {
"default": "modern",
"description": "Art theme or subject",
"enum": [
"nature",
"geometric",
"character",
"space",
"retro",
"modern",
"fantasy",
"custom"
],
"type": "string"
}
},
"required": [],
"type": "object"
}