本文へ移動
cccskills
無料GitHub で公開

muapi-design-guide

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

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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_nametextyes—The brand or product name.
industrytextyes—Industry/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_colortextno—Optional brand primary color (hex code or color name, e.g. "#3898EC" or "deep navy").
existing_logoimage_urlno—Optional 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 card — muapi 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 preview — muapi 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 mockup — muapi 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 mockup — muapi 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use this skill whenever the user wants to create or improve a presentation for an academic context — conference papers, seminar talks, thesis defenses, grant briefings, lab meetings, invited lectures, or any presentation where the audience will evaluate reasoning and evidence. Triggers include: 'conference talk', 'seminar slides', 'thesis defense', 'research presentation', 'academic deck', 'academic presentation'. Also triggers when the user asks to 'make slides' in combination with academic content (e.g., 'make slides for my paper on X', 'create a presentation for my dissertation defense', 'build a deck for my grant proposal'). This skill governs CONTENT and STRUCTURE decisions. For the technical work of creating or editing the .pptx file itself, also read the pptx SKILL.md.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

adp

無料

Redpanda's Agentic Data Plane: governance infrastructure for building, running, and governing AI agents and MCP servers, plus a proxying AI Gateway for LLM providers, operated via `rpk ai` and the ADP API. Use when creating or managing AI agents (managed or self-managed) via `rpk ai agent` or `AgentRegistryService`; configuring MCP servers (remote or managed catalog, code mode, auth); setting up LLM providers or querying models via `rpk ai llm`/`rpk ai model` or the AI Gateway proxy; or configuring budgets, guardrails, or Cedar access-control policies through the governance APIs. Also covers reading agent transcripts and spending insights, and wiring OAuth clients or providers to the aigw Authorization Server. For the separate rpk cloud mcp control-plane MCP server, see `/redpanda:rpk-cloud`.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads

無料

Operate professional paid advertising across Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, Apple, Amazon, Reddit, Pinterest, Snapchat, and X. Use for account intake, source-grounded audits, strategy, budget and measurement planning, creative production, experiments, reporting, monitoring, and explicitly approved campaign changes. Also trigger on PPC, paid social, retail media, attribution, tracking, landing pages, cross-platform conversion totals, negative keywords or search terms, beta-feature scoring, stale platform claims, API-token or credential setup, campaign deletion, and safe Claude Ads installation or uninstall.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads-apple

無料

Audit Apple Ads measurement, AdServices and AdAttributionKit, campaign and keyword structure, Search Match, App Store placements, custom product pages, bidding, budgets, MMP reconciliation, and policy. Use for Apple Ads, Apple Search Ads, App Store ads, Search Match, custom product pages, AdServices, or Apple app-install campaigns.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

Research competitor paid-ad presence, messaging, creative, formats, landing pages, keyword and auction signals, transparent ad libraries, and strategic gaps across supported platforms. Use for competitor ads, ad libraries, ad spy, competitive PPC analysis, competitor creative, Google Ads Transparency, Meta Ad Library, or paid-media competitor research.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads-dna

無料

Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input. Triggers on: brand DNA, brand profile, brand identity, brand style, brand colors, brand voice, visual identity, style guide, website brand analysis.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

skillmds のスキルをすべて見る

このスキルの問題を報告する