mcpField
M
muapi-ui-design

muapi-ui-design

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

关于 muapi-ui-design

muapi-ui-design 是面向 AI Agent 的界面设计技能，可将产品需求转化为高保真模型、线框图和设计系统规范。它涵盖组件层级、移动端与 Web 布局、设计变量及可用性原则。

主要功能

  1. 01按原子化设计组织组件层级
  2. 02规划移动端和 Web 布局
  3. 03定义字体、间距和颜色变量
  4. 04提供可用性原则指导

适用场景

  1. 01将产品需求转为界面模型设计简报
  2. 02规划移动端与 Web 的响应式布局
  3. 03为界面定义一致的设计变量

安装

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

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

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

详细介绍

🎨 UI/UX 设计模型技能

专为 AI Agent 打造，用于设计高保真数字界面。 UI/UX 设计技能可将产品需求转化为技术设计规范，用于制作高保真模型、线框图和设计系统。

核心能力

  1. 原子化设计编排：将界面从原子（按钮）到有机体（页眉）分层构建，确保系统一致性。
  2. 平台专属布局：针对移动端（iOS/Android）和 Web（SaaS/电商）设计响应式断点。
  3. 设计系统集成：指定字体比例、间距标记和色板（Hex/HSL）。
  4. 启发式原则认知：确保设计遵循既定的可用性原则（Nielsen 的 10 条启发式原则）。

🏗️ 技术规范

1. 意图映射表
创作意图风格布局模式重点
企业级 SaaS现代/简洁仪表板/网格数据密度
消费级应用玻璃拟态F 型布局 / 卡片视觉表现力
电商极简主义Z 型布局 / 商品网格转化率
作品集粗野主义非对称个性
实用工具新拟态控制面板触觉反馈
2. 设计标记与变量
  • Typography：科技类使用几何无衬线字体（Inter/Roboto）；奢华类使用衬线字体（Playfair）。
  • Spacing：使用 8pt 网格系统，保持间距节奏一致。
  • Color：采用高对比度且易于访问的色板（符合 WCAG 2.1 标准）。
  • Elevation：基于阴影的深度效果与扁平化设计层次。

🧠 提示词优化协议（Agent 指令）

调用脚本前，Agent 必须将用户需求扩展为设计规范：

  1. 原子结构：提及具体组件（原子）：玻璃拟态按钮、圆角半径为 4px 的输入框、标志性侧边栏。
  2. 层级结构：采用布局模式：内容密集型网站使用 F 型布局，落地页使用 Z 型布局，或使用 基于网格的仪表板。
  3. 字体与标记：注入设计标记：Inter 无衬线字体、8pt 间距系统、符合 WCAG 标准的高对比度颜色。
  4. 避免拟物化：确保提示词要求采用 扁平化设计或玻璃拟态，避免生成“屏幕照片”效果。

🚀 协议：使用 UI 设计器

步骤 1：定义产品简介

向 Agent 提供功能列表和目标受众。

步骤 2：调用脚本

generate-mockup.sh 脚本会利用设计系统的内部知识扩展产品简介。

# Designing a Fintech Mobile App
bash scripts/generate-mockup.sh \
  --desc "crypto wallet home with price charts" \
  --platform mobile \
  --theme dark \
  --style glassmorphism

⚠️ 限制与防护措施

  • 设备真实感：必须遵守——不得展示手部、实体手机或桌面。仅生成纯 UI/UX 模型。
  • 无障碍性：避免在明亮背景上使用低对比度文本。
  • 复杂度：单页生成中保持“原子”一致。
  • 文本渲染：使用 Flux 呈现清晰易读的标题；为较小的正文指定占位文本。

⚙️ 实现细节

此技能会将高层级的 DESCRIPTION 转化为 UX_BRIEF，其中指定布局模式、设计标记和美学限制，供 core/media/generate-image.sh 基础工具使用。

评论

支持 Markdown