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

0•

デザインツール

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

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.

主な機能

01AI-powered component mockup generation using Gemini 3 Pro and FLUX.2 Pro

02Visual architecture diagramming for component dependencies and data flow

03Smart quality thresholding with automated iteration for production-grade assets

040 GitHub stars

05Automated style guide creation including color palettes and typography systems

06Context-aware prompt engineering that incorporates project-specific CSS and frameworks

ユースケース

01Prototyping complex UI components like data dashboards before starting implementation

02Establishing a new design system's visual identity including spacing and color scales

03Generating visual technical documentation for component hierarchies and data structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant visual-design

For use in Claude.ai and ChatGPT

Download Skill