设计与多媒体

design-system-creation

secondsky/claude-skills

| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.

  • 492 次安装
  • 240 星标
  • 收录于

安装命令

npx skills add https://github.com/secondsky/claude-skills --skill design-system-creation

SKILL.md

Design System Creation

Build comprehensive design systems for consistent UI development across teams.

Design System Layers

  1. Foundation: Colors, typography, spacing, elevation
  2. Components: Buttons, inputs, cards, navigation
  3. Patterns: Forms, layouts, empty states

Foundation - Design Tokens

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;