skills.rest
valtterimelkko
valtterimelkkoCOMMUNITY
Explore all skills by this author →
GitHub

web-create-assets

Extract design system attributes from UI screenshots to generate web assets.

1|1|Updated Jun 11, 2026
Search Tags:#automation#design#branding#ui#generation#assets
One-click install
npx skills add https://github.com/valtterimelkko/agent-workflow-skills --skill web-create-assets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-create-assets
Source: https://github.com/valtterimelkko/agent-workflow-skills/tree/main/skills/web-create-assets
Command: npx skills add https://github.com/valtterimelkko/agent-workflow-skills --skill web-create-assets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, requests, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of maintaining visual consistency when creating new UI assets, ensuring that generated icons, banners, and mockups align perfectly with your existing web application's design language.

Core Features & Use Cases

  • Style Extraction: Automatically analyzes existing UI screenshots to derive color palettes, typography, and visual patterns.
  • Asset Planning: Generates structured plans for creating UI assets based on specific project requirements.
  • AI-Powered Generation: Uses specialized models to create professional-grade UI assets, including icons, hero banners, and product mockups.
  • Use Case: When launching a new feature, use this Skill to extract the current site's style and generate matching feature icons and hero banners that look like they were part of the original design.

Quick Start

Use the web-create-assets skill to analyze the screenshots in the ./screenshots folder and generate a new style guide.

Frequently Asked Questions about web-create-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate UI assets that match my existing design system?▼

To generate UI assets matching your design system, this Skill extracts design attributes like color palettes and typography from UI screenshots, then uses AI-driven image generation models to synthesize consistent icons, banners, and mockups.

Can I automate visual asset creation from web application screenshots?▼

Yes, you can automate visual asset creation from web application screenshots. The Skill analyzes your screenshots to derive visual patterns and automatically generates structured plans for creating matching UI assets.

Do I need the Runware API to generate icons and hero banners?▼

Yes, you need access to the Runware API for high-quality asset synthesis. The Skill bridges style analysis from your screenshots with this AI-powered model to generate professional-grade UI assets like icons and hero banners.

How does style extraction work for maintaining visual consistency?▼

Style extraction works by analyzing existing UI screenshots to automatically derive your design system's color palettes, typography, and visual patterns, ensuring newly generated assets align perfectly with your current design language.

What Python dependencies are required for processing UI screenshots?▼

You need the Pillow library for image processing and the requests library to interact with external APIs. These dependencies facilitate the automated extraction of design attributes and generation of web assets.

What are the limitations of using AI to generate design system assets?▼

A limitation of using AI to generate design system assets is that output consistency depends heavily on the clarity of your input screenshots. Complex or inconsistent visual patterns in the original UI may lead to less accurate style extraction and asset generation.

Related Skills

Explore More Design & Creative Skills→
al-steval-stev

atlassian-setup

Configure Atlassian API credentials for Jira and Confluence access.

Community
Intermediate
marcosgcr3marcosgcr3

design

Generate brand identity assets and visual design outputs via Python scripts and Gemini API.

Community
Advanced
gyalamanch001agyalamanch001a

visual-style

Create portable visual-style.md design systems for cross-tool styling.

Community
Advanced
aaymanasraraaymanasrar

image

Generate and optimize marketing images with AI models and design tools.

Community
Advanced