A comprehensive toolkit for automating the generation of app icons, favicons, color palettes, and image transformations using AI and CLI tools.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-assets
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-assets using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design Assets?
The Design Assets skill is a powerful automation suite designed for developers who need to produce professional-grade graphic assets without leaving their terminal or IDE. By leveraging Openclaw Skills, this tool integrates AI-driven image generation with robust CLI utilities like sips and ImageMagick. It streamlines the creation of icons for multiple platforms, handles complex image manipulations, and generates systemic color palettes based on HSL values, ensuring visual consistency across your digital products.
This skill is particularly effective for bridge-building between design and development, allowing for the rapid prototyping of visual components. Whether you are generating a primary app icon from a text prompt or converting batch images for web optimization, this skill provides the necessary programmatic hooks to keep your creative workflow within your development environment.
Design Assets Use Cases
- Generating full sets of iOS, macOS, and Android app icons from a single high-resolution source image using Openclaw Skills scripts.
- Automating the creation of favicon packages including .ico files and manifest.json for modern web applications.
- Programmatically generating consistent UI color palettes from a primary hex or hue value using HSL-based logic.
- Performing batch image processing tasks like resizing, format conversion to WebP, and adding borders or watermarks.
- Creating scalable vector graphics (SVG) for logos and icons that remain editable and lightweight.
How Design Assets Works
- The skill utilizes nano-banana-pro to generate initial raw visual assets from text-based prompts provided by the user.
- It processes source images through platform-specific scripts to generate the required resolutions for mobile and desktop environments.
- ImageMagick is invoked for advanced compositing tasks, such as rounding corners, adding borders, or layering text onto backgrounds.
- For macOS environments, it leverages the native sips tool for high-performance, dependency-free image resizing and rotation.
- The skill automatically generates supporting metadata, including HTML meta tags and a site.webmanifest, to ensure assets are ready for immediate deployment.
Design Assets Setup
To get started with this skill in your Openclaw Skills environment, ensure you have the necessary CLI dependencies installed. For macOS users, sips is pre-installed. For advanced features and .ico support, install ImageMagick:
# Install ImageMagick via Homebrew
brew install imagemagick
Ensure your AI model provider is configured for image generation tasks within your agent settings to enable the nano-banana-pro functionality.
Design Assets Data Schema & Taxonomy
The skill organizes generated assets into logical directory structures based on the target platform and use case:
| Directory | Contents |
|---|---|
/icons |
iOS and macOS .png icons ranging from 16x16 to 1024x1024 pixels |
/res/mipmap-* |
Android-specific density-optimized launcher icons (mdpi to xxxhdpi) |
/favicons |
Standard web favicons, apple-touch-icon, and multi-resolution favicon.ico |
Root / |
site.webmanifest and ready-to-paste HTML meta tag snippets |
It also provides HSL-based JavaScript objects for color systems to be integrated directly into CSS-in-JS or Tailwind configurations.
Design Assets Advanced Features
- Automated batch conversion of entire image directories to web-optimized formats using Openclaw Skills triggers.
- Programmatic generation of adaptive Android icons across all density buckets from a single source file.
- Dynamic HSL color palette generation for creating accessible and design-system-ready UI themes.
- Multi-step image compositing workflows combining AI generation with precise CLI-based post-processing like shadowing and corner rounding.
SKILL.md
Loading
Related Openclaw Skills
debug-pro
A systematic debugging framework providing a 7-step protocol and language-specific command references for efficient troubleshooting.
Toggl Time Tracking
A professional time management skill that integrates Toggl Track directly into your AI agent workflow using Openclaw Skills.
DS-160 Auto-fill Skill
An intelligent automation skill for completing US nonimmigrant visa DS-160 forms using structured CSV data and AI-assisted captcha solving.
Gemini Image Simple
A zero-dependency Python tool for generating and editing high-quality images using the Gemini API and Nano Banana Pro model.
Project Scaffold
Automate the creation of project structures and boilerplate for web apps, APIs, mobile, and CLI tools using best-practice configurations.
Test Runner
A comprehensive automation skill for writing and executing unit, integration, and end-to-end tests across JavaScript, Python, and Swift.
Featured*
