Initial commit

2025-11-30 08:58:02 +08:00
commit e7cbaf468c
11 changed files with 3516 additions and 0 deletions
--- a/skills/pixel-pusher/assets/design-system-template.json
+++ b/skills/pixel-pusher/assets/design-system-template.json
@@ -0,0 +1,232 @@
+{
+  "name": "Example Design System",
+  "version": "1.0",
+  "colors": {
+    "primary": {
+      "50": "#f0f9ff",
+      "100": "#e0f2fe",
+      "200": "#bae6fd",
+      "300": "#7dd3fc",
+      "400": "#38bdf8",
+      "500": "#0ea5e9",
+      "600": "#0284c7",
+      "700": "#0369a1",
+      "800": "#075985",
+      "900": "#0c4a6e"
+    },
+    "secondary": {
+      "50": "#f5f3ff",
+      "100": "#ede9fe",
+      "200": "#ddd6fe",
+      "300": "#c4b5fd",
+      "400": "#a78bfa",
+      "500": "#8b5cf6",
+      "600": "#7c3aed",
+      "700": "#6d28d9",
+      "800": "#5b21b6",
+      "900": "#4c1d95"
+    },
+    "neutral": {
+      "50": "#fafafa",
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    "semantic": {
+      "success": "#10b981",
+      "warning": "#f59e0b",
+      "error": "#ef4444",
+      "info": "#3b82f6"
+    },
+    "surface": {
+      "background": "#ffffff",
+      "foreground": "#18181b",
+      "card": "#fafafa",
+      "cardBorder": "#e4e4e7"
+    }
+  },
+  "typography": {
+    "fontFamilies": {
+      "heading": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      "body": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      "mono": "'JetBrains Mono', 'Courier New', monospace"
+    },
+    "scale": {
+      "h1": {
+        "size": "3.5rem",
+        "weight": "700",
+        "lineHeight": "1.2",
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "size": "2.5rem",
+        "weight": "700",
+        "lineHeight": "1.3",
+        "letterSpacing": "-0.01em"
+      },
+      "h3": {
+        "size": "2rem",
+        "weight": "600",
+        "lineHeight": "1.4",
+        "letterSpacing": "0"
+      },
+      "h4": {
+        "size": "1.5rem",
+        "weight": "600",
+        "lineHeight": "1.4",
+        "letterSpacing": "0"
+      },
+      "h5": {
+        "size": "1.25rem",
+        "weight": "500",
+        "lineHeight": "1.5",
+        "letterSpacing": "0"
+      },
+      "body": {
+        "size": "1rem",
+        "weight": "400",
+        "lineHeight": "1.6",
+        "letterSpacing": "0"
+      },
+      "bodyLarge": {
+        "size": "1.125rem",
+        "weight": "400",
+        "lineHeight": "1.6",
+        "letterSpacing": "0"
+      },
+      "bodySmall": {
+        "size": "0.875rem",
+        "weight": "400",
+        "lineHeight": "1.5",
+        "letterSpacing": "0"
+      },
+      "caption": {
+        "size": "0.75rem",
+        "weight": "400",
+        "lineHeight": "1.4",
+        "letterSpacing": "0.01em"
+      }
+    }
+  },
+  "spacing": {
+    "unit": "8px",
+    "scale": {
+      "0": "0",
+      "1": "0.25rem",
+      "2": "0.5rem",
+      "3": "0.75rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "8": "2rem",
+      "10": "2.5rem",
+      "12": "3rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem",
+      "32": "8rem"
+    }
+  },
+  "shadows": {
+    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+  },
+  "borderRadius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
+    "2xl": "1.5rem",
+    "full": "9999px"
+  },
+  "components": {
+    "button": {
+      "primary": {
+        "background": "primary.600",
+        "text": "#ffffff",
+        "hover": "primary.700",
+        "active": "primary.800",
+        "padding": "spacing.3 spacing.6",
+        "borderRadius": "md",
+        "fontWeight": "500"
+      },
+      "secondary": {
+        "background": "neutral.200",
+        "text": "neutral.900",
+        "hover": "neutral.300",
+        "active": "neutral.400",
+        "padding": "spacing.3 spacing.6",
+        "borderRadius": "md",
+        "fontWeight": "500"
+      },
+      "ghost": {
+        "background": "transparent",
+        "text": "primary.600",
+        "hover": "primary.50",
+        "active": "primary.100",
+        "padding": "spacing.3 spacing.6",
+        "borderRadius": "md",
+        "fontWeight": "500"
+      }
+    },
+    "card": {
+      "background": "surface.card",
+      "border": "1px solid",
+      "borderColor": "surface.cardBorder",
+      "padding": "spacing.6",
+      "borderRadius": "lg",
+      "shadow": "md"
+    },
+    "input": {
+      "background": "#ffffff",
+      "border": "1px solid",
+      "borderColor": "neutral.300",
+      "focusBorder": "primary.500",
+      "padding": "spacing.3 spacing.4",
+      "borderRadius": "md",
+      "fontSize": "body.size"
+    }
+  },
+  "layout": {
+    "maxWidth": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    },
+    "breakpoints": {
+      "mobile": "320px",
+      "tablet": "768px",
+      "desktop": "1024px",
+      "wide": "1440px"
+    },
+    "grid": {
+      "columns": 12,
+      "gutter": "spacing.6"
+    }
+  },
+  "animation": {
+    "duration": {
+      "fast": "150ms",
+      "normal": "250ms",
+      "slow": "350ms"
+    },
+    "easing": {
+      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }
+}