CtrlK
BlogDocsLog inGet started
Tessl Logo

muapi-design-guide

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

57

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./library/visual/design-guide/SKILL.md
SKILL.md
Quality
Evals
Security

Brand Design Guide

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

Inputs

NameTypeRequiredDefaultDescription
brand_nametextyesThe brand or product name.
industrytextyesIndustry/niche (e.g. "fintech startup", "organic skincare", "luxury hotel chain").
style_directiontextnomodern, minimal, premiumDesign aesthetic (e.g. "bold and playful", "corporate and trustworthy", "dark luxury").
primary_colortextnoOptional brand primary color (hex code or color name, e.g. "#3898EC" or "deep navy").
existing_logoimage_urlnoOptional existing logo to extract brand cues from.

Steps

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

Phase A — Color & Typography Reference Card

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

    • Prompt: Clean design guide color palette card for {{brand_name}} — {{style_direction}} 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 {{primary_color}} is given, include it: primary color is {{primary_color}}
    • Aspect ratio: 16:9
  2. Typography pairing previewmuapi image generate (model=bytedance-seedream-v4.5):

    • Prompt: Brand typography pairing sheet for {{brand_name}} — {{style_direction}}. 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 mockupmuapi image generate (model=gpt4o-text-to-image):
    • Prompt: {{brand_name}} brand design system UI kit — {{style_direction}} 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 mockupmuapi image generate (model=nano-banana-pro):
    • Prompt: {{brand_name}} brand identity applied to real-world mockups — {{style_direction}} 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 {{primary_color}} is blank, derive one from the {{industry}} and {{style_direction}} 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 MUAPI_API_KEY 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/<endpoint> -H "x-api-key: $MUAPI_API_KEY" -H 'content-type: application/json' -d '{...}' and poll with muapi predict wait <request_id>.
  • Substitute {{input_name}} placeholders with the user's actual inputs before issuing each call.
Repository
SamurAIGPT/Generative-Media-Skills
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.