visual-design

Generate style guides, mockups, and architecture diagrams for component design.

9|2|Updated Jan 9, 2026

Search Tags:#OpenRouter #design-system #visual-design #architecture-diagrams #style-guides #component-mockups #AI-generated assets

Ready to run

npx skills add https://github.com/flight505/storybook-assistant --skill visual-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design
Source: https://github.com/flight505/storybook-assistant/tree/main/skills/visual-design
Command: npx skills add https://github.com/flight505/storybook-assistant --skill visual-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill automates the generation of visual assets for component design, saving designers time and aligning design systems.

Core Features & Use Cases

Style Guides: Color palettes, typography, spacing guidelines to standardize visuals.
Component Mockups: Visual references to guide implementation and review.
Architecture Diagrams: Dependencies and data flow for design documentation.
Design System Documentation: Visual brand guidelines and usage rules.

Quick Start

python ${CLAUDE_PLUGIN_ROOT}/skills/visual-design/scripts/generate_mockup.py "Modern React card component with header, content, and actions. Clean design." --output mockups/card.png python ${CLAUDE_PLUGIN_ROOT}/skills/visual-design/scripts/generate_style_guide.py --framework react --design-system custom --output style-guide/

Frequently Asked Questions about visual-design

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

FAQPage Schema

How do I automate component mockup generation for design sprints?▼

Automate AI-assisted visual asset generation for component design by running dedicated scripts to produce style guides, component mockups, and architecture diagrams. This skill runs deterministic tasks to standardize visuals and align design systems during sprints.

Can I generate style guides and architecture diagrams without an API key?▼

Yes, you can generate style guides and architecture diagrams without an API key. The scripts perform deterministic design tasks and gracefully degrade to provide standard visual outputs when OpenRouter API keys are unavailable.

Does this visual design tool support React component documentation?▼

Yes, this visual design tool supports React component documentation by generating specific style guides and visual mockups. You can specify the React framework directly using command-line arguments to align outputs with your design system.

What is the best way to standardize visuals across a custom design system?▼

The best way to standardize visuals across a custom design system is to generate comprehensive style guides detailing color palettes, typography, and spacing. This skill automates creating these visual brand guidelines and usage rules.

Do I need the requests library to generate AI-generated assets?▼

Yes, you need the requests library installed to generate AI-generated assets. This dependency is required for the scripts to function and handle optional OpenRouter API calls for enhanced visual outputs.