web-asset-generator

🥈Silver

Generates favicons, app icons, and social media images from logos, text, or emojis. Supports emoji suggestions, validation, and framework auto-integration. Benefits operations teams by automating asset creation and ensuring consistency across web properties.

187120Updated Today

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/alonw0/web-asset-generator.git

Works with:

Claude

Overview

About This Skill

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/alonw0/web-asset-generator

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a set of web assets for [PROJECT_NAME]. Create a favicon, app icons for iOS and Android, and social media images (Facebook, Twitter, LinkedIn) using [LOGO/TEXT/EMOJI]. Suggest 3 emoji options if none provided. Validate the designs for visual consistency and accessibility. Provide auto-integration code snippets for [FRAMEWORK] if needed.

Example Output

Here are the generated web assets for 'GreenLeaf Eco' based on the provided logo and color scheme:

1. Favicon: A 64x64 pixel square favicon with the GreenLeaf logo in the center, using the brand's green (#2E8B57) and white colors. The design is simple and clean, ensuring good visibility on all browsers.

2. App Icons:
   - iOS: A set of icons in various sizes (20x20, 40x40, 60x60, 80x80, 120x120, 180x180, 1024x1024 pixels) with rounded corners and a subtle drop shadow for a polished look.
   - Android: A set of icons in various densities (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) with the same design as the iOS icons.

3. Social Media Images:
   - Facebook: A 1200x630 pixel image with the GreenLeaf logo, tagline ('Sustainable Living for a Greener Future'), and a background featuring a lush green forest.
   - Twitter: A 440x220 pixel image with the GreenLeaf logo and a solid green background.
   - LinkedIn: A 1200x627 pixel image with the GreenLeaf logo, tagline, and a background featuring a green leaf pattern.

Emoji Suggestions:
1. 🌱 - A small green plant, representing growth and sustainability.
2. ♻️ - A recycling symbol, representing the brand's commitment to eco-friendliness.
3. 🌍 - A globe, representing the brand's global impact.

Auto-integration Code Snippets:
For React Native, add the following code to your App.js file:
```javascript
import { Asset } from 'expo-asset';

// Load icons
Asset.fromModule(require('./assets/icon.png')).downloadAsync();
```

For iOS, add the following code to your Info.plist file:
```xml
<key>CFBundleIcons</key>
<dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>Icon-App-20x20</string>
      <string>Icon-App-29x29</string>
      <string>Icon-App-40x40</string>
      <string>Icon-App-60x60</string>
      <string>Icon-App-76x76</string>
      <string>Icon-App-83.5x83.5</string>
      <string>Icon-App-1024x1024</string>
    </array>
  </dict>
</dict>
```