mcpField
M
muapi-design-guide

muapi-design-guide

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

关于 muapi-design-guide

muapi-design-guide 是一项由 LLM 编排的技能,可根据品牌名称和行业制作品牌设计指南。它生成视觉参考与应用样机,并提供文字设计建议。

主要功能

  1. 01色彩调色板参考卡
  2. 02字体搭配预览
  3. 03UI 组件样机
  4. 04品牌应用样机
  5. 05文字设计规范

适用场景

  1. 01为新品牌起草视觉形象
  2. 02探索字体与色彩方向
  3. 03预览品牌化 UI 组件

MCP 相关

此技能由执行 Agent 调用 muapi CLI 生成或编辑图像;输入未说明 MCP 集成。

安装

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

$npx skills add https://github.com/samuraigpt/muapi-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