Web Asset Generator

Generate professional web assets from logos or text slogans, including favicons, app icons, and social media meta images.

Quick Start

When a user requests web assets:

1. Use AskUserQuestion tool to clarify needs if not specified:

   • What type of assets they need (favicons, app icons, social images, or everything)
   • Whether they have source material (logo image vs text/slogan)
   • For text-based images: color preferences

2. Check for source material:

   • If user uploaded an image: use it as the source
   • If user provides text/slogan: generate text-based images

3. Run the appropriate script(s):

   • Favicons/icons: scripts/generate_favicons.py
   • Social media images: scripts/generate_og_images.py

4. Provide the generated assets and HTML tags to the user

Using Interactive Questions

IMPORTANT: Always use the AskUserQuestion tool to gather requirements instead of plain text questions. This provides a better user experience with visual selection UI.

Why Use AskUserQuestion?

✅ Visual UI: Users see options as clickable chips/tags instead of typing responses ✅ Faster: Click to select instead of typing out answers ✅ Clearer: Descriptions explain what each option means ✅ Fewer errors: No typos or misunderstandings from free-form text ✅ Professional: Consistent with modern Claude Code experience

Example Flow

User request: "I need web assets"

Claude uses AskUserQuestion (not plain text):

What type of web assets do you need?                    [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images

User clicks → Claude immediately knows what to generate

Question Patterns

Below are the standard question patterns to use in various scenarios. Copy the structure and adapt as needed.

Question Pattern 1: Asset Type Selection

When the user's request is vague (e.g., "create web assets", "I need icons"), use AskUserQuestion:

Question: "What type of web assets do you need?" Header: "Asset type" Options:

• "Favicons only" - Description: "Browser tab icons (16x16, 32x32, 96x96) and favicon.ico"
• "App icons only" - Description: "PWA icons for iOS/Android (180x180, 192x192, 512x512)"
• "Social images only" - Description: "Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn"
• "Everything" - Description: "Complete package: favicons + app icons + social images"

Question Pattern 2: Source Material

When the asset type is determined but source is unclear:

Question: "What source material will you provide?" Header: "Source" Options:

• "Logo image" - Description: "I have or will upload a logo/image file"
• "Emoji" - Description: "Generate favicon from an emoji character"
• "Text/slogan" - Description: "Create images from text only"
• "Logo + text" - Description: "Combine logo with text overlay (for social images)"

Question Pattern 3: Platform Selection (for social images)

When user requests social images but doesn't specify platforms:

Question: "Which social media platforms do you need images for?" Header: "Platforms" Multi-select: true Options:

• "Facebook/WhatsApp/LinkedIn" - Description: "Standard 1200x630 Open Graph format"
• "Twitter" - Description: "1200x675 (16:9 ratio) for large image cards"
• "All platforms" - Description: "Generate all variants including square format"

Question Pattern 4: Color Preferences (for text-based images)

When generating text-based social images:

Question: "What colors should we use for your social images?" Header: "Colors" Options:

• "I'll provide colors" - Description: "Let me specify exact hex codes for brand colors"
• "Default theme" - Description: "Use default purple background (#4F46E5) with white text"
• "Extract from logo" - Description: "Auto-detect brand colors from uploaded logo"
• "Custom gradient" - Description: "Let me choose gradient colors"

Question Pattern 5: Icon Type Clarification

When user says "create icons" or "generate icons" (ambiguous):

Question: "What kind of icons do you need?" Header: "Icon type" Options:

• "Website favicon" - Description: "Small browser tab icon"
• "App icons (PWA)" - Description: "Mobile home screen icons"
• "Both" - Description: "Favicon + app icons"

Question Pattern 6: Emoji Selection

When user selects "Emoji" as source material:

Step 1: Ask for project description (free text):

• "What is your website/app about?"
• Use this to generate emoji suggestions

Step 2: Use AskUserQuestion to present the 4 suggested emojis:

Question: "Which emoji best represents your project?" Header: "Emoj

...