skills.rest
flight505
flight505COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/flight505/storybook-assistant --skill visual-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
robinbarvaagrobinbarvaag

generate-image

Generate and edit images from prompts via the OpenRouter API.

Community
Intermediate
Victory-HugoVictory-Hugo
1

markitdown

Convert PDF, DOCX, PPTX, XLSX, and other documents to Markdown.

Community
Advanced
CwuztoCwuzto

react:components

Translate Stitch MCP designs into modular React components with AST validation.

Community
Intermediate
stagewise-iostagewise-io
6.8k

figma

Accesses Figma designs via REST API and monitors real-time selections with Chrome DevTools Protocol.

Official
Advanced