szoloth/visual-asset-studio

Visual Asset Studio

Unified orchestration layer for creating high-quality visual assets. Routes requests to specialized skills based on asset type, then captures output as portable images when needed.

Component Skills

| Skill | Best For | Output | |-------|----------|--------| | frontend-design | UI mockups, dashboards, web pages, interactive components | HTML/CSS/React | | canvas-design | Posters, art, print materials, sophisticated static visuals | .pdf/.png | | nano-banana-pro | Photorealistic images, illustrations, AI image generation/editing | .png | | screenshot | Capture HTML/React output as portable image files | .png/.jpg |

Routing Decision Tree

Step 1: Classify the request

Route to frontend-design when:

• "create a mockup of..."
• "design a dashboard for..."
• "UI for [feature]"
• "landing page", "web page", "app screen"
• Interactive elements needed (buttons, forms, navigation)
• User mentions React, HTML, CSS, Tailwind
• Needs to look like a software interface

Route to canvas-design when:

• "create a poster"
• "design artwork", "create art"
• "print-ready", "coffee table book quality"
• "sophisticated", "museum quality", "gallery"
• Static visual piece with artistic intent
• Emphasis on design philosophy or craftsmanship

Route to nano-banana-pro when:

• "generate an image of..."
• "photorealistic", "realistic photo"
• "illustration of...", "drawing of..."
• "edit this image", "modify this image"
• Conceptual imagery, scenes, characters
• User provides an existing image to modify

Route to mermaid diagrams when:

• "architecture diagram", "flow chart"
• "system diagram", "sequence diagram"
• Simple structural visualizations
• Technical documentation diagrams

Step 2: Execute the appropriate skill

Read the selected skill's SKILL.md for detailed instructions:

• ~/.claude/skills/frontend-design/SKILL.md
• ~/.claude/skills/canvas-design/SKILL.md
• ~/.claude/skills/nano-banana-pro/SKILL.md

Follow that skill's workflow completely.

Step 3: Capture as image (if needed)

Use screenshot skill when:

• User explicitly wants a .png/.jpg file
• Output is HTML/React and user needs shareable image
• Creating assets for PRs, documentation, or presentations
• User says "screenshot", "capture", "save as image"

Read ~/.claude/skills/screenshot/SKILL.md for capture instructions.

Composition Patterns

Multiple skills can be chained for complex assets:

Pattern 1: AI image in UI mockup

1. Generate illustration with nano-banana-pro
2. Incorporate into frontend-design layout
3. Capture final result with screenshot

Pattern 2: Styled diagram

1. Create base structure with mermaid
2. Enhance with canvas-design philosophy for print quality

Pattern 3: Dashboard with data visualization

1. Design dashboard with frontend-design
2. Generate any needed icons/illustrations with nano-banana-pro
3. Capture all viewports with screenshot --viewports mobile,tablet,desktop

Quality Standards

All output should inherit the "no AI slop" philosophy:

• Bold, intentional aesthetic direction
• Distinctive typography (avoid Inter, Arial, system fonts)
• Cohesive color palettes with purpose
• Meticulous attention to spacing and alignment
• Work should appear handcrafted, not generated

Resolution Handling

When user mentions resolution, pass through to the appropriate skill:

• nano-banana-pro: Use --resolution 1K|2K|4K flag
• screenshot: Use --size WxH or viewport presets
• canvas-design: Specify dimensions in the design philosophy

Output Location

Save all generated assets to the user's current working directory unless they specify otherwise. Use descriptive filenames with timestamps when generating multiple assets.