muapi-design-guide skill

Brand Design Guide

Create a comprehensive brand design guide — color palette, typography pairings, UI component previews, and visual identity rules with example mockups.

Inputs

Steps

This skill runs THREE parallel generation phases, all in a single the plan.

Phase A — Color & Typography Reference Card

1. Color palette card — muapi image generate (model=bytedance-seedream-v4.5):

• Prompt: Clean design guide color palette card for {{brandname}} — {{styledirection}} style brand for {{industry}}. Shows 5 swatches: primary, secondary, accent, background, text. Each swatch labeled with hex code. Modern design reference card, white background, editorial typography, flat design.
• If {{primarycolor}} is given, include it: primary color is {{primarycolor}}
• Aspect ratio: 16:9

1. Typography pairing preview — muapi image generate (model=bytedance-seedream-v4.5):

• Prompt: Brand typography pairing sheet for {{brandname}} — {{styledirection}}. Shows heading font (large, bold), subheading font (medium), body font (small regular), and caption font. Includes font names, sizes, and usage rules. Clean white background, professional design reference.
• Aspect ratio: 16:9

Phase B — UI Component Preview

1. UI components mockup — muapi image generate (model=gpt4o-text-to-image):

• Prompt: {{brandname}} brand design system UI kit — {{styledirection}} for {{industry}}. Shows: primary button, secondary button, input field, card component, badge/tag, icon set sample. Consistent brand colors and fonts. Professional design spec sheet, light mode, high detail, Figma-style component documentation.
• Aspect ratio: 4:3

Phase C — Brand Application Mockup

1. Real-world mockup — muapi image generate (model=nano-banana-pro):

• Prompt: {{brandname}} brand identity applied to real-world mockups — {{styledirection}} style for {{industry}}. Shows business card, letterhead, and mobile app icon all with consistent brand identity. Professional brand presentation, clean background, photorealistic mockups.
• If {{existing_logo}} provided, use muapi image edit (model=nano-banana-pro-edit) with it as reference.
• Aspect ratio: 4:3

After all assets generate:

• Present all 4 assets together as a cohesive design guide
• Provide a written text summary with: suggested font stack, hex codes, spacing rules, and do/don't guidelines
• Offer to generate a social media template or logo next

Notes

• All prompts should reinforce {{style_direction}} consistently across all phases.
• If {{primarycolor}} is blank, derive one from the {{industry}} and {{styledirection}} context.

Trigger Keywords

design guide, brand guide, style guide, design system, brand identity, visual identity, brand colors, typography

Notes for the Executing Agent

• This recipe is LLM-orchestrated: read each phase, gather any missing inputs from the user, then call muapi CLI commands. Use muapi auth configure first if MUAPIAPIKEY is unset.
• For model IDs without a CLI alias yet, fall back to the raw endpoint via curl -X POST https://api.muapi.ai/api/v1/ -H "x-api-key: $MUAPIAPIKEY" -H 'content-type: application/json' -d '{...}' and poll with muapi predict wait .
• Substitute {{input_name}} placeholders with the user's actual inputs before issuing each call.