360 Secure SkillHub
360 安全技能中心

ui-design-system

提供设计令牌生成脚本，可根据品牌色输出配色、字体、间距、阴影和断点等令牌，支持 modern、classic、playful 风格及 JSON、CSS、SCSS 格式。说明还提到组件文档、响应式计算、无障碍与交付文档，但文件仅含令牌脚本。

分类：创作
davila7
热度 0.00
最近更新 2026-10-21 03:15:49

安装

发给 Agent
帮我安装这个技能：npx secure-skills-cli add davila7/claude-code-templates/ui-design-system
兼容性
通用兼容
联网要求
不联网
数据出网
数据不出本机
Metadata
name
ui-design-system
description
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats