mcpField
R
robis-design-best-practice

robis-design-best-practice

github.com/ethiopian-cursor-community设计与 UI3108 次安装40 周前更新
代码仓库

关于 robis-design-best-practice

面向 UI 组件设计与评审的设计参考技能，涵盖颜色、对比度、间距、图标、暗色模式、动效和布局选择等实用准则。

主要功能

  1. 01低饱和度配色建议
  2. 02WCAG AAA 文本对比度目标
  3. 03统一的 4px 间距体系
  4. 04图标样式与尺寸一致性
  5. 05暗色模式的阴影替代方案
  6. 06动画与微交互指导

适用场景

  1. 01检查 UI 的颜色与对比度
  2. 02统一间距和嵌套圆角
  3. 03规范组件间的图标样式
  4. 04改进组件的暗色模式设计

安装

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

$npx skills add https://github.com/ethiopian-cursor-community/robis-design-best-practice --skill robis-design-best-practice

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

附带文件examples.md

详细介绍

Robi 的设计最佳实践

快速参考清单

设计或审查 UI 组件时：

  • 颜色饱和度较低（避免“氛围编程”式的过饱和颜色）
  • 深色模式的颜色应适当降低饱和度或提高亮度
  • 文本对比度符合 WCAG AAA 标准
  • 不使用纯黑色（#000000）或纯白色（#FFFFFF），改用带色调的变体
  • 所有间距均为 4px 的倍数
  • 嵌套边框圆角遵循：inner_radius = outer_radius - padding
  • 图标的粗细和样式始终保持一致
  • 深色模式下避免使用阴影（改用边框或颜色）
  • 动画使用平滑的缓动函数（而非线性缓动）
  • 添加微交互，营造高级质感

颜色指南

避免过饱和颜色

“紫色互联网理论”指出，AI 和许多现代网站过度使用鲜艳、高饱和度的颜色。这会使用户眼睛疲劳，并缩短用户在网站上的停留时间。

HSL 基础知识：

  • 色相：色轮上的位置（0-360°）
  • 饱和度：颜色的浓烈程度（0-100%）
  • 亮度：颜色的明暗程度（0-100%）

规则：除非采用新粗野主义设计，否则应以低饱和度为目标。

示例：

Bad:  hsl(280, 100%, 60%) - Too vibrant purple
Good: hsl(280, 30%, 60%)  - Muted, easier on eyes
深色模式下的颜色调整

颜色在黑色背景上看起来更亮。可通过以下方式进行补偿：

  • 降低颜色饱和度（降低 10-20%）
  • 略微提高亮度
Light mode: hsl(220, 40%, 50%)
Dark mode:  hsl(220, 25%, 65%)  // Less saturated, lighter
WCAG 对比度标准

文本与背景之间始终应以 AAA 评级为目标。

  • AAA：最低对比度为 7:1
  • AA：最低对比度为 4.5:1（可接受的备选标准）

可以使用 WebAIM Contrast Checker 等工具或浏览器内置的开发者工具。

防止光晕效应

白底纯黑或黑底纯白会产生一种称为光晕效应的“模糊光环”。

解决方案：使用略带色调的变体。

/* Instead of pure values */
/* Bad */ background: #000000;
/* Bad */ color: #FFFFFF;

/* Use tinted variations */
/* Good */ background: #0a0a0a;  /* Slightly lighter black */
/* Good */ color: #fafafa;       /* Slightly darker white */

/* Or with slight color tints */
/* Good */ background: hsl(220, 5%, 5%);   /* Dark with blue tint */
/* Good */ color: hsl(40, 5%, 98%);        /* Off-white with warm tint */

间距系统

所有间距必须为 4px 的倍数。

这样可以确保 UI 的视觉一致性和对齐效果。

Tailwind/Shadcn 间距比例
p-1  = 4px     gap-1  = 4px
p-2  = 8px     gap-2  = 8px
p-3  = 12px    gap-3  = 12px
p-4  = 16px    gap-4  = 16px
p-6  = 24px    gap-6  = 24px
p-8  = 32px    gap-8  = 32px

在设计中始终使用一致的间距值：

  • 小间距：4px、8px
  • 中间距：12px、16px
  • 大间距：24px、32px、48px

边框圆角的叠加

嵌套带圆角的元素时，将内边距值加到圆角值中，以保持同心效果。

