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|4KResolution 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:
- All generated images properly referenced
- Optimized image attributes (alt text, loading, sizes)
- Responsive image handling
- Complete styling matching the aesthetic vision
Complete Workflow Example
User Request: "Create a landing page for a coffee shop"
Process:
- Design Phase: Choose a warm, organic aesthetic with earth tones, rustic typography
- Image Planning: Identify needs for:
- Hero banner with coffee atmosphere - Product shots for coffee cups - Background textures for sections
- 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 - Create Code: Build complete HTML/CSS with all images integrated
API Key
The script requires a Gemini API key:
- Pass via
--api-keyargument if user provides one - Otherwise uses
GEMINI_API_KEYenvironment variable
Best Practices
- Design First, Images Second: Plan the complete design before generating images
- Match Aesthetics: Ensure generated images match the chosen design aesthetic
- Optimize Resolution: Use appropriate resolution for each image's purpose
- Descriptive Prompts: Write detailed, aesthetic-specific prompts for better results
- 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.