mcpField
M
muapi-design-guide

muapi-design-guide

github.com/samuraigpt设计与 UI25657 次安装4 周前更新
代码仓库

关于 muapi-design-guide

muapi-design-guide 是一套由 LLM 编排的品牌设计指南生成流程,面向构建品牌形象的用户。它结合色彩与字体参考、UI 组件预览、应用效果图和文字规则。

主要功能

  1. 01品牌色彩参考卡
  2. 02字体搭配预览
  3. 03UI 组件效果图
  4. 04品牌应用效果图
  5. 05文字设计规则

适用场景

  1. 01为新品牌确定视觉方向
  2. 02记录颜色与字体选择
  3. 03预览品牌化 UI 组件

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-design-guide

安装后在 Claude Code 中输入/muapi-design-guide确认已加载。

详细介绍

品牌设计指南

创建一份全面的品牌设计指南,包含配色方案、字体搭配、UI 组件预览和视觉识别规范,并附示例样稿。

输入

名称类型必填默认值描述
brand_nametext是—品牌或产品名称。
industrytext是—行业/细分领域(例如“金融科技初创公司”“有机护肤品”“豪华酒店集团”)。
style_directiontext否modern, minimal, premium设计美学(例如“大胆活泼”“企业风、值得信赖”“暗黑奢华”)。
primary_colortext否—可选的品牌主色(十六进制代码或颜色名称,例如“#3898EC”或“深海军蓝”)。
existing_logoimage_url否—可选的现有 Logo,用于提取品牌特征。

步骤

此技能会并行运行三个生成阶段,全部在同一个计划中完成。

阶段 A — 配色与字体参考卡
  1. 配色方案卡片 — muapi image generate(model=bytedance-seedream-v4.5):

    • 提示词:为 {{brand_name}} 打造简洁的设计指南配色方案卡片,品牌风格为 {{style_direction}},所属行业为 {{industry}}。展示 5 个色块:主色、辅助色、强调色、背景色、文本色。每个色块标注十六进制代码。现代设计参考卡片,白色背景,编辑风格字体,扁平化设计。
    • 如果提供了 {{primary_color}},则加入:主色为 {{primary_color}}
    • 宽高比:16:9
  2. 字体搭配预览 — muapi image generate(model=bytedance-seedream-v4.5):

    • 提示词:为 {{brand_name}} 制作品牌字体搭配展示页,风格为 {{style_direction}}。展示标题字体(大号、粗体)、副标题字体(中号)、正文字体(小号、常规)和说明文字字体。包含字体名称、字号和使用规范。简洁的白色背景,专业的设计参考页。
    • 宽高比:16:9
阶段 B — UI 组件预览
  1. UI 组件样稿 — muapi image generate(model=gpt4o-text-to-image):
    • 提示词:{{brand_name}} 品牌设计系统 UI 套件,风格为 {{style_direction}},所属行业为 {{industry}}。展示:主按钮、辅助按钮、输入框、卡片组件、徽章/标签、图标集示例。品牌颜色和字体保持一致。专业的设计规范页,浅色模式,高细节,Figma 风格的组件文档。
    • 宽高比:4:3
阶段 C — 品牌应用样稿
  1. 真实场景样稿 — muapi image generate(model=nano-banana-pro):
    • 提示词:将 {{brand_name}} 的品牌识别应用于真实场景样稿,风格为 {{style_direction}},所属行业为 {{industry}}。展示名片、信头纸和移动应用图标,品牌识别保持一致。专业的品牌展示,简洁背景,照片级写实样稿。
    • 如果提供了 {{existing_logo}},则将其作为参考,使用 muapi image edit(model=nano-banana-pro-edit)。
    • 宽高比:4:3

生成所有素材后:

  • 将全部 4 项素材整合呈现为一份协调统一的设计指南
  • 提供文字摘要,包含:建议的字体栈、十六进制颜色代码、间距规则以及应做/不应做的指南
  • 提议接下来生成社交媒体模板或 Logo

备注

  • 所有提示词都应在各阶段始终贯彻 {{style_direction}}。
  • 如果 {{primary_color}} 为空,则根据 {{industry}} 和 {{style_direction}} 的背景信息推导主色。

触发关键词

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


执行 Agent 的注意事项

  • 此配方由大模型编排:阅读各个阶段,向用户收集缺失的输入,然后调用 muapi CLI 命令。如果未设置 MUAPI_API_KEY,请先使用 muapi auth configure。
  • 对于尚无 CLI 别名的模型 ID,请改用原始端点,通过 curl -X POST https://api.muapi.ai/api/v1/<endpoint> -H "x-api-key: $MUAPI_API_KEY" -H 'content-type: application/json' -d '{...}' 调用,并使用 muapi predict wait <request_id> 轮询。
  • 在发起每次调用前,将 {{input_name}} 占位符替换为用户的实际输入。

评论

支持 Markdown