web-design-complete

This skill combines frontend design expertise with AI image generation to create complete, production-ready web pages with all visual elements included.

When to Use This Skill

Use this skill when the user asks for:

• Complete websites or landing pages
• Web dashboards or applications
• Product pages or portfolios
• Marketing pages with banners/hero sections
• Blog or content layouts with featured images
• Any web interface that needs visual assets

How This Skill Works

This skill performs a two-step process:

Step 1: Frontend Design

Follow the frontend-design aesthetic principles to create a distinctive, production-grade interface:

Design Thinking:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a bold aesthetic direction (minimalist, maximalist, retro-futuristic, organic, luxury, playful, brutalist, etc.)
• Constraints: Technical requirements (framework, performance, accessibility)
• Differentiation: What makes this UNFORGETTABLE?

Frontend Aesthetics:

• Typography: Choose distinctive, beautiful fonts (avoid Inter, Roboto, Arial, system fonts)
• Color & Theme: Commit to a cohesive aesthetic with CSS variables
• Motion: Use animations for effects and micro-interactions
• Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow
• Backgrounds & Visual Details: Gradient meshes, noise textures, geometric patterns, dramatic shadows

Step 2: Image Generation

Identify all images needed in the design and generate them using the image generation script:

Identify Image Needs:

• Hero/banner images
• Product/portfolio images
• Illustrations or icons
• Background images
• Section dividers or decorative elements

Generate Images: Run the image generation script for each image needed:

uv run ~/.claude/skills/web-design-complete/scripts/generate_image.py \\
  --prompt "detailed image description matching the design aesthetic" \\
  --filename "yyyy-mm-dd-hh-mm-ss-descriptive-name.png" \\
  --resolution 1K|2K|4K

Resolution Guidelines:

• 1K (default) - ~1024px for small images, icons, thumbnails
• 2K - ~2048px for standard images, product shots
• 4K - ~4096px for hero banners, large backgrounds

Filename Format: {timestamp}-{descriptive-name}.png

• Timestamp: yyyy-mm-dd-hh-mm-ss (24-hour format)
• Name: lowercase descriptive text with hyphens

Step 3: Complete Implementation

After generating all needed images, create the final code with:

1. All generated images properly referenced
2. Optimized image attributes (alt text, loading, sizes)
3. Responsive image handling
4. Complete styling matching the aesthetic vision

Complete Workflow Example

User Request: "Create a landing page for a coffee shop"

Process:

1. Design Phase: Choose a warm, organic aesthetic with earth tones, rustic typography
2. Image Planning: Identify needs for:
   • Hero banner with coffee atmosphere
   • Product shots for coffee cups
   • Background textures for sections
3. Generate Images:

   # Hero banner
   uv run ~/.claude/skills/web-design-complete/scripts/generate_image.py \\
     --prompt "warm rustic coffee shop interior, golden hour lighting, wooden tables, steaming coffee cups, cozy atmosphere, earthy brown tones" \\
     --filename "2025-01-24-10-30-15-coffee-shop-hero.png" \\
     --resolution 4K
   
   # Product shot
   uv run ~/.claude/skills/web-design-complete/scripts/generate_image.py \\
     --prompt "artisan coffee cup on wooden table, latte art, top view, warm lighting, rustic background" \\
     --filename "2025-01-24-10-32-45-coffee-cup-product.png" \\
     --resolution 2K
   
   # Background texture
   uv run ~/.claude/skills/web-design-complete/scripts/generate_image.py \\
     --prompt "subtle coffee bean pattern texture, warm brown gradient, organic feel, seamless" \\
     --filename "2025-01-24-10-35-20-coffee-texture-bg.png" \\
     --resolution 2K
   

4. Create Code: Build complete HTML/CSS with all images integrated

API Key

The script requires a Gemini API key:

• Pass via --api-key argument if user provides one
• Otherwise uses GEMINI_API_KEY environment variable

Best Practices

1. Design First, Images Second: Plan the complete design before generating images
2. Match Aesthetics: Ensure generated images match the chosen design aesthetic
3. Optimize Resolution: Use appropriate resolution for each image's purpose
4. Descriptive Prompts: Write detailed, aesthetic-specific prompts for better results
5. Organize Filenames: Use clear, descriptive filenames matching the design context

Output

• Complete, production-ready HTML/CSS/JS code
• All needed images generated and saved to current directory
• Images properly referenced in the code
• Responsive, functional, and visually stunning result

Remember: The goal is to create COMPLETE web experiences where every visual element is thoughtfully designed and generated - no placeholder images, no "image goes here" sections. Real, finished work.