mcpField
I
interface-design

interface-design

github.com/dralgorhythm设计与 UI12983 次安装14 周前更新
代码仓库

关于 interface-design

面向界面设计者的设计技能，涵盖易用性原则、常见 UI 模式、响应式布局和交付开发所需的设计细节。

主要功能

  1. 01清晰、一致与反馈原则
  2. 02导航、表单和操作模式
  3. 03响应式布局指南
  4. 04设计交付检查清单

适用场景

  1. 01规划导航与表单行为
  2. 02检查界面反馈和错误状态
  3. 03准备开发用设计规格

安装

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

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill interface-design

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

附带文件resources/design-framework.template.md

详细介绍

界面设计

设计原则

1. 清晰

让界面一目了然。用户不应该需要猜测。

2. 一致

相同的操作，得到相同的结果。始终保持一致的模式。

3. 反馈

对每项操作都做出响应。显示进度、确认成功、说明错误。

4. 高效

尽量减少步骤。优化常见工作流。

5. 容错

允许撤销。对破坏性操作进行确认。妥善处理异常。

UI 模式

导航
  • 顶部导航：主导航、全局操作
  • 侧边导航：分区导航、分层内容
  • 面包屑：显示所在层级
  • 标签页：在相关视图之间切换
表单
  • 输入框上方显示标签
  • 提供清晰的验证消息
  • 适时进行内联验证
  • 按逻辑对字段分组
  • 明确的行动号召
反馈
  • 加载状态
  • 成功确认
  • 错误消息
  • 空状态
  • 进度指示器
操作
  • 突出显示主要操作
  • 次要操作保持低调
  • 破坏性操作需要确认
  • 清晰显示禁用状态

布局原则

视觉层级
  • 通过大小体现重要性
  • 通过颜色吸引注意
  • 通过间距对元素进行分组
  • 通过对齐建立秩序
网格系统
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
响应式设计
  • 采用移动端优先的方法
  • 断点：640px、768px、1024px、1280px
  • 流式排版
  • 灵活的图像

设计规范

移交开发时：

  • 颜色值（hex/RGB）
  • 排版（字体、字号、字重、行高）
  • 间距（外边距、内边距）
  • 组件状态（默认、悬停、激活、禁用）
  • 响应式行为
  • 动画/过渡效果

资源

评论

支持 Markdown