关于 generic-design-system
generic-design-system 是用于建立或扩展项目视觉体系的参考技能。它指导开发者处理设计令牌、组件、配色、字体、响应式行为、动画和无障碍，并遵循项目现有规范。
主要功能
- 01设计令牌分层组织
- 02配色与对比度指导
- 03字体与间距比例
- 04组件状态与模式
- 05响应式与深色模式指导
- 06动画和无障碍规则
适用场景
- 01为新设计系统建立基础
- 02一致地扩展不完整的视觉体系
- 03检查组件是否符合设计规范
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/generic-design-system确认已加载。
详细介绍
通用设计系统
可适配任何项目视觉风格的设计系统参考。
新建系统前先进行调研
创建新的设计系统（而非遵循现有系统）时：
Skill(ui-research) # Research modern patterns first
参考资料：
何时使用此技能
适用于：
- 实现 UI 组件
- 选择颜色或字体排版
- 创建动画或过渡效果
- 确保视觉一致性
- 设置设计令牌
- 检查是否符合设计系统规范
不适用于：
- UX 流程设计 → 使用
generic-ux-designer - 功能架构 → 使用
generic-feature-developer - 代码质量审查 → 使用
generic-code-reviewer
设计系统架构
何时构建，何时参考
| 情况 | 操作 |
|---|---|
| 存在设计系统 | 严格遵循 |
| 不存在设计系统 | 使用此技能奠定基础 |
| 设计系统不完整 | 找出缺漏并保持一致地扩展 |
令牌组织
| 层级 | 示例 | 用途 |
|---|---|---|
| 基础 | --color-blue-500 | 原始值 |
| 语义 | --color-primary | 含义 |
| 组件 | --button-background | 上下文 |
决策： 在代码中使用语义令牌，仅将基础令牌用作基础。
一致性决策树
- 是否存在该组件？ → 使用现有模式
- 是否存在类似组件？ → 改编现有模式（不要创建相互竞争的模式）
- 是否属于新类别？ → 向用户提议并记录理由
颜色系统
每个项目都应定义：
- 主色、次要色、强调色
- 背景色、前景色、弱化色
- 危险色、成功色、警告色
对比度要求
| 使用场景 | 最低要求 |
|---|---|
| 正文 | 4.5:1（AA） |
| 大号文本 | 3:1（AA） |
| UI 组件 | 3:1（AA） |
字体排版
字体栈
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;
字号比例
| 名称 | 大小 | 用途 |
|---|---|---|
| sm | 14px | 次要文本 |
| base | 16px | 正文 |
| lg | 18px | 引导段落 |
| xl | 20px | 分区标题 |
| 2xl | 24px | 页面标题 |
间距系统
基础单位： 4px 或 8px
| 令牌 | 以 4px 为基础 | 用途 |
|---|---|---|
| 1 | 4px | 紧凑间距 |
| 2 | 8px | 默认间隔 |
| 4 | 16px | 卡片内边距 |
| 6 | 24px | 页面边距 |
动画
仅使用 GPU 加速属性
应使用动画： transform、opacity
避免使用： width、height、top、left、margin、padding
时长
| 令牌 | 时长 | 用途 |
|---|---|---|
| fast | 100ms | 微交互 |
| DEFAULT | 200ms | 大多数过渡效果 |
| slow | 300ms | 复杂动画 |
时间函数
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
组件
组件状态
| 状态 | 视觉处理 | 示例 |
|---|---|---|
| 默认 | 基础样式 | 普通按钮 |
| 悬停 | 轻微反馈 | 背景变亮或变暗 |
| 激活 | 按下状态 | 轻微缩小 |
| 焦点 | 可见轮廓 | 2px 描边，带偏移 |
| 禁用 | 降低不透明度 | 50% 不透明度，不响应指针 |
| 加载中 | 加载图标或骨架屏 | 带加载图标的按钮 |
| 错误 | 危险色 | 红色边框或文本 |
触控目标
- 最小尺寸： 44x44px（WCAG 2.1 AAA）
- 间距： 相邻目标之间留出 8px
- 移动端： 主要操作的目标尺寸可考虑设为 48x48px
按钮
| 变体 | 用途 | 最小尺寸 |
|---|---|---|
| 主要 | 主要操作 | 44x44px |
| 次要 | 替代操作 | 44x44px |
| 幽灵 | 次要操作 | 44x44px |
| 危险操作 | 删除操作 | 44x44px |
表单输入
- 焦点状态清晰（可见的 2px 轮廓）
- 错误状态带有提示消息
- 标签始终可见
- 必填项指示标记
模态框
- 焦点限制在模态框内
- 按 Escape 关闭
- 深色遮罩（50-70% 不透明度）
响应式断点
| 令牌 | 最小宽度 |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
暗色模式
:root {
--background: #ffffff;
--foreground: #000000;
}
[data-theme="dark"] {
--background: #000000;
--foreground: #ffffff;
}
另请参阅
在以下情况下阅读参考资料：
- 设置新的设计系统 → DESIGN_PATTERNS.md（完整结构）
- 复杂的组件模式 → DESIGN_PATTERNS.md（原子设计章节）
评论
支持 Markdown