Does this skill require a paid API key?

Yes, to generate images, you need an OpenRouter API key to access models like Gemini 3 Pro Image or FLUX.2 Pro.

Can it match my existing project's brand colors?

Yes, the skill automatically scans your project's CSS and design files to extract brand context for more accurate image generation.

Which image models are supported?

It currently supports Google Gemini 3 Pro Image and Black Forest Labs FLUX.2 Pro through the OpenRouter integration.

What happens if I don't have an OpenRouter API key?

The skill is designed with graceful degradation; it will skip image generation and provide text-based templates or Mermaid diagrams instead.

Visual Design Assistant

Name: Visual Design Assistant
Author: flight505

byflight505

Design Tools

Generates publication-quality visual assets, component mockups, and style guides using advanced AI image models.

About

The Visual Design skill empowers Claude to act as a design partner by leveraging powerful image generation models like Gemini 3 Pro and FLUX.2 Pro via OpenRouter. It bridges the gap between conceptual design and frontend implementation by creating high-fidelity component mockups, comprehensive brand style guides, and architectural diagrams directly within the development workflow. This skill is particularly valuable for developers building design systems or documenting complex UI components, offering a context-aware approach that analyzes existing code to ensure visual consistency while providing graceful fallbacks if API keys are unavailable.

Key Features

AI-powered component mockup generation using Gemini 3 Pro and FLUX.2 Pro
Visual architecture diagramming for component dependencies and data flow
Smart quality thresholding with automated iteration for production-grade assets
0 GitHub stars
Automated style guide creation including color palettes and typography systems
Context-aware prompt engineering that incorporates project-specific CSS and frameworks

Use Cases

Prototyping complex UI components like data dashboards before starting implementation
Establishing a new design system's visual identity including spacing and color scales
Generating visual technical documentation for component hierarchies and data structures

About

Key Features

AI-powered component mockup generation using Gemini 3 Pro and FLUX.2 Pro
Visual architecture diagramming for component dependencies and data flow
Smart quality thresholding with automated iteration for production-grade assets
0 GitHub stars
Automated style guide creation including color palettes and typography systems
Context-aware prompt engineering that incorporates project-specific CSS and frameworks

Use Cases

Prototyping complex UI components like data dashboards before starting implementation
Establishing a new design system's visual identity including spacing and color scales
Generating visual technical documentation for component hierarchies and data structures