Design System Creation

核心用法

design-system-creation 是一套系统化的设计系统构建工作流，采用六步法将抽象的美学概念转化为可维护的代码资产：

1. 美学基础 — 先写文档再写代码，定义 vibe、灵感来源和情感目标
2. 色彩令牌系统 — 三层架构：CSS 变量 → Tailwind 配置 → TypeScript 导出，确保单一事实来源
3. 排版系统 — 字体栈 + 动态缩放比例 + 特定模式（杂志数字、标签样式）
4. 表面组件 — 使用 CVA（Class Variance Authority）构建分层原始组件
5. 动效令牌 — 统一的动画时长和缓动曲线，避免割裂的动画体验
6. 加载状态 — 与整体美学一致的骨架屏和闪光效果

显著优点

• 方法论完整：强制"先文档后代码"，避免设计漂移
• 技术栈现代：深度整合 Tailwind CSS、TypeScript、CVA，类型安全
• 差异化导向：明确反对默认 Tailwind 色彩和 Inter/Roboto 标题，推动独特视觉身份
• 工程化友好：令牌系统支持多端复用，CSS 变量作为单一来源减少维护成本

潜在局限

• 前端技术栈锁定：强依赖 React + Tailwind 生态，对 Vue/Svelte 团队需要适配
• 学习曲线：CVA、三层令牌架构对初级开发者有一定门槛
• 审美主观性："vibe 文档"缺乏客观标准，可能导致团队评审分歧
• 性能考量：大量使用 backdrop-filter blur 和渐变可能对低端设备造成渲染压力

适合人群

• 从零构建产品视觉系统的初创团队
• 厌倦 Bootstrap/Tailwind 同质化、追求品牌差异化的设计工程师
• 需要将 Figma 设计系统同步到代码资产的规模化团队
• 有 CSS-in-JS 或 Design Token 经验，希望迁移到更轻量方案的前端开发者

常规风险

| 风险项 | 说明 | 缓解建议 |

|--------|------|----------|

| 令牌膨胀 | 过度设计导致 token 数量失控 | 遵循最小可用原则，定期审计 |

| 浏览器兼容 | backdrop-filter 在旧版浏览器失效 | 提供 solid fallback |

| 无障碍忽略 | 自定义色彩可能不符合 WCAG 对比度 | 使用 contrast checker 工具 |

| 动效过度 | shimmer/pulse 动画可能引发不适 | 支持 prefers-reduced-motion |

核心用法

design-system-creation 是一套面向现代前端工程的 Meta-Skill，专为从零构建或重构设计系统而设计。其核心工作流包含六大阶段：

1. Aesthetic Foundation（美学基础） — 在写代码前先定义「氛围感」，通过情绪板、灵感参考和情感映射建立视觉方向
2. Color Token System（色彩令牌） — 构建三层架构：CSS Variables → Tailwind Config → TypeScript Tokens，确保设计到开发的无损传递
3. Typography System（排版系统） — 定义字体栈、动态缩放比例及专用排版模式（如杂志风格数字、标签样式）
4. Surface Components（表面组件） — 使用 CVA（class-variance-authority）构建分层原语，支持 panel/tile/chip 等多层玻璃态效果
5. Motion Tokens（动效令牌） — 统一动画时序，内置 shimmer、pulse-glow、slide-in 等预设关键帧
6. Loading States（加载状态） — 骨架屏与闪光动效组件，保持视觉一致性

显著优点

• 工程化完备：提供从设计决策到代码实现的完整链路，而非零散的技巧堆砌
• 令牌驱动架构：三层令牌系统彻底杜绝「硬编码色值」导致的视觉漂移
• 审美导向：强制「先定义氛围再写代码」的工作流，避免 Tailwind/Bootstrap 的同质化陷阱
• 反模式清单：「NEVER Do」章节涵盖 10 条高频设计灾难（如纯黑底色、默认 Inter 标题、高饱和色滥用等）

潜在局限

• 技术栈预设：示例代码深度绑定 Tailwind CSS + CVA + React/TS，Vue/Svelte 等项目需额外适配
• 无视觉产出：纯文档型 Skill，不生成设计稿或 Figma 插件，需设计师配合
• 动效复杂度：shimmer/glass 等效果在低端设备或旧版浏览器可能存在性能问题
• T3 来源风险：维护者为个人开发者，长期更新保障弱于企业级开源项目

适合人群

• 独立开发者/小团队快速启动产品视觉体系
• 希望逃离 Tailwind 默认美学、追求差异化的项目
• 前端工程师主导设计系统重构，需系统化方法论支撑

常规风险

• 风格漂移风险：若跳过「美学文档化」步骤直接复制代码，易沦为又一套换皮系统
• 无障碍忽略：文档未显式提及 WCAG 对比度检测，需自行补充
• 性能债务：backdrop-filter blur 与复杂渐变动画在移动端需配合 will-change 与 contain 优化