公式：inner_radius = outer_radius - padding

/* Parent container */
.outer {
  border-radius: 16px;
  padding: 12px;
}

/* Child element */
.inner {
  border-radius: 4px;  /* 16px - 12px = 4px */
}

Tailwind 示例：

<div className="rounded-2xl p-3">  {/* 16px radius, 12px padding */}
  <div className="rounded">         {/* 4px radius */}
    Content
  </div>
</div>

图标一致性

切勿混用图标样式

不要混用：双色调、填充、常规、细线、轻量等不同粗细的样式。

Bad: Using filled home icon + regular settings icon + thin user icon
Good: All icons use regular weight and same size
显示激活/选中状态

混用规则的例外：可以使用同一图标的填充版本来表示激活/选中状态。

/* Navigation example */
<Icon 
  icon={isActive ? "home-filled" : "home-regular"} 
  weight="regular"
  size={24}
/>
一致性规则
  • 所有图标使用相同的粗细（例如，全部使用“常规”）
  • 同一场景中的图标使用相同尺寸（例如，所有导航图标均为 24px）
  • 为聚焦/激活状态的图标使用不同的描边颜色，或使用填充变体
  • 避免混用不同图标库（不要混用 Phosphor 和 Heroicons）

阴影与深色模式

深色模式策略

在深色模式下，避免使用阴影表现高度。改用：

  • 颜色柔和的边框
  • 背景颜色变化
  • 细微的亮度调整
/* Light mode */
.card-light {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode - use border instead */
.card-dark {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: hsl(220, 10%, 12%);
}
拟态设计注意事项

拟态设计高度依赖阴影来营造深度和真实感。这种设计在浅色模式下效果良好，但在深色模式下可能会有问题。请谨慎使用。

动画与缓动函数

避免线性缓动

线性运动（y=x）显得机械、不自然。

请使用平滑的缓动函数：

/* CSS */
/* Bad */  transition: all 0.3s linear;
/* Good */ transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

/* Common easings */
ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1)    /* Decelerating */
ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1)    /* Smooth both ends */
spring:       Custom spring physics              /* Bouncy, natural */
Framer Motion 示例
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ 
    duration: 0.4,
    ease: [0.4, 0.0, 0.2, 1]  // Custom cubic-bezier
  }}
>
  Content
</motion.div>

微交互

添加细微的交互细节，营造高级质感。Linear、Notion 和 Supabase 等公司在这方面表现出色。

微交互示例
  • 按钮悬停状态配合平滑的颜色过渡
  • 点击时略微缩放（scale: 0.98）
  • 加载骨架屏动画
  • 带滑入动画的 Toast 通知
  • 复选框选中时的动画
  • 输入框聚焦状态配合边框颜色过渡
  • 带延迟和淡入效果的悬停工具提示
/* Button with micro-interaction */
<button className="
  px-4 py-2 rounded-lg
  bg-blue-600 hover:bg-blue-700
  transform transition-all duration-200
  hover:scale-[1.02] active:scale-[0.98]
">
  Click me
</button>

布局替代方案

并非所有数据展示都需要用表格或卡片。

尝试其他布局：

  • 用于任务管理的看板
  • 用于按时间顺序展示数据的时间线视图
  • 用于仪表盘的便当盒网格布局
  • 带分隔线的列表组
  • 用于展示层级数据的树形视图
  • 用于媒体内容的画廊／瀑布流网格
  • 手风琴式／可折叠分区

跳出表格／卡片模式，打造更具吸引力的界面。

设计灵感

浏览与学习

通过研究优秀作品培养设计品味：

可探索的平台：

  • Pinterest - UI 设计模式与灵感
  • Twitter - 设计主题帖和专家技巧
  • cosmos.so - 组件与模式库
  • Behance - 专业设计作品集
  • Dribbble - UI 设计作品与概念
借鉴与模仿

“总有人比你更出色，做出了惊艳的作品——试着从中学习。”

流程：

  1. 找到你欣赏的设计
  2. 分析它们成功的原因
  3. 重现其中的元素，学习相关技巧
  4. 加以调整和筛选，融入自己的风格

品味正是通过接触优质作品和刻意练习逐渐形成的。

更多资源

代码示例和实现细节请参阅 examples.md。

参考：kigen.design/color，获取 HSL 颜色工具。

评论

支持 Markdown