用途
Generic Design System 是一个通用设计系统参考技能，用于把一致的视觉语言应用到任意项目中。它强调根据项目既有的视觉语言和主题进行适配，而不是强加一套固定风格。
主要能力
该技能覆盖设计系统的主要构成维度：
- 色彩系统：要求项目定义 Primary、Secondary、Accent、Background、Foreground、Muted、Destructive、Success、Warning，并给出对比度最低要求（正文 4.5:1 AA、大号文字 3:1 AA、UI 组件 3:1 AA）。
- 排版：提供字体栈示例（含 sans 与 mono）以及类型尺度，如 sm 14px、base 16px、lg 18px、xl 20px、2xl 24px。
- 间距系统：以 4px 或 8px 为基准单位，给出 4px、8px、16px、24px 等对应使用场景。
- 动画：要求仅动画化 GPU 加速属性（transform、opacity），避免 width、height、top、left、margin、padding；时长分为 fast 100ms、DEFAULT 200ms、slow 300ms；并提供默认与回弹缓动曲线。
- 组件：列出组件状态（Default、Hover、Active、Focus、Disabled、Loading、Error），触控目标最小 44x44px（WCAG 2.1 AAA），相邻目标间距 8px，移动端主要操作可考虑 48x48px；按钮包含 Primary、Secondary、Ghost、Destructive 变体；表单输入需有清晰焦点态、错误信息、始终可见的标签与必填标识；模态框需焦点锁定、Escape 关闭、50-70% 不透明度遮罩。
- 响应式断点：sm 640px、md 768px、lg 1024px、xl 1280px。
- 深色模式：给出通过 CSS 变量与 data-theme 属性切换背景与前景色的示例。
设计系统架构
技能给出“构建还是引用”的判断表：已有设计系统则严格遵循；没有设计系统则用本技能建立基础；部分系统则识别缺口并一致地扩展。
Token 组织分为三层：Primitive（如 --color-blue-500，原始值）、Semantic（如 --color-primary，含义）、Component（如 --button-background，上下文）。决策是：代码中使用语义 token，原始 token 仅作基础。
一致性决策树：组件已存在则复用现有模式；存在相似组件则改造现有模式而非新建竞争模式；属于新类别则向用户提议并记录理由。
使用方式
当创建全新设计系统（而非遵循现有系统）时，先执行：
Skill(ui-research) # Research modern patterns first
参考资料包括 UI Inspiration Sources（研究来源）与 Design Patterns（视觉 token）。技能建议在搭建新设计系统时阅读 DESIGN_PATTERNS.md 获取完整结构，在复杂组件模式场景下阅读其 Atomic Design 部分。
适用场景
适用于实现 UI 组件、选择颜色或排版、创建动画或过渡、确保视觉一致性、设置设计 token、审查设计系统合规性。
限制与边界
不适用于 UX 流程设计（改用 generic-ux-designer）、功能架构（改用 generic-feature-developer）以及代码质量审查（改用 generic-code-reviewer）。项目特定设计约束应参考项目自身的 CLAUDE.md。
暂未提供
该资料未说明收费、价格、平台支持范围或部署方式等信息